ブラウザ上で漫画を読むJavaScriptフレームワーク考える

週刊少年ジャンプのコミックスがいよいよ電子書籍に出始めたということで、メジャーどころも電子書籍に出てきた。アプリで読ませたりもしているが、ブラウザ上で試し読みさせるストアも多い。そこで漫画をスマホブラウザ上で読ませる仕組みについて検討してみたい。

横スクロール？縦スクロール？

四コマ漫画のような漫画であれば、縦スクロールでいいかもしれないが、紙の漫画からの電子化では、やはり見開きの概念があるので、横スクロール（というかページ送り）が期待値にあう。

ページ送りは、スワイプ？タップ？

片手だとやりにくい。
タップだと方向が分かりにくいが、どっち方向にめくれたかが伝わる方法があればタップでいい。

ページ送りは、アニメーションする？しない？

eブックのページ送りはカクつく
アニメーションしないとページが送られたかどうかが分かりにくいので、カクつかないアニメーションを実装したい。

CSSアニメーション使う？使わない？

ページ送りなどのアニメーションは、CSSアニメーションを使うと滑らかに動作するが、対応ブラウザが限られる。CSSアニメーションを使わないJavaScriptアニメーションだとカクつく。ページを送るという操作は、電子書籍に置いては最も使われる操作。だからここだけはカクついちゃいけない。ここのレスポンスが悪いと「あれ？うまく操作できてない？もう一回やったほうがいい？」という感じになっちゃう。

ということでここでの結論

• 既存の漫画の移植を考えると、左右ページ送りが良さそう。
• ページがどっちにめくられたかが分かるようにページ送りは何らかのアニメーション（ただのスクロールアニメーションで十分。めくれるアニメーションはやり過ぎ）があった方がいい
• アニメーションはカクつきを防ぐために、CSSアニメーションを使った方がいい。
• ページ送りの操作は、タップにする。タップした後にどちらにページが送られたかを示すためにも、アニメーションは必要
• どの領域をタップしたら何が起こるかが分かるようにはしたい