このページの本文へ

前へ 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位

    ITトピック

    IT技術者の約半数が「AIの進化で転職を意識」/これから起きるのは「SaaSの死ではなく変容」/バックアップ市場は堅調に成長、ほか

  3. 3位

    sponsored

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

  4. 4位

    デジタル

    kintone MCP Server とは?現在提供されている3つの選択肢をフラットに比較

  5. 5位

    データセンター

    IOWNによるGPU分散インフラ「GPU over APN」実証環境を開放 NTTドコビジが全国8拠点をつなぎ提供

  6. 6位

    デジタル

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

  7. 7位

    sponsored

    「IT機器が高すぎる」「熟練メンバー不在で分からない」… 情シスさんの“現場の悩み”をエンジニア3人に聞いてみた

  8. 8位

    Team Leaders

    「SaaSの死」現場の8割が実感も、半数が“年間10%以上成長”と危機感先行

  9. 9位

    Team Leaders

    AIエージェントが顧客対応から“恋愛相談”まで マッチングアプリwithのCSを変えたチャネルトーク

  10. 10位

    クラウド

    顧客企業のビジネスを動かす「基幹系AI」を実現する 日本オラクルの2027年度戦略

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