このページの本文へ

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

    スマホ

    ここまで便利なのか! 子どもの居場所を90秒間隔で教えてくれる、安心の見守りガジェットがすごいぞ

  2. 2位

    Team Leaders

    Power AutomateでSharePoint APIを使う ― SPOリストを自動作成するフローを作ろう

  3. 3位

    ビジネス・開発

    いますぐ捨てたいITサービスは? AI推しにそろそろ飽きてません? 情シスさんのホンネを「ゆるっとナイト」で聞いた

  4. 4位

    ITトピック

    「AI導入で人員を減らしても収益は増えない」その理由/「専任情シス不在」中小企業の3社に2社/ユーザーアカウント流出が加速、ほか

  5. 5位

    エンタープライズ

    基盤も古いし、コードも酷い! そんなクエストにGitHub Copilotで試行錯誤しまくった「みんな」こそ最高

  6. 6位

    ソフトウェア・仮想化

    日本の自治体がみんな使っている「ManageEngine」 IT運用のすべての課題解決を目指す

  7. 7位

    クラウド

    「すでに開発コードの4分の3はAI生成」 Google Cloud CEO、エージェント時代の戦略を語る

  8. 8位

    sponsored

    完全自動運転の実現へ、チューリングが開発基盤にGMO GPUクラウドを選んだ理由

  9. 9位

    データセンター

    NTT、AIインフラ構想「AIOWN(AI×IOWN)」を発表 国内データセンター総容量は3倍超の「1ギガワット」へ

  10. 10位

    sponsored

    “脱VPN”方針の大手エネルギー企業、だがZTNA移行の成功パターンが分からず… どうすればよい?

集計期間:
2026年05月09日~2026年05月15日
  • 角川アスキー総合研究所