青空文庫を縦書で読むchromeエクステンション(開発中)

アルファ版時代は終わり、ベータ版に進化しました!(2011/05/31)

昨日の午後から作り始めた、青空文庫を縦書で表示するchromeのエクステンション。
思ったよりか早いこと、大枠ができてきたので、アルファ版として公開してみます。
それにしても、むかしとはちがい、あっという間にできてしまう。情報も開発環境も充実しているせい…けっして私のスキルがアップしたためではない(T_T)

【追記】
5月22日時点で、最初のバージョンが、ほぼ完成。
けっこういいものに仕上がったと思います。青空以外も縦書できます(Readabilityとの組み合わせ技がオススメ)。
以下にずらっと履歴を並べる。
ちゃんとしたページ、ストアへのアップも今週中にはできると思います(紹介動画を作らねば)。

縦書青空 Chrome Extension Ver.1.1.1(11/05/28)
・栞がつきました。→動画
・栞をはさんだ本の一覧を、オプションページで見ることができます。


・画面の左右の端にマウスをやると、ページ送りの矢印が出るようにしました。これは便利。なぜ今まで思いつかなかったのか。。
・フォントの設定を「疎」にした(ユーザにはあまりわからないが、開発側には重要)。
・外字のイメージファイルが、ローマ数字やアクセント記号付きアルファベットの時、横向きになるようにしたが、マイナーすぎる仕様だ(文庫、抹茶のみ。仁科芳雄「NIELS BOHR」で見れる)。
・jQueryの書き方を微妙に修正。
・「軟弱千人隊」解散。エクステンションの解説に乗っ取られる。
・Chromeウェブストアには、まだアップできてない( ;∀;) 紹介動画を作るのに苦労しております。いったんできたのだが、しおり機能を付けたために、使えなくなったのだ。トホホ

縦書青空 Chrome Extension Ver.1.0.0(11/05/22)
(ver.1.0.0の概要)
・ストアにアップロードする予定のファイル。
・パッケージ化されているので、すぐインストールできる。
・Ctrl+左右クリック、またはキーボードの上下矢印キーで、一ページずつスクロール機能がついた。
・インストールしてすぐ、まだ何も設定してない時点でも、それなりに縦書になるようにした。
・「抹茶あずき」スタイルを追加。
黒文庫スタイルを改良。
・mainscript.jsの密な部分を疎に。
・フォントの設定を改善。
・その他、細々(「ほそぼそ」ではなく「こまごま」と読むのだ)と改良。
(今分かっている問題点)
・文庫と抹茶スタイルで最初にロードしたとき、ルビや割注や奥付がうまくいかない。二度目からはちゃんとなる。
・二行に渡る長〜い傍点はちょっと困る。(例えば、新渡戸稲造「イエスキリストの友誼」)
・すごく長い割注が出現すると、やっぱりちょっと困るかもしれない。滅多にないけれど。
・ルビが大量にある長文は、ロードに十秒ほどかかる。これは原因がわかっているが、それを取り除くと、ルビの隔たりが調整できなくなる(つまり邪道なやり口で調整している)。
・Windowsでは、傍点があると、行間がやや広くなる(これは解決がむずかしい)。

縦書青空(仮名) Chrome Extension Ver.0.9.9(11/05/22)
(ver.0.9.9の概要)
シンプルな黒のスタイルを追加。
・文字の間隔を指定できるようにした。
・傍点のつけ方を工夫したが、表面的にはわからない。
・これでいちおう完成。あとはChromeウェブストアにアップするのだ(これがけっこうめんどくさい)。

縦書青空(仮名) Chrome Extension Ver.0.9.7(11/05/21)
(ver.0.9.7の概要)
・オプションページがついにスライダーになった\(-o-)/
・割注に挑戦してみた(文庫古書スタイルのみに適用)。


割注のあるのは、本日青空文庫にアップされた服部宇之吉「荀子解題」。初めて青空で割注を見た。割注が長いと、隣行になるが、改行は私のスキルでは難しい(T_T)
・目下のところの問題は、Windowsでオプションのルビ間隔が実際のとちょっとずれる点、Ubuntuで最初にロードしたときJavaScriptの一部が読み込まれないことがある点。あと、フォントの設定の仕方を変えたい気もする。
・ほぼこれで完成なので、明日もう少し様子を見た後、Googleにアップしよう。

縦書青空(仮名) Chrome Extension Ver.0.9.6(11/05/20)
(ver.0.9.6の概要)
青空文庫の注記のスタイルにほぼ対応。
・CSSを中心に、細々と改善。
・スライダはまだ(^_^;)。いや、あとスライダだけだというべきだ(強気)。
・しおりをつけたい。
・epubに変換する装置をつけたい。

縦書青空(仮名) Chrome Extension Ver.0.9.5 (11/05/19)
(ver.0.9.5の概要)
・設定画面を整えた(さらにスライダー方式にする予定)。
・jQueryを整理して、若干の高速化。

縦書青空(仮名) Chrome Extension Ver.0.9 (11/05/18)
(ver.0.9の概要)
・エクステンションボタンをクリックすることで、実行されるようになった。(青空文庫以外でも縦書する仕様を目指して。)
・設定画面でデザイン選択、フォントの種類や行間、ルビの調整をつけた。(見本画面を見ながら、スライダで動かして調整できるようにする…のが明日以降の予定。)
・今後のデザインの追加に備え、設計を大幅改善。
・今選べるデザインは、「プレーン」と「文庫古書風」のみだが、中身ができたらデザインを増やすのが今後の愉しみ。


・長文だと、レンダリングに時間がかかる(原因はrtにposition:relativeでルビ間隔を指定しているため)。漱石「明暗」約950枚だと、15秒。

縦書青空(仮名) Chrome Extension Ver.0.1

ダウンロードしたファイルを解凍し、
Google Chromeの最新版で、「拡張機能」のデベロッパー・モードから、「パッケージ化されていない拡張機能を読み込みます」で読み込みますと、使えます。
フォントがもっとも重要で、WindowsならメイリオやIPA明朝、UbuntuならIPAex明朝を推奨(というか強制)。さざなみフォントもインストールすることが望ましい(注文が多い)。

デザインコンセプトは、「古本屋の店頭で見つけた、昭和40年代の文庫本」のイメージ(^_^;)

UbuntuのChromiumで調整してあるので、Windowsなどで使う場合は、フォントなどをCSSで調整してやると良いです。
解凍したフォルダの中に「css」というフォルダがあり、そこにCSSファイルが入っています。
ごくふつうの小さなcssなので、スタイルシートの知識があれば、わりと簡単にカスタマイズできると思います。
フォントの指定と、あとルビの調整がポイント。rtタグがルビ、「.sesames」というのが、傍点。
ルビは、うまく調整すれば、非常にきれいに表示されます。

Chromeのエンジンである、Webkitは、ここ最近、縦書用のCSSを急速に整備しつつあり、それを使ってみまひょというのが、このエクステンション。
epubの仕様も同じような感じになるはずなので、そのあたりも見越しての練習でございます。

-webkit-writing-mode: vertical-rl;

というのが、縦書スタイルシート。たったこれだけで、概ね縦書き表示ができてしまいます。まだ、ちょっとバグもあり、微調整も必要ですが、だいたいうまくいく。

エクステンションに今のところ実装した機能を解説すると。

青空文庫の本のページを開くと「縦書」ボタンが出現します。

マウスのホイールをグリグリすると、横スクロール。

右上に「作品名 / 作者名」を表示。

左下に「現在位置 / 四百字詰換算の枚数」を表示。

左上に「元に戻るボタン」を表示。

個人的に、これはうまくいった、と思ったのが、傍点。Ubuntuでは、非常に美しく表示できました。

ところが、ですわ。
それは今日の午前中のことでした、なんとwebkitのやつには、傍点(sesameという)専用CSSが存在していることが発覚。(-webkit-text-emphasis-style: sesame;)
傍点Javascriptを書いて、せっかくご満悦状態だったのに、それはモノの五分も続かず。
むかつくんで、まだ元のJavascriptのままで放置しています(笑)

青空文庫にはいろんなタイプのテクストがあって、まだまだ、細かいところはいっぱい微調整が必要ですが、とりあえずは使える感じです。
うちと同じ環境(UbuntuのChromium)でIPAex明朝フォントを使うと、わりかしきれいと思います。WindowsはCSSの調整が必要。
手ごわいのは、青空文庫ではテキストによって、独自のスタイルシートをタグ内のstyleで書きこんであること。
Javascriptでいったん全部クリアしておくべきですね(と今思いついた)。

今後の開発方向は、というと、
青空文庫に限らず、どこでも縦書にすること。
もっとスーパーゴージャスなスタイルシートを用意すること。

「スーパーゴージャスなスタイルシート」が、じつのところ、本来の目的。ウィリアム・モリスみたいなのを作ってみたいと思っています。