将棋の神様〜0と1の世界〜

「三間飛車のひとくちメモ」管理人、兼「フラ盤」&「チェスクロイド」作者がおくる、将棋コラム

横スクロールできるJavaScript「bookreader.js」の考察(実用例付き)

長文サイトに最適「bookreader.js」

Webページは縦スクロールして読むのが一般的だが、横スクロールして表示してくれるJavaScriptもある。それが、「bookreader.js」だ。


bookreader.jsのメリット
一般的なWEBページの画面構成は縦スクロールが基本です。しかし、スクロールと視線の同期が頻繁に発生し、長文(数十〜数百ページ)を読むには適しません。
bookreader.jsでは、テキストを予め複数の「ページ」に分けておき、「ページめくり」のような横スクロールに置き換えることで、視線移動を減らしています。

下記のレビューも参考になる。

「たった6行でWebサイトのUIをガラッと変える - ASCII.jp」

動作が軽快で、見た目も綺麗。いずれ各社ブログサービスのデザインテーマとして登場するかもしれない(ブログパーツ、カレンダー、コメント一覧などのプラグインはページ下部に横に並べる感じ)。

将棋Webサイトに適用すると?

さて、これを将棋Webサイトに適用することを考えてみる。将棋Webサイトページの形態として、主に下記が挙げられる。

  1. ポータルサイト・コミュニティ系(「将棋タウン」様など)
  2. 自戦記・観戦記系(多くのブログがこれかな。詳細は下記)
  3. 日記系(プロ棋士など、有名人ブログに多い)
  4. コラム系(このブログなど。文章が長い)

それぞれの形態と、「bookreader.js」の相性について考えてみた。

1.ポータルサイト・コミュニティ系サイトへの適用

この形態のサイトは、トップページを持ちその下に多くのサブページを持つ。トップページに「bookreader.js」を適用すると、サブページへのリンクが網羅的に把握しづらくなるので難しい。また、サブページに部分的に「bookreader.js」を用いると、デザインや使い勝手的に統一感が無くなってしまう。適用しないほうがよいだろう。

2.自戦記・観戦記系

筆者ホームページ「三間飛車のひとくちメモ」内の

「VS居飛穴&持久戦のひとくちメモ -PAGE1-」

に、実際に「bookreader.js」を試してみた。ただしヘッダー・フッター・サイドバー部分は取り除き、コンテンツ部分のみとしている。結果は下記リンクの通り。

「【bookreader.jsテスト】VS居飛穴&持久戦のひとくちメモ -PAGE1-」

図のサイズが、勝手に横幅440pxに変更されてしまっている。そのため、盤面図は縦に何面か並んでいるのに1面分しか見えなくなってしまっている。サイズが最適となるようサンプルのJavaScriptを自力でカスタマイズしようと思ったのだが、時間がかかりそうなのでやめた。
ただし、図面サイズが適性だとしても、そもそも横スクロールデザインには向いていない気がする。
(2008/06/30追記:少し視点を変えて、盤面画像を、縦に並べるのでなく正方形に4面並べる画像にするとそれなりにうまく表示されそうだ。)

3.日記系

図面は無いのだが、基本的に文章は短いので、わざわざ横スクロールにしても可読性は上がらない。「bookreader.js」適用後の初見のインパクトはすごいが、それ以降はアニメーションが冗長に感じられそう。特に適用する必要はないだろう。

4.コラム系

「bookreader.js」は長文向けのJavaScriptなので、間違いなく相性は一番だろう。

結論

コラム系将棋サイト運営者の方は、「bookreader.js」採用について一考の余地があるだろう。ただし現状ブログには適用できない(自力で大幅改造できれば別だけど)。
それ以外のサイトには向かない。文章が縦書きで右から左へスクロールしていく形式だったら、書籍と同じとなり、観戦記系サイトに対して一考の余地ができそうなのだが。

更新履歴

  • 2008/06/30:少し追記した。