2013年7月11日木曜日

ブラウザ上でEPUBをサイト訪問者に見せられるツール「BiB/i(ビビ)」をブログに設置してみた

※これは画像です

ウェブデザイナーの松島智さんが、ブラウザ上でEPUBをサイト訪問者に見せられるツール「BiB/i(ビビ)」を個人製作・オープンソース・無償のソフトウェアとして公開されています。


ボクもこれを利用させて頂き、「これもうきっとGoogle+ガイドブック」の立ち読み版をこのブログで公開しています。上の[My Books List]タブです。

ウェブへの設置は、基本的にファイル一式をアップロードし、設置したい場所にコードを1行書くだけです。ただ、ブログに設置をしようと思うと、意外と手こずるかもしれません。ボクがどうやっているかを、備忘録兼ねてエントリーにしておきます。



ブログへ設置する場合のハードル


ブログへ設置する場合には、2つハードルがあります。

  • 設置しようと思っている場所が JavaScript に対応していること
  • ファイルをフォルダごとアップロードして参照できる場所があること

無料ブログでこの両方の条件を満たしているのは、livedoorブログくらいのようです(ボク自身は試していません)。まずそもそも無料ブログだと、記事本文に JavaScript が使えるところが非常に少ないのです。

Bloggerの場合 JavaScript には対応してますが、「フォルダごとアップロード」という条件が引っかかります。外部に置いて参照するしかありません。GoogleドライブGoogleサイトで試してみましたがうまくいかなかったので、Dropboxの[Public]フォルダを使いました。ftpでアップロードできる場所を持っていれば、その方がラクかも。


Dropboxの[Public]フォルダへBiB/iをアップロード


Dropboxには、外部から誰でも参照できる Publicフォルダという機能があります。以前は、Dropboxのアカウントを作成すると、このフォルダが自動的に用意されていたようです。ない場合は自分で[Public]という名称のフォルダを作成すると、自動的に誰でも参照できるフォルダに変わります。[共有]フォルダや[リンク]機能ではダメなのでご注意下さい。


フォルダに地球のマークが付いていますね。ここにアップロードしたファイルは、URLさえ知っていれば誰でも参照ができるようになります。ここへ、BiB/iのサイトからダウンロードしたZIPを解凍し、生成されたファイル一式をフォルダごとアップロードします。


EPUBを展開してアップロード


次に、サイトで閲覧させたいEPUBを、Dropboxの[Public]フォルダの[bibi]-[bib]-[bookshelf]フォルダへアップロードします。


ただ、EPUBをそのままBiB/iで表示すると動作が重くなるので、フォルダを展開してアップロードした方がいいようです。拡張子.epubを.zipへ変更して解凍し、生成されたフォルダごとアップロードしましょう。


BiB/i 本体のURLを取得


次に、[bibi]-[bib]-[i]フォルダへ移動します。


index.html を右クリックし、[公開リンクをコピー]を選択します。


すると、BiB/i 本体のURLが取得できます。


サイトへコードを記述


取得したURLを使い、サイトの設置したい場所に下記のようなコードを記述します。index.htmlの後ろで[?book=展開したEPUBのフォルダ名]という形で指定をするのと、同じURLを使ってJavaScript[i.js]を呼び出すようにするところがポイントです。

<a href="https://dl.dropboxusercontent.com/u/71885212/bibi/bib/i/index.html?book=GooglePlusGuide01sample" data-bibi="embed" data-bibi-style="border: solid 1px rgb(216,216,216); padding: 1px; width: 100%; height: 480px;">「これもうきっとGoogle+ガイドブック 1.導入編」サンプル</a><script src="https://dl.dropboxusercontent.com/u/71885212/bibi/bib/i.js"></script>

data-bibi-style="border: solid 1px rgb(216,216,216); padding: 1px; width: 100%; height: 480px;" の辺りは、サイトのデザインに合わせて変更して下さい。実際に設置をすると、このような表示になります。

「これもうきっとGoogle+ガイドブック 1.導入編」サンプル


また、縦書きEPUBの場合、このような表示になります。

宮沢賢治の「銀河鉄道の夜」青空文庫版

これは、青空文庫で公開されている、宮沢賢治の「銀河鉄道の夜」をEPUB化したものです。死後50年を経過して、著作権切れ(パブリックドメイン)になっています。


ビビさんのこと


実は「BiB/i」は、架空の女の子“ビビさん”を想定したプロジェクトで、イメージイラスト大募集中だそうです。サイトの下の方に、松島さんが考えたビビさんの設定リンクがありましたので、ここでも紹介しておきます。


外見的な特徴は「髪の毛はごくゆるくカーヴしてるのをそのまま背中まで伸ばして」くらいでしょうか。目は悪いけれどメガネっ娘ではなく持ち歩いているそうです。

週間人気投稿

月間人気投稿