デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

Kindleみたいな電子書籍が作れてしまうBibiの使い方【備忘録】

  
Bibi
\ この記事を共有 /
Kindleみたいな電子書籍が作れてしまうBibiの使い方【備忘録】

どうも!デジタルマーケッターのジュンイチです。

Ebookや電子書籍ってマーケティングの無料オファーによく使えるんですけど、ただのPDFファイルじゃなくて、Kindleのような電子書籍が作れたらもっと特別感がでて感動するかなと思って。

色々調べたりして、以下のような電子書籍が作れるようになったので、そのやり方を自分のための備忘録としてメモしておく!

完成サンプル

以下のURLから電子書籍のサンプルにアクセスできます。
https://dejima-labo.com/bibi/?book=ebook

また、こんな風に埋め込むこともできる!

サンプル電子書籍

必要なもの

  • 電子書籍にしたいPDFファイル
  • Adobe Indesign
  • Bibi( EPUB リーダー)

電子書籍の作り方

Bibiという電子書籍をWebブラウザで読むことができるツールを使います。これがなんと無料…。製作者さんありがとうございます。

Bibiの公式サイトはこちら

このBibiの使い方をもとに、以下に手順をザーッとまとめました。

ブラウザで見れる電子書籍の作り方

大手順1

PDFファイルを用意

Indesignの「ウィンドウ」⇒「ユーティリティ」⇒「スクリプト」⇒「Samples」⇒「Javascript」⇒「PlaceMultipagePDF」をダブルクリック⇒対象のPDFを選択

取り込みが終わったら右の方の「プロパティ」で「見開き」のチェックを外す
(もしくは、ファイル⇒ドキュメント設定で見開きのチェックを外す)

Indesign「ファイル」⇒「書き出し」⇒ファイルの種類を「EPUB(固定レイアウト)(*.epub)⇒「一般」の設定はそのままでOK⇒「変換設定」は形式を「自動」、解像度は「96」PPIに。(これで十分キレイ)⇒OKで書き出し

書き出しが終わったファイルは「~~.epub」という形式のファイルとして保存される
(例: ebook.epub)

ただし、この.epubという形式は一旦拡張子をzipに変更。
(例:ebook.zip)

.zipに変更すると、中身に2つのフォルダ+1つのファイルが入っている。その3つをコピー。
(META-INFフォルダ、OEBPSフォルダ、mimetypeファイル)

新しいフォルダ(なんでもOKだが半角英数字)を作成してその中に3つを放り込む。

(例:ebook ←META-INFフォルダ、OEBPSフォルダ、mimetypeファイルを入れる)

大手順2

Bib/iを公式サイトからDL。
⇒公式サイトhttps://bibi.epub.link/

ダウンロードしたZipファイルを展開。
中身の「bibi-バージョン」を更に開いて出てきた
「bib」フォルダ
「bibi-bookshelf」フォルダ
の2点をフォルダごと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超入門ガイドブック

プレゼント!

表紙