制作現場で、電子ブックを維持費ゼロで作って欲しい、という案件がありました。
有料やプラグインで導入するならいくらでもあるけど、、、そのサイトはプラグインを結構入れていてこれ以上増やしたくない。
なら、もともと興味があったBibiを勉強ついでに導入してみよう！と手を出してみました。
もう、どこもこれでよくない？と思うほどよかったので、よかったら参考にしてくださいね。
まずはBibiのダウンロードとアップロード
Bibiの公式ページからファイルをダウンロードします。
「後方支援キット」は以前からのユーザー向けなので今から導入する人は気にしなくてOK。
ダウンロードできたら展開して、中に入っている２つのフォルダを新しいフォルダ（ebookとかcatalogとか英数字で）にコピーします。
フォルダ：bibi、bibi-bookshelf
あとは、サイト上の保存したい場所に新しいフォルダをまるごとアップロードします。
Bibiの設定はこれだけ。
次は電子ブックのファイル作り
ツールはAdobeの「inDesign」を使用します。
EPUB（３）ファイルを作成できるなら多分なんでもいけると思いますが
例としてAdobeStockからカタログのテンプレート、中の写真は写真ACから拝借しました。
１から作ってもいいけど、PDFファイルがもう手元にあるなら、それを変換することもできます（後述）。
１ページ表示にしたかったら「プロパティ」の「ドキュメント」で見開きページはチェックを外してくださいね。
「.epub」に書き出し
「ファイル」→「書き出し」
ファイル名：sample1（例）
ファイルの種類：EPUB（固定レイアウト）
※（リフロー可能）は小説など文字データのものにおすすめ。レイアウトが崩れると困るものは固定レイアウトにすること。
書き出し設定画面
以下の２つだけ設定しています。
変換設定：解像度72PPIにしています（私はあまり気になりません）
JPEGオプション：画質普通
.epubから.zipに変換
保存したファイルの場所を開いて、さっき保存した「.epub」ファイルの拡張子を「.zip」にします。
アップロードしたいフォルダにコピーする
「sample1」（名前はあとでWEBにアップするので英数字で）を作って、zip内に入っている
フォルダ：「META-INF」「OEBPS」
ファイル：「mimetype」
を新しいフォルダ内にコピーします。
あとはアップロード
サイト上にアップしたBibiのフォルダ「book-shelf」フォルダに↑で作った「sample1」フォルダ（zipじゃないよ）をアップロードします。
これで電子ブックをBibiで見ることができます。
※PDFファイルをinDesignに配置する方法
InDesignの「ウィンドウ」→「ユーティリティ」→「スクリプト」でスクリプトウィンドウを開きます。
「PlaceMultipagePDF.jsx」をダブルクリック。あとは自動で配置してくれます。
そのままだとサイズが合わない場合は
「ファイル」→「ドキュメント設定」
または
「プロパティ」→「ドキュメント」
でサイズを調整してください。
以降、書き出し方法は同じです。
アクセス方法
作成した電子ブックは
https://～bibiを保存したURL/bibi/?book=フォルダ名
でアクセスできます。
リンクを貼る場合
以下のコードを貼り付けてください。
<a href=”https://～bibiを保存したURL/bibi/?book=フォルダ名”>リンクしたい文字列</a>
ウェブ上に貼り付けたい場合
公式推奨のこちらのコードを貼り付けるだけでOK。
<a href=”https://～bibiを保存したURL/bibi/?book=page-blanche-bitmaps-in-spine” data-bibi=”embed” data-bibi-style=”width: 100%（お好きな幅）; height: 400px（お好きな高さ）;”>マイ・グレート・コミック</a><script src=”https://～bibiを保存したURL/bibi/and/jo.js”></script>
すると、こうなります。
width:100%、height:600px で作成。
目次について
ところで、Bibiビューアーの左上にある三本線アイコン。
こちらは目次を開くことができます。
きちんと作っていないと404ページが出ることになるので、こだわり派の人は作り込みましょう。
対象のファイルは各ブックデータのフォルダ内「OEBPS」の中にあります。
フォルダ各ページに対応している.xhtmlファイルをテキストエディタで開いて、目次に載せたい場所にidを付与して、toc.xhtmlファイルでリンクを作るだけです。
面倒な人はこう！
こちら、toc.xhtmlファイルの中身です。
PageListとLandmarks以降の<ol>～</ol>まで２箇所を消しちゃいましょう。
↑のサンプルも目次を消しています。
数ページの案件が多いもので特段必要ないんですが、今度目次の作り方を開設しますね。
まとめ
こんなに簡単に電子ブックが作れるとは。
目からウロコとはまさにこのことです。
Bibi公式サイトにもマニュアルがありますので、上記をご覧になったあとで覗いてみてください。
