bookreader.js

画像を挿入した場合のサンプル。ALT属性がキャプションとして表示される。

bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。

プロジェクトのホーム (Google Code) - New!!

ダウンロード(ver 0.4.6) - 2009/04/18公開

※ダウンロードの詳細については、こちらのページをご覧下さい。

 

まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。

次期バージョンの開発状況

幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサンプルはこちら(※IE未調整)。ポイントは、全画面化、縦幅(行数)可変、文字列幅をピクセルベースで計算、他ライブラリへの依存を除去、ブラウザのページ内検索対応など。また、lightbox的な使用が可能になる予定です。

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に任せることもできるかもしれませんが、現時点でそれが可能かは不明です。どちらにしてもブラウザ対応が進むのは数年先でしょうか..)


ライセンス

ライセンスはAPL2ですので、本スクリプトの使用は基本的にフリーですが無保証です。サイトに採用していただいた場合は、参考にしたいのでご一報いただけたら嬉しいです。

開発・著作

bookreader.jsの開発およびドキュメント制作は、CogniTom Academic Designが行っています。バグ報告や要望・ご意見は、メールしていただくか、あるいは、Google Code の方に書き込んでもらってもOKです。

CogniTom Academic Design

連絡先: office@cognitom.com