目次


IBM Content Navigator におけるカスタム・ビューアーの開発

ICN デスクトップ上で利用可能なカスタム・ビューアー開発手順の紹介

Comments

はじめに

IBM Content Navigator (ICN) は 2014 年 9 月にバージョン 2.0.3 がリリースされ、2015 年 6 月にはバージョン 2.0.3 Fix Pack 4 (2.0.3.4) がリリースされました。ICN は IBM が提供する FileNet P8、Case Manager など、様々な Enterprise Content Management (ECM) 製品の中でリポジトリー管理機能や共通ユーザー・インターフェース・フレームワークなどの重要な機能を提供するプラットフォームとして利用されています。

例えば、図 1 のように FileNet Content Manager リポジトリーを参照している ICN の参照ビュー上で画像ファイルを右クリックして「プレビュー」を選択すると、図 2 のように FileNet リポジトリーの中に格納されている画像ファイルが表示されます。このビューアーは ICN が提供する Web ブラウザー・ビューアーで、画像イメージを原寸大で表示するだけで画像の拡大・縮小などの機能はありません。また、ICN は拡大・縮小などのリッチな機能をもつビューアーとして図 3 のように Daeja ViewONE というビューアーも提供しており、ICN の管理者デスクトップよりビューアー・マップの設定を変更することにより利用することができます。多くのユースケースはこの Daeja ViewONE でカバー可能かもしれませんが、Daeja ViewONE にもない機能を利用したい場合や、逆に提供機能をある程度絞ったシンプルなビューアーを利用したいなど、諸々の理由で Daeja ViewONE が要件に合わない場合はカスタム・ビューアーを開発します。

ICN は利用者が独自の UI や機能を追加することができるように、ICN プラグイン・フレームワークを提供しています。利用者はこのフレームワークを利用してプラグインを開発することにより、フィーチャー、レイアウト、メニュー、ビューアーなど ICN 上で利用される様々なコンポーネントを独自に作成することができます。その中でも本記事ではさきほど述べたビューアーに着目し、どのようにすれば独自のビューアーを開発し、ICN が提供するビューアーに代わって利用することができるかを説明します。

図 1. 参照ビューから画像ファイルをビューアーで開く
図 2. Web ブラウザー・ビューアー
図 3. Daeja ViewONE ビューアー

前提環境

実行環境として ICN 2.0.3 がすでにインストールされていることを前提とします。ICN 2.0.3 のインストールおよび構成の手順については、参考文献の Knowledge Center ページ「IBM Content Navigator の計画、インストール、および構成」を参照してください。

また、開発環境として ICN プラグインの開発環境が必要です。ICN プラグインの開発環境の詳細については、参考文献の developerWorks 記事「IBM Content Navigator におけるプラグイン開発手順」を参照してください。この参考文献では Rational Application Developer (RAD) 8.0.4 を前提環境としていますが、この記事では特に RAD 特有の機能は必要としませんので、Eclipse (4.2 Juno / 4.3 Kepler / 4.4 Luna) による開発環境を前提として説明します。

サンプルのカスタム・ビューアーの概要

この記事ではカスタム・ビューアーの開発において最低限必要な作業を簡潔に説明するため、あえて Web ブラウザー・ビューアーと同様に画像イメージを原寸大で表示するだけの機能をもったビューアー (今後はサンプル・ビューアーと呼びます) を作成する方法に絞って解説します。このサンプル・ビューアーをベースに機能を追加していくことで、独自の機能をもったカスタム・ビューアーを作成することができます。一例としてこの記事の最後にサンプル・ビューアーをベースに複数の機能を追加したビューアーについて紹介します。すぐに利用できるように完成版がこの記事の末尾のダウンロードの章に添付されていますので是非試してみてください。

今回作成するサンプル・ビューアーは HTML の <img> タグを利用しているため、対応する画像ファイルのタイプは一般的なブラウザで <img> タグが画像として認識する GIF、JPEG、PNG、BMP および SVG としています。対応するリポジトリーは FileNet P8 のみとしています。詳細は後述しますがこれらの定義は変更可能ですので、必要であれば利用する環境に応じて変更してください。(筆者らはサンプル・ビューアーが Windows 版の Chrome、Firefox、Internet Explorer 11 で動作することを確認しています。)

Eclipse プラグインによるサンプル・ビューアー開発用プロジェクトの作成

ビューアーを開発するためにはまずベースとなる ICN プラグイン開発用のプロジェクトが必要です。この記事ではプラグイン開発用のプロジェクトを手作業で作成するのではなく、専用の Eclipse プラグインを利用して作成します。この Eclipse プラグインを利用することで、ベースとなるプロジェクトを簡単に作成することができ、作成したプロジェクトを使ってすぐにビューアーの開発に取りかかることができます。ICN プラグイン開発用のプロジェクトは決まりごとが多いので、一から手作業でプロジェクトを作成するのはなかなか大変な作業です。とはいえこれまで ICN プラグインを作ったことがない場合は一度手作業でプロジェクトを作ってみることで ICN プラグインの構成の理解が深まると思いますので、興味があるかたは「IBM Content Navigator におけるプラグイン開発手順」を参考に作ってみてください。

なお、この Eclipse プラグインは ICN 2.0.2 を想定して作成されていますが、この記事で作成するビューアーはこの Eclipse プラグインを使って作ったプロジェクトをベースにして作成し、ICN 2.0.3 上で動作することを確認しています。もし ICN プラグイン一般に関して不明な点が生じた場合は、上記「IBM Content Navigator におけるプラグイン開発手順」および「Creating plug-ins to IBM Content Navigator」を参照してください。

また、この Eclipse プラグインを利用するためには Web Tools Platform (WTP) プラグインが Eclipse に導入されている必要がありますので、あらかじめ WTP が Eclipse に導入されているか確認しておいてください。Eclipse 公式サイトから Eclipse IDE for Java EE Developers (リンク先は Eclipse Luna 版) をダウンロードするとあらかじめ WTP が導入された状態の Eclipse が利用できますので、こちらを使うことをおすすめします (筆者らはこの Eclipse プラグインが少なくとも Windows 版 Eclipse Juno、Kepler、Luna および IBM Java 6、7 で動作することを確認しています。)

Eclipse プラグインのインストール

  1. 図 4 のようにブラウザで「Customizing and Extending IBM Content Navigator」を開き、「Additional Material」をクリックする
  2. 図 5 のように SG248055.zip をダウンロードし、展開します。
  3. 「usecase」 > 「Chapter 3 Setting up the development environment」フォルダの中にある「com.ibm.ecm.icn.facet.EDSPlugin.202.jar」と「com.ibm.ecm.icn.plugin.202.jar」を Eclipse がインストールされているフォルダ直下の dropins フォルダにコピーし、Eclipse を再起動します。
図 4. Customizing and Extending IBM Content Navigator
図 5. SG248055.zip

Eclipse プラグインを使用したプロジェクト作成

  1. 「ファイル」 > 「新規」 > 「プロジェクト」を選択します。
  2. 図 6 のように「新規プロジェクト」ダイアログから「IBM Content Navigator」 > 「Content Navigator Plug-in」を選択し、「次へ」をクリックします。
  3. ウィザードの指示に従って設定を進めます。
    1. 図 7 のように「プロジェクト名」に「SampleViewerPlugin」と入力して「次へ」をクリックします。
    2. 図 8 のように「Descriptive Name」に「Sample Viewer」、「Java Package」に「com.ibm.sample.plugin」、「Class Name」に「SampleViewerPlugin」と入力してください。
    3. ICN がインストールされているマシンのインストール・フォルダ直下の lib フォルダにある「navigatorAPI.jar」を開発マシン上の適当なフォルダにコピーし、図 8 のようにそのパスを「Locate navigatorAPI.jar file」に指定し、「終了」をクリックします。

以上で、サンプル・ビューアーを開発するためのプロジェクトが図 9 のように作成されます。

図 6. 新規プロジェクト作成画面
図 7. ICN プラグイン開発用プロジェクト作成画面 (プロジェクト名)
図 8. ICN プラグイン開発用プロジェクト作成画面 (詳細パラメーター設定)
図 9. Eclipse プラグインを使って自動生成したプラグイン開発用プロジェクト

サンプル・ビューアーの作成

プロジェクト構成

サンプル・ビューアー開発用のプロジェクト構成は図 10 のようになっています。

図 9 と比較して赤枠で囲ったファイルが新規に作成する必要があるファイルですので、まずはそれらのファイルを中身が空のまま作成し、プロジェクトに追加してください。

各ファイルの詳細は表 1 にまとめてあります。

図 10. サンプル・ビューアー開発用プロジェクトの構成
表 1. プロジェクト内の各ファイルの詳細
src/com/ibm/sample/plugin フォルダ
SampleViewerPlugin.javaICN プラグインの Plugin クラス
SampleViewerDef.javaICN プラグインの PluginViewerDef クラス
src/com/ibm/sample/plugin/WebContent フォルダ
SampleViewerPlugin.jsICN プラグインの JavaScript ファイル (この記事では編集しません)
SampleViewerPlugin.cssICN プラグインのスタイルシート
src/com/ibm/sample/plugin/WebContent/sampleViewerPluginDojo フォルダ
SampleViewer.jsサンプル・ビューアー・ウィジェットの JavaScript ファイル
ConfigurationPane.jsICN プラグインロード時のパラメーター設定用の画面をつくるための JavaScript ファイル (この記事では編集しません)
src/com/ibm/sample/plugin/WebContent/sampleViewerPluginDojo/templates フォルダ
SampleViewer.htmlサンプル・ビューアー・ウィジェットのテンプレート・ファイル
ConfigurationPane.htmlICN プラグインロード時のパラメーター設定用の画面をつくるためのテンプレート・ファイル (この記事では編集しません)

実装

まずは、ICN プラグインの Plugin クラスを継承した SampleViewerPlugin クラスを実装します。このクラスの中で、プラグインの名前や ID といった基本的な情報やプラグインの中に含まれるコンポーネントを定義します。このクラスは Eclipse プラグインによって自動的に作成されますので、変更が必要な箇所は getViewers メソッドで今回作成するビューアーの Java クラスである SampleViewerDef を指定することです。この指定によりこの ICN プラグインがカスタム・ビューアーを保持していると ICN が判断します。実装の詳細はリスト 1 を参照ください。

リスト 1. SampleViewerPlugin.java (編集箇所のみ)
@Override
public PluginViewerDef[] getViewers() {
    return new PluginViewerDef[] { new SampleViewerDef() };
}

次に、PluginViewerDef クラスを継承した SampleViewrDef クラスを実装します。ここではビューアーの ID や名前といった情報を定義する他に、getSupportedContentTypes メソッドでビューアーがサポートするファイルタイプと getSupportedServerTypes メソッドでビューアーがサポートするリポジトリーのタイプを指定します。getViewerClass メソッドではサンプル・ビューアーの本体が実装されている JavaScript ファイルを指定します。isPreviewViewer メソッドで true を返すようにしておくと作成したビューアーを「プレビュー」アクションに対しても使うように設定することができます (デフォルトは「開く」アクションのみです)。getLaunchUrlPattern メソッドはビューアーがインラインフレームを使って実装されているときに指定する必要がありますが、サンプル・ビューアーはインラインフレームを使わないので、空文字列を返すようにしておきます。実装の詳細はリスト 2 を参照ください。

リスト 2. SampleViewerDef.java
package com.ibm.sample.plugin;

import java.util.Locale;

import com.ibm.ecm.extension.PluginViewerDef;

public class SampleViewerDef extends PluginViewerDef {

    public String getId() {
        return "SampleViewer";
    }

    public String getLaunchUrlPattern() {
        // This is a freameless viewer, so no URL is required.
        return "";
    }

    public String getName(Locale locale) {
        return "Sample Viewer";
    }
    
    public String[] getSupportedContentTypes() {
        return new String[] { "image/bmp", "image/gif",
                "image/jpeg", "image/jpg", "image/png",
                "image/svg+xml" };
    }

    public String[] getSupportedServerTypes() {
        return new String[] { "p8" };
    }

    public String getViewerClass() {
        return "sampleViewerPluginDojo.SampleViewer";
    }
    
    public boolean isPreviewViewer() {
        return true;
    }
}

最後にサンプル・ビューアー本体を実装します。サンプル・ビューアーは Dojo ウィジェットであり、JavaScript、スタイルシート、テンプレートから成ります。リスト 3 にテンプレートを示します。

テンプレートは単純に 2 階層の <div> から成ります。上位のコンテナ・ノードが下位のイメージ・コンテナ・ノードを保持しているだけです。JavaScript 実装の中でこのイメージ・コンテナ・ノードに対して画像を表示するためのノードや画像ファイルが読み込み中であることを示すノードを追加します。

リスト 3. SampleViewer.html
<div data-dojo-attach-point="containerNode">
    <div data-dojo-attach-point="imageContainer" class="svOuter"></div>
</div>

SampleViewer.js ファイルの中で実装されている SampleViewer クラスはサンプル・ビューアー・ウィジェットの JavaScript 実装であり、ベース・クラスとして必ず ICN が提供する DocViewer クラスを継承する必要があります。処理の大まかな流れとしては ICN はまずこの DocViewer クラスの setItem メソッドを呼び出し、_item プロパティーに対象の画像ファイルの情報を渡します。その後、画像を表示するタイミングで showItem メソッドを呼び出します。では SampleViewer クラスの各プロパティーとメソッドについて上から順に説明します。実装の詳細はリスト 4 を参照ください。

  • templateString プロパティー

    ビューアー・ウィジェットのテンプレート HTML を保持します。

  • _itemLoaded プロパティー

    ビューアーにセットされたアイテム (画像ファイル) の読み込みが完了したかどうかを判断するためのフラグです。

  • buildRendering メソッド

    ビューアー・ウィジェット作成時に一度だけ呼び出されるメソッドです。ウィジェットの DOM ノードに「SampleViewer」というクラス名を追加し、必要に応じて CSS でスタイルの設定ができるようにしておきます。また tabIndex を設定しておいて、Tab ボタンでビューアーの DOM ノードにフォーカスできるようにしておきます。

  • setItem メソッド

    ウィジェットにアイテムをセットするタイミングで ICN から呼び出されるメソッドです。inherited メソッドを呼んでおけば、親クラスの DocViewer の setItem メソッドの中で_item プロパティーにアイテムが自動的にセットされます。アイテムはまだセットされただけで、読み込みは開始されていないので、_itemLoaded プロパティーに false をセットしておきます。

  • showItem メソッド

    ウィジェットが画像を表示するタイミングで ICN から呼び出されるメソッドです。開発者はこのメソッドを中心に実装することになります。DocViewer クラスは isLoading メソッドという、画像が読み込み中かどうか判断するメソッドがあるので、それを利用して画像が読み込み状態でない場合でかつ、アイテムの読み込みも完了していない場合に、実際に画像ファイルを読み込む_loadImage メソッドを呼ぶようにします。また、_loadImage メソッドを呼び出す前に、画像イメージの読み込みが開始されたことを示すため、setIsLoading メソッドを呼び出して isLoading メソッドを呼んだときに true が返るようにしておきます。

  • _loadImage メソッド

    このメソッドではまず、アイテムの名前に http://や ftp://など「://」で始まる文字列が含まれているかどうかチェックし、含まれていた場合は FileNet のリポジトリーではなく、直接そのリンクの画像ファイルをロードするようビューアーの URL として設定します。これにより別のサーバー上にある画像ファイルをビューアーで簡単に表示することができます。これは FileNet 上にはなく別のサーバーに表示したい画像ファイルがあるときに有用です。アイテムの名前に「://」が含まれていない場合は、通常通り FileNet 上のアイテムの URL を取得します。URL を取得したあとは、_setLoading メソッドを呼び出して、ビューアーの利用者に画像が読み込み中であることを示すアイコンを表示するためのメソッドを呼びます。その後、画像ファイルの URL を設定して画像を表示するための <img> タグを作成し、class、alt、title、onload、onerror など最低限必要な項目を設定し、テンプレートのイメージ・コンテナ・ノードの子ノードとして追加します。 <img> タグの src プロパティーに関しては Internet Explorer の制限で onload ハンドラーが準備できてから設定する必要があるため、ノード作成後に設定しています。メソッドの最後に、読み込み完了したことを示すため、_itemLoaded を true に設定し、さらに DocViewer クラスの onDocumentLoaded メソッドを呼び出して画像の読み込みが完了したことをビューアー・ウィジェットの親ウィジェットに通知します。

  • _onImageLoaded メソッド

    画像の読み込みが完了した後に <img> タグの onload および onerror ハンドラーによって呼ばれるメソッドになります。このメソッドの中で読み込み中であることを示すアイコンの削除を行います。

  • _setLoading メソッド

    画像が読み込み中であることを示すためのアイコンをテンプレートのイメージ・コンテナ・ノードに追加するメソッドです。このノードは画像の読み込みが完了すると削除されます。

リスト 4. SampleViewer.js
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-class",
    "dojo/dom-construct",
    "ecm/widget/viewer/DocViewer",
    "dojo/text!./templates/SampleViewer.html"
], function(declare, lang, domClass, domConstruct, DocViewer, template){    
    return declare("sampleViewerPluginDojo.SampleViewer", [DocViewer], {
        templateString: template,
        _itemLoaded: false,
        
        buildRendering: function(){
            this.inherited(arguments);
            domClass.add(this.domNode, "SampleViewer");
            this.domNode.tabIndex = "0";
        },
        
        setItem: function(){
            this.inherited(arguments);
            this._itemLoaded = false;
        },
        
        showItem: function(){
            if (!this.isLoading() && !this._itemLoaded) {
                this.setIsLoading(true);
                this._loadImage();
            }
        },
        
        _loadImage: function(){
            var item = this._item;
            var url;
            var name = item.attributes["{NAME}"];
            if(name.indexOf("://") != -1 || this.isLocal){
                url = name;
            }else{
                var docUrlParams = {
                    docid: item.id,
                    repositoryId: item.repository.id,
                    template_name: item.template,
                    parm_part_filename: item.name
                };
                ecm.model.Request.setSecurityToken(docUrlParams);
                url = ecm.model.Request.
                           getServiceRequestUrl("getDocument",
                           item.repository.type, docUrlParams);
            }
            this.loadingImgNode = this._setLoading(this.imageContainer);
            var img = this.imgNode = domConstruct.create("img", {
                "class": "svImage",
                alt: this._item.name || "",
                title: this._item.name || "",
                onload: lang.hitch(this, "_onImageLoaded"),
                onerror: lang.hitch(this, "_onImageLoaded")
            }, this.imageContainer);
            // For IE, src must be updated after the onload handler is ready.
            img.src = url;
            
            this._itemLoaded = true;
            this.onDocumentLoaded();
        },
        
        _onImageLoaded: function() {
            this.loadingImgNode.parentNode.
                removeChild(this.loadingImgNode);
            this.loadingImgNode = null;
        },
        
        _setLoading: function(annotationDomNode, altValue){
            if(!altValue){
                altValue = "Loading...";
            }
            
            var url = ecm.model.desktop.getServicesUrl();
            var img = domConstruct.create("img", {
                "class": "svLoadingImg",
                alt: altValue,
                title: altValue,
                src: url + "/ecm/widget/resources/images/busy_large.gif"
            });
            
            domConstruct.place(img, annotationDomNode, "only");
            return img;
        }
    });
});

最後に、ウィジェットのスタイルシートではイメージ・コンテナ・ノードの overflow を auto にします。それにより、画像がウィンドウ・サイズより大きい場合にスクロール・バーが出るようになります。実装の詳細はリスト 5 を参照ください。

リスト 5. SampleViewerPlugin.css
/* SampleViewer */
.svOuter {
    overflow: auto;
    position: relative;
    width: 100%;
    height: 100%;
}

.svImage {
    position: absolute;
}

/* Loading Icon */
.svLoadingImg {
    position: absolute;
    top: 50%;
    left: 50%;
}

プロジェクトのビルド

  1. Eclipse のパッケージ・エクスプローラー上で build.xml を右クリックし、「実行」 > 「Ant ビルド」を選択します。
  2. Ant タスクが実行され、図 11 のように SampleViewerPlugin プロジェクトの直下に SampleViewerPlugin.jar というファイルが作成されたことを確認します。 (表示されていない場合はパッケージ・エクスプローラーを更新してみてください)
図 11. SampleViewerPlugin.jar

サンプル・ビューアー・プラグインのロード、設定および動作確認

サンプル・ビューアー・プラグインのロード

まず、実行環境と開発環境が異なる場合は、SampleViewerPlugin.jar を実行環境のあるマシン上の任意のフォルダにコピーしてください。

次のステップにより、JAR ファイルを ICN にロードします。

  1. 管理者デスクトップにアクセスして、管理者権限のあるユーザーでログインします。

    http://<host_name>:<port>/navigator/?desktop=admin

  2. 「プラグイン」を開きます。
  3. 「新規プラグイン」をクリックします。
  4. 図 12 のように「JAR ファイルのパス」を選択して、テキスト・ボックスに実行環境の SampleViewerPlugin.jar のパスを記入します。
  5. 「ロード」をクリックすると、プラグインがロードされて、図 12 のようにプラグインの情報が表示されます。
  6. 「名前」に「Sample Viewer Plugin」、「ビューアー」に「Sample Viewer」と表示されていることを確認して、「保存」もしくは「保存して閉じる」をクリックしてプラグイン情報を保存します。
図 12. SampleViewerPlugin のロード

ビューアー・マップの作成

次にロードしたサンプル・ビューアーがデフォルトのビューアーに優先して使われるようにビューアー・マップの設定を行います。

  1. 管理者デスクトップにアクセスして、管理者権限のあるユーザーでログインします。
  2. 「ビューアー・マップ」を開きます。
  3. 「新規ビューアー・マップ」をクリックします。
  4. 図 13 のように「名前」に「sample map」と入力し、「新規マッピング」をクリックします。
  5. 図 14 のように「リポジトリー・タイプ」として、「FileNet Content Manager」を選択し、「ビューアー」として「Sample Viewer」を選択します。ここで「プレビューのみ」のチェックボックスをチェックしておくと、ドキュメントの「プレビュー」アクションを実行したときのみサンプル・ビューアーが使われるようになります。チェックしない場合は「開く」アクションを実行したときのみサンプル・ビューアーが使われます。どちらのアクションにおいてもサンプル・ビューアーを利用したい場合は「プレビューのみ」のチェックボックスがチェックされているビューアー・マップと、チェックされていないビューアー・マップをそれぞれ作成する必要があります。
  6. 図 14 のように「使用可能な MIME タイプ」でリストされているすべてのタイプを選択し、右向きの矢印ボタンをクリックして「選択した MIME タイプ」リストに移動させ、「OK」ボタンをクリックします。
  7. 図 15 のように作成したマッピングをマッピングリストから選択し、「上に移動」ボタンを何回かクリックして、リストの一番上に持っていき、「保存」もしくは「保存して閉じる」をクリックしてマッピング情報を保存します。

以上でビューアー・マップの設定は完了です。これでこのビューアー・マップを使うことで、画像ファイルを開いたときに開かれるビューアーが作成したサンプル・ビューアーになります。

図 13. 新規ビューアー・マップ
図 14. 新規マッピング
図 15. マッピングの優先順位変更

デスクトップの作成

ビューアー・マップの作成後は実際に FileNet P8 上に保存された画像ファイルを開くため、参照ビューを持つデスクトップを作成します。

  1. 管理者デスクトップにアクセスして、管理者権限のあるユーザーでログインします。
  2. 「デスクトップ」を開きます。
  3. 「新規デスクトップ」をクリックします。
  4. 図 16 のように「一般タブ」が開かれていることを確認して、必須項目を入力してください。その際、「リポジトリー」は FileNet Content Manager タイプのリポジトリーで、「ビューアー・マップ」は先ほど作成した「sample map」になっていることを確認してください。
  5. 「レイアウト」タブをクリックして「表示する機能」に「参照」が選択されていることを確認します。選択されていない場合は選択してください。他の機能についてはそのままで問題ありません。
  6. 「保存」もしくは「保存して閉じる」をクリックしてデスクトップ情報を保存します。

以上でデスクトップの作成は完了です。

図 16. 新規デスクトップ - 一般タブ
図 17. 新規デスクトップ - レイアウト・タブ

動作確認

最後に動作確認をします。

  1. 先ほど作成したデスクトップにアクセスしてログインします。 <desktop_id> は先ほど作成したデスクトップの ID です。

    http://<host_name>:<port>/navigator/?desktop=<desktop_id>

  2. 左側のローンチ・バーから「参照ビューを開く」ボタンを押して参照ビューを開きます。
  3. 図 18 のように適当なフォルダに移動して「ドキュメントの追加」ボタンをクリックします。
  4. 図 19 のように「ファイル名」の「ファイル選択」ボタンをクリックして適当な画像ファイルを選択し、「追加ボタン」を押します。
  5. 図 20 のように追加した画像ファイルを右クリックして、アクション・メニューから「開く」をクリックします。
  6. 図 21 のように作成したビューアーで画像が開かれていることを確認し、ウィンドウ・サイズを変えて、サイズが小さい場合はスクロール・バーが出ることを確認します。
  7. ブラウザが Chrome の場合は F12 ボタンを押して図 22 のように開発者ツールを開き、左上の虫眼鏡のアイコンをクリックしてビューアーの画像を検証すると、 <img> タグにフォーカスされ、その class 名が「svImage」となっていれば作成したビューアーが使われていることになります。
  8. 同じフォルダに画像が複数ある場合は、ビューアーの右上の矢印ボタンをクリックして他の画像も問題なく表示されるか確認します。
図 18. ドキュメントの追加
図 19. 画像ファイル選択と保存
図 20. 画像ファイルを開く
図 21. 画像ファイルがサンプル・ビューアーで表示される
図 22. Chrome の開発者ツールを使ってサンプル・ビューアーが利用されているかの確認

次に、ダミー画像のタイトルに URL をセットし、リモートの Web サーバー上にある画像ファイルを開けることを確認します。

  1. 図 23 のようにあらかじめ用意したダミーの画像ファイル (blank.gif) を右クリックして、「プロパティー」を選択します。図 24 のように「ドキュメント・タイトル」を画像ファイルが置いてある URL に変更し、「OK」をクリックします。
  2. 図 25 のようにタイトルを変更した画像ファイルを右クリックして、アクション・メニューから「開く」をクリックします。
  3. 図 26 のように作成したビューアーで、FileNet 上に保存したダミー画像ファイルではなく、リモートの Web サーバー上の画像ファイルが開かれていることを確認します。

以上で動作確認は完了です。

図 23. 画像ファイルのプロパティーの変更
図 24. 画像ファイルのドキュメント・タイトルの変更
図 25. ドキュメント・タイトルが変更された画像ファイルを開く
図 26. リモートの Web サーバー上の画像ファイルがサンプル・ビューアーで表示される

シンプル・イメージ・ビューアーの紹介

ここまで、ICN におけるカスタム・ビューアー作成の基本を解説してきました。基本的な仕組みや最低限何をする必要があるかを明確にするために、付加的な機能の一切を意図的に排除しています。骨格が理解できたら、あとはそれをベースにニーズに合わせて拡張し、必要な機能を追加していくことで、より実用的なビューアーを実現することができます。ここで、その際の参考にしていただくために、より実用的な機能を実装済みの「シンプル・イメージ・ビューアー」を紹介します。シンプル・イメージ・ビューアーは、ここまで解説してきたサンプル・ビューアーの基本機能に加え、次の機能を持ちます。

  • マウスをホバーすると現れるツールバー (図.27)
  • ドラッグ操作による画像のスクロール
  • ズームイン、ズームアウト、原寸大表示
  • 各種表示モード (ウィンドウの幅に合わせる、高さに合わせる、両方に合わせる)
  • 画像の回転
  • すべての機能がキーボードでも操作可能

画像を開いたときの初期表示モードはプラグインの設定画面で指定することができます。 (図.28)

画像の回転は CSS3 の機能を利用して実装しています。該当機能をサポートしない一部の古いブラウザでは画像の回転のアイコンを表示しないようにしています。

シンプル・イメージ・ビューアーのソース・コードはこの記事の末尾にあるダウンロードの章からダウンロードできますので、参考にしてください。また、そのソース・コードをビルドした成果物であるプラグインのパッケージも同様にしてダウンロードできます。

図 27. シンプル・イメージ・ビューアーのツールバー
図 28. シンプル・イメージ・ビューアー・プラグインのロード

まとめ

この記事では ICN で利用可能なカスタム・ビューアーの開発手順を実際に単純なサンプルを開発しながら説明しました。ここで説明した手順と一つ前の章で説明したシンプル・イメージ・ビューアーを参考にして独自の機能をもったカスタム・ビューアーの開発に是非挑戦してみてください。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Information Management, Web development
ArticleID=1009805
ArticleTitle=IBM Content Navigator におけるカスタム・ビューアーの開発
publish-date=07022015