Bibi 設置マニュアル
（暫定版・2020/01/03）
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 パソコンの中で使う
- ダウンロードしてきたファイルを展開（解凍）してください。
- パソコンの中で使う場合は、
bibi/index.htmlをブラウザで開いてください。 - お持ちの EPUB ファイルをウィンドウ内にドラッグ＆ドロップするか、画面上をクリック／タップしてコンピュータの中から EPUB を選択すると、その EPUB を表示します。
03 ウェブに公開する（書籍を、あるいはビューワを）
- 上記、パソコンの中での使用方法と同様に、ダウンロードしてきたファイルを展開（解凍）してください
- bibi フォルダと bibi-bookshelf フォルダを、そのままお好きな場所にアップロードしてください。
- たとえば
http://your.web.site/somewhereに bibi フォルダをアップロードしたとします。その場合は、ブラウザでhttp://your.web.site/somewhere/bibi/にアクセスすれば、パソコンの中で開いたのと同様に扱えます。 - 公開したい EPUB は、bibi-bookshelf フォルダに入れます。そしてブラウザで
http://your.web.site/somewhere/bibi/?book=ファイル名.epubにアクセスすると、その EPUB がビビで表示されます。 - EPUB ファイルをそのままアップロードして Bibi で開くと、動作が低速になる場合があります。そのときは、EPUB にする前のフォルダ、または EPUB を ZIP 展開してできるフォルダをアップロードし、
http://your.web.site/somewhere/bibi/?book=フォルダ名にアクセスしてみてください。
?book=****をつけずにアクセスすると、オンラインに設置してユーザのローカルに保存された EPUB ビューワを開くためのビューワとして動作します。
04 ウェブページに埋め込む
- 上で説明した
http://your.web.site/somewhere/bibi/?book=フォルダ名形式の URL を使用します。 - 次の書式のタグを、お好きなところに貼り付けてください。
<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 だけを変更すれば、多くの場合、ウェブページにあわせて設置できると思います。