お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

IBM Lotus Quickr services for Lotus Domino のユーザーインターフェースをカスタマイズする

テーマや拡張機能を利用して、IBM Lotus Quickr services for Lotus Domino のユーザーインターフェースをカスタマイズする方法を解説

佐藤淳 (acchan@jp.ibm.com), Lotus テクノロジー開発, Lotus Business Partner Technical Enablement/ソフトウェア開発研究所, IBM

佐藤淳はソフトウェア開発研究所のLotus テクノロジー開発に属し、IBM Collaboration Software (Lotus + WebSphere Portal) 製品に対応したソリューションやアプリケーションの開発に取り組んでいる ISV/BP 様の技術支援を行っています。息子の学校教育の一環でヤゴを飼育し、1 週間かけて羽化させることができたのですが、羽化したトンボを息子に渡そうと思ったら逃がしてしまいションボリしているエンジニアです。

概要： IBM Lotus Quickr services for Lotus Domino (以下、Quickr) は、プロジェクトチームやグループなど比較的小規模のコミュニティが効果的にコラボレーションを行うためのプレースとよばれる場所を IBM Lotus Domino（以下、Domino）上で提供する企業向けソーシャルソフトウェア製品です。ユーザーはWeb ブラウザからプレースにアクセスし、ファイル共有、ディスカッション、カレンダー機能などを利用することができます。このプレースのユーザーインターフェースは、2 種類の方法を用いて、目的に応じた柔軟なカスタマイズを行うことができます。1 つ目はテーマ機能で、画面全体の色合いやメニューなどの各コンポーネントの配置場所の変更といった見た目に関するカスタマイズを行うことができます。もう 1 つは、カスタムウィジェットと呼ばれるコンポーネントを作成して画面中に組み込むという高度なカスタマイズ方法です。本稿では、この 2 つのカスタマイズ手法について、具体的な例を用いながら紹介します。

タグを付ける!

日付： 2011年 8月 26日
レベル： 初級
アクティビティー： 1703 ビュー
お気軽にご意見・ご感想をお寄せください：

Quickr のアーキテクチャとカスタマイズ

Quickr は、最新のバージョンである 8.5 において大規模なアーキテクチャの見直しがなされ、ユーザーインターフェースも大幅に改良されています。その際に、最新の Web 2.0 技術を数多く採用しています。例えば、Quickr が提供するファイル共有やディスカッションなどの各サービスへアクセスするためのユーザーインターフェースでは、Dojo Toolkitにおけるウィジェット(dijit)と呼ばれるコンポーネントを使用したモジュール化が行われています。さらに、そのウィジェットの配置場所などを含めたページ全体の枠組みの構成を 1 つの HTML ファイルで定義するように統一化も行っています。また、ユーザーが各サービスにアクセスするために用意されているウィジェットはデータ層とユーザーインターフェース層とが完全に分離されており、Dojo Toolkit が提供している内部コミュニケーションの仕組みである Pub/Sub メッセージングモデルを利用して非同期にデータへのアクセスを行うようになっています。このような変更により、プレースにアクセスした際や、ページ上で何らかのアクションを実行した際に、その結果が画面に表示されるまでのパフォーマンスが大幅に改善され、プレース上でより快適にコラボレーションを行うことが可能になりました。また、内部で発生したイベントを捕捉することができるので、ボタンが押された際に入力された値の妥当性チェックなどのロジックを実行するようなカスタマイズを施すことも可能になっています。もちろん、既存のウィジェットをカスタマイズしたり、新たなウィジェットを追加したりすることも可能です。さらに、各ウィジェットが表示用にデータを取得する際に使用している API には REST 形式の軽量 API を採用しています。この REST API の一部はアプリケーション開発者に公開されており、それらを利用することで Quickr のサービスを利用した新たなアプリケーションやサービスを開発することができるようになっています。本稿では、この REST API についての解説は割愛しますが、「API Documentation」にドキュメントが公開されていますので、興味のある開発者は参照してみてください。

プレースのページ画面の構成に関してもカスタマイズが可能になっています。図 1 はプレースのページ上にどのようなウィジェットが配置されてページ全体を構成しているかを示しています。プレースのページ全体の枠組みが 1 つの HTML ファイルで定義され、メニュー部分には view.toc ウィジェット、メインのエリアには view.defaultfolder ウィジェットがロードされて画面が生成されていることを意味しています。このページの構成を記した HTML ファイルを編集することで、このページの構成を自由に変更したりすることができます。

図 1. プレースのページ構成

また、デフォルトでは、ページ全体の構成には見栄えを統一するために Lotus OneUI が適用されています。Lotus OneUI は Lotus が提供するアプリケーションのユーザーインターフェースに関するガイドラインで、これに準拠することですべての Lotus 製品の画面と統一感のある見た目や操作感を提供することができます。Lotus OneUI はプレース全体の画面構成を定義している HTML ファイルに用いられています。ここから紹介するユーザーインターフェースのカスタマイズを行う際には、Lotus OneUI の構成や、ページにおけるウィジェットの構成を把握しておくことが重要になります。

上に戻る

テーマの構成

プレース全体の色合いや Quickr が提供するサービスにアクセスするためのウィジェットの配置位置などは、すべてテーマを編集することで自由にカスタマイズすることができます。テーマの基本的な考え方や構成はQuickrの以前のバージョンと同様で、こちらの記事「IBM Lotus Quickr 8.1 ビジネス・テンプレート・カスタマイゼーション概説」で解説されています。ここでは、バージョン 8.5 で変更になった部分を中心に、具体例を示しながら解説します。テーマを構成するファイルは、従来と同様で、以下の 4 つのファイルです。

表 1. Quickr のテーマを構成するファイル

ファイル名	役割
page.htm	コンテンツを表示する際のページ構成を定義
edit.htm	コンテンツを編集する際のページ構成を定義
listfolder.htm	ディスカッションやフォルダーなどのリストを表示する際のページ構成を定義
stylesheet.css	すべてのページで適用可能なスタイルシート

デフォルトで適用されているテーマの構成ファイルは、<Dominoデータディレクトリ>¥domino¥html¥qphtml¥skins¥quickr に展開されており、テーマをカスタマイズする際には、このディレクトリ内のファイルをコピーして編集するのが一般的です。Quickr 8.5 からは、page.hml と stylesheet.css の 2 つのファイルを編集するだけでテーマのカスタマイズを行うことができるようになりました。下位互換性を保つために、カスタムテーマをデプロイする際にはedit.htm や listfolder.htm も必要になりますが、これらのファイルを編集する必要はありません。つまり、カスタマイズしたテーマを適用するのに必要なファイルは、編集を行った page.htm と stylesheet.css、および、デフォルトの edit.htm と folderlist.htm になります。また、テーマを識別するための画像ファイル(ギャラリー用の画像)も必要となるので別途用意します。それではテーマのカスタマイズ例を、Lotus Quickr wiki に公開されているサンプルを利用して体験してみましょう。サンプルのテーマは「Sample Custom Themes for Quickr Domino 8.5」からダウンロードできます。サンプルで公開されているテーマを適用すると、プレースのページのデザインが図 2 のように変更されます。

図 2. サンプルのテーマを適用したページ

上に戻る

カスタムテーマの作成

図 2 のようなカスタマイズを行うために、プレースの全体を構成する page.htm と、そのページを装飾するスタイルシートである stylesheet.css に以下のような編集を行っています。

page.html の編集内容

スタイルシートのファイル(styesheet.css)を参照する
ロゴファイルを差し替える (Quickr のロゴから、Renovations のロゴへ変更)
ページを幅広く使用できるように、lotusRightCorner クラスと lotusInner クラスが適用されている div タグを削除
上部にある「プレース」リンクを削除するために、PlacesOrFiles ID が設定されている ul タグを削除する
検索バーの位置を変更するために、lotusFirst クラスが適用されている箇所の外側にコードを移動する
タイトルバーを削除するために、該当箇所のコードを削除する
パンくずリストの位置を変更するため、lotusContent クラスが適用されている箇所の外側にコードを移動する
メニューを上部に表示するために、lotusContent クラスが適用されているところから、lotusColLeftクラスが適用されているところにコードを移し、lotusColLeft クラス自体は削除する
ページ後半部分のコードを削除し、フッターを削除する

stylesheet.css の編集内容

背景のロゴを設定する
上部に表示されるログインユーザー名やログアウトメニューの文字の属性を白の太字にする
背景の画像を繰り返し表示する
パンくずリストの文字色を青と群青色に変更する
アクションボタンの文字サイズを大きくし、色を青にする
メニュー(toc)で箇条書きを無効にして、リストのスタイルをブロック(block)からインライン(inline)に変更する
lotusContent と lotusPlaceBar の周りを青い罫線で囲む

具体的な実装方法はソースコード中のコメントを参照してください。HTML ファイルには編集内容リストの各実装該当する箇所にコメントを入力しています。また、スタイルシートにも同様にコメントで編集内容を記載しています。

page.hml のソースコード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<!-- Copyright IBM Corp. 2010  All Rights Reserved.                    -->

<head>
<link rel="shortcut icon" href="/qphtml/html/common/quickr.ico">

<title></title>


<!--Need to have dojo config set-->
<script type="text/javascript">
 var djConfig = {
  parseOnLoad : true
 }
</script>

<!--Dojo scripts, common, and theme js-->
<script type="text/javascript"
 src="/qphtml/skins/quickr/scripts/Quickr.js?&QPVersion=850000.000000">
 
</script>

<script type="text/javascript">
 window.QuickrSupportUtil.loadServerBase();
</script>
<script type="text/javascript">
 window.QuickrSupportUtil.loadCoreStyles();
</script>
<script type="text/javascript">
 window.QuickrSupportUtil.loadCoreDojo();
</script>
<script type="text/javascript">
 window.QuickrSupportUtil.loadSupplementalDojo();
</script>

<script type="text/javascript">
 window.QuickrSupportUtil.loadQuickrWidgets();
 </
  script>
 <script type="text/javascript">window.QuickrSupportUtil.loadSTLink();
</script>
<script type="text/javascript">
 window.QuickrSupportUtil.loadMainUI();
</script>



</head>

<q_body> <span class="lotusui tundra lotusSpritesOn">

 <div dojoType="quickr.widgets.misc.loading"
  className="lotusLoading lotusInfoBox
  qkrWorking"></div> <!― 1スタイルシートのファイル(styesheet.css)を参照する -->
 <link rel="stylesheet" type="text/css" href="stylesheet.css">

 <div class="lotusFrame" id="pageFrame">

  <div class="lotusBanner" id="pageBanner">
   <!―3 ページを幅広く使用できるように、lotusRightCorner
  クラスと lotusInner クラスが適用されている div タグを削除 
   <div class="lotusRightCorner">
    <div class="lotusInner">
     3-->
     <!―2 ロゴファイルを差し替える (Quickr のロゴから、Renovations のロゴへ変更) 
     <a class="lotusAccess accessibility" accesskey="S"
      href="javascript:gotoHash('mainContent')"><img
      alt="@@[GENERAL.SKIPTOMAINCONTENT]@@"
      src="/domjs/dojo-1.3.2/dojo/resources/blank.gif" />
     </a> <img src="/domjs/dojo-1.3.2/dojo/resources/blank.gif"
      alt="@@[BANNER.LOGO_ALT]@@" class="lotusLogo" id="lotusLogo" />
     2--> 
     <img src="toolbar_logo.gif" />
     <ul class="lotusInlinelist">

      <!!― 5検索バーの位置を変更するために、lotusFirst クラスが適用されている箇所の外側にコードを移動する-->
      <li class="lotusFirst">
      <!― 5検索バーの位置を変更するために、lotusFirst クラスが適用されている箇所の外側にコードを移動する-->
       <div dojoType="quickr.widgets.misc.searchbox"
        style="display: inline-block"></div>
        <!― 5検索バーの位置を変更するために、lotusFirst クラスが適用されている箇所の外側にコードを
        移動する-->
      </li>

      <QuickPlaceSkinComponent name=MyStatus
       format='<li
       class="lotusFirst"><Item></li>'>
      <QuickPlaceSkinComponent name=Help format='<li><Item></li>'>
      <QuickPlaceSkinComponent name=signin
       replaceString='Sign In=Login && Sign Out=Logout'
       format='<li><Item></li>'>
     </ul>
     <!―4 上部にある「プレース」リンクを削除するために、PlacesOrFiles ID が設定されている ul
      タグを削除する 
     <ul id="PlacesOrFiles" class="lotusInlinelist lotusLinks"
      style="display: inline;">
      <QuickPlaceSkinComponent name=MyPlaces
       format='<li class="lotusFirst lotusSelected"><Item></li>'
       replaceString='My Places=Places'>
     </ul>
     4-->
     <!―3
      ページを幅広く使用できるように、lotusRightCorner クラスと lotusInner クラスが適用されている div
      タグを削除 
    </div>
   </div>
   3-->
  </div>
  <!--lotusBanner-->

  <!― 6 タイトルバーを削除するために、該当箇所のコードを削除する 
  <div class="lotusTitleBar" id="pageTitleBar">
   <div class="lotusRightCorner">
    <div class="lotusInner">
     <ul class="lotusTabs">
      <li><div dojoType="quickr.widgets.misc.myplaces"
        id="myplaces"></div>
      </li>
     </ul>
     <!―5 検索バーの位置を変更するために、lotusFirst クラスが適用されている箇所の外側にコードを移動する 
     <div dojoType="quickr.widgets.misc.searchbox"></div>
     5 -->
    </div>
   </div>
  </div>
  6 ->
  <!--lotusTitleBar-->



  <div class="lotusPlaceBar" id="pagePlaceBar">
   <div class="lotusRightCorner">
    <div class="lotusInner">
     <!--6.      <h2><div
  dojoType="quickr.widgets.misc.placelink" id="placelink"></div></h2>  6-->
     <!--7
  パンくずリストの位置を変更するため、lotusContent クラスが適用されている箇所の外側にコードを移動する -->
     <div dojoType="quickr.widgets.misc.breadcrumb"></div>

     <div class="lotusBtnContainer">
      <span class="lotusBtn
      lotusBtnAction lotusRight"> <a
       dojoType="quickr.widgets.misc.customizelink"
       linkText="@@[PLACE.ACTIONS.CUSTOMIZE.TITLE]@@"></a> </span> <span
       class="lotusBtnAction lotusRight"> <a
       dojoType="quickr.widgets.menu.placeActionsMenu"
       linkText="@@[PLACE.ACTIONS.PLACE_ACTIONS]@@"></a> </span>


     </div>

    </div>
   </div>
  </div>
  <!--lotusPlaceBar-->

  <div class="lotusMain">
   <!―8 メニューを上部に表示するために、lotusContent
   クラスが適用されているところから、lotusColLeftクラスが適用されているところにコードを移し、lotusColLeft クラス自体は削除する
   
   <div class="lotusColLeft" id="lotusColLeft">
    <div role="menu" class="lotusMenu">
     <div class="lotusBottomCorner">
      <div class="lotusInner" dojoType="quickr.widgets.view.toc">
      </div>
     </div>
    </div>
   </div>
   8-->
   <!--lotusColLeft-->




   <div class="lotusContent">
    <div class="quickrContentWrapper">
     <div dojoType="quickr.widgets.misc.messageviewer"></div>

     <!--7パンくずリストの位置を変更するため、lotusContent クラスが適用されている箇所の外側にコードを移動する　<div
dojoType="quickr.widgets.misc.breadcrumb"></div>    6-->

     <!―8 メニューを上部に表示するために、lotusContent
クラスが適用されているところから、lotusColLeftクラスが適用されているところにコードを移し、lotusColLeft クラス自体は削除する-->
     <div class="lotusInner" dojoType="quickr.widgets.view.toc"></div>
     <br> <br>
     <!--8-->

     <div dojoType="quickr.widgets.view.tabbedbanner"></div>
     <div dojoType="quickr.widgets.view.orderedbanner"></div>

     <QuickPlaceSkinComponent name=pageContent>
    </div>


   </div>
   <!--lotusContent-->


  </div>
  <!--lotusMain-->


  <!―9 ページ後半部分のコードを削除し、フッターを削除する 
  <div dojoType="quickr.widgets.misc.footer"></div>
  <div dojoType="quickr.widgets.misc.servermessages"></div>
  -->
 </div>
 <!--lotusFrame-->

 <div dojoType="quickr.widgets.misc.skincomponentrenderer"></div>
 <div dojoType="quickr.widgets.popupcontroller"></div> <!-- <div
  dojoType="quickr.widgets.view.st"></div> --> <script>
   if (q_BaseLoader.sametime.enabled == true)
    writeSTLinksApplet(q_BaseLoader.user.sametimeName,
      q_BaseLoader.sametime.token, true);
  </script> </span>
</q_body>

stylesheet.css のソースコード:

/* Copyright IBM Corp. 2007, 2010  All Rights Reserved.              */

/* 5724-S31                                                          */
/* disclosure restricted by GSA ADP Schedule Contract with IBM Corp. */
/*                                                                   */
/*********************************************************************/
#lotusFrame {
 display: none;
}

/* 1. 背景のロゴを設定する */
.lotusBanner {
 background: url(BannerBackgroundWide.jpg) no-repeat;
 padding: 10px;
}

/* 2. 上部に表示されるログインユーザー名やログアウトメニューの文字の属性を白の太字にする */
.lotusBanner a.lotusPerson,.lotusBanner a.lotusPerson:visited {
 color: white;
 font-weight: bold;
}

.lotusBanner ul li a {
 color: white;
 font-weight: bold;
 padding: 2px 5px;
}

/* 3. 背景の画像を繰り返し表示する */
body.lotusui {
 -moz-background-clip: border;
 -moz-background-inline-policy: continuous;
 -moz-background-origin: padding;
 background: url(body_background.gif) repeat-x;
}

/* 4. パンくずリストの文字色を青と群青色に変更する */
.lotusPlaceBar .lotusRightCorner .lotusInner .lotusBreadcrumbs {
 color: blue;
}

.lotusPlaceBar .lotusRightCorner .lotusInner .lotusBreadcrumbs a {
 color: navy;
}

上に戻る

カスタムテーマの適用

次に、編集した page.htm と stylesheet.css、およびその他の必要なファイルをデプロイして、テーマを適用する手順を示します。ダウンロードしたサンプルのテーマファイル一式を展開し、 <Domino データディレクトリ>¥domino¥html にコピーします。ファイル配置後のディレクトリ構成は図 3 のようになります。

図 3. サンプルテーマファイルの展開

Quickr 8.5 から、作成したカスタムテーマをデプロイする前にテストすることができるようになりました。上記のように Domino の HTTP タスクから参照できるパスにテーマを構成するファイルを配置した場合、以下の URL に Web ブラウザからアクセスすることで、作成したテーマを適用したプレースのページ構成を確認することができます。

http://<サーバーアドレス>/<テーマファイルへのパス>/page.htm?BaseUrl=http://<サーバーアドレス>/LotusQuickr/<プレース名>/Main.nsf

たとえば、サーバー名が quickr.lotus.com で、上記のパスにテーマファイルを配置していて、developerWorks という名前のプレースでテストを行う場合、テスト用の URL は以下のようになります。

http://quickr.lotus.com/Renovations/page.htm?BaseUrl=http://quickr.lotus.com/LotusQuickr/developerworks/Main.nsf

実際にアクセスしてみると、図 4 のように、カスタムテーマが適用されたプレースのページを確認することができます。ただし、こちらのテスト用の　URL は現在、英語環境でのみ有効な機能となっていますので、Web ブラウザの言語を英語に切り替えてからこの機能を実行する必要があります。

図 4. カスタムテーマのテスト

テストを行い、動作の確認が完了したら、本番環境のプレースにカスタムテーマをデプロイしたりテーマをパッケージして再配布したりすることができます。その方法は前バージョンである Quickr 8.1 と同様で、具体的な手順などについてはこちらの記事「IBM Lotus Quickr 8.1 ビジネス・テンプレート・カスタマイゼーション概説」で詳しく解説されているので本稿では割愛します。

上に戻る

カスタムウィジェットによるカスタマイズ

Quickr 8.5では、テーマのカスタマイズだけでなく、プレースのページに新規にウィジェットを追加したり、Quickr が提供しているメニューやウィジェットを拡張したりすることが新たに可能となりました。ここではサンプルを利用しながら、カスタムウィジェットによるプレースのページのカスタマイズ方法を解説します。カスタムウィジェットを用いてプレースのページをカスタマイズするために必要となる作業は、以下の 3 ステップになります。

カスタムウィジェットを作成する
Quickr のデータをウィジェット内で表示するために、データのフォーマット変換用の XSL ファイルを作成する
作成したウィジェットを登録する

今回は、Quickr に格納されているデータへの直接的なアクセスを必要としないシンプルなカスタマイズ例を紹介します。つまり、上記のステップ2 の XSL ファイルの作成を必要とせず、ウィジェットを配置しページをカスタマイズする例を紹介します。ここで行うカスタマイズの内容は、Quickr のフォーム機能を用いて新規フォームを作成し、そのフォームを用いて作成した文書の iframelink というフィールドに値がセットされている場合、そのフィールドに格納されている URL を iFrame （インラインフレーム）を利用して Quickr のページ内に表示するというものです。このカスタマイズを適用するとプレースのページは図 5 のようになります。

図 5. カスタムウィジェットによるページのカスタマイズ例

最初のステップとして、iframelink フィールド内の文字列を取得し、iFrame 内にその URL のページを表示するようなウィジェットを iframe.js というファイル名で作成します。その実装例は以下のようになります。

iframe.js のソースコード

dojo.provide("qext.widgets.page.iframepage");

dojo.require("quickr.widgets.page.defaultPage");

//defaultPage 上に新たなウィジェットを作成。 特定の条件の時のみオーバーライドされるように実装する。
dojo.declare(
 "qext.widgets.page.iframepage", 
 [quickr.widgets.page.defaultPage], 
 {
  //openPage メソッドをオーバーライドして、iFrame の領域を作成するようにする。
  openPage: function() {
  
   //ページ上のパラメータにアクセスできるように、モデルを取得する。
   var xmldoc = this.getModel().getXmlObject();
   
   //フィールドに格納されている値を格納する。
   var customFields = this.getCustomFields(xmldoc);
   
   var bOK = false;
   
   //iframelink フィールドが存在している場合に iFrame 領域を作成し、その中でフィールドに格納されている URL を開く。
   if (typeof customFields["c_iframelink"] != "undefined") {
    
    var el = dojo.byId(this.target);
    if (el) {
     var containerNode = dojo.doc.createElement("div");
     
     var iframe = 
     dojo.create("iframe", {src: customFields["c_iframelink"].value}, containerNode);
     dojo.style(iframe, "width", "100%");
     dojo.attr(iframe, "height", "800px");

     //作成した iFrame の領域(node)をページに追加する。
     this.replaceTargetNodeMarkup ( el, containerNode );
     
     
     //パンくずリストが機能するように、現在のロケーションを取得する。
     var sName = "";
     try {
      sName = window.q_XmlUtils.getDocsByTag(xmldoc, "title")[0].firstChild.nodeValue;
     } catch (ee) {}
     
     this.publishEvent( this.ACTION.GENERAL.SETCURRENTLOCATION, 
     {type: this.CONSTANTS.TYPE.PAGE, name: sName, unid: this.unid, entryUnid: this.unid}
     );
     
     //これ以降、デフォルトで用意されているページのアクションを実行しないようにする。
     bOK = true;
    }
   }
    
   //iramelink フィールドが存在していないときや、何かしらのエラーが発生した場合には通常のページのアクションが実行されるようにする。
   if (!bOK) {
    this.inherited(arguments);
   }
   
   
  },
  getWidgetLocation:function(){   
   /*
   * このウィジェットが参照するファイルのロケーションを指定する。
   * (今回の例では必要無いが、XSL ファイルなどはこのパスに配置するようになる。)
   */
   return "/qphtml/widgets/page";
  }
 }
);

ウィジェットの作成が完了したら、作成した iframe.js ファイルを <Domino データディレクトリ>\domino\html\qphtml\skins\qext\widgets\page に配置します。ウィジェットのファイルは Domino の　http サーバーが参照できるところであれば、どこに配置しても問題ありませんが、Quickr のカスタムウィジェットは <Domino データディレクトリ>\domino\html\qphtml\skins\qext 以下に配置することが推奨されています。カスタムウィジェットの配置が完了したら、そのウィジェットが読み込まれるように設定を行います。Quickr ではデフォルトでロードされるウィジェットの定義を　<Domino データディレクトリ>\\domino\html\qphtml\widgets\resources にある、widgetRegistryConfig.js に記述しています。そして、カスタムウィジェットの追加などを行う際には同じディレクトリに存在する、widgetRegistryConfig_ext.js に定義を記述します。このファイルはデフォルトでは空になっています。実際に、配置した iframe.js を登録する際には、 widgetRegistryConfig_ext.js に以下のような記述を行います。

widgetRegistryConfig_ext.jsのソースコード

{
 registerWidgets:
 [
    {
     type:  'REGISTERMODULEPATH',
     name:  "qext.widgets",
     path:  "/qphtml/skins/qext/widgets"
    }
    ,
    {
     type: 'REGISTERMODULEPATH',
     name: 'com.ibm.quickr',
     path: "/qphtml/widgets/com/ibm/quickr"
    }
    ,
    {
     type: "page",
     condition: "(object.entry.fields.c_iframelink.length > 0)",
     use: "qext.widgets.page.iframepage"
    }
    ]      
}

この例では、iframelink というフィールドが存在し、値が格納されている場合に iframe.js で作成した qext.widgets.page.iframepage ウィジェットがページにロードされるように実装されています。これらの設定が完了した後に、Quickr で iramelink というフィールドを持つカスタムフォームを作成し、文書を格納します。その後、保存されたフォームを開くと iframelink に入力されている URL が iFrame で開かれることを確認できます。以上のように、特定の条件の際にカスタムウィジェットをページ内に埋め込むことができるので、柔軟なページのカスタマイズを行うことができます。

上に戻る

まとめ

Lotus Quickr 8.5 以降では、従来から提供されているページ全体の見た目を変更するテーマ機能が強化され、今まで以上にシンプルかつ柔軟にカスタマイズをすることが可能になりました。その背景には、ページの構成をモジュール化し、ウィジェットで構成するように変更したことが大きな要因としてあります。また、ウィジェットでページを構成することにより、ウィジェット自身をカスタマイズしたり、新規に作成したカスタムウィジェットをページ内に組み込むことが可能になりました。これら 2 つのカスタマイズ機能を用いることで、今までよりも使い勝手の良いプレースを実現することが可能になっています。

参考文献