要約:
WebViewer のアノテーション エクスペリエンスをカスタマイズします。デフォルトのアノテーション スタイルをプログラムで制御し、使わない機能を非表示にして、ユーザー操作を簡単に指定します。Apryse WebViewer を使用すると、開発者はアノテーション エクスペリエンスを細かく制御できます。
はじめに
Apryse WebViewer はブラウザで実行される JavaScript ベースのツールで、PDF や DOCX ファイルの表示、アノテーション、編集など、さまざまなドキュメント タスクを実行できます。
UI はフレキシブルにカスタマイズ可能です。実際、オープンソースなので、ソース コードをフォークすることで好きなように変更できます。すぐに実行できる UI カスタマイズが多数あるため、必ずしもリポジトリをフォークする必要はありません。
この記事では、 PDF にフリーテキスト アノテーションを追加するときに使用できるオプションについて説明します。独自のデフォルト値を選択する方法、不要なオプションを削除する方法、さらには定義した特定のオプションにユーザーを制限できるように UI をロックダウンする方法についても説明します。
この記事はフリーテキスト アノテーションに関するものですが、ここでの知識は、UI の一部である他のアノテーション ツールのオプションを変更する場合にも使用できます。
バージョンに関する注意
この記事は WebViewer 10.9 に基づいています。ただし、この記事が書かれてから時間が経過している場合、Apryse 社では機能の開発と拡張が継続的に行われているため、WebViewer の動作が変更されている可能性がありますのでご注意ください。
デフォルトの動作
10.9 で出荷されたデフォルトの UI であるクラシック UI には、アノテーションの種類ごとに事前定義されたオプションが設定されたアノテーション ツールのセットが含まれています。
通常、アノテーションの表示プロパティ (テキスト自体と、テキストが表示されるボックスの線と塗りつぶしの両方) を制御できます。これは、フリー テキスト アノテーションの場合、または他のアノテーション タイプの適切なプロパティの場合に実行できます。
つまり実行時に、ユーザーはすぐにさまざまな選択を行って、希望するアノテーションの外観を実現できます。以下の例のように、赤いテキスト、シアンの背景、雲のアウトラインを選択できます。
もちろん、ユーザーが選択できるオプションを制限したり、指定したデフォルト設定だけに制限したりすることもできます。その方法については後で説明します。
デフォルトの動作では、アノテーションを作成するときにアノテーションのスタイルを変更すると、次のアノテーションを作成するときにその設定が新しいデフォルトになります。この素晴らしい機能により、多くの時間を節約できます。
ただし、複数の「標準」スタイルが必要になる場合もあるため、クラシック UI ではほとんどのアノテーション ツールに 4 つの個別のボタンが用意されており、各ボタンを一連の選択肢で構成し、それらをすばやく切り替えることができます。モジュラー UI も最大 4 つのボタンをサポートしますが、表示されるボタンの数は構成可能です。
先に進む前に、 Apryse Showcase のアノテーション サンプルも併せてご覧ください。WebViewer の幅広い機能の動作をご確認いただけます。
すぐに使える機能とそれ以上の機能
WebViewer を使い始めるとすぐに、いくつかの優れた機能が利用できることがわかりました。しかし、ユーザー エクスペリエンスを楽にしたい場合はどうすればよいでしょうか? おそらく、ユーザーの中には Helvetica を使いたくないユーザーもいる可能性が高く、それをデフォルトのフォントにするのは意味がありません。
デフォルトの更新
アノテーション ツールに使用されるデフォルト値を更新するのは、実際には非常に簡単です。ツール オブジェクトを取得し、setStyles を呼び出して新しい構成を渡すだけです。
たとえば、次のスニペットは、フリー テキスト アノテーション ツールのほぼすべてのデフォルト プロパティを変更します。通常は、これほど多くの変更は行いませんが、ここでは太字、斜体、下線、取り消し線を設定する方法を説明します。
documentViewer.getTool('AnnotationCreateFreeText').setStyles( ({
StrokeThickness: 5,
StrokeColor: new Annotations.Color(0, 0, 255),
TextColor: new Annotations.Color(0, 0, 0),
FontSize: '20pt',
Font: 'Carlito',
Opacity: 0.5,
TextAlign: 'right',
TextVerticalAlign: 'bottom',
RichTextStyle: {
0: {
'font-weight': 'bold',
'text-decoration': 'underline, line-through',
'font-style': 'italic',
},
}
})); 以前の値が引き続き使用される可能性があるため、変更を加えた後はキャッシュをクリアする必要がある場合があります。通常、以前の値が記憶されていることは便利ですが、WebViewer に慣れてコードに変更を加えるときには、非常に混乱する可能性があります。
これで、WebViewer でドキュメントを編集してアノテーションを追加すると、デフォルトのオプションが変更されます。
アノテーションを追加した後の結果を確認できます。この例では、新しいアノテーションは左上 (元のデフォルト) ではなく右下に配置され、太字、下線、斜体、取り消し線が付けられています。
各タイプの他のツールのデフォルト値の設定
これまでは、最初のフリーテキスト アノテーション ツールのデフォルト値を設定しました。前述のように、各ツール タイプには最大 4 つのインスタンスを設定できます。では、他のツールについてはどうでしょうか。
他のインスタンスの値の設定は簡単です。ツール名の後にツールの番号 (2、3、または 4) を続けるだけです。
たとえば、他のフリー テキスト ボタンのスタイルを設定することで、すでに見たサンプル コードを拡張できます。これで、各ツール ボタンに異なる色、フォント、サイズが設定されます。
documentViewer.getTool('AnnotationCreateFreeText2').setStyles({
TextColor: new Annotations.Color(255, 0, 0),
FontSize: '10pt',
Font: 'Times New Roman',
});
documentViewer.getTool('AnnotationCreateFreeText3').setStyles({
TextColor: new Annotations.Color(0, 0, 255),
FontSize: '14pt',
Font: 'Carlito',
});
documentViewer.getTool('AnnotationCreateFreeText4').setStyles({
TextColor: new Annotations.Color(0, 255, 255),
FontSize: '16pt',
Font: 'Liberation Serif',
}); ここで、WebViewer を更新すると、4 つのフリー テキスト ボタンが黒、赤、青、シアンになっていることがわかります。これらを使用して新しいアノテーションを作成すると、フォント サイズと書体も更新されていることがわかります。
ポップアップで利用可能なプロパティを制御
次に、ポップアップからいくつかのオプションを削除する方法を見てみましょう。たとえば、使用可能な色の範囲を削除したり、使用しないフォントを削除したりできます。
WebViewer 内で利用可能なものを制御するための標準的な方法は、instance.UI.disableElements と instance.UI.enableElements、およびdataElements のリストを使用することです。
まず、ユーザーが選択できる色の数を 7 色に制限しましょう。
これは、特定のツールに対して setColorPallet を使用して行われます。次のコードは、フリー テキスト アノテーション ツールに使用する色を指定します。ツールは、列挙型または AnnotationCreateFreeText などの名前のいずれかで指定できることに注意してください。
instance.UI.setColorPalette({
// @ts-ignore
toolNames: [Tools.ToolNames.FREETEXT],
colors: [
'#DDDDDD',
'#9de8e8',
'#A6A1E6',
'#E2A1E6',
'#EF1234',
'#FF8D00',
'#FFCD45',
],
}); ダイアログが開いたときに、指定した色のみが使用可能になります。
ポップアップからいくつかのオプションを削除することで、カスタマイズをさらに進めることができます。この場合、4 つのフォントと斜体ボタンおよび取り消し線ボタンです。
instance.UI.disableElements([
'dropdown-item-Helvetica',
'dropdown-item-Arimo',
'dropdown-item-Roboto',
'dropdown-item-Liberation Serif',
'freeTextItalicButton',
'freeTextStrikeoutButton',
]); フリーテキスト アノテーションを追加（または更新）すると、ポップアップのオプションが少なくなります。
WebViewer を構成するときは常に、使用するオブジェクトの dataElement プロパティを見つける必要があります。オブジェクトがポップアップ内にあり、デバッガーを使用しようとするとすぐに消えてしまう場合は、これが難しい場合があります。
この問題を回避する方法の 1 つは、「フォーカスされたページをエミュレートする」を有効にすることです。これにより、フォーカスが失われたときにポップアップがすぐに閉じることがなくなります。
すべてのオプションを削除
UI の制御をさらに一歩進めたい場合は、特定のツールのポップアップを完全に無効にすることもできます。
たとえば、次のコードを使用すると、フリーテキスト アノテーションを作成するときに表示されるダイアログを完全に非表示にすることができます。
instance.UI.disableElements([
'richTextPopup'
]); つまり、ツールの各インスタンスに指定されたデフォルトのオプションのみが使用可能になります。ただし、これが非常に役立つユースケースもあります。先ほどのコード スニペットを使用して、それぞれ特定のフォント、色、サイズを持つ 4 種類のアノテーションを作成できるようになりましたが、他のスタイルは使用できません。
モジュラー UI について
WebViewer モジュラー UI は UI を作成する別の方法であり、大量のコードではなく構成を使用して UI を迅速にカスタマイズできます。通常、ツールのインスタンスは 1 つだけですが、最大 3 つ追加できます。
デフォルトのフォントやその他のプロパティの指定はクラシック UI の場合と同じなので、これまで学習した内容はすべて有効です。
例として、4 つのフリー テキスト アノテーション ボタンを除くすべてのツールバー ボタンを削除してみましょう。UI は非常にロックダウンされていますが、アノテーションは以前と同じように追加できます。
結論
Apryse WebViewer はすでに強力なツールですが、これで、アノテーションの表示方法を制御およびカスタマイズする方法も習得できましたでしょうか。フリー テキスト アノテーションについて学習したことは、他の種類のアノテーションの基礎として役に立ちます。
WebViewer はアノテーション以上の機能を備えています。PDF や Word でのテキスト編集、CAD 図面の表示、測定、編集など、さまざまな機能をサポートしています。
Apryse 製品の詳細は、弊社 Web サイトをご確認ください。
記事参照：
© 2024 Apryse
「Setting Default Values for WebViewer Annotation Tools」
