ウェブデザイナーの松島智さんが、ブラウザ上でEPUBをサイト訪問者に見せられるツール「BiB/i（ビビ）」を個人製作・オープンソース・無償のソフトウェアとして公開されています。
ボクもこれを利用させて頂き、「これもうきっとGoogle+ガイドブック」の立ち読み版をこのブログで公開しています。上の［My Books List］タブです。
ウェブへの設置は、基本的にファイル一式をアップロードし、設置したい場所にコードを1行書くだけです。ただ、ブログに設置をしようと思うと、意外と手こずるかもしれません。ボクがどうやっているかを、備忘録兼ねてエントリーにしておきます。
ブログへ設置する場合のハードル
ブログへ設置する場合には、2つハードルがあります。
- 設置しようと思っている場所が JavaScript に対応していること
- ファイルをフォルダごとアップロードして参照できる場所があること
無料ブログでこの両方の条件を満たしているのは、livedoorブログくらいのようです（ボク自身は試していません）。まずそもそも無料ブログだと、記事本文に JavaScript が使えるところが非常に少ないのです。
Bloggerの場合 JavaScript には対応してますが、「フォルダごとアップロード」という条件が引っかかります。外部に置いて参照するしかありません。GoogleドライブやGoogleサイトで試してみましたがうまくいかなかったので、Dropboxの［Public］フォルダを使いました。ftpでアップロードできる場所を持っていれば、その方がラクかも。
Dropboxの［Public］フォルダへBiB/iをアップロード
Dropboxには、外部から誰でも参照できる Publicフォルダという機能があります。以前は、Dropboxのアカウントを作成すると、このフォルダが自動的に用意されていたようです。ない場合は自分で［Public］という名称のフォルダを作成すると、自動的に誰でも参照できるフォルダに変わります。［共有］フォルダや［リンク］機能ではダメなのでご注意下さい。
フォルダに地球のマークが付いていますね。ここにアップロードしたファイルは、URLさえ知っていれば誰でも参照ができるようになります。ここへ、BiB/iのサイトからダウンロードしたZIPを解凍し、生成されたファイル一式をフォルダごとアップロードします。
EPUBを展開してアップロード
次に、サイトで閲覧させたいEPUBを、Dropboxの［Public］フォルダの［bibi］-［bib］-［bookshelf］フォルダへアップロードします。
ただ、EPUBをそのままBiB/iで表示すると動作が重くなるので、フォルダを展開してアップロードした方がいいようです。拡張子.epubを.zipへ変更して解凍し、生成されたフォルダごとアップロードしましょう。
BiB/i 本体のURLを取得
次に、［bibi］-［bib］-［i］フォルダへ移動します。
index.html を右クリックし、［公開リンクをコピー］を選択します。
すると、BiB/i 本体のURLが取得できます。
サイトへコードを記述
取得したURLを使い、サイトの設置したい場所に下記のようなコードを記述します。index.htmlの後ろで［?book=展開したEPUBのフォルダ名］という形で指定をするのと、同じURLを使ってJavaScript［i.js］を呼び出すようにするところがポイントです。
<a href=”https://dl.dropboxusercontent.com/u/71885212/bibi/bib/i/index.html?book=GooglePlusGuide01sample” data-bibi=”embed” data-bibi-style=”border: solid 1px rgb(216,216,216); padding: 1px; width: 100%; height: 480px;”>「これもうきっとGoogle+ガイドブック 1.導入編」サンプル</a><script src=”https://dl.dropboxusercontent.com/u/71885212/bibi/bib/i.js“></script>
data-bibi-style=”border: solid 1px rgb(216,216,216); padding: 1px; width: 100%; height: 480px;” の辺りは、サイトのデザインに合わせて変更して下さい。実際に設置をすると、このような表示になります。
「これもうきっとGoogle+ガイドブック 1.導入編」サンプル
また、縦書きEPUBの場合、このような表示になります。
これは、青空文庫で公開されている、宮沢賢治の「銀河鉄道の夜」をEPUB化したものです。死後50年を経過して、著作権切れ（パブリックドメイン）になっています。
ビビさんのこと
実は「BiB/i」は、架空の女の子“ビビさん”を想定したプロジェクトで、イメージイラスト大募集中だそうです。サイトの下の方に、松島さんが考えたビビさんの設定リンクがありましたので、ここでも紹介しておきます。
外見的な特徴は「髪の毛はごくゆるくカーヴしてるのをそのまま背中まで伸ばして」くらいでしょうか。目は悪いけれどメガネっ娘ではなく持ち歩いているそうです。
