PDFTron WebViewer UI の新しいカスタマイズ API

WebViewer 8.6 では、カスタマイズオプションが拡張され、WebViewer がワークフローやアプリケーションの一部であるかのような外観と操作性を実現しています。WebViewer 8.6 は、WebViewer をよりカスタマイズしやすくすることに焦点を当てた、今後の一連のリリースの第一弾となります。

WebViewer はすでに多くのすぐに使える API や GitHub 上のオープンソースリポジトリをフォークすることで幅広いカスタマイズをサポートしており、今回の変更は開発者の体験にさらなる柔軟性をもたらします。また、Core SDK の API を使用して独自の UI を構築することも可能です。

カスタマイズ API の強化に加え、新しい円弧図形描画ツールや、さまざまな図形ツールやラインツールの終端スタイルをカスタマイズする機能が追加されました。

それでは、新機能をご紹介します。

[su_youtube url=”https://youtu.be/mieDN6cimb8″ autoplay=”yes”]

お気に入りのアノテーションツールを選ぶ
デフォルトのクイックページ操作アクションをカスタマイズ
モーダルについて
その他の 8.6 アップデート
1. 終端の表示方法の改善
2. 新しい円弧形状測定

お気に入りのアノテーションツールを選ぶ

WebViewer の 50 種類以上のアノテーションとツールをユーザーが切り替えられるようにリボンにまとめようとしましたが、WebViewer が提供するユースケースやワークフローはさまざまであり、すべてのケースで対応できるわけではありません。

従来のツールリボン

WebViewer の UX をニーズに合わせて調整するために、ユーザーが行う作業に特化したツールのグループ化が簡単にできるようになりました。例えば、ドキュメントの上に描画するための新しいグループを作成し、そのグループにフリーハンドツールと矩形ツールを配置したいとします。以下のコードサンプルに示すように、`createToolbarGroup` API を呼び出すだけで実装できます。

ユーザー向けのグループ描画ツール (上記) を、簡単な API コールで実現


Webviewer(
...
).then((instance) => {
 instance.UI.setTranslations('en', {
   'option.toolbarGroup.draw': 'Draw',
 });
 
 instance.UI.createToolbarGroup({
   name: 'option.toolbarGroup.draw',
   dataElementSuffix: 'Draw',
   useDefaultElements: true,
   children: [
     {
       type: 'toolGroupButton',
       toolGroup: 'freeHandTools',
       dataElement: 'freeHandToolGroupButton',
       title: 'annotation.freehand',
     },
     {
       type: 'toolGroupButton',
       toolGroup: 'ellipseAreaTools',
       dataElement: 'ellipseAreaToolGroupButton',
       title: 'annotation.areaMeasurement',
     },
     {
       type: 'toolGroupButton',
       toolGroup: 'rectangleTools',
       dataElement: 'shapeToolGroupButton',
       title: 'annotation.rectangle',
     },
   ],
 });
});

次に、ユーザー表示を効率化するために、特定のツールグループを非表示にする必要があります。これは、WebViewer のロード時に最初に行うか、ユーザーセッション中に動的に行うことができます。WebViewer の UI 要素を隠すには、このガイドの手順に従うだけです。

デフォルトのクイックページ操作アクションをカスタマイズ

WebViewer 8.1 のリリースでは、新しいページ操作コンテキストメニューが導入されました。このメニューでは、カスタムのページ操作アクションをドロップダウンのコンテキストメニューに含めることができます。

v8.1 のコンテキストメニューには、カスタムアクションを追加する機能があります。

v8.6 では、ページ操作のサイドバーにある 3 つの標準的なクイックアクセスアイコンを交換することもできるようになりました。お好みのアイコンを配置することで、ユーザーが数回のクリックで簡単にページ操作できるようになります。

サムネイルサイドバーにあるデフォルトの 3 つのクイックアクセスアクションをカスタマイズできます。

カスタムアイコンを追加するのは簡単です。例えば、新しいサムネイルアクションを作成し、ユーザーがクリックするだけで選択したページを新しいケースファイルに抽出できるようにしたいとします (上図)。このサンプルのように、ユーザーが選択したページをコールバック関数に含めるだけです。


Webviewer(...).then(instance => {
 instance.UI.thumbnailControlMenu.add([
   {
     title: 'Extract to a new case',
     img: `base64 or svg icon`,
     onClick: (selectedPageNumbers) => {
       alert(`Selected thumbnail: ${selectedPageNumbers}`);
     },
     dataElement: 'extractDataElement',
   },
 ], 'thumbRotateClockwise');
});

モーダルについて

次に、いくつかのモーダルの動作をリフレッシュして、ユーザーがより細かく機能をコントロールできるようにしました。

アノテーションフィルターモーダル

アノテーションやコメントのフィルタリングモーダルのアップデートにより、必要なメモだけを表示できるようになりました。

まず、ユーザーが表示をフィルターできるようにアノテーションフィルターモーダルを更新し、何千ものコメントを確認する時間を短縮できるようにしました。ユーザーは、アノテーションの作成者、色、アノテーションの種類でフィルタリングし、返信を表示するかどうかを選択することができます。

また、動作を制御するための API も追加され、ノートパネル内で長いコメントや返信を自動的に展開したり折りたたんだりすることができるようになりました。例えば、すべてのコメントと返信を自動展開したい場合は、次のように呼び出します。


Webviewer(
...
).then((instance) => {
 instance.UI.NotesPanel.enableAutoExpandCommentThread();
 instance.UI.NotesPanel.disableReplyCollapse();
 instance.UI.NotesPanel.disableTextCollapse();
});

プリントモーダル

プリントモーダルのアップデートにより、印刷内容を細かくコントロールできるようになりました。

次に、印刷モーダルを更新しました。これにより、印刷するページや品質などを選択することができ、また、出力ファイルにカスタムの透かしを追加したり、アノテーションを印刷するかどうかを選択することもできます。

パスワードモーダル

パスワードモーダルのアップデートにより、パスワードを入力してドキュメントを読むことができるようになりました。

そして最後に、パスワードモーダルが更新されました。WebViewer はパスワードで保護されたドキュメントの閲覧をサポートしています。また、ユーザーがパスワードを入力しなくても、プログラムによってパスワードを回避したり、WebViewer がブラウザ内でドキュメントを完全に暗号化および復号化したりすることができます。

その他の 8.6 アップデート

終端の表示方法の改善

v8.6 では、線分アノテーションのスタイルに始まりと終わりを含めることができるようになりました。

線なのか？矢印なのか？Webviewer 8.6 では、その判断が可能になりました。線、矢印、ポリライン、距離ツール、周囲ツールなど、すべての線状図形の終端を変更する機能を追加しました。

下図のように 10 種類の終端を選択でき、始端と終端のスタイルを組み合わせることができます。

新しい円弧形状測定

Webviewer 8.5 では、円弧の半径、中心角、円弧の長さを測定する円弧測定ツールを新たに搭載しました。しかし、時には長さを気にせずに曲線を描きたい場合もあります。8.6 の新しい円弧図形のアップデートでは、それが可能になりました。

円弧測定ツールと同様に、3 クリックで円弧形状を描画します。

今回のリリースは以上です。これらの変更を楽しんでいただければ幸いです。次のリリースにご期待ください。

PDFTron 製品の詳細は、弊社 Web サイトをご確認ください。

お気に入りのアノテーションツールを選ぶ

デフォルトのクイック ページ操作アクションをカスタマイズ