このページの本文へ

前へ 1 2 3 次へ

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

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

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

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

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

 「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。

 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。


「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、左右の端にある [<<] [>>] では2ページずつ(雑誌の見開きのような感覚で)ページを移動できる


 「Webサイトで横スクロール?」などという疑問はとりあえず横に置き、とにかくデモサイトを訪れてみてほしい。気持ちよくスムーズに切り替わっていく画面に、「おっ」と思われるのではないだろうか。

 動作がおもしろい(心地よい)というだけではなく、実際に長文を読んでみると、意外にもちゃんと読みやすいことを実感できる。bookreaderは、横スクロールとはいっても、まとまった“ページ”の単位でスクロールする。通常のスクロールのように、「読みながら画面を動かす」「それを目で追う」といった動きをしなくて済むので、視線が落ち着くのだ。また、ページの移動は、キーボードの矢印キー(←→)でも行なえる。操作面での負担も軽減される。


デモサイト「走れメロス」の一部。こちらは完全に文字だけだが、縦スクロールで続くよりもだいぶ読みやすいと感じた


前へ 1 2 3 次へ

カテゴリートップへ

本記事はアフィリエイトプログラムによる収益を得ている場合があります

アクセスランキング

  1. 1位

    ITトピック

    実用化が楽しみすぎるスマート技術たち 「長距離ワイヤレス給電」から「室内向け太陽電池」「超音波センサー」まで

  2. 2位

    ビジネス・開発

    富士ソフトがエンジニア1万人超を「AIネイティブ」化 実装力を武器にフィジカルAIなど3本柱に注力

  3. 3位

    sponsored

    AIインフラ市場“一強体制”を崩せるか AMDが「Helios」で体現するオープン戦略とフィジカルAIのラストマイル

  4. 4位

    ITトピック

    IT技術者の8割超「AI生成コードには人間のレビューが必要」/「偽・誤情報を見破れる」と自信を持つ人はICTリテラシーテストの正答率が低い、ほか

  5. 5位

    ITトピック

    6.4万人の熱狂をAIが導く FIFA W杯全スタジアム「デジタルツイン」化が変えた観戦体験

  6. 6位

    デジタル

    買い切り型クラウド「pCloud」がDX総合EXPOへ CEO来日で日本展開を加速

  7. 7位

    Team Leaders

    SharePointリストへの登録データを、CSVファイル形式に成形/変換して自動保存する方法

  8. 8位

    TECH

    攻撃するAIと防御するAI 日本企業のセキュリティ対策にいま何が必要か?

  9. 9位

    ITトピック

    「クロスの定義とは?」 AIに“サッカー言語”を教えることから始まった、FIFAとLenovoの協業

  10. 10位

    ビジネス

    開発案件の立ち上げを「60分から1分」に ソースコード管理も一本化したKDLのBacklog活用術

集計期間:
2026年07月16日~2026年07月22日
  • 角川アスキー総合研究所