ページめくりの UI 考察 (3) : ペラペラ実現のためにどうすればいいか

Web ページに表示するコンテンツを仮にページめくりが必要なタイプなコンテンツであったとしましょう。その場合、ペラペラと気軽にページめくりをするには、紙と同様に、既に何らかの方法で印刷 (レンダリング) され終えており、それらに高速にアクセスできることが求められることになります。

前提としているページめくりによらないページ遷移の方法を探す場合、ユーザーの目的に沿って UI を構築するという設計プロセスに陥りがちだと思います。ペラペラめくれることでいろいろな使い方が本にはあるというように、物としての構造が先にあり、そこから利用者の生活において状況ごとに使い方が自由に選べるということに主眼を置いているので、ペラペラできるのかできないのかということに注力していきます。

ちなみに、前回までの記事はこちら。

• ページめくりの UI 考察 (1) - ARTICLES
• ページめくりの UI 考察 (2) : ペラペラの発見 - ARTICLES

ペラペラ実現に向けての実装アイデア

ペラペラめくるというと、ページを紙のように例えば 3D とかで描画してつかんでめくるということを思いつきがちです。そしてそれは Flash が流行っていた時代にかなりの数が試みられてきました。もちろん、そういうインタラクションの作品があっていいと思いますが、実用的ではありません。Web は紙ではないわけで、Web ならではのペラペラになっていればいいのだと考えます。そういう意味では、iPad のブックアプリや Speaker Deck のサムネイルペラペラ (適当に名前を考えました、すみません) は、デジタルならではのペラペラだと思います。

では、こういったことを実現するにはどんなアイデアが考えられるでしょうか。4つほど挙げてみます。

• ファイルとして配布し、個々のアプリにまかせる
• 先のページまでレンダリングしておく
• 動画に変換してしまって、プログレスバーでペラペラする
• PWA で配布して、ローカルにキャッシュさせる

ファイルとして配布し、個々のアプリにまかせる

Web によらず PDF や ePub で配布してしまい、後はアプリにまかせるという方法は、選択肢としてアリです。普通じゃんと思うかもしれませんが、まずは普通の方法も選択肢に入れることを検討すべきだと思います。オンデマンドで印刷して配布するとかでもいいかもしれません。ただし、こちらの方向は、本シリーズにおいては僕が考える必要がないタイプのものだなあと思い、これ以上この路線は考えないことにします。

先のページまでレンダリングしておく

もし、ローカルの PC が高い性能を持ち、なおかつネットワーク環境も高速な場合は、先のページまでレンダリングしておくというのは一つの手です。それほど多くないページ数で構成されているものであれば、先読み込みを終えてしまい、レンダリングも終えてしまうことで意外と早くなるかもという気がします。HTML 文書には画像も含まれるので、それらの先読み込みもしておく必要がありますね。200ページ以上あるような本で同様なことが可能なのでしょうか。画像を多く含んでいたら? などを考えるとスケーラブルではないかもしれません。でも検討してみる価値がある選択肢だと思います。

動画に変換してしまって、プログレスバーでペラペラする

ちょっとトリッキーな方法ですが、動画に変換しておき、それをペラペラするというやり方もあるかも考えられます。この場合、動画は再生されるものではなく、静止画の連続であるものになります。再生しても謎いものになるでしょう。何フレームで1ページとするかは議論の余地がありそうですが、一度にコンテンツを読み込め、尚且つ圧縮されているというのは理想的です。ただ、圧縮された結果細かな文字が見えなくなってしまうかどうかは検証する必要がありそうです。

PWA で配布して、ローカルにキャッシュさせる

PWA にすることで、ローカルにキャッシュさせることでオフラインでも使えるアプリケーションを実現ができますが、うまくやれば iPad のブックアプリのような速度でペラペラができるのでしょうか。こればかりは自分でやってみないとなんとも言えません。

ということで、唐突に終わりますが、次回よりペラペラについて、よさげな実装をさぐってみます。やっていくうちに、全然方向間違ってましたなんてことに気づいたりするかもしれません。