javascript APIによるビューワーのカスタマイズ

前回の記事では、ViewOneの基本的な使用法を説明しましたが。今回はjavascriptによるカスタマイズやイベント・ハンドラの使用方法について説明したいと思います。javascript APIを用いることで、かなり細かく動作をカスタマイズ可能です。画面上に複数のビューワーを表示して連動させたり、PDFのページをめくった際にそれに合わせて画面上にメッセージを表示するといったことも可能です。javascript APIについては以下のリンクより詳細を確認が可能です。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=reference-javascript-api

ビューワのインスタンスの取得

javascript APIを使用するには、まず、ビューワのインスタンスを取得する必要があります。今回は、objectタグによってビューワを生成し、getElementById()を使用してインスタンスを取得します。

index.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	<script type="text/javascript" src="./v1files/viewone.js"></script>
</head>
<body>
	<object class="com.ibm.dv.client.Viewer" id="viewone" width="1200" height="600">
		<PARAM NAME="designPackage" value="carbon">
	</object>
</body>
<script>
	var viewone = document.getElementById('viewone');
</script>
</html>

メソッドの呼び出し

インスタンスを取得したら、あとは自由にメソッドの呼び出しが可能です。openFileメソッドを使用してボタンをクリックしたらファイルを読み込んでみるコードを試してみます。
なお、ビューワーの画面への読み込みが完了する前に、メソッドを呼び出してしまうと正しく動作しないので、ビューワーが表示されるタイミングで適用したいパラメータなどはjavascriptではなく、HTMLパラメータで設定することをお勧めします。

index.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	<script type="text/javascript" src="./v1files/viewone.js"></script>
</head>

<body>
	<object class="com.ibm.dv.client.Viewer" id="viewone" width="1200" height="600">
		<PARAM NAME="designPackage" value="carbon">
	</object>
</body>

<button onclick=openFile()>ファイルを開く</button>

<script>
	function openFile(){
	var viewone = document.getElementById('viewone')
	viewone.openFile("./sg247743.pdf",1);
	}
</script>
</html>

イベント・ハンドラの使用

ビューワーの外部の操作とビューワを連動させたい場合にはメソッドを呼び出してあげれば良いですが、ビューワ側が操作された際に処理を呼び出したいケースもあるでしょう。その場合にはイベント・ハンドラを使うことで実装が可能です。

イベント・ハンドラの有効化
イベント・ハンドラを有効化するには、eventHandler HTML パラメーターで呼び出される JavaScript メソッドの名前を設定します。また、eventInterest HTMLパラメータを用いて、イベント・ハンドラでモニターするイベントの種類を指定します。モニター可能なイベントのリストはこちらで確認可能です。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=handling-events-ids-descriptions

例えば、myEventhander()というイベント・ハンドラでファイルが開かれた際に(event ID=5)に、処理を呼び出したい場合、以下のように設定します。

<PARAM name="eventHandler" value="myEventHandler" /> 
<PARAM name="eventInterest" value="5" />

イベント・ハンドラの実装例
イベント・ハンドラにはデフォルトではidとtextが渡されます。以下のようにイベント・ハンドラの関数を実装することが可能です。

function myEventHandler(id, text)
{
   alert("Event received, id="+id+", text="+text);
}

実際に動作させてみると、ファイルを開いた際に以下のようなアラートが表示されます。

eventHandlerJsonの使用について
先ほどの例では、idとtextのみがイベント・ハンドラに引数としてわたってきましたが、イベントの種類によっては、eventHandlerJsonパラメータを設定することで、より多くの情報を受け取ることが可能です。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=options-eventhandlerjson

まとめ

この記事では、javascript APIおよび、イベント・ハンドラを用いたViewONEのカスタマイズ方法について説明しました。javascript APIを用いることで、業務要件に応じた細やかなカスタマイズが可能になります。次回は、最新のバージョン5.0.12より対応した、テキスト・ファイルの表示について説明したいと思います。

※Japan Business Automation User Groupのご紹介

IBMのコミュニティーである、Japan Business Automation User Groupでは、IBMのBusiness Automation製品関連の様々な技術情報、イベント情報の参照や、フォーラムを介した技術的な質問を行うことが可能です。是非ご参加ください。　http://ibm.biz/JPBizAutomationUG