電子書籍風Webアプリケーションを作るのに使えるJavaScriptライブラリまとめ

電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。

今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。

Laker compendium

動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。

Laker compendium – Designing digital publications in HTML5

Turn.js

ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。

blasten/turn.js: The page flip effect for HTML5

Monocle

ePubファイルではなく、HTMLベースの電子書籍を表示するソフトウェアです。ページをめくるようにスライドさせてページを変更できます。特にスマートフォンなどでコンテンツの可読性を上げるのに役立ってくれそうです。

joseph/Monocle: A silky, tactile browser-based ebook JavaScript library.

20thingsilearned

Webブラウザやインターネットの仕組みについて学べる絵本風電子書籍です。中身をカスタマイズすればでオリジナルの絵本を作成することもできるでしょう。ページ送り、目次、ページのサムネイル、共有など機能も十分に備わっています。

20thingsilearned

rePublish

ePubファイルを読み込んで表示するライブラリです。DRMには対応していないので注意してください。閲覧機能はあまりありませんが、Web上でePubファイルを読めるのはメリットが大きいでしょう。

blaine/rePublish: Pure-JavaScript ePub Reader

Treesaver.js

テキスト、画像、動画などを組み込んだ電子雑誌の作成できるフレームワークです。コンテンツは作成後、コンパイルして電子雑誌化するのが特徴となっています。ビューワーとしての機能もソーシャルサービスでの共有やインデックス、印刷など豊富です。

Treesaver/treesaver: JavaScript library for creating column and page-based layouts

Magaka

HTML/JavaScript/CSSを使った電子雑誌を作成するためのフレームワークです。ダブルタップで一覧を表示するという機能があります。テキストの場合はBRHTMLというHTMLの簡易記法を使います。

Magaka – Digital magazines with your face.

Epub.js

ePubファイル（DRMなし）を読み込んで表示します。文字サイズの変更、目次表示などができます。フォントも読み込まれるので表示はePubとさほど変わらないレベルで再現されます。

futurepress/epub.js: Enhanced eBooks in the browser.

BiB/i

電子書籍をWebサイトに埋め込んで表示するのに適したリーダーです。縦書きに対応しているのは貴重でしょう。マンガタイプのリーダーとして利用できます。

satorumurmur/bibi: BiB/i | EPUB Reader on your website.

BookBlock

絵本のような電子書籍向きのJavaScriptライブラリです。フリップ操作が気持ちよく感じられるはずです。電子書籍風に使うこともできますし、カルーセル表示もサポートしています。

codrops/BookBlock: A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

電子書籍にすればスマートフォンやタブレットでも可読性の高い形に仕上がります。社内ヘルプであったり、開発標準的なドキュメントもWebブラウザで読むより、電子書籍の形になっている方が扱いやすいのではないでしょうか。ぜひ使ってみてください。