当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。
記事そのもののリンクについてはご自由に行っていただいてよいです。

テクてく Lotus 技術者 Slack に参加しよう!

2017年11月21日火曜日

IBM Verse Extensibilityを使ってみよう!

皆さん、こんばんは!今日も夜に更新です!(言い切った!)

昨日はIBM Verse On-Premisesを導入してみました。今日もしっかりと動いています!
ということで、今日はその続きとなる「IBM Verse Extensibility」についてみていきます。
テクてく11月度の資料は
【資料公開】テクてく​​​​​​​​​​​​L​o​t​u​s​​技​​術​​者​​夜​​​会​​​:​ザ・​デベロッ​パー編​​​​17​_​11_1​7
に公開してありますので、そちらを読んでいただくと、より一層理解が深まりますので、お忘れなきよう!

その他、
GitHub にもサンプルアプリケーションが公開されています。
IBM Verse Developers
開発者用のドキュメントはこちら。
IBM Verse

これらも必ず見ることをお勧めします。

では、IBM Verse Extensibilityを見ていきましょう。
小難しいアーキテクチャはおいておいて・・・
どういったものかというと、
「IBM Verse」を拡張したり、他のWebアプリケーションと連携する
ものです。
その中で、Verse Extension Pointsという形で用意されている拡張機能は、
今のところ、
com.ibm.appreg.ext.simpleLink
com.ibm.appreg.ext.templatedLink
com.ibm.verse.ext.widget
com.ibm.verse.ext.namePicker
com.ibm.verse.ext.beforeOnSend
com.ibm.verse.ext.liveText
です。

テクてくでは、
com.ibm.verse.ext.liveText
com.ibm.verse.ext.beforeOnSend
com.ibm.verse.ext.namePicker
が紹介されました。

このうち、
 com.ibm.verse.ext.beforeOnSend
については、IBM Championの吉田さんがご自身のブログで紹介していますので、そちらをご覧ください。
リンクはこちら。
IBM Verse からのメール送信前に確認画面を表示する

このブログでは、
com.ibm.verse.ext.namePicker
をXPagesを使ってできるかどうかを試してみましょう。
環境としては、当然ですが、昨日構築したIBM Verse On-Premisesを利用します。
クラウド版のIBM Verseとは若干違う可能性もありますがご了承ください。

テクてくでは、「Custom Name Picker」として、以下の方法で実現したよという説明がありました。
1.Verse UI内にIFRAMEが生成されます。
2.IFRAME内にHTMLで作成した画面が表示されます。
3.iNotesの全文検索APIを利用して、ドミノディレクトリからユーザー情報を検索します。
4.検索結果をHTMLの画面内に表示します。
5.ユーザー名をpostMessageでVerseに送信します(宛先にセット)。

この説明を聞いてデモを見ながら、「あれ?画面をXPagesで作ってもできんじゃね?」と思いました。
ということで、HTMLの画面をXPagesで作ってみましょう。


1.XPages アプリケーションの作成
 Verse On-Premisesを構築したDominoサーバー上にNotes DBを作成します。
 ACLは「-Default-」は"読者"で良いですが、「Anonymous」は"なし"にしておきましょう(ドミノディレクトリの情報を表示するので、最低限のACL設定はした方が良いです)。


2.XPage の作成
XPage の名称は何でも良いです。ただし、Verse ExtensibilityにURL情報を渡す必要があるので、長くしすぎないようにしましょう。

データソースはドミノディレクトリを設定します。自DBではないところに注意しましょう。
ビューはユーザー情報を表示するためのビューを設定します。
テクてくでは専用のビューを作っていたので、同じようにビューを作成してそれを定義しました。

ビューの設定情報は、
3. Extend Domino Directory
を参照してください。
(実はXPagesで作るのであれば、ビューは既存のもので良かったのですが、折角なので流用しました)


3.画面ロードの設定
2.IFRAME内にHTMLで作成した画面が表示されます。
ということをXPages の中で行う必要があります。
これはイベントハンドラを利用しているので、CSJSで記述する必要があります。
XPagesでは「出力スクリプト」コントロール(xp:scriptBlock)を使うことで記述することができます。
記述方法は、サンプルのui.jsからそのまま引用できます。
テクテクの公開資料の中にある「custom-name-picker」用の「ui.js」の1-41行目をそのままコピペします。
その際、12行目の
"https://djxtest01.lab.japan.ibm.com",
は自分のDominoサーバーのホスト名に書き換えます。
私の場合、こんな感じになりました。
出力スクリプトに記述した画面ロードのコード



4.ネームピッカー用のビュー設定

ビュー情報をXPageにセットする方法ですが、ビューコントロール(xp:viewPanel)ではなく、繰り返しコントロールを使いました。
これは、
5.ユーザー名をpostMessageでVerseに送信します(宛先にセット)。
を簡単に行えるようにするためです。
サンプルコードを見るとわかりますが、この部分は、CSJSで書かれています。
ビューコントロールで該当する行をダブルクリックしたときのイベントを書くのが面倒だったということですね(笑)
作った画面はこんな感じです。
Verseでのネームピッカーとなる(はず)の画面

ユーザー名の部分はクリックできるように、リンク表示にしています。
ここでXPagesで正しく表示されるのかのテストをしてみました。
XPages でネームピッカーもどきを表示してみた

一応、ドミノディレクトリの情報は表示できています。


5.宛先セット方法
あとは、ここで選択されたユーザー情報をVerseに戻せればOK(のはず)です。
テクてくでも講師の方が「postMessage さえどうにかなれば簡単ですよ」みたいなことを仰っていたので、無理をせずに、サンプルをほぼ流用させていただきました。
postMessageのコード
こちらはイメージでの表示とさせていただきます。
※実際のコードは、テクてくのサンプルについているのでそちらをご利用ください。
違っているのは、
var userEmail = document.getElementById( "#{id:internetAddress1}" ).innerHTML;
var userName = document.getElementById( "#{id:link1}" ).innerHTML;

だけです。
これは画面上で選択されたユーザー情報を取得する箇所なので、XPages での記述となっています。
残りは全く同じです。


6.IBM Verse Extensibilityの設定
アプリケーションはできた(はず)なので、あとはIBM Verseとの連携設定をするだけです。
この連携設定には、
「application.json」というファイルを使います。
このファイルはVerse Extension Pointsごとにフォーマットが決まっているので、一度作ってしまえば簡単に作成できます(他人がつくったものも流用できます)。
ということで、テクてくで公開されたサンプルの「application.json」をカスタマイズします(笑)
application.jsonのサンプル
 大事なのは、「url:」の個所です。ここに先ほど作成したXPagesのURLを設定します。
これにより、IBM Verseで宛先をクリックすると動作するようになります。
この「application.json」はIBM Verse On-Premisesの場合、Dominoサーバー上に配置する必要があります。
通常、
\VOP\application.json
に配置するのですが、DominoサーバーのDataディレクトリに置きたくないよ!
という場合、Dominoサーバーのnotes.iniに
VOP_EXTENSIBILITY_APPLICATIONS_JSON_FILEPATH=xxxx\application.json
※xxxxは任意のファイルパス
と記述することで、任意のディレクトリに配置することができます。


7.動かしてみた
IBM Verseでメールを作成後、[宛先]の個所がリンクになりクリックできるようになるはずです。
実際にクリックしてみると・・・
ロード中の画面

といったIBM Verse Extensibilityで作成した画面をロードしてますよ。という表示がされた後、XPages で作成したネームピッカー用の画面が表示されます!

XPages のネームピッカー用画面がIBM Verse内に表示された!

ここで、リンク状態になっている名前をクリックすると、宛先もしくはCc、Bccにセットされます。
これで画面下部にある[メッセージに戻る]をクリックしてメール本文を書いた後、[送信]をクリックすれば、セットした宛先にメールが送信されます。

どうでしょう?
XPagesでもネームピッカーの画面が作成できるとなれば、かなりIBM Verseの拡張の敷居は低くなったのではないでしょうか?
また、これを機にXPagesも触ってみようかな?という事になってくれれば、尚良!ですね。

XPages の画面ロードと宛先セットはVerseのお作法に従う必要はありますが、その中身はXPagesで自由に作ることができます。今回、私が作成したサンプルはとてもシンプルでこのままでは業務の利用はとてもできませんが、ちょっとカスタマイズすればかなり使えるようになると思います。


IBM Verse On-Premisesが使えるようになったので、一緒にIBM Verse Extensibilityを使ってみましょう!


ということで、IBM Verseの記事、前後編はこれで終わりとします。


今日はこの辺で・・・







Notes/Dominoで困ったことがあれば、弊社にお問い合わせください。
IBM Championの私が承ります!
お問い合わせはこちらから→Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: