bookreader
v5.0.0-83
Internet Archive BookReader は、Internet Archive の書籍をオンラインで表示するために使用されます。また、他の書籍を表示するためにも使用できます。
実際の例を参照してください。
詳細ページ: https://archive.org/details/birdbookillustra00reedrich
フルウィンドウ: https://archive.org/details/birdbookillustra00reedrich?view=theater
iFrame の埋め込み URL: https://archive.org/embed/birdbookillustra00reedrich
BookReaderDemoディレクトリを参照してください。これらは、ソース ファイルをビルドすることでテストできます (Node.js がインストールされていることを確認してください)。
npm ビルドを実行する
そして、ルート ディレクトリで単純な Web サーバーを起動します。
npm run serve
次に、 http://localhost:8000/BookReaderDemo/demo-simple.htmlを開きます。
以下に短い例を示します。
// BookReader オブジェクトを作成しますvar options = {
データ: [[ { 幅: 800, 高さ: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { 幅: 800, 高さ: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, { 幅: 800、高さ: 1200、uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { 幅: 800, 高さ: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, { 幅: 800、高さ: 1200、uri: '//archive.org/download/BookReader/img/page005.jpg' },]
]、
bookTitle: 'Simple BookReader プレゼンテーション',
// サムネイルはオプションですが、情報ダイアログで使用されます
サムネイル: '//archive.org/download/BookReader/img/page014.jpg',
// メタデータはオプションですが、情報ダイアログで使用されます
メタデータ: [{ラベル: 'タイトル', 値: 'Open Library BookReader プレゼンテーション'},{ラベル: '著者', 値: 'インターネット アーカイブ'},{ラベル: 'デモ情報', 値: 'このデモは、 BookReader を独自のコンテンツで使用することもできます。'},
]、
ui: 'full', // 埋め込み、フル (レスポンシブ)};var br = new BookReader(options);// 始めましょう!br.init();BookReader は v5 以降、jQuery で記述されたコア コードを Web コンポーネントとしての進化に近づけるハイブリッド アーキテクチャを導入しています。 Web コンポーネントとして BookReader の将来に向けて前進する中で、私たちは 2 つを結び付けるためにイベント ドリブンのアプローチを採用しています。
アプローチ：
イベント駆動型
UIの変更
API の戻り値
コアイベント src/BookReader/events.js
検索 API src/BookReader/events.js
BookReader (BR) のコア コードはカスタム イベントを発行し、実行されるアクションを報告します。
BR の Web コンポーネント コントローラーである BookNavigator は、サイド メニュー パネルにデータを入力するために、これらのイベントをリッスンして反応します。
パブリックメソッドを使用して外部からBRを制御する
UI を描画/計算ロジックから切り離し続けると、これらの論理メソッドを見つけやすくなり、パブリック メソッドとして呼び出したり、単体テストを作成したりできるようになります。
BookNavigator が BR のイベントに反応すると、BookNavigator はパブリック関数を使用して BR コアを直接制御できます。
BookReader のサイド ナビゲーションは、LitElement フレーバーの Web コンポーネントによって強化されています。
BookReader の中核機能は jQuery にあります。これには以下が含まれます:
本の描画とサイズ変更、およびさまざまなモード (1up、2 ページ見開き、ギャラリー ビュー)
水平方向のナビゲーション
検索APIサービス
プラグイン
コア機能の使用/拡張方法の概要:
プロパティ
TODO (現時点では src/BookReader/options.js を参照)
プラグイン
plugin.autoplay.js - 自動再生モード。設定した間隔でページをめくります。
plugin.chapters.js - チャプターマーカーをレンダリングする
plugin.search.js - 検索 UI とコールバックを追加します
plugin.tts.js - tts (読み上げ) UI、サウンド ライブラリ、およびコールバックを追加します。
plugin.url.js - ブラウザの URL を自動的に更新します
plugin.resume.js - Cookie を使用して現在のページを記憶します
plugin.vendor-fullscreen.js - フルスクリーン モードをベンダー ネイティブのフルスクリーンに置き換えます
現在のプラグイン ファイルについては、プラグイン ディレクトリを参照してください。
基本的なプラグイン システムが使用されます。 plugins ディレクトリ内の例を参照してください。一般的な考え方は、これらは BookReader プロトタイプを拡張するミックスインであるということです。含まれているすべてのプラグインについては、プラグイン ディレクトリを参照してください。ただし、いくつかの例を次に示します。
BookReader は<iframe>内に埋め込むことができます。 <iframe>内で IFrame プラグインを使用すると、リーダーはwindow.postMessage()経由でリーダーの状態の変化に関する通知を送信します。親ウィンドウは独自のメッセージを ( window.postMessage()経由でも) 送信でき、IFrame プラグインは一致するリーダーの更新を処理します。
フラグメント変更メッセージは、埋め込まれた BookReader がページ/モード間を移動するときに親ウィンドウに送信されます。 <iframe>このメッセージを受信すると、指定されたページ/モードに移動します。 「フラグメント」は、BookReader URL 仕様に従ってフォーマットされます。
{ "タイプ": "bookReaderFragmentChange", "フラグメント": "page/n1/mode/2up"}(アップデート?)
ソース JavaScript は ES6 ( src/jsディレクトリにある) と ES5 ( BookReaderにある) で書かれています。 npm run serve-dev自動リロード開発サーバーを起動し、 localhost:8000で編集された js/css をビルドします。
次のメジャー バージョンが上がるまで、下位互換性を維持するためにビルド ファイルをリポジトリ内に保存する必要があります。これらのファイルを PR に含めないでください。 BookReader/ディレクトリ内の内容はコミットしないでください。
bookreader でローカル アイコン パッケージの変更を確認するには、core-js をアイコン パッケージにインストールし、bookreader にリンクする必要があります。
例としてicon-share使用してみましょう。
iaux-icons デモでアイコン パッケージが適切に動作していることを確認します。
アイコン パッケージ ( iaux-icons/packages/icon-share ) に移動し、コマンドnpm install core-jsを実行します。
これらの core-js の変更をコミットする必要はありません。
アイコン パッケージ ディレクトリ内からコマンドnpm linkを実行します。
コマンドnpm ls -g使用して、ローカル パッケージがレジストリに表示されていることを確認できます。
/bookreaderに移動し、コマンドnpm link @internetarchive/icon-shareを実行します。
コマンドnpm ls |grep icon-shareを使用して、icon-share がローカル ディレクトリへのリンクであることを確認できます。
コマンドnpm run serve-dev実行して、ローカル サーバーを起動して変更を確認できます。
リポジトリをバージョンアップしてリリースを準備するには、 npm version major|minor|patch (semver に続く) を実行してから、(たとえば) git push origin HEAD --tags実行します。表示されるバージョン番号が自動的に更新され、ファイルがビルドされ、CHANGELOG を更新するように求められます。
BookReader をリポジトリ内でタグとして、またノード モジュール @internetarchive/bookreader としてリリースします。
私たちは 100% のテスト カバレッジを達成したいと考えており、このプロジェクトの進捗状況を追跡しています: BookReader Fidelity
Testcafe を使用したエンドツーエンドのテストもあります。 私たちはリポジトリ自体のためのテストと、archive.org で使用するためのテストを作成します。それらについてはここで読むことができます。これらは比較的簡単に実行でき、BookReader の素晴らしさを知るための素晴らしい方法です。 プロジェクトボードで、作業するためのオープンチケットを確認してください。 見つけたものに対するテストが表示されない場合は、遠慮なく問題を提起してください。
すべてのローカル エンドツーエンド テストを実行するには、コマンドnpm run test:e2e実行します。
開発中にエンドツーエンドのテスト サーバーをオンにしておくには、コマンドnpm run test:e2e:devを実行します。
単体テストがあり、Jest を使用して実行します。モックの場合は、Jest の内部モッキング メカニズムと Sinon を使用してスパイを設定します。
すべてのローカル単体テストを実行するには、コマンドnpm run testを実行します。
手作りの BookReader はいつでも使用できます。 問題をチェックして、興味のあるものを見つけてください。 改善のアイデアがある場合は、問題を開いてください。
開発者向けドキュメント: https://openlibrary.org/dev/docs/bookreader
ホストされているソースコード: https://github.com/internetarchive/bookreader
IIIF (http://iiif.io) BookReader に IIIF マニフェストをロードする方法の例については、 BookReaderDemo/demo-iiif.htmlを参照してください。
BookReader は、すべての知識へのユニバーサル アクセスという Archive.org の使命の中核部分であることに注意してください。したがって、レガシー ブラウザをサポートするには注意が必要です。古いデバイスでも引き続き動作し、使用できるはずです。
ライブラリをソース コードに含めるのではなく、NPM 依存関係に変更します。
プロジェクトの履歴については、CHANGELOG.md を参照してください。
LICENSE ファイルに記載されているように、ソース コードのライセンスは AGPL v3 です。
複数のデバイスでテストする機能は、ブラウザ スタックのおかげで提供されます。
