bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。
→プロジェクトのホーム (Google Code) - New!!
→ダウンロード(ver 0.4.5) - 2008/07/07公開
※ダウンロードの詳細については、こちらのページをご覧下さい。
まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。
bookreader.jsのメリット
一般的なWEBページの画面構成は縦スクロールが基本です。しかし、スクロールと視線の同期が頻繁に発生し、長文(数十〜数百ページ)を読むには適しません。bookreader.jsでは、テキストを予め複数の「ページ」に分けておき、「ページめくり」のような横スクロールに置き換えることで、視線移動を減らしています。また、bookreader.jsを使うと、HTMLでありながら、テキストを簡単に段組みにすることが可能です。ライブラリを読み込むだけで良いので、既存のページに導入するにも簡便です。
組込みサイト例
テキスト中心のサイトでの、bookreader.js 活用例です。トップページなどは通常の構成で、読み物のページだけbookreader.jsを適用すると良いようです。
- 川野里子の短歌とエッセイ New!!
サンプル
評論・物語などの長い文章を表示したサンプルを用意しました。
- 森鴎外「高瀬舟」(青空文庫) - ミニ表示 - 3列表示 - 2列縦長表示
- コナン・ドイル「自転車嬢の危難」(三上於莵吉訳・青空文庫)
以上、青空文庫から。
※「青空文庫ゲートウェイ」と「テーマ」のページも参照ください。
以上、「川野里子の短歌とエッセイ」から。
ホームページへの導入
bookreader.jsを導入したい部分のHTMLをDIVタグで囲み、そのIDを"bookreader"とします。HTMLヘッダーで、prototype, scriptaculous, bookreaderの各ライブラリを読み込みます。
詳しくは、Google Code のページを参照ください。
表示フォントについて
環境によって、導入されているフォントは千差万別です。それぞれの環境で、現在一番見易いフォントとして、
- Mac OS X: ヒラギノ明朝
- Windows Vista: メイリオ
- それ以外のOS: MSゴシック (なければ、他のゴシック系フォント)
を使うようにしています。bookreader.jsはOSを判別して、適切なcssファイルを読み込みます。フォントを変えたい場合は、独自のテーマファイルを作成して下さい。
テーマ
bookreader.jsは、テーマを指定して表示スタイルをカスタマイズすることが可能です。詳しくは、こちら。
一度に表示可能なページ数
ハードウェアのスペック、OS、ブラウザによって、実用的な範囲は変わってきます。20〜30に留めておいて、HTMLファイルを章ごとに分割するのがオススメです。最近のMac+Safari環境では100ページ以上でも、かなりスムーズに動きます。試した限りで最大は、マロの「家なき子」ですが、これだと文字サイズ大で500ページ強、普通に読めます。(ただ、少し前のWindowsのCeleronノートPCとかだと数十ページで限界でしょう)
マルチカラムについて
CSS3で対応が予定されている「マルチカラム」ですが、あえてそこをJavaScriptで(ある意味)強引に、実装するこのbookreader.js。その意味では、css3-multi-column.jsなどに通ずる部分があります。とはいえ、CSS互換が目的ではないので、方向性は異なります。bookreader.jsの試みは、「紙」的な「目に優しい」レイアウトをWEBに持ち込むことです。たとえば、TEXに似た画像の再配置機能などはその一つです。(CSS3の動向次第では、マルチカラム化のロジックをCSSに任せることもできるかもしれませんが、現時点でそれが可能かは不明です。どちらにしてもブラウザ対応が進むのは数年先でしょうか..)
開発の TO DO
[画像表示機能] : インライン表示・フル表示 OK!
[リンク対応] : アンカータグに対応する OK!
[iframe化] :
[禁則処理の向上] :
[テキストハンドリング] : 実体参照(©や>など)の文字数カウント調整など。 OK!
[テーマファイル] : 文字サイズ・フォント・桁数・行数などのテンプレート化。 OK!
[印刷対応] :
[しおり機能] :
[ルビ機能] : RUBYタグへの対応
[文字コード検証] : UTF8以外のソース読み込みの検証 OK!
[英字の字幅調整] : プロポーショナルフォントの字幅調整
[英文モード] : 英単語ベースの改行ロジックの実装
[IE対応] : prototype.jsの問題? OK!
[キーイベント調整] : キーを押し続けた場合の挙動の調整
[青空文庫ゲートウェイ] : bookreader.jsを活用するサービス
ライセンス
ライセンス形態を検討中(APL2が有力)なので、改変コードの公開はサイトへの組込み目的に限定します(ライブラリとしてダウンロード可能な形態での改変コードの公開は遠慮ください)。本スクリプトの使用は基本的にフリーですが無保証です。サイトに採用していただいた場合は、参考にしたいのでご一報いただけたら嬉しいです。
開発・著作
bookreader.jsの開発およびドキュメント制作は、CogniTom Academic Designが行っています。バグ報告や要望・ご意見は、メールしていただくか、あるいは、Google Code の方に書き込んでもらってもOKです。
CogniTom Academic Design
連絡先: office@cognitom.com