BiB/i Custom Element Example

BiB/iを使った、EPUB表示用のカスタム要素です。e-bookタグを書くことで、HTML中でEPUBの本を表示することができます。

Web Componentsに対応しているブラウザー（今のところChromiumとChromeとOpera）で動作します。

インポート

HTML中（の上の方）で次の用にしてカスタム要素をインポートします。

<link href="//kitaitimakoto.github.io/bibi/bib/i/import.html" rel="import">

スタイル

サンプルに進む前に、次のスタイルを当てておきます。

<style>
  e-book {
    display: inline-block;
    width: 12em;
    height: 18em;
  }
</style>

単純な例

次のようにe-bookタグを書くだけで、EPUBを表示できるようになります。

<e-book src="bib/i/?book=kakekomiuttae">駈込み訴え</e-book>

参考までに、BiB/iのマニュアルに書いてあるやり方はこうです。srcでなくhrefを使っていました。

<a href="bib/i/?book=kakekomiuttae" data-bibi="embed">駈込み訴え</a><script src="bib/i.js"></script>

属性付きの例

BiB/iで使える、読み込み前の表示画像と自動再生（？）の指定も使えます。

元は

<a
  data-bibi-poster="path/to/poster.png"
  data-bibi-autostart="true"
  href="bib/i/?book=kakekomiuttae" data-bibi="embed">駈込み訴え</a><script src="bib/i.js"></script>

となっているところ、

<e-book
  poster="path/to/poster.png"
  autostart="true"
  src="bib/i/?book=kakekomiuttae">駈込み訴え</e-book>

と書いて同じことができます。data-bibi-の部分が不要になっています（以下の例では、実際には表紙画像を指定していません。自動再生だけです）。

元の方ではdata-bibi-styleを使って本の枠にスタイル（大きさの指定など）を当てることができましたが、それには対応していません。単に、e-book要素のstyle属性を使えばいいからです。

<e-book
  style="width: 24em; height: 18em; border: red solid thin;"
  src="bib/i/?book=kakekomiuttae">駈込み訴え</e-book>

JavaScriptでの処理

タグを書くのではなく、普通の要素のようにJavaScriptから要素を作ることもできます。

<script id="js1">
  (function() {
    var me = document.getElementById("js1");
    var eBook = document.createElement("e-book");
    eBook.src = "bib/i/?book=kakekomiuttae";
    me.parentNode.insertBefore(eBook, me);
  })();
</script>

コンストラクターも使えます。

<script id="js2">
  (function() {
    var me = document.getElementById("js2");
    var eBook = new HTMLEBookElement();
    eBook.src = "bib/i/?book=kakekomiuttae";
    me.parentNode.insertBefore(eBook, me);
  })();
</script>

srcは既に使っていますが、HTML属性に対応するプロパティを持っています。autostartを指定してみます。

<script id="js3">
  (function() {
    var me = document.getElementById("js3");
    var eBook = new HTMLEBookElement();
    eBook.src = "bib/i/?book=kakekomiuttae";
    eBook.autostart = "true";
    me.parentNode.insertBefore(eBook, me);
  })();
</script>

もちろん（？）あとから本を差し替えることもできます。

<p id="js4">
  <button><code>/bib/i/?book=kakekomiuttae</code>から<code>/bib/i/?book=kakekomiuttae.epub</code>に切り替えます</button><br>
（分かりにくくて済みません）<br>
  <e-book src="bib/i/?book=kakekomiuttae"></e-book>
</p>
<script>
  (function() {
    var eBook = document.querySelector("#js4 e-book");
    var button = document.querySelector("#js4 button");
    button.onclick = function() {
      eBook.src = "bib/i/?book=kakekomiuttae.epub";
    };
  })();
</script>

/bib/i/?book=kakekomiuttaeから/bib/i/?book=kakekomiuttae.epubに切り替えます
（分かりにくくて済みません）

読み込み時の処理

また、本（EPUBファイル）の読み込みが終了した時点での処理を書くことができます。

<p id="js5">
<button><code>src</code>を設定して本を読み込みます</button><br>
<e-book onload="alert('読み込みました。');"</e-book>
</p>
<script>
  (function() {
    var eBook = document.querySelector("#js5 e-book");
    var button = document.querySelector("#js5 button");
    button.onclick = function() {
      setTimeout(function() {
        eBook.src = "bib/i/?book=kakekomiuttae";
      }, 1000);
    };
  })();
</script>

srcを設定して本を読み込みます

onloadじゃなくてaddEventListnerでも大丈夫です。

<p id="js6">
<button><code>src</code>を設定して本を読み込みます</button><br>
（ブラウザーのコンソールも覗いてみてください。）<br>
<e-book></e-book>
</p>
<script>
  (function() {
    var eBook = document.querySelector("#js6 e-book");
    var button = document.querySelector("#js6 button");
    eBook.addEventListener("load", function(event) {
      console.log(event);
      alert("読み込みました。");
    });
    button.onclick = function() {
      setTimeout(function() {
        eBook.autostart = "true";
        eBook.src = "bib/i/?book=kakekomiuttae";
      }, 1000);
    };
  })();
</script>

srcを設定して本を読み込みます
（ブラウザーのコンソールも覗いてみてください。）