1. 製品
  2.   電子書籍
  3.   JavaScript
  4.   Epub.js
 
  

EPUB ドキュメント レンダリング用の無料 JavaScript ライブラリ

ブラウザや他のデバイスで EPUB ドキュメントにアクセスしてレンダリングするためのオープン ソース JavaScript ライブラリ。

ブラウザ内だけでなく、他の多くのデバイスでも EPUB ドキュメントをレンダリングできる、使いやすいライブラリを探しています。 Epub.js は非常に強力なオープン ソースの JavaScript ライブラリであり、プログラマーやアプリケーションがブラウザーで簡単に EPUB ドキュメントにアクセスしてレンダリングできるようにします。 EPUB は、出版社と消費者に広く使用されている非常に人気のある電子書籍ファイル形式です。インターネット世界の多くの電子書籍リーダーやソフトウェア アプリケーションでサポートされており、他の多くの形式 (PDF、Mobi、iBooks など) に変換できます。

Epub.js は、レンダリング、永続化、ページ付けなどの一般的な eBook 機能のインターフェイスを提供するため、eBook の処理に非常に役立ちます。デフォルト メソッドでは一度に 1 つのセクションしか表示されないなど、重要なレンダリング メソッドがいくつかあります。連続マネージャーを使用して、画面いっぱいに必要な数のセクションを表示し、次のセクションを画面外にプリロードできます。フロー オーバーライド セクションは OPF の設定に基づいており、デフォルトではページ分割されています。

ライブラリには、EPUB ドキュメント全体の検索、現在の章の検索、スワイプによるページめくり、場所の生成と保存、矢印キーによるページめくりなど、EPUB ドキュメントを操作するための重要な機能がいくつか含まれています。

Previous Next

Epub.js を使ってみる

Epub.js は npm で入手できます。まず node.js をインストールする必要があります。次に Epub.js をマシンにインストールできます。スムーズなインストールのために、次のコマンドを使用してください。

npm 経由で Epub.js をインストールする

 npm install

手動でインストールすることもできます。最新のリリース ファイルを GitHub リポジトリから直接ダウンロードします。

JavaScript を介してさまざまな方法で EPUB ドキュメントをレンダリングする

オープン ソースの Epub.js ライブラリにより、ソフトウェア プログラマーは独自の JavaScript アプリケーション内でさまざまな方法で EPUB ドキュメントをレンダリングできます。このライブラリは、デフォルトと連続を含む 2 つの異なるレンダリング方法を提供します。デフォルトのレンダリング方法を使用して、一度に 1 つのセクションを表示できます。一方、連続モードは、必要に応じて複数のセクションを表示し、次のセクションを画面外にプリロードするために使用できます。

Java ライブラリを介してさまざまな方法で EPUB ドキュメントをレンダリングする


// Default Rendering
book.renderTo("area", { method: "default", width: "100%", height: "100%" });
// Continuous Rendering
book.renderTo("area", { method: "continuous", width: "100%", height: "100%" });
//Flow Overrides Paginated
book.renderTo("area", { flow: "paginated", width: "900", height: "600" });
//Scrolled: 
book.renderTo("area", { flow: "scrolled-doc" });

JavaScript アプリで EPUB ドキュメントにフックを適用する

Epub.js ライブラリには、プラグインに似た非常に便利な機能が含まれており、本のコンテンツとやり取りしたり操作したりできます。ライブラリは、簡単にフックできるイベントを実装しています。たとえば、ユーザーは、注釈を実装したりチャプターのコンテンツを表示したりする前に、YouTube リンクからビデオを直接読み込むことができます。フックには登録するイベントが必要であり、終了するまでブロックする promise を返すことができます。

Java API を介して YouTube リンクから動画を読み込む方法

  rendition.hooks.content.register(function(contents, view) {
    var elements = contents.document.querySelectorAll('[video]');
    var items = Array.prototype.slice.call(elements);
    items.forEach(function(item){
      // do something with the video item
    });
})

JavaScript による EPUB ドキュメントの操作

オープン ソースの Epub.js は、新しい EPUB ドキュメントを作成し、数行の JavaScript コードでそれを操作するための完全な機能を提供しています。拡張子が .epub のファイルは、eBook に関する多数の HTML、画像、およびメタデータを含む単なる zip ファイルです。このライブラリでは、ドキュメントのスタイルを設定するためのカスタム CSS とフォントを指定できます。本全体を検索したり、現在の章を検索したり、スワイプしてページをめくったり、場所を生成して保存したりするためのいくつかの重要な機能を提供します。

Java API を使用して EPUB ドキュメントでスワイプしてページをめくる

 rendition.on("displayed", event => {
    let start = null;
    let end = null;
    const el = event.document.documentElement;
    el.addEventListener('touchstart', event => {
        start = event.changedTouches[0];
    });
    el.addEventListener('touchend', event => {
        end = event.changedTouches[0];
        let hr = (end.screenX - start.screenX) / el.getBoundingClientRect().width;
        let vr = (end.screenY - start.screenY) / el.getBoundingClientRect().height;
        if (hr > vr && hr > 0.25) return rendition.prev();
        if (hr < vr && hr < -0.25) return rendition.next();
        if (vr > hr && vr > 0.25) return;
        if (vr < hr && vr < -0.25) return;
    });
});
 日本