IBM Daeja ViewONE Virtualを使ってみる

# IBM Daeja ViewONE Virtualって何？
IBM Daeja ViewONE Virtual(以下ViewONE)という名前を聞いたことがありますでしょうか？おそらく多くの人が初めて聞く名前なのではないかと思います。ViewONEはIBMのコンテンツ管理製品のコンポーネントとして提供されるビューワーのコンポーネントで、Webアプリケーションに組み込むことでPDFや画像ファイルをブラウザ上で確認できるビューワとして利用することが可能です。また、単に表示するだけではなく、マスキングやアノテーション、ページ分割などの処理も行うことが可能です。今回VeiwONEのサンプルを実装する機会があったので、数回に渡って、ViewONEの使用方法などについて記事にしていきたいと思います。
# ViewONEの構成
今回はTomcat9上で簡単なWebアプリケーションを作成し、ViewONEを組み込んでみました。Tomcat10で使用する場合には以下の手順を踏む必要があることに注意してください。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=modules-using-apache-tomcat-v100x-daeja-viewone-virtual

 - ファイルの配置
 製品のファイルをWebアプリケーション内に以下のように配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117736/5861d71a-ecf0-caef-1e78-948d2f540e45.png)

 - サーブレットの構成
ViewONEを画面にサーブレット経由で画面にロードされるため、サーブレットを構成する必要があります。今回はweb.xmlに以下のようにサーブレットとマッピングの定義を行いました。

```web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
  version="2.4">
  
  <display-name>ViewONESample</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
    <servlet>
      <servlet-name>viewone</servlet-name>
      <servlet-class>com.ibm.dv.server.Platform</servlet-class>
   </servlet>
  
   <servlet-mapping>
      <servlet-name>viewone</servlet-name>
      <url-pattern>/v1files/*</url-pattern>
   </servlet-mapping>
</web-app>
```
 - HTMLの作成
scriptタグでjsファイルをロードし、objectタグでビューワーを定義することでビューワを簡単に読み込むことが可能です。

```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"></object>
</body>
</html>
```
- 動作確認
作成したWebアプリをTomcat上にデプロイしてブラウザからアクセスすると以下のようにビューワが表示され、ローカルのPDFファイルを開いて表示することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117736/27a7de0f-102d-e74b-9800-99fa24d15272.png)
# HTMLパラメータによるカスタマイズ
ViewONEには様々な設定パラメータやAPIが存在し、動作や見た目を細かくカスタマイズすることが可能です。利用可能なHTMLパラメータの一覧は以下のドキュメントで確認することが可能です。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=reference-html-api
 - HTMLパラメータの設定
 試しに、パッケージを指定してcarbonパッケージを使用してみましょう。具体的にはobjectに対して以下のようにPARAMタグを用いて指定することが可能です。
https://www.ibm.com/docs/ja/daeja-viewone/5.0.x?topic=interface-designpackage
```index.html
	<object class="com.ibm.dv.client.Viewer" id="viewone" width="1200" height="600">
		<PARAM NAME="designPackage" value="carbon">
	</object>
```
ブラウザから確認してみると、以下のようにcarbonパッケージが適用されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117736/88a4ac23-5ecb-c043-c466-8cb8d146c573.png)

# まとめ
この記事では以下の点について説明しました。
　- ViewOneの構成方法
　- ViewOneの起動方法
　- HTMLパラメータの適用方法
非常にシンプルなコードでアプリケーションにビューワを組み込み、カスタマイズできることができることがお分かりいただけたのではないかと思います。次回はjavascriptによるカスタマイズについてまとめてみたいと思います。

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