CTO・クマイ とあるサイトでEPUB形式でのコンテンツ掲載を検討することになり、WordPress 用のプラグインを探したのですが、WordPressコンテンツを EPUB 形式で保存するものばかりでした。プラグインにこだわらずに探していたら「BiB/i」を発見し、使ってみたら結構よかったので紹介します。
BiB/i についての詳細は公式サイトをご覧ください。
デモ
BiB/i公式サイトの Demo と同様、EPUB3 Sample Documents の EPUBファイルを使用しました。ライセンスは CC-BY-SA 3.0 です。
デモ 1
上記サンプルは、EPUBファイルを展開した状態でサーバーに置いたものを指定しています。
各種設定のデフォルト値は、/bib/i/presets フォルダの default.js で設定できますが、 ページに埋め込むアンカータグに data-bibi-* 属性値を付けて指定することもできます。上記サンプルでは、アンカータグに下記の属性を付けて、常にページ内に埋め込んだ状態で表示するように設定しています。
data-bibi-start-in-new-window="no"
ちなみに、data-bibi-start-in-new-window="desktop" にすればパソコンのみウィンドウ表示、data-bibi-start-in-new-window="mobile" にすればモバイルデバイスのみウィンドウ表示にできます。
デモ 2
次は、EPUBファイルを展開せずにそのまま置いて指定した例です。
2018/3/09: 下記デモがなぜか Chrome で動かなくなりました。現在、原因究明中です。
2018/3/20: [追記] どうやら Chrome 65 になってから動かなくなったようです。
2018/3/26: facebookグループのBiB/iフォーラムで開発者の松島さんにご報告
2018/4/03: 問題を解消した v0.999.9-r8 リリース。松島さん、ありがとうございます!!
ダウンロードしたEPUBファイルをローカルデバイス上で展開する処理が必要になるので、ページが表示されるまでに (デモ1よりも) 少し余計に時間がかかります。このサンプルで使った EPUBファイルは、ファイルサイズ260KB、ファイル数22程度なので大したことはありませんが、ファイルサイズが大きかったり、含まれるファイル数が多かったりすると、「重さ」を感じるようになってきます。もちろん、デバイスの性能にも依りますが。
ダウンロードして展開するまでは中のページを表示できないので、デモ1と違ってカバーページの表示がありません。
ブラウザ互換性
BiB/i は javascript で書かれていて、ローカルデバイスのWebブラウザ内で動作するので、挙動はブラウザに依存します。あまり古いブラウザだと動きません。
パソコンの場合は、主要なモダンブラウザの最新版と IE11 で動作するので、問題ないでしょう。
また、手持ちのモバイルデバイスのいくつかで試してみたところ、iOS は、iOS7 や iOS8 のモバイルSafariでは動作しませんでしたが、iOS9 以上なら大丈夫でした。Android は、4.1 の Chrome では動作せず、5.1.1 では OK でした。
以上のことから、ほぼ問題ないといえるでしょう。
