Aureliaの冒険：カスタムPDFビューアの作成

この記事は、Vildan Softicによって査読されました。 SetePointのすべてのピアレビューアーズに感謝します。

WebアプリケーションでのPDFファイルの処理は常に非常に注意が必要です。運が良ければ、ユーザーはファイルをダウンロードするだけです。しかし、時には、ユーザーはより多くの機能を必要とします。私は過去に幸運でしたが、今回は、ユーザーが各ページに関連するメタデータを保存できるようにPDFドキュメントを表示するためにアプリを必要としています。以前は、人々はこれを実現するためにブラウザで実行するために高価なPDFプラグイン（Adobe Readerなど）を使用していたかもしれません。ただし、しばらくして実験の後、WebアプリケーションにPDFビューアーを統合するより良い方法を見つけました。今日は、AureliaとPDF.JSを使用してPDF処理を簡素化する方法を学びます。

コアポイント

• AureliaとPDF.JSを使用して、スケーリングやスクロールなどの機能を備えたカスタムで効率的なPDFビューアを作成して、ユーザーの相互作用とパフォーマンスを強化します。
• Aureliaの現在のページやズームレベルなどの属性に双方向データバインディングを実装し、アプリケーションでシームレスな統合と動的更新を可能にします。
• PDFビューアを再利用可能なAureliaカスタム要素に開発し、競合することなく複数の視聴者をアプリケーションに追加できるようにします。
• PDF.jsを使用して、PDFレンダリングを処理し、非同期操作とWebワーカーをサポートして処理をアンインストールし、UI応答速度を改善します。
• 特に大規模なドキュメントを効果的に処理する際に、仮想スクロールやその他の最適化を考慮して、潜在的なパフォーマンスの問題に対処します。
• カスタムPDFビューアーをAureliaプラグインに変換して、他のプロジェクトやアプリケーションに簡単に統合できるようにする可能性を探ります。

概要：目標

今日の目標は、AureliaにPDF Viewerコンポーネントを構築することです。主な要件は3つあります

ユーザーに、ドキュメントを読み込んで、スクロールしてズームイン/アウトして、優れたパフォーマンスを拡大できるようにしたいと考えています。
視聴者のプロパティ（現在のページや現在のズームレベルなど）をアプリケーション内のプロパティに双方向にバインドできるようにしたいと考えています。
この視聴者が再利用可能なコンポーネントであることを望んでいます。

このチュートリアルのコードは、GitHubリポジトリで、ここで完成したコードのデモを見つけることができます。

はじめにpdf.js

pdf.jsは、Mozilla Foundationによって書かれたJavaScriptライブラリです。 PDFドキュメントをロードし、ファイルと関連するメタデータを解析し、ページ出力をDOMノード（通常は

要素）にレンダリングします。プロジェクトに含まれるデフォルトの視聴者は、ChromeおよびFirefoxの組み込みPDF視聴者のサポートを提供し、スタンドアロンのページまたはリソース（IFRAMEに組み込まれた）として使用できます。 <canvas></canvas>

これは本当にクールです。ここでの問題は、デフォルトの視聴者が多くの機能を備えているものの、スタンドアロンのWebページとして設計されていることです。これは、Webアプリケーションに統合できるが、基本的にIframeサンドボックス内で実行する必要があることを意味します。デフォルトのビューアーは、クエリ文字列を介して構成入力を取得するように設計されていますが、最初の読み込み後に構成を簡単に変更することも、視聴者から情報やイベントを簡単に取得することもできません。イベントの取り扱いと双方向のバインディングを含むAurelia Webアプリケーションと統合するには、Aureliaカスタムコンポーネントを作成する必要があります。

注：pdf.jsに関するレビューが必要な場合は、チュートリアルをご覧ください：Mozillaのpdf.js

を使用してJavaScriptでカスタムPDFレンダリング

実装

目標を達成するために、Aureliaカスタム要素を作成します。ただし、デフォルトのビューアーをコンポーネントに入れません。代わりに、PDF.JSコアライブラリとビューアーライブラリに接続する独自の視聴者を作成して、バインド可能なプロパティとレンダリングの制御を最大化できるようにします。最初の概念実証については、Aurelia Skeletonアプリケーションから始めます。

Photoscope Code

上記のリンクからわかるように、Skeletonアプリケーションには多くのファイルがあり、その多くは必要ありません。操作を簡素化するために、合理化されたバージョンのスケルトンを準備し、コンテンツを追加しました。

PDFファイルをDISTフォルダーにコピーするためのGULPタスク（Aureliaはバンドルに使用されます）。

pdf.js依存関係がpackage.jsonに追加されました。
アプリケーションルートディレクトリでは、index.htmlおよびindex.cssがいくつかの初期スタイル設定を受けています。
使用するファイルの空のコピーが追加されました。
ファイルsrc/resources/elements/pdf-document.cssには、カスタム要素のCSSスタイルがいくつか含まれています。
• それでは、アプリケーションを稼働させて実行しましょう。

最初に、GulpとJSPMがグローバルにインストールされていることを確認してください：

次に、スケルトンをクローンして入力します：

npm install -g gulp jspm

次に、必要な依存関係をインストールします：

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

最後にガルプウォッチを実行し、http：// localhost：9000に移動します。すべてが計画に従って進む場合は、ウェルカムメッセージが表示されるはずです。

npm install
jspm install -y

その他の設定

次に行うべきことは、いくつかのPDFファイルを見つけてSRC/ドキュメントに入れることです。それらを1つの.pdfと2.pdfに名前を付けます。カスタムコンポーネントのテストを最大化するために、Gutenbergプロジェクトで見つけることができる戦争や平和など、PDFファイルの1つが非常に長いことが最善です。

PDFファイルを配置した後、src/app.htmlとsrc/app.jsを開いた後（同意して、アプリコンポーネントはAureliaアプリケーションのルートコンポーネントです）。コード：src/app.htmlおよびsrc/app.js。このチュートリアルでは、これらのファイルについては説明しませんが、コードには良いコメントがあります。

Gulpはこれらの変更を自動的に検出し、アプリケーションのUIレンダリングを確認する必要があります。それが設定です。ここで表示を開始します...

Aurelia Custom Elementを作成

Aureliaビューに直接使用できるコンポーネントを作成する必要があります。 AureliaビューはHTML5テンプレートタグに含まれるHTMLスニペットにすぎないため、例は次のようになるかもしれません。

npm install -g gulp jspm

タグは、カスタム要素の例です。 ITとそのプロパティ（スケールやページなど）はHTMLのネイティブプロパティではありませんが、Aureliaカスタム要素を使用して作成できます。カスタム要素は、Aureliaの基本的なビルディングブロック：Views and ViewModelを使用して、簡単に作成できます。したがって、以下に示すように、最初にPDF-Document.jsという名前のViewModelを構築します。 <pdf-document>

ここに注意するメインコンテンツは、

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

デコレーターです。関連属性に対して、カスタム要素に配置します。これにより、要素のプロパティを変更するだけで、PDFビューアを制御できます。

@bindable次に、ViewModelとペアになった初期ビューを作成します。 defaultBindingMode: bindingMode.twoWay

（以下のコンテンツは基本的に元のテキストと一致していますが、流encyさと読みやすさを維持し、重複を避けるために詳細に調整されています。）

npm install
jspm install -y

統合されたpdf.js

pdf.jsは、コアライブラリ（PDFドキュメントの解析と解釈の処理）、ディスプレイライブラリ（コアレイヤーの上にあるAPIの構築）、およびWeb Viewerプラグイン（事前に構築されたWewored（前述のWebページ）。私たちの目的のために、ディスプレイAPIを介してコアライブラリを使用します。

show apiは、pdfjsという名前のライブラリオブジェクトをエクスポートします。これにより、いくつかの構成変数を設定し、pdfjs.getdocument（url）を使用してドキュメントをロードできます。 APIは完全に非同期です - Webワーカーにメッセージを送信および受信するため、JavaScriptの約束に大きく依存しています。主に、pdfjs.getDocument（）メソッドから非同期に返されたpdfdocumentproxyオブジェクトと、pdfdocumentproxy.getPage（）から非同期に返されたpdfpageproxyオブジェクトを使用します。

ドキュメントは少しまばらですが、pdf.jsには、こことここで基本的な視聴者を作成する例がいくつかあります。これに基づいてカスタムコンポーネントを構築します。

Webワーカーの統合

PDF.JSは、Webワーカーを使用してレンダリングタスクをアンインストールします。 Webワーカーがブラウザ環境でどのように実行されるか（実際にはサンドボックス化されています）。通常のモジュールローダーの代わりにJavaScriptファイルへの直接フ​​ァイルパスを使用してWebワーカーをロードすることを余儀なくされています。幸いなことに、Aureliaはローダーの抽象化を提供するため、静的ファイルパスを参照する必要はありません（アプリケーションをバンドルすると変更される場合があります）。

リポジトリのバージョンをフォローしている場合は、PDFJS-Distパッケージをインストールしている可能性があります。そうしないと、これを今すぐ行う必要があります（たとえば、JSPM JSPMインストールNPM：pdfjs-dist@^1.5.391） 。次に、Aureliaの依存関係噴射モジュールを使用してAureliaのローダー抽象化を挿入し、次のようにコンストラクターにWebワーカーファイルをロードするためにローダーを使用します。

ページの読み込み

pdf.jsライブラリは、PDFドキュメントの読み込み、解析、表示を処理します。部分的なダウンロードと認証をサポートするサポートが組み込まれています。私たちがしなければならないのは、関連するドキュメントのURIを提供することです。

PDFの読み込みと表示は、この場合はURL属性によって駆動されます。基本的に、URLが変更されたとき、カスタム要素はPDF.jsにファイルへの要求を発行するように依頼する必要があります。これをUrlChanged Handlerで行い、コンストラクターにいくつかの変更を加えて、いくつかのプロパティを初期化し、切り離された方法にいくつかの変更をクリーンアップします。

ドキュメントの各ページについて、固定された高さのスクロール可能な容器にあるDOMに

要素を作成します。これを行うには、リピーターを使用して、Aureliaの基本的なテンプレート機能を使用します。各PDFページには独自のサイズと方向を持つことができるため、PDFページビューポートに従って各キャンバス要素の幅と高さを設定します。 <canvas></canvas>

レンダリングページ

ページをロードしたので、それらをDOM要素にレンダリングできる必要があります。これを行うには、pdf.jsのレンダリング機能に依存します。 PDF.JS Viewer Libraryには、レンダリングページに専念する非同期APIがあります。このコードを例から抽出し、レンダリング関数に包みます：

スクロールを実装します

馴染みのあるシームレスな体験を提供するために、コンポーネントは完全にスクロール可能なドキュメントの一部としてページを表示する必要があります。これを行うには、CSSを通じて達成できるスクロールオーバーフローで、コンテナに固定された高さを持たせることができます。

大規模なドキュメントのパフォーマンスを最大化するために、次のことを行います。まず、AureliaのTaskqueueを使用してDOMをバッチ変更します。第二に、PDF.JSがレンダリングしたページを追跡するため、行った作業をやり直す必要はありません。最後に、Aureliaのdebounceバインディング挙動を使用して、スクロールが停止した後にのみ、可視ページをレンダリングします。スクロールするときの実行方法は次のとおりです

スケーリングを達成

スケーリングするときは、現在のズームレベルを更新します。これをScaleChanged Property Handlerで行います。基本的に、特定のスケールの各ページの新しいビューポートサイズを反映するように、すべてのキャンバス要素をサイズ変更します。次に、現在のビューポートに表示されているものを再レンダリングし、ループを再起動します。

最終結果

目標を確認しましょう：

1. ユーザーに、ドキュメントを読み込んで、スクロールしてズームイン/アウトして、優れたパフォーマンスを拡大できるようにしたいと考えています。
2. 視聴者のプロパティ（現在のページや現在のズームレベルなど）をアプリケーション内のプロパティに双方向にバインドできるようにしたいと考えています。
3. この視聴者が再利用可能なコンポーネントであることを望んでいます。

最終コードは、GitHubリポジトリと、ここの完成したコードのデモに記載されています。改善の余地はまだありますが、目標を達成しました！

（以下のコンテンツは基本的に元のテキストと一致していますが、流encyさと読みやすさを維持し、重複を避けるために詳細に調整されています。）

プロジェクト後の分析と改善

常に改善の余地があります。 PDF Viewerの実装でアップグレードしたいことがあります：

プラグインを作成

Aureliaはプラグインシステムを提供します。この概念実証をAureliaプラグインに変換すると、Aureliaアプリケーションの使用不在リソースになります。 Aurelia Githubリポジトリは、良い出発点となるプラグインスケルトンプロジェクトを提供します。このようにして、他の人はそれを再構築せずにこの機能を使用できます！

最適

WebアプリケーションでのPDFファイルの処理は常に非常に注意が必要です。しかし、今日利用可能なリソースを使用すると、ライブラリとその機能を組み合わせることで、これまで以上に達成できます。今日、基本的なPDFビューアの例を見てきました。これは、カスタム機能を拡張できる視聴者です。これを完全に制御できるためです。可能性は無限です！何かを作る準備はできていますか？以下のコメントで教えてください。

Aurelia Custom PDF Viewerコンポーネント

についての

FAQ（FAQS）

（以下のコンテンツは基本的に元のテキストと一致していますが、流encyさと読みやすさを維持し、重複を避けるために詳細に調整されています。）

以上がAureliaの冒険：カスタムPDFビューアの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。