HTML5/JavaScriptによる電子書籍風フリップアニメーション「Turn.js」
Turn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(BSD License)です。
電子書籍というとePubファイルが有名ですが、HTML5でも実現は可能です。特に紙をめくった時のようなフリップアニメーションが欲しい時にはTurn.jsを使ってみましょう。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.47.26.1379904792.png)
デモです。幾つかのサンプル書籍が掲載されています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.47.35.1379904799.png)
開きました。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.47.48.1379904810.png)
フリップしています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.48.00.1379904818.png)
別な書籍。マウスをもっていくと端が折れ曲がります。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.48.42.1379904826.png)
こんな感じで斬新な表示も。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.48.58.1379904836.png)
マガジン風の使い方もできます。
Turn.jsではめくる操作はもちろんのこと、拡大表示もサポートされています。デスクトップブラウザはもちろん、iPhone/iPadによる操作も可能です。コンテンツはAjaxによる動的取得にも対応しています。一部HTML5非対応ブラウザでも使えるようになっており、対応ブラウザはIE8からとなっています。
MOONGIFTはこう見る
電子書籍は有料コンテンツがまだまだ多いですが、将来的に可能性があるのは無料コンテンツだと思っています。特に既存のWebサイトなどが電子書籍化すれば一気にコンテンツはふくれあがります。Flipboardはその筆頭だと思われます。既にデジタル化されているものを加工して取り込む方が効率的です。
コンテンツはWeb、ビューワーはTurn.jsなど既に必要な道具は揃ってきています。後は例えばWordPressプラグインによってブログをマガジン化したり、任意のフィードをマガジン化できればWebの楽しみ方は大きく変わってきます。どんなサイトでもマガジンにしてしまうブラウザなんてのも良いかも知れませんね。