ブックリーダーアプリで重要なのは、マンガや雑誌をスイスイと読み進められるという事です。
ペラペラとページをめくったり、ドンドンページを素早く読んでいけないと使いやすいブックリーダーとは言えませんよね。
今回作っているブックリーダーでは、どんなページめくり機能を搭載すればいいかを思考した内容をブログに残しておきたいと思います。
本を読む行為はページをめくる行為
ページをめくるという作業は、紙の本を１枚ずつひっくり返すあの作業をイメージすると思います。
ページめくりのパターンをいくつか紹介します。
ページカール方式
これは、下記のページのデモをキャプチャした動画です。
pageflip.jsを使って本の様にページめくりを導入する方法
他にも、もっとリアルなページカールを、Javascriptライブラリを使うことで可能なようです。
積み重ねパターン
積み重なった紙を取り除いていくパターンです。
スライドパターン
ページを横一列に並べてそれをスライドさせるパターンです。
スライド方式を採用
インターフェイスは、一番スタンダードと思える、スライドパターンを採用することにしました。
正直ページめくりのインターフェイスは、使う人の感覚によってどれが良いかという評価が分かれるところだと思うので、「そのうち設定で切り替えられるようにしてもいいかな」とも思っています。
個人的には、読み込んでいるページの位置や、前後関係などが明確に把握しやすいのが、スライド方式だし、何よりCSSだけで作れそうと思っての採用でした。
画像表示方法
画面いっぱいに画像を表示するので、一度に全てのページの画像を表示すると、まあまあなメモリとCPUを使用してしまうので、基本的には表示するページとその前後のページのみを表示して、表示したあとは１００ページを超える場合は適宜エレメントを削除していく方式にします。
表示する前後のページを同時に読み込むのは、次のページや前のページにスクロールする時に同時に表示していないと、空ページがスライドされて来てしまうので、基本３ページ表示する方式です。
スクロール方式の課題
ページを横一列に表示させてそれを単純にスクロールさせて表示しようとしています。
一度にたくさんのスクロール量にならないコントロール方法を考えなければいけません。
そこで使えるのが、CSSの
scroll-snap-typeと
scroll-snap-alignと
scroll-snap-stopという機能です。
scroll-snap-typeとscroll-snap-alignは、ページ毎に画面の中央にスナップしてくれる機能で、
scroll-snap-stopは、大量スクロールせずに１ページ毎にスクロールを制御してくれる機能です。
マウスのホイールで一気にスクロールできてもいいんですが、一気スクロールしないほうがブックリーダとしての挙動はいい感じだったので、これを採用です。
デモ
- ページ1
- ページ2
- ページ3
- ページ4
- ページ5
- ページ6
- ページ7
- ページ8
- ページ9
- ページ10
あとがき
今回は、ブックリーダーのキモ中のキモと言ってもいいぐらいの仕様決定でした。
あ、気持ち悪いじゃなくて、肝の方ね。
パソコンでもスマホでもこの方式でサックサクにページを読み進められていけるように感じてもらえるといいですね。
