Kindleみたいな電子書籍が作れてしまうBibiの使い方【備忘録】
どうも！デジタルマーケッターのジュンイチです。
Ebookや電子書籍ってマーケティングの無料オファーによく使えるんですけど、ただのPDFファイルじゃなくて、Kindleのような電子書籍が作れたらもっと特別感がでて感動するかなと思って。
色々調べたりして、以下のような電子書籍が作れるようになったので、そのやり方を自分のための備忘録としてメモしておく！
完成サンプル
以下のURLから電子書籍のサンプルにアクセスできます。
⇒https://dejima-labo.com/bibi/?book=ebook
また、こんな風に埋め込むこともできる！
↓
必要なもの
- 電子書籍にしたいPDFファイル
- Adobe Indesign
- Bibi（ EPUB リーダー）
電子書籍の作り方
Bibiという電子書籍をWebブラウザで読むことができるツールを使います。これがなんと無料…。製作者さんありがとうございます。
このBibiの使い方をもとに、以下に手順をザーッとまとめました。
ブラウザで見れる電子書籍の作り方
大手順１
PDFファイルを用意
↓
Indesignの「ウィンドウ」⇒「ユーティリティ」⇒「スクリプト」⇒「Samples」⇒「Javascript」⇒「PlaceMultipagePDF」をダブルクリック⇒対象のPDFを選択
↓
取り込みが終わったら右の方の「プロパティ」で「見開き」のチェックを外す
（もしくは、ファイル⇒ドキュメント設定で見開きのチェックを外す）
↓
Indesign「ファイル」⇒「書き出し」⇒ファイルの種類を「EPUB(固定レイアウト）(*.epub)⇒「一般」の設定はそのままでOK⇒「変換設定」は形式を「自動」、解像度は「96」PPIに。（これで十分キレイ）⇒OKで書き出し
↓
書き出しが終わったファイルは「～～.epub」という形式のファイルとして保存される
（例： ebook.epub）
↓
ただし、この.epubという形式は一旦拡張子をzipに変更。
（例：ebook.zip)
↓
.zipに変更すると、中身に２つのフォルダ＋１つのファイルが入っている。その３つをコピー。
(META-INFフォルダ、OEBPSフォルダ、mimetypeファイル）
↓
新しいフォルダ（なんでもOKだが半角英数字）を作成してその中に３つを放り込む。
↓
（例：ebook ←META-INFフォルダ、OEBPSフォルダ、mimetypeファイルを入れる）
大手順２
Bib/iを公式サイトからDL。
⇒公式サイトhttps://bibi.epub.link/
↓
ダウンロードしたZipファイルを展開。
中身の「bibi-バージョン」を更に開いて出てきた
「bib」フォルダ
「bibi-bookshelf」フォルダ
の２点をフォルダごとFTPソフトなどで、サイトにアップロード。
・dejima-labo.com/public_html/bibi/
・dejima-labo.com/public_html/bibi-bookshelf/
となる感じ。
↓
bookshelfフォルダの中に、先程作った ebookのフォルダを放り込む
（例：dejima-labo.com/public_html/bookshelf/ebook）となるように
↓
あとは、
https://dejima-labo.com/bibi/?book=アップロードしたフォルダ名
でアクセスすれば、Ebookが閲覧できる。
（例 https://dejima-labo.com/bibi/?book=ebook）
埋め込むには？
↓ こんな感じで、Bibiをアップロードした場所とかに合わせて記載するとWebサイトに埋め込める。
<a href="https://dejima-labo.com/bibi/?book=ebook" data-bibi="embed" data-bibi-style="width: 100%; height: 400px;">サンプル電子書籍</a><script src="https://dejima-labo.com/bibi/and/jo.js"></script>まとめ
Bibi製作者さんに感謝！
デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう！
＼ Kindleで売れ筋トップ獲得本 ／
GA4超入門ガイドブック
プレゼント！
