bookreader.js カスタマイズのメモ

SS の公開に使っている、bookreader.js ですが、やっぱり便利。ブラウザで超長文を縦スクロールで読むのは、辛いなあと思っていたひとには福音となりそうなライブラリです。というか、Web 小説を公開しているひとの多くが該当するのかも。まぁ、見せる方のこだわりの一つと思ってもらえれば……。

ただ、使用できるタグが限定されていたり、カスタマイズに関する情報はさすがに少なかったので、自力でいろいろいじってみて分かったことについてメモってみようかと思います。

bookreader.js 0.4.5 のカスタマイズ

0.4.1でも施した、p タグや div タグへの class 指定を 0.4.5 でもできるようにしてみました。パッチは以下。

--- bookreader.src.js.org	2008-07-08 00:11:32.000000000 +0900
+++ bookreader.src.js	2008-07-09 11:44:12.000000000 +0900
@@ -71,15 +71,17 @@
 				case 'P':
 					s = elm.innerHTML;
 					t = BookReader.Utils.dividelines(s, maxletter);
+					w = elm.readAttribute('class');
+					if (!w) { w = ''; }
 					t.each(function(line){
 						if (BookReader.currentline >= maxline || line == '<HR />'){ BookReader.insertPage(); }
 						if (line != '<HR />'){
 							if (elm.align == 'right'){
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' right">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+' right">' + line + '</P>';
 							} else if (elm.align == 'center'){
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' center">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+' center">' + line + '</P>';
 							} else {
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+'">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+'">' + line + '</P>';
 							}
 							BookReader.currentline++;
 						}

0.4.5 では、行揃えなどが標準で組み込まれているので class 指定を使う必要があるケースはかなり少ないと思いますが、例えば、インラインで img タグを使用し文中に画像を入れたいときなどは、行の高さが決め打ちされているので、一部分しか表示されないなどの現象が起こりえます ((画像自体に width や height を指定しないと、その行に収まるように高さを無理矢理縮めて表示するようです。))

例えば、バナーなどをインラインで表示したい場合などは、専用の class を CSS に追記して、画像を表示する行に対して class を指定してやるなどの方法で対応するのが良いかと思います。

動作サンプルで具体的な記述方法や CSS の指定を確認して下さい。

勝手にバナー作ってみました

アイコンの画像は、Detailed information for icon – document2 を使用させていただいています。アイコンのライセンスが GPL なので、こちらのバナーも GPL ってことで。

Illustrator で加工した EPS 形式のファイルと、バナー用の PNG ファイルをアーカイブしておいておきますので、自由に使って下さい。あ、公式とは全く関係ないので、その点はご注意を。

• [download#13]
  Update:2008/07/09

以下の内容は bookreader.js 0.4.1 に対して行った改造です。それ以降のバージョンではほぼ同等の機能が取り込まれていますので、改造は不要となっています。

使用できるインラインタグの種類を増やす

たぶん、これが一番不満な部分だと思うのですが、マニュアルによると、

HTMLのタグの機能を置き換えたり、制限している部分があります。
[H1]: 大見出し。グリッド3行分。
[H2]: 中見出し。グリッド2行分。
[H3]: 小見出し。グリッド1行分。改ページ直後でなければ、直前に改行を追加。
[P]: 本文。グリッド1行分。DIVタグも、Pタグと同一動作。
[BR]: 本文中の改行。
[HR]: 改ページ。
[IMG]: Pタグの内部で使うと、インライン表示。それ以外では、次の改ページ位置に挿入されます。この場合、ALT属性を指定しておくと、画像の下部にキャプションとして表示されます。
その他 : 本文中で、STRONG, STRIKEが使えます。

のように、使用可能なタグがかなり少ないのですね。

文章を公開するという用途においては、必要最低限のタグは対応していますが、例えば斜体を使いたかったり、文字の色を変えたかったり、といった装飾ができないのは辛いところ。strong や strike が使えるってことは、改造すれば対応できそうだったので、ソースを眺めてみましたら、library/bookreader/bookreader.js の 337行目辺り、switch (tagname) という命令の下に素通りさせるタグが指定できるようです。そんなわけで、

case 'STRONG':
case 'STRIKE':
case 'SPAN':
case 'I':
case 'EM':

のように、書いてやれば、ソース内のタグが取り除かれることなく出力されました。span タグで囲んで CSS で装飾すれば色変えなどもできるので、ちょっと表現力が上がるかも。ただ、文字の大きさの変更は、レイアウトを崩す原因になるので、それは厳禁ぽいかなあ。表示チェックをしっかりして、使いどころを間違えなければたぶん便利になるかと思いますね ((ただ、i タグなどはXHTML1.0 では非推奨、 2.0 では廃止されるタグなので、font-style による装飾を行うなどした方が良さそうですね。))。

ブロックタグをいじろうとすると、かなり大規模な改造が必要になるかも。私には手に負えません(^^;

行揃えを行う

p タグや div タグへ class を指定するのが標準ではできないので、class 指定を残すように変更してみました。実際は、中央揃えや右揃えを行う class をCSSファイルに記述してやる必要があります。

bookreader.js の80行目前後にある、

BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+'">' + line + '</P>';

という行を、

w = elm.readAttribute('class');
if (!w) { w = ''; }
BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+'">' + line + '</P>';

のように書き換えてやると、それぞれのタグに class 指定がされている場合は、その class を残したまま整形するようになります。後は、それぞれのテーマのスタイルシート、default.css、vista.js、mac.js について、中央揃えや右揃え用のスタイルを追記してやればOKです。例えば、class="RIGHT" で右揃え、 class="CENTER" で中央揃えしたいときは、

/*テキスト寄せの設定*/
#br_body p.RIGHT {text-align:right;}
#br_body p.CENTER {text-align:center;}

をスタイルシートの最後にでも追記してやれば動作するかと思います。

テーマのカスタマイズ

library/bookreader/themes 以下のテーマをがりごりすればある程度のカスタマイズができますね。

見出しタグの大きさや文字寄せ、色などは機種別の CSS ファイル、default.css、vista.js、mac.js それぞれに書いてやらないと、環境によって見栄えが統一されなくなるので注意ですかね。

そんな感じで、ちょっとだけ手を入れ、今後のバージョンアップに期待している今日この頃なのです。

……まぁ、その前に、しっかりとした文章をもっと書けるようになるための精進を忘れないようにしなければいけませんね。