このページの本文へ

長文もらくらく読めるJavaScriptライブラリ「bookreader.js」

たった6行でWebサイトのUIをガラッと変える

2008年06月13日 19時59分更新

文● 小橋川誠己/アスキーネタ帳編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

導入は簡単、ASCII.jpの記事で試してみた


 単に「本や雑誌のようなレイアウトのWebサイト」なら巷にはFlashを使ったものがあるし、Web制作者にとってはそれほど目新しく感じないかもしれない。bookreaderの特徴の1つは、初心者でも既存のWebページに組み込みやすく、すぐに簡単に利用できる、という点だろう。

 bookreaderの導入は、基本的にはHTMLファイルの中でライブラリを呼び出して、指定されたタグで囲むだけ。公式サイトからダウンロードできるzipファイルには、HTMLのテンプレートファイルが含まれている。既存のサイトへ組み込む場合や、新規のサイトを作る場合はこれをベースに手を加えて(というよりもコピペして)いけばいい。

 筆者も試しに、ASCII.jpの最近の記事の中から、比較的長文だと思われる記事「水素製造の大手に聞く『燃料としての水素』」をbookreaderで横スクロール化してみた。それが下の画面。実作業としては、元記事のHTMLから本文部分を抜き出し、先のテンプレートに倣って6行ほど書き加えたぐらい(ヘッダ部分で4つのjsファイルを読み込むように指定し、本文部分を丸ごと<div id="bookreader"></div>で囲む。興味のある方は、次ページのサンプルを参照のこと)。


当サイトの記事を1つ、試しにbookreaderにしてみた。ちなみに写真の下のキャプションはimgタグのalt属性で指定する仕様


 見栄えを整えるには、改ページを入れる位置や画像サイズなどを多少調整してやる必要があるが、“とりあえず”の状態にこぎつけるまでがあっけないほど簡単だった。かといって、レイアウトやデザインに手を加えられないということではなく、別途“テーマ”を定義することで、1画面に表示するカラム数やフォントなどを指定できるようになっている。


 現在公開されているbookreaderのバージョンは0.4.1で、「ライセンス形態を検討中」だが、使用料は無料とのこと(再配布は禁止)。たとえば読み物系のサイトなどであれば、本サイトとは別にbookreaderをテスト導入してみて、実際の読みやすさを比較してみてはいかがだろうか。

■関連サイト

カテゴリートップへ