01 ファイルの構造

ダウンロードした ZIP ファイルを展開(解凍)した中身は次のようになっています。

bib/
※後方互換キットのみに含まれています
i/index.html
旧来の URL で書籍を公開したいときに設置します
i.js
旧来の埋め込みタグのままで埋め込みたいときに設置します
bibi/
本体です。
and/jo.js
ウェブページへの埋め込みに使用します
extensions/
機能拡張ファイルが入っています(中身は割愛)
index.html
これをブラウザで表示して使います
presets/default.js
編集で動作のカスタマイズが可能なプリセットファイル
resources/
Bibi 本体のプログラムなどがまとめられています(中身は割愛)
wardrobe/
外観テーマファイル「ドレス」が含まれています(今回は説明を省略します)
bibi-bookshelf/
ダウンロード時は空っぽの、書籍保存先フォルダです。ウェブ公開したい EPUB をここに入れます。

02 パソコンの中で使う

  1. ダウンロードしてきたファイルを展開(解凍)してください。
  2. パソコンの中で使う場合は、bibi/index.html をブラウザで開いてください。
  3. お持ちの EPUB ファイルをウィンドウ内にドラッグ&ドロップするか、画面上をクリック/タップしてコンピュータの中から EPUB を選択すると、その EPUB を表示します。

03 ウェブに公開する(書籍を、あるいはビューワを)

  1. 上記、パソコンの中での使用方法と同様に、ダウンロードしてきたファイルを展開(解凍)してください
  2. bibi フォルダと bibi-bookshelf フォルダを、そのままお好きな場所にアップロードしてください。
  3. たとえば http://your.web.site/somewhere に bibi フォルダをアップロードしたとします。その場合は、ブラウザで http://your.web.site/somewhere/bibi/ にアクセスすれば、パソコンの中で開いたのと同様に扱えます。
  4. 公開したい EPUB は、bibi-bookshelf フォルダに入れます。そしてブラウザで http://your.web.site/somewhere/bibi/?book=ファイル名.epub にアクセスすると、その EPUB がビビで表示されます。
  5. EPUB ファイルをそのままアップロードして Bibi で開くと、動作が低速になる場合があります。そのときは、EPUB にする前のフォルダ、または EPUB を ZIP 展開してできるフォルダをアップロードし、 http://your.web.site/somewhere/bibi/?book=フォルダ名 にアクセスしてみてください。
  • ?book=**** をつけずにアクセスすると、オンラインに設置してユーザのローカルに保存された EPUB ビューワを開くためのビューワとして動作します。

04 ウェブページに埋め込む

  1. 上で説明した http://your.web.site/somewhere/bibi/?book=フォルダ名 形式の URL を使用します。
  2. 次の書式のタグを、お好きなところに貼り付けてください。
    <a href="http://your.web.site/somewhere/bibi/?book=フォルダ名" data-bibi="embed" data-bibi-style="埋め込まれたビビに適用したいCSS">本の名前</a><script src="http://your.web.site/somewhere/bibi/and/jo.js"></script>
  • たとえばこんなふうになります。
    <a href="http://your.web.site/somewhere/bibi/?book=page-blanche-bitmaps-in-spine" data-bibi="embed" data-bibi-style="width: 100%; height: 400px;">マイ・グレート・コミック</a><script src="http://your.web.site/somewhere/bibi/and/jo.js"></script>
  • data-bibi-style の width と height だけを変更すれば、多くの場合、ウェブページにあわせて設置できると思います。