Lotus inotes 新カスタマイズ機能解説 Lotus Technical Update Workshop 2010/6 ISE Workplace, Core Collaboration Group 2008 IBM Corporation

© 2008 IBM Corporation

Lotus iNotes 8.5.1 新カスタマイズ機能解説

Lotus Technical Update Workshop 2010/6 ISE Workplace, Core Collaboration Group

特記事項



本資料の記載内容は、正式な IBM のテストやレビューを受けておりま

せん。内容について、できる限り正確を期すよう努めてはおりますが、い

かなる明示または暗黙の保証も責任も負いかねます。本資料の情報

は、使用先の責任において使用されるべきものであることを、あらかじめ

ご了承ください。



掲載情報は不定期に変更されることもあります。他のメディア等に無

断で転載する事はご遠慮ください。



本資料の著作権は日本アイ･ビー･エムにあります。非営利目的の個

人利用の場合において、自由に使用してもかまいませんが、営利目的

の使用は禁止させていただきます。



IBM, AIX, Lotus, Lotus Notes, Lotus Domino は Internal Business

Agenda



Lotus iNotes の基本アーキテクチャとカスタマイズ概要



Lotus iNotes でのロゴ・外観のカスタマイズ



Lotus iNotes でのアクション・動作のカスタマイズ



Lotus iNotes でのウィジェットの活用



カスタマイズにあたっての、 Hint & Tips

このセッションの目標：

• Lotus iNotes のアーキテクチャを理解し、カスタマイズ時の課題を理解する。 • Lotus iNotes でカスタマイズ可能な箇所を理解する。 • Lotus iNotes で、カスタマイズを行うための方法の概要を理解する。

このセッションの目標：

• Lotus iNotes のアーキテクチャを理解し、カスタマイズ時の課題を理解する。 • Lotus iNotes でカスタマイズ可能な箇所を理解する。 • Lotus iNotes で、カスタマイズを行うための方法の概要を理解する。

Lotus iNotes のカスタマイズとは



Lotus iNotes について

– メール・カレンダー・スケジュール機能などを、 HTTP クライアントに対して提供する

、Lotus Notes/Domino 標準の機能

– これまでの「フォーム」「ビュー」といった、Lotus Domino Web アプリケーションの開

発思想とは異なるアーキテクチャ – カスタマイズを実施するためには、通常の Domino Web アプリケーション開発 スキルとは別途、Lotus iNotes カスタマイズスキルが必要



Lotus iNotes カスタマイズの事前考慮点

– サポートポリシーを理解する – カスタマイズを行った場合は、標準テンプレートで問題が再現するかどうかを確 認する必要がある – バージョンアップ・障害修正モジュールの適用時の注意点

Lotus Domino Designer 不要で出来る簡単カスタマイズ



一部の画面設定は、サーバー設定文書、 notes.ini で設定可能

–

デフォルトの起動画面を、メール画面にする

–

必要なタブのみ表示させる

–

など



ポリシーを使うことで、プリファレンスの一部などを設定可能

–

メールポリシー

–

デスクトップポリシー

–

セキュリティポリシー



簡単なウィジェットの適用

Lotus Domino Administrator ヘルプ

Lotus iNotes のカスタマイズ可能な主な項目



Lotus iNotes ロゴの変更



背景など、各種色の変更



アラートメッセージや表示文字の変更



アクションメニューの追加・変更・削除



各種イベント発生時の動作



マストヘッドの変更



エージェントの実行



ウィジェットの追加

Lotus iNotes 8.5.1 のアーキテクチャー

mail85.ntf mail\JUser.nsf iNotes\Forms85.nsf

Lotus iNotes

画面 View Design Data Most Design: CSS, JavaScript, Images, HTML 継承 iNotes\Forms85_x.nsf

N ew

!

 Lotus iNotes 8.5.1 アーキテクチャー図 ユーザー のメール ファイル L o tu s iN o te s の設計 要素を格納した D B 変更をした場合は、 将来的な F ix 適用時 などに再度変更が必 要 カスタマイズ設計要素 を入れるための器。 8 .5 .1 より利用可能 ユーザーに表 示される画面 メールテンプ レート 参照

Forms85.nsf と、 Forms85_x.nsf



Lotus iNotes のカスタマイズは、基本的に Forms85.nsf と Forms85_x.nsf に対

して行う

–

Forms85.nsf は、 Lotus iNotes のコアとなるコードが格納されるため、バージョン

アップや Fix 適用時は上書きされる。



Forms85_x.nsf とは

–

Lotus iNotes 8.5.1 からの新機能

–

Lotus iNotes のカスタマイズ設計要素を格納するためのデータベース

–

デフォルトでは存在しないため、詳細テンプレート「 Lotus iNotes Extension

Forms (8.5) 」テンプレート（ Forms85_x.ntf ）より、手動で作成する。

• ファイル名は固定 iNotes\Forms85_x.nsf で作成し、サーバーに配置する。

Forms85_x.nsf の中身



カスタマイズ設計用の、サブフォームが用意されている

–

Custom_XXX という設計要素でカスタマイズ設計の格納ポイントになる



独自の設計要素を追加可能

（参考）

_{Forms85_x.nsf について}

 バージョン8.5.1 から、カスタマイズ時に編集するリソースの一部が「 Forms85_x.nsf 」という拡 張フォームファイルに分離されました

 Forms85_x.nsf には以下のサブフォームが定義されています

Custom_Banner_Lite Lotus iNotes ロゴを置き換えます

Custom_Common_Utils Custom_JS と Custom_JS_lite の両方から呼び出される機能を追加します

Custom_CSS 新しい CSS スタイルを追加します Custom_JS アクションバー項目の追加や削除に使用するコールバック機能と、ページの表示や送信を 実行する追加のコードが定義されています。従来の設計フォームで使用されます ( ほとん どのコードは新しいフォームを使用しますが、従来のフォームを使用するコードもあります) Custom_JS_Edit リッチテキストエディタにフォントを追加します Custom_JS_Lite Custom_JS と同様のコールバック機能が定義されています。新しい「ライトな」設計フォー ムで使用されます Custom_Masthead すべてのページにマストヘッドを追加します Custom_Name_Lite 韓国語名表示形式のコードを指定します

Lotus iNotes ロゴの変更



画面左上の

Lotus iNotes ロゴを別のイメージファイルに置き換え可能

– イメージファイルをインポートし、サブフォーム（Custom_Banner_Lite ）を編集

Lotus iNotes ロゴの変更概要

1

Forms85_x.nsf のファイルリソースに、ロゴファイルを格納

2

Forms85_x.nsf の Custom_Banner_Lite サブフォームを変更する

●

サブフォーム内で、インポートしたロゴファイルを指定する。

ロゴファイルの

インポート

ロゴファイルの

インポート

サブフォームを変更

し、インポートした

ロゴを設定する

サブフォームを変更

し、インポートした

ロゴを設定する

変更なし！

変更なし！

（参考）サブフォームの変更

₍₁₎



Custom_Banner_Lite サブフォームの編集

● 「Forms85_x.nsf 」の サブフォーム「 Custom_Banner_Lite 」を修正する ● サブフォーム内には、変更の方法がコメントで英語で記載されており、また変 更のためのコードが既にコメント内に記載されている。 ● 基本はコード内のファイル名だけ変更すればよい ● サンプルコードから、まずコメント部分を取り除く ● （“<NotesComment>” および“ </NotesComment>” を削除） <Notes Comment>

<ta b le c la s s = "s -le f t p a n e l" s ty le = "le f t :4 p x ;h e ig h t:1 .7 e m ;ta b le -la y o u t:f ix e d ;" c e lls p a c in g = "0 " c e llp a d d in g = "0 "> ： （省略） ： <s t y le >#P r o d u c t L o g o {d is p la y :n o n e }</s ty le > </Notes Comment>

1. サンプルコード

のコメントを外す

1. サンプルコード

のコメントを外す

<NotesComment> 内はコメントのため注意

（参考）サブフォームの変更

₍₂₎

●

コード内に、変更したいロゴのファイル名を設定

● コード内の「 parent.AAA.BYp(‘transparent.gif’) 」を変更 ● インポートしたイメージファイル名 < 例： newimage.gif> を設定し、” true” 引 数を追加 ● true 引数がない場合は、 Forms85.nsf 内の同名リソース （Custom_Banner_Lite ）へアクセスされるため、 true 引数付のカスタマイ ズを推奨 変更前 parent.AAA.BYp('transparent.gif')

変更後 parent.AAA.BYp('newimage.gif‘, true)

ロゴ表示エリアサイズの変更



置き換えたロゴは自動的に既定の大きさにリサイズされる

– 幅：111px / 高さ： 16px



どうしてもロゴの表示エリアのサイズの変更が必要な場合には以下のファイ

ルを編集する　（可能な限り、実施しないことを推奨）

– Custom_Banner_Lite – f_ShimmerSkin-h_ListFolder （フルモードで使用するスキンファイル） – l_ShimmerSkin-h_ListFolder （ライトモードで使用するスキンファイル）



「

f_ShimmerSkin-h_ListFolder 」と「 l_ShimmerSkin-h_ListFolder 」は

「

Forms85_x.nsf 」ではなく、「 Forms85.nsf 」内に存在

– Forms85.nsf の変更となるので注意が必要 元のファイル（幅： 5 3 0 p x / 高さ： 1 2 0 p x ）

ロゴ表示エリアサイズの変更

変更前

( 参考 ) ロゴ表示エリアサイズの変更手順 （ 1/5 ）



Custom_Banner_Lite の編集

1. 「Forms85_x.nsf 」の [ 共有要素 ] > [ サブフォーム ] を展開し、 「Custom_Banner_Lite 」を開きます 2. ロゴの置き換え手順内でコピー・ペーストしたコード内（コメントタグに含まれてい ない部分）の以下の記述を変更します（イメージファイルの幅 / 高さを指定 し、xoffset/yoffset の記述を削除します） 3. 変更を保管します

変更前 + ' width="111" height="16" xoffset="0" yoffset="60"' 変更後例 + ' width=“530" height=“120"

( 参考 ) ロゴ表示エリアサイズの変更手順 （ 2/5 ）



[f/l]_ShimmerSkin-h_ListFolder の編集

1. 「Forms85.nsf 」の [ リソース ] > [ ファイル ] を展開し、以下のファイルを開き ます – f_ShimmerSkin-h_ListFolder – l_ShimmerSkin-h_ListFolder 2. 編集前のファイルをバックアップします 3. 下表の箇所を編集します 行番号 変更前 変更後例 変更内容 23 #e-leftpanel {

padding-top:4.3em; #e-leftpanel {padding-top:10.05em;

画面左にあるパネル位置

37 #e-content {

padding-top: 4.3em; #e-content {padding-top: 10.05em;

( 参考 ) ロゴ表示エリアサイズの変更手順 （ 3/5 ）

行番号 変更前 変更後例 変更内容 98 <div id="e-toppanel" class="s-toppanel s-tab-selected-color" style=" height:4.3em; <div id="e-toppanel" class="s-toppanel s-tab-selected-color" style=" height:10.05em; タブの直下部分の位置 （IE ） 104 <div id="e-toppanel" class="s-toppanel s-tab-selected-color" style=" height:4.3em; <div id="e-toppanel" class="s-toppanel s-tab-selected-color" style=" height:10.05em; タブの直下部分の位置 （Firefox ） 112 <div class="s-toppanel" style="top:-1px; height:4em; <div class="s-toppanel" style="top:-1px; height:9.75em; ロゴの背景の高さ（IE ） 122 <canvas id="e-toptoolbar-background" class="s-toppanel" style="top:-1px; height:4em; <canvas id="e-toptoolbar-background" class="s-toppanel" style="top:-1px; height:9.75em; ロゴの背景の高さ （Firefox ）

( 参考 ) ロゴ表示エリアサイズの変更手順 （ 4/5 ）

行番号 変更前 変更後例 変更内容 305 （l_Shimmer Skin-h_ListFolde r は 298 ） <div class="s-toppanel" style="width:163px;heigh t:2.25em;"> <div class="s-toppanel" style="width:530px;heig ht:8em;"> ロゴ表示エリアの高さ・幅 306 （l_Shimmer Skin-h_ListFolde r は 299 ） <div class="s-leftpanel" style="width:163px;"> <div class="s-leftpanel" style="width:530px;"> ロゴ表示エリアの幅

( 参考 ) ロゴ表示エリアサイズの変更手順 （ 5/5 ） 上級編



[f/l]_ShimmerSkin-h_ListFolder の変更を避ける

–

Forms85.nsf の変更を行うと、リリースアップ時に再カスタマイズする必要が

あるため。



JavaScript の DOM 操作を使い、フォームオープン時に動的にスタイルを変

更する。

–

Custom_JS という Forms85_x.nsf に用意されたサブフォームの

Custom_Scene_PostLoad_Lite() 内で、 DOM 操作をする。

• 以下コード例： 　if (s_SceneName == 'e-panelmanager:EVy') {

var oTopPanel = AAA.EcK.getElementById('e-toppanel'); oTopPanel.style.height = '10.05em'; var oTopPanelNext=oTopPanel.nextSibling while(oTopPanelNext.nodeType!=1){ oTopPanelNext=oTopPanelNext.nextSibling;} oTopPanelNext.style.height = '10.05em'; AAA.EcK.getElementById('e-content').style.paddingTop = '10.35em'; AAA.EcK.getElementById('e-leftpanel').style.paddingTop = '10.35em'; AAA.EcK.getElementById('e-maintabs-container').style.top = '8.3em'; } 　if (s_SceneName == 'e-panelmanager:EVy') {

var oTopPanel = AAA.EcK.getElementById('e-toppanel'); oTopPanel.style.height = '10.05em'; var oTopPanelNext=oTopPanel.nextSibling while(oTopPanelNext.nodeType!=1){ oTopPanelNext=oTopPanelNext.nextSibling;} oTopPanelNext.style.height = '10.05em'; AAA.EcK.getElementById('e-content').style.paddingTop = '10.35em'; AAA.EcK.getElementById('e-leftpanel').style.paddingTop = '10.35em'; AAA.EcK.getElementById('e-maintabs-container').style.top = '8.3em'; }

色の変更



Lotus iNotes 画面上の色を変更するには「 Forms85.nsf 」内に

配置された以下のファイルを編集する

– dwa.properties – f_ShimmerSkin-h_StyleSheet – l_ShimmerSkin-h_StyleSheet – f_ShimmerSkin-h_ListFolder – l_ShimmerSkin-h_ListFolder



変更する箇所により編集対象のファイルは異なる



変更する箇所は特にガイドがない

–

スキンファイル上のスタイル名による試行錯誤

色の変更概要

1

Forms85.nsf のファイルを変更する

●

dwa.properties のプロパティ

●

ShimmerSkin のスタイル

Forms85.nsf

Forms85_x.nsf

グラデーション

の変更

グラデーション

の変更

_{スタイルの}

変更

( 注 )

スタイルの

変更

( 注 )

変更なし・・・

_{変更なし・・・}

注：スタイルは

Forms85_x.nsf から上書きも可能です

色の指定方法



色の指定方法は以下の

3 通りが可能

1. 色の名前を指定 – 例） D_BORDER_SCROLLHINT=black 2. rgb(R, G, B) ・・・ 0 から 255 までの値を指定 – 例） D_STROKE_TAB=rgb(127, 147, 179) 3. #RRGGBB ・・・ 00 から FF までの 16 進数を指定 (00 = 0, FF = 255) – 例） D_BORDER_SWITCHER_BACKGROUND=#8090A0

グラデーションの指定方法 （

_{1/2 ）}



グラデーションの指定方法は以下の

2 通りが可能

– 4 つの数字セット： [P1, R1, G1, B1, P2, R2, G2, B2, ...] – Pn ：色指定する領域の位置 – % 指定 – 0 = 最上部、 100 = 最下部 – Rn ：赤の値（ 0 ～ 255 ） – Gn ：緑の値（0 ～ 255 ） – Bn ：青の値（ 0 ～ 255 ） D _ G R A D IE N T _ T O P T O O L B A R = [0 , 0 , 0 , 2 5 5 , 3 0 , 2 5 5 , 2 5 5 , 2 5 5 , 1 0 0 , 2 5 5 , 0 , 0 ] → 最上部が青、上から 3 0 ％の領域が白、最下部が赤のグラデーション 青 白 赤 例：

グラデーションの指定方法 （

_{2/2 ）}

– ストリング： color="CS" color2="CE" colors="P1 C1, P2 C2, P3 C3, ...“

– CS ：最初（最下部）の色の値 – CE ：最後（最上部）の色の値 – Pn ：色指定する領域の位置 – % 指定 – 0 = 最上部、 100 = 最下部 – Cn ：Pn に設定する色の値 D _ G R A D IE N T _ T O P T O O L B A R _ IE = c o lo r = "r g b (2 5 5 ,0 ,0 )" c o lo r 2 = "r g b (0 ,0 ,2 5 5 )" c o lo r s = "7 0 % r g b (2 5 5 ,2 5 5 ,2 5 5 )" → 最下部が赤、最上部が青、下から 7 0 ％の領域が白のグラデーション 例： 青 赤 白

色のカスタマイズ例



以下の部分などの色が変更可能

–

次ページ以降の変更箇所は、

Lotus iNotes 8.5.1 での非公式な検証

結果による検証例を記載しております。

画面最上部 _{ツールバー} モードパネル タブ 左パネル ステータスバー アクションバー メニュー

画面最上部 （

_{1/2 ）}

変更前

変更後

画面最上部　変更例 （

_{2/2 ）}



Firefox



IE

ファイル dwa.properties

変更前 D_GRADIENT_TOPTOOLBAR_IE=color="rgb(53,87,135)" _{color2="rgb(59,96,148)" colors="10% rgb(70,112,170)"}

変更後 D_GRADIENT_TOPTOOLBAR_IE=color="rgb(255,0,0)" color2="rgb(0,0,255)" colors="70% rgb(255,255,255)" ファイル dwa.properties 変更前 D_GRADIENT_TOPTOOLBAR=[0, 53, 87, 135, 90, 70, 112, 170, 100, 59, 96, 148] 変更後 D_GRADIENT_TOPTOOLBAR=_{[0, 0, 0, 255, 30, 255, 255, 255, 100, 255, 0, 0]} 青→白→赤 青→白→赤

ツールバーの背景 （

_{1/2 ）}

変更前

変更後

ツールバーの背景　変更例 （

_{2/2 ）}



Firefox



IE

ファイル [f/l]_ShimmerSkin-h_StyleSheet 変更前

<NotesFragment includeif={s_Gecko="1" | s_Safari="1"}> .s-modepanel {

background-color:#547EB8;

変更後

<NotesFragment includeif={s_Gecko="1" | s_Safari="1"}> .s-modepanel { background-color:#00FF00; ファイル dwa.properties 変更前 D_COLOR_MODEPANEL=#547EB8 変更後 D_COLOR_MODEPANEL=#00FF00 緑 緑

モードパネルの背景 （

_{1/2 ）}

変更前

変更後

マウスオーバー時 マウスオーバー時 黄→赤

モードパネルの背景　変更例 （

_{2/2 ）}



Firefox



IE

ファイル dwa.properties 変更前 D_GRADIENT_MODEPANEL=[0, 53, 87, 135, 100, 71, 119, 183]_{D_GRADIENT_MODEPANEL_HIGHLIGHTED=[0, 255, 194, 89, 100, 247, 160, 44]} 変更後 D_GRADIENT_MODEPANEL=[0, 255, 255, 0, 100, 255, 0, 0]_{D_GRADIENT_MODEPANEL_HIGHLIGHTED=[0, 255, 255, 0, 100, 0, 0, 255]} ファイル dwa.properties 変更前 D_GRADIENT_MODEPANEL_IE=color="#4C77AD" color2="#355787“ D_GRADIENT_MODEPANEL_HIGHLIGHTED_IE=color="#F7A02C" color2="#FFC259" 変更後 D_GRADIENT_MODEPANEL_IE=color="#FF0000" color2="#FFFF00“ D_GRADIENT_MODEPANEL_HIGHLIGHTED_IE=color="#0000FF" color2="#FFFF00" マウスオーバー時 黄→赤 黄→青 黄→赤 黄→青

左パネルの背景 （

_{1/4 ）}

変更前

変更後

マウスオーバー時 選択時 マウスオーバー時 選択時 黄 青

左パネルの背景　変更例 （

_{2/4 ）}



背景（

Firefox / IE ）

ファイル [f/l]_ShimmerSkin-h_StyleSheet 変更前 .s-leftpanel-inner { border:solid rgb(128,144,160) 1px; background-color:rgb(210,223,239); } 変更後 .s-leftpanel-inner { border:solid rgb(128,144,160) 1px; background-color:rgb(0,255,0); } 緑

左パネルの背景　変更例 （

_{3/4 ）}



選択項目の背景（

Firefox / IE ）

ファイル [f/l]_ShimmerSkin-h_StyleSheet 変更前 .s-outline-row-selected { （省略） background-color:rgb(195,195,195); } 変更後 .s-outline-row-selected { （省略） background-color:rgb(255,255,0); } 黄 選択時

左パネルの背景　変更例 （

_{4/4 ）}



マウスオーバー時の選択項目の背景（

Firefox / IE ）

ファイル [f/l]_ShimmerSkin-h_StyleSheet 変更前 .s-outline-row-folder-mouseover { background-color:rgb(230,233,241); } 変更後 .s-outline-row-folder-mouseover { background-color:rgb(0,0,255); } 青 マウスオーバー時

ステータスバーの背景 （

_{1/2 ）}

変更前

ステータスバーの背景　変更例 （

_{2/2 ）}



Firefox



IE

ファイル dwa.properties 変更前 D_COLOR_STATUS_BACKGROUND=rgb(232,235,241) 変更後 D_COLOR_STATUS_BACKGROUND=rgb(0,255,0) ファイル [f/l]_ShimmerSkin-h_ListFolder 変更前

<v:roundrect class="s-stack" style="height:120%;"

fillcolor="rgb(232,235,241)" strokecolor="rgb(128,144,160)"> </v:roundrect>

変更後

<v:roundrect class="s-stack" style="height:120%;"

fillcolor="rgb(0,255,0)" strokecolor="rgb(128,144,160)"> </v:roundrect>

緑

メッセージ表示時のステータスバーの背景 （

_{1/2 ）}

変更前

状況メッセージ表示時 状況メッセージ表示時 完了メッセージ表示時 ピンク

メッセージ表示時のステータスバーの背景　変更例

（

_{2/2 ）}



Firefox / IE

ファイル dwa.properties 変更前 D_STATUS_BAR_BACKGROUND=#D8D8E9_{D_STATUS_BAR_BACKGROUND_COMPLETION=#D8F8C0} 変更後 D_STATUS_BAR_BACKGROUND=#_{D_STATUS_BAR_BACKGROUND_COMPLETION=#}FF00FF _FFFF00 状況メッセージ表示時 完了メッセージ表示時 ピンク 黄

タブ （

_{1/2 ）}

変更前

変更後

マウスオーバー時 マウスオーバー時 選択時 非選択時 非選択時 選択時

タブ　変更例 （

_{2/2 ）}



Firefox / IE

ファイル dwa.properties 変更前 D_GRADIENT_TAB=[0, 91, 121, 158, 8, 96, 124, 162, 8, 89, 119, 158, 17.6, 80, 112, 155, 17.6, 73, 109, 153, 24.8, 67, 104, 150, 24.8, 60, 97, 149, 40, 63, 101, 155, 40, 64, 105, 159, 55.2, 68, 109, 164, 55.2, 75, 118, 172, 64.8, 77, 123, 176, 64.8, 77, 120, 177, 70.4, 74, 118, 174, 70.4, 71, 112, 171, 80, 58, 96, 151] D_GRADIENT_TAB_HIGHLIGHTED=[0, 248, 192, 88, 24, 248, 184, 85, 24, 247, 180, 78, 32, 244, 170, 60, 32, 243, 167, 52, 80, 248, 222, 117] D_GRADIENT_TAB_SELECTED=[0, 237, 239, 244, 80, 232, 235, 241] 変更後 D_GRADIENT_TAB=[0, 255, 255, 255, 100, 0, 0, 255] D_GRADIENT_TAB_HIGHLIGHTED=[0, 255, 255, 255, 100, 255, 0, 255] D_GRADIENT_TAB_SELECTED=[0, 255, 255, 255, 100, 0, 255, 0] 選択時 マウスオーバー時 非選択時 白→青 白→ピンク 白→緑

アクションバーの背景 （

_{1/3 ）}

変更前

変更後

マウスオーバー時

アクションバーの背景 変更例（

_{2/3 ）}



Firefox

ファイル dwa.properties 変更前 D_GRADIENT_TOOLBAR=[0, 224, 232, 240, 50, 224, 232, 240, 51, 216, 224, 232, 100, 216, 224, 232] D_GRADIENT_TOOLBAR_HIGHLIGHTED=[0, 248, 192, 88, 24, 248, 184, 85, 24, 247, 180, 78, 32, 244, 170, 60, 32, 243, 167, 52, 100, 248, 222, 117] 変更後 D_GRADIENT_TOOLBAR= [0, 255, 255, 255, 50, 200, 255, 200, 100, 0, 255, 0] D_GRADIENT_TOOLBAR_HIGHLIGHTED= [0, 255, 255, 255, 50, 255, 182, 193, 100, 255, 0, 255] マウスオーバー時 白→ピンク 白→緑

アクションバーの背景　変更例 （

_{3/3 ）}



IE

ファイル dwa.properties 変更前 D_GRADIENT_TOOLBAR_IE=color="rgb(216,224,232)" color2="rgb(224,232,240)" colors="49% rgb(216,224,232), 50% rgb(224,232,240)“ D_GRADIENT_TOOLBAR_HIGHLIGHTED_IE=0% rgb(248,192,88),24% rgb(248,184,85),24% rgb(247,180,78),32% rgb(244,170,60),32% rgb(243,167,52),100% rgb(248,222,117) 変更後 D_GRADIENT_TOOLBAR_IE=color="rgb(0,255,0)" color2="rgb(255,255,255)" colors="50% rgb(200,255,200)“ D_GRADIENT_TOOLBAR_HIGHLIGHTED_IE=0% rgb(255,255,255),50% rgb(255,182,193),100% rgb(255,0,255) マウスオーバー時 白→ピンク 白→緑

メニューの背景 （

_{1/2 ）}

変更前

変更後

緑

メニューの背景　変更例 （

_{2/2 ）}



Firefox / IE

ファイル [f/l]_ShimmerSkin-h_StyleSheet 変更前 .s-popup {_{background-color: rgb(228,228,241);} 変更後 .s-popup {_{background-color: rgb(0,255,0);} 緑

色の変更　応用編



スタイルの変更を、外出しする

–

forms85.nsf への直接変更を避ける

–

変更を forms85_x.nsf に行う



Custom_CSS (forms85_x.nsf) に、同じセレクタに対するスタイルを記述する

–

CSS の !important ルールを使い、 forms85.nsf 内で定義されている、オリジナ

ルのスタイルを上書きする

–

dwa.properties の外出しについては、 8.5.1 では未対応

.s-leftpanel-inner {

background-color: rgb(0,255,0) !

important;

}

.s-leftpanel-inner {

background-color: rgb(0,255,0) !

important;

}

_{Custom_CSS に追加する例}

メッセージの変更



Lotus iNotes のポップアップメッセージや、メニューのテキストを変更する

–

「

Forms85.nsf 」 内の dwa_XX.properties （ XX は国コード）を編集す

る

–

エンドユーザー向けにわかりやすい用語や、その固有のシステム名を表

示したい場合など

 注意点

–

プロパティファイルは

Unicode で記述されているため、日本語のプロパ

ティファイル（

dwa_ja.properties ）等の 2 バイト文字が含まれるファイル

は、編集の際にコード変換する必要がある

例：

（参考）メッセージの変更

_{/ コード変換ツール}

 native2ascii

– JDK 国際化ツール。ネイティブコード（ Latin1 および Unicode 以外）のファイルを Unicode に変換しま す。

使用するには、JDK が導入された環境が必要です

http://java.sun.com/j2se/1.5.0/ja/docs/ja/tooldocs/windows/native2ascii.html – 使用方法

1.dwa_ja.properties ファイルをエクスポートする（ Domino Designer で iNotes\Forms85.nsf を開き 、[ リソース ] > [ ファイル ] をクリックして、 dwa_ja.properties を選択し「エクスポート」をクリックす る）

2. エクスポートしたファイルを、JDK 利用可能環境の適当な場所に配置する（例： C:\ ）

3. 以下のコマンドで Unicode からネイティブコードに変換する

＞ <JAVA_HOME>\bin\native2ascii –reverse C:\dwa_ja.properties C:\dwa_ja.txt C:\dwa_ja.txt

※ は変換内容の出力ファイル

4. 出力されたファイルを編集、保存する

5. 以下のコマンドでネイティブコードから Unicode に変換する

＞ <JAVA_HOME>\bin\native2ascii C:\dwa_ja.txt C:\dwa_ja.properties ※ ここではオリジナルのファイルに上書き出力している 6. 変換したファイルを Forms85.nsf にインポートする ※インポート前に、オリジナルファイルのバックアップを作成しておいてください  プロパティエディタ – コード変換が可能なエディタ（フリーソフト）。JDK 環境が用意できないときの代替手段の一例 http://propedit.sourceforge.jp/

メッセージの変更

_{/ カスタマイズ例① ポップアップ～英語版～}

 例はメール、カレンダーエントリーを削除するときに出るポップアップ  dwa_en.properties を編集することで、ブラウザの言語が「英語」になっている場 合のメッセージを変更可能  dwa_en.properties 内の「 L_ALERT_CONFIRMDELETE 」を以下のように編集 # s _ M a ilF o ld e r R e a d .n x # s _ M a ilF o ld e r R e a d I E .n x

メッセージの変更

_{/ カスタマイズ例② ポップアップ～日本語版～}

 前頁の例の日本語版。dwa_ja.properties を編集することで、ブラウザの言語が 「日本語」になっている場合のメッセージを変更可能  dwa_ja.properties 内の「 L_ALERT_CONFIRMDELETE 」を以下のように編集 # s _ M a ilF o ld e r R e a d .n x # s _ M a ilF o ld e r R e a d I E .n x L _ A L E R T _ C O N F IR M D E L E T E = \u 9 0 7 8 \u 6 2 9 e \u 3 0 5 7 \u 3 0 5 f \u 3 0 d a \u 3 0 f c \u 3 0 b 8 \u 3 0 9 2 \u 5 2 4 a \u 9 6 6 4 \u 3 0 5 7 \u 3 0 7 e \u 3 0 5 9 \u 3 0 4 b ? ---↓変換後 ---L _ A ---L E R T _ C O N F IR M D E ---L E T E = 選択したページを削除しますか ? # s _ M a ilF o ld e r R e a d .n x # s _ M a ilF o ld e r R e a d I E .n x L _ A L E R T _ C O N F IR M D E L E T E = \u 9 0 7 8 \u 6 2 9 e \u 3 0 5 7 \u 3 0 5 f \u 3 0 e 1 \u 3 0 f c \u 3 0 e b \u 3 0 9 2 \u 5 2 4 a \u 9 6 6 4 \u 3 0 5 7 \u 3 0 7 e \u 3 0 5 9 \u 3 0 4 b ? ---↓変換後 ---L _ A ---L E R T _ C O N F IR M D E ---L E T E = 選択したアイテム_{を削除しますか ?}

メッセージの変更

_{/ カスタマイズ例③ モードパネル}



モードパネルのメニュー名を変更



利用者によわかりやすい用語を表示したい場合など



dwa_ja.properties 内の「 L_PREFERENCES 」を以下のように編集

# s _ U IC o m p o n e n ts .h （中略） L _ P R E F E R E N C E S = \u 3 0 d 7 \u 3 0 e a \u 3 0 d 5 \u 3 0 a 1 \u 3 0 e c \u 3 0 f 3 \u 3 0 b 9 ---↓変換後 ---L _ P R E F E R E N C E S = プリファレンス

メッセージの変更

_{/ カスタマイズ例④}

ロード中メッセージ（ログイン時、ページ更新時に表示）



「

IBM Lotus iNotes 」という製品名の代わりに、対象のシステム名を表示

するなど



dwa_ja.properties 内の「 L_LOADING 」を以下のように編集

# h _ p a g e u i.n x L _ L O A D IN G = I B M L o tu s iN o t e s \u 3 0 9 2 \u 3 0 e d \u 3 0 f c \u 3 0 c 9 \u 3 0 5 7 \u 3 0 6 6 \u 3 0 4 4 \u 3 0 7 e \u 3 0 5 9 ... ---↓変換後 ---L _ ---L O A D IN G = I B M ---L o tu s iN o t e s をロードしていま す ... # h _ p a g e u i.n x L _ L O A D IN G = S y s t e m N a m e \u 3 0 9 2 \u 3 0 e d \u 3 0 f c \u 3 0 c 9 \u 3 0 5 7 \u 3 0 6 6 \u 3 0 4 4 \u 3 0 7 e \u 3 0 5 9 ... ---↓変換後 ---L _ ---L O A D IN G =S ys tem N a m e をロードしていま

メッセージの変更

_{/ 注意点 （ 1/2 ）}



ポップアップは、テキストの長さに合わせて横幅が伸びる

例： L_ALERT_CONFIRMDELETE=12345678912345678912345678912345678912345678912345678912 3456789123456789123456789123456789123456789



改行を挿入したい場合は、改行箇所に「

\n 」を挿入する

例： L_ALERT_CONFIRMDELETE=123456789\n123456789\n123456789 \n123456789\n123456789\n123456789\n123456789\n123456789 \n123456789\n123456789\n123456789

メッセージの変更

_{/ 注意点 （ 2/2 ）}



テキスト表示エリアの幅が固定な場合

–

長いテキストだと文字が隠れるため注意

–

モードパネルなど

–

必要な場合は、テキストエリアの幅を広げる必要がある

例： L_PREFERENCES=123456789123456789123456789

アクション・動作に関するカスタマイズ概要（サブフォーム

Custom_JS/Custom_JS_Lite の変更）



アクションメニューバーへの機能追加



イベントドリブン（ロード時、メール送信時）のアクション挿入



サイドバーの機能追加



マストヘッドの機能追加

Custom_JS/Custom_

JS_Lite

サブフォームの変更

Custom_JS/Custom_

JS_Lite

サブフォームの変更

変更なし！

変更なし！

アクションバーに機能追加

サイドバーに機能追加 イベントをトリガーにした機能追加

カスタマイズポイント



Forms85_x.nsf の Custom_JS / Custom_JS_Lite サブフォームで

JavaScript を記述する

新規アクション（メッセージ表示） アクションの削除 （「転送」など） 選択文書のID 表示

アクションメニューのカスタマイズ例

標準のアクションメニュー カスタマイズ後 サイドバーの表示 メニューID の チップ表示 新規アクション　（サブメニュー） アクションの表示順の移動

アクションメニューのカスタマイズ



Custom_JS_Lite サブフォームの、 Custom_Scene_Actions_Lite 関数の中で

定義する。

関数 説明 addActionsLite アクションメニューに追加する removeActionsLite アクションメニューから削除する repositionActionsLite アクションを移動する checkActionIDs アクションID を取得する

利用例：

addActionsLite( s_MenuID, bLeftItems, a_ToAdd )

利用例：

アクションメニューの追加、削除、位置変更 サンプルコード（

Custom_JS_Lite ）

fu n c tio n C us to m _S c e ne _A c tio ns _L ite (s _ M e n u ID ) { // A d d to th e m a il v ie w to o lb a r , o n ly th e n o r m a l o n e if (-1 = = s _ M e n u ID .in d e x O f(“m a ilv ie w ”)) r e tu r n fa ls e ; v a r b L e ftIte m s = tr u e ; // A d d m e n u s a n d s u b m e n u s v a r a A d d 1 = [

{title:“H e llo w o r ld”, fin d _ id: “n e w ”, id: “h e llo 1 ”, b e fo r e: tr u e ,

a c tio n:“c o m _ ib m _ d w a _ u i_ E X A M P L E _ a le r t {s M s g : \‘H e llo 1 \’}”, h e lp _ te x t:“s o m e h o v e r te x t” }, {title :“S u b m e n u s”, fin d _ id : “n e w ”, id : “h e llo 2 ”, b e fo r e : fa ls e ,

a c tio n : “c o m _ ib m _ d w a _ u i_ E X A M P L E _ a le r t {s M s g : \‘H e llo 2 \’}”, h e lp _ te x t:“s u b m e n u h o v e r te x t”,

s u b m e n u s : [

{title :“S e le c te d d o c s”,

a c tio n :“c o m _ ib m _ d w a _ u i_ E X A M P L E _ a c tio n S e le c te d D o c s {G Iy : \‘e -a c tio n s -m a ilv ie w -fo ld e r -im a g e 1 \’}”}, {is _ d iv id e r :tr u e },

{title :“T o g g le S id e b a r”, a c tio n :“E c V {y X : \‘to g g le \’}”} ]},

{title :“Im a g e”, fin d _ id : “h e llo 2 ”, id : “im a g e 1 ”, b e fo r e : fa ls e ,

a c tio n :“c o m _ ib m _ d w a _ u i_ E X A M P L E _ a le r t {s M s g : \‘Ic o n a n d te x t\’}”, h e lp _ te x t:“ic o n a n d te x t”,

im g :“/iN o te s /F o r m s 8 5 .n s f/c o m m o n a c tio n ic o n s .g if?O p e n F ile R e s o u r c e ”, im g _ w id th : 1 6 , im g _ h e ig h t: 1 6 , x _ o ffs e t: 4 8 , y _ o ffs e t: 0 }, （続く） “Hello world” という文字列で表記され る、ID”hello1” のアクションを既存の” new” （「新 規」）のアクションの前に追加する。 クリックしたとき は、”com_ibm_dwa_ui_EXAMPLE_alert” アク ションを実施し、sMsg の” Hello1” の文字列を表 示する。 （各パラメーターの説明は次々ページ）

アクションメニューの追加、削除、位置変更 サンプルコード（

Custom_JS_Lite ）

（続き）

{fin d _ id : “im a g e 1 ”, id : “im a g e 2 ”, b e fo r e : fa ls e , a c tio n :“c o m _ ib m _ d w a _ u i_ E X A M P L E _ a le r t {s M s g : \‘Ic o n o n ly \’}”, h e lp _ te x t:“ic o n o n ly ”, im g :“/iN o te s /F o r m s 8 5 .n s f/c o m m o n a c tio n ic o n s .g if?O p e n F ile R e s o u r c e ”, im g _ w id th : 1 6 , im g _ h e ig h t: 1 6 , x _ o ffs e t: 9 6 , y _ o ffs e t: 0 }

];

a ddA c tions L ite( s _M enuID , bLeftItem s , a A d d 1 ); v a r a R e m o v e 1 = [ {id :"fo r w a r d "},

{s u b _ id :"e -d r o p d o w n -r e p ly -m a ilv ie w ",s u b o ffs e ts :[0 ,1 ,3 ]},

{s u b _ id :"e -d r o p d o w n -r e p ly to a ll-m a ilv ie w ",s u b title s :["R e p ly T o A ll","R e p ly T o A ll w ith H is to r y O n ly "]} ];

rem o ve A c tio ns L ite( s _ M e n u ID , b L e ftIte m s , a R e m o v e 1 );

repo s itio nA c tio ns L ite ( s _ M e n u ID , tr u e , "r e p ly ", "m a r k r e a d ", fa ls e );

title なし （アイコン表示の み）

addActionsLite: アクションを追加する関数

s_MenuID: ツールバーやドロップダウンメニューのウィジェット ID 。変数は Custom_Scene_Actions_Lite に渡される bLeftItems: true は left-hand メニュー項目の修正、 false は right-hand メニュー項目

JavaScript のオブジェクト配列名

removeActionsLite:

addActions におけるパラメーター

 addActions(Lite) 関数におけるプロパティ・パラメーター (top level オブジェクト )

 Submenu オブジェクトにおけるプロパティ・パラメーター

パラメーター 説明

title 新項目の表示されるアクション名文字列

find_id 既存メニュー項目のID 。新規項目はこれの before または after で記述（ checkActionIDs で確認可能）

id 新項目のID

before true なら既存項目の前に挿入、 false なら後に挿入

action クリックした時のアクション。 Custom_JS_Lite に記載のある関数

help_text hover したときに表示する文字列

img アクションに表示するイメージアイコンのurl 。 Title の左に表示

img_width img の幅を表す数値

img_height img の高さを表す数値

x_offset img が複数のアイコンを含んだ offset 場合の x を表す

y_offset img が複数のアイコンを含んだ offset 場合の y を表す

submenus サブメニューの配列

パラメーター 説明

title top level オブジェクトと同じ

action top level オブジェクトと同じ

イベントドリブンのアクション



Custom_JS_Lite サブフォームの中で、関数が用意されている。

関数 説明

Custom_Scene_PostLoad_Lite フォームが呼び出されたタイミングで実行される

Custom_Scene_PreSubmit_Lite フォームからSubmit されたタイミングで実行される “return false” で、 Submit を中止させることも可能

イベントドリブンのアクションのカスタマイズ例

• メール送信時にポップアップメッセージ表示 • 文言はアクションのスクリプトに直書き、もしく は多言語対応したプロパティー・ファイルから の挿入も可能 • 宛先がホワイトリストに無い場合、処 理を進めるか否かOK/ キャンセルの ボタンを表示

サイドバーのカスタマイズ サンプルコード （

Custom_JS_Lite ）

f u n c t io n C us tom_S cene_Pos tLoad_Lite( s _ S c e n e N a m e , b I n E d it M o d e ){ if (s _ S c e n e N a m e .in d e x O f ('e -s id e b a r -lis t :F P P ')!= -1 )

in v o k e C u s t o m S id e b a r(); } f u n c t io n addDojoPanel(s I d ,s P a n e lT itle ,s C o o r d s ,o H t m lE le m e n t ,o P a r a m s M a p ,n P o s ){ v a r o W id g e t s = E K c ; v a r o S id e b a r = o W id g e t s = = n u ll? n u ll : o W id g e ts .p r o to ty p e .E Y l['e -s id e b a r -lis t :F P P ']; ～略～

f u n c t io n invokeC us tomS idebar(){ //I n v o k e a f te r 3 s e c o n d s s e t T im e o u t("a d d P a n e ls()",3 0 0 0 ); } f u n c t io n addPanels (){ a d d C o n t a c t s P a n e l(); a d d T o d o P a n e l(); a d d N o t e b o o k P a n e l(); }

f u n c t io n addC ontacts Panel(){ //H a n d le T o W id g e t v a r o S id e b a r = E K c .p r o to t y p e .E Y l['e -s id e b a r -lis t :F P P ']; v a r o S id e b a r Ic o n s = o S id e b a r ? o S id e b a r .F O J : n u ll; ～略～ a d d D o jo P a n e l(s Id ,"C o n t a c t s ",s C o o r d s ,o D iv ,o P a r a m s ,0 ); ３秒遅延 ３つの機能パネルを追加するオリジナル関数 それぞれの機能パネルを表示するオリジナル関数 パネルの表示にDojo を利用 「サイドバー」が呼ばれた後に処理

マストヘッドのカスタマイズ① （シンプルな例）

シンプルな内容をバナー上部に領域 を重ねて表示 マストヘッドのカスタマイズ サンプルコード① （サブフォームCustom_Masthead ） <d iv c la s s = "b o d y "> <ta b le c e lls p a c in g = "1 " b o r d e r = "1 " b g c o lo r = y e llo w > <tr > <td ><im g s r c = "/iN o te s /F o r m s 8 5 .n s f /m a s t h e a d C a le n d a r .p n g " w id t h = "3 0 " h e ig h t = "3 0 "></td > <td >M a s t h e a d の表示サンプルです。 </td >

マストヘッドのカスタマイズ② （高度な例）

マウスを重ねると動的に高さを変えて表示

Dojo ライブラリ の Fisheye を用いた 高度な表現のランチャー

Lotus iNotes での Web エージェントの利用



Lotus iNotes から Web エージェントを利用することが可能

– WebQueryOpen, WebQuerySave エージェント – @DBCommand からのエージェント呼び出し – HTTP GET コマンドでのエージェント呼び出し



フォーム・サブフォームに対してエージェントを使ったデータの処

理が可能

– 利用するサブフォームなどから、エージェントを呼び出す



エージェントを利用する場合は、パフォーマンスに注意する

–

フォームの使用頻度が高い場合、過剰負荷となる可能性がある

WebQueryOpen/Save エージェントの利用



Lotus iNotes サーバーに notes.ini パラメータが必要

– iNotes_WA_QueryAgents=1



メールデータベースに

_{Web エージェントを配置する}



Lotus iNotes のフォーム / サブフォームからエージェントを呼び

出す

– メモ、返信、履歴付返信で実施したい場合は、 s_mailMemoDictionary サブ フォームで呼び出す



<NotesDictionary> 要素の中に、以下を記述する。

– <NOTESVAR NAME={$$QueryOpenAgent} VALUE={'(testopen)'}>

– <NOTESVAR NAME={$$QuerySaveAgent} VALUE={'(testsave)'}> ※ 上記 testopen, testsave はエージェント名

WebQuery エージェントの利用

mail85.ntf iNotes\Forms85.nsf 参照 継承 iNotes\Forms85_x.nsf エージェントは メール D B に設定する

まずはテンプレートに

エージェントを作成

テンプレートはフォー ム

/

サブフォームから 呼び出す

WebQuery エージェントを作成する



エージェントは、メールデータベースに作成する

– エージェントプロパティは、通常のWeb エージェントと同様にする –実行トリガー：「アクションメニューより選択」 –対象：「なし」： –Web ユーザーとして実行 – サーバー文書で、署名者のセキュリティが許可されていることが前提



エージェントから、文書アイテムなども取得可能

– DocumentContext プロパティ経由で、アイテムを取得する

@DBCommand からのエージェント呼び出し



サーバーサイドタグからの出力

– サブフォーム内に @DBCommand を記述し、エージェントを呼び出す。 – 例： @{@DbCommand(“haiku”;“h_RunAgent”;“ エージェント名 ";"1")} –@{ } でくくることで、結果を「計算結果テキスト」で出力可能 –エージェントは、メールファイル、もしくは Forms85.nsf に配置が可能 – 最後の引数が”0”( デフォルト ) の場合、エージェントはメールファイルに存在 – 最後の引数が”1” の場合、エージェントは Forms85.nsf に存在 – 将来的には引数”2” が用意され、エージェントを、 Forms85_x.nsf に格納可 能になる

HTTP Get でのエージェント呼び出し



URL 経由でエージェントを呼び出す

– iNotes/Forms85.nsf/iNotes/Proxy/? EditDocument&Form=s_RunAgent&PresetFields=AgentName;name – エージェントは Forms85.nsf に配置する。 – 将来的に Forms85_x.nsf への配置も可能になる予定



必要に応じて、

_{Ajax 技術 (XmlHttpRequest+DHTML) と併用}

して呼び出し、結果を出力することも可能

エージェント利用時の

_Tips



Domino サーバーコンソールへの文字出力

– Messagebox メソッド： Domino サーバーコンソールへ文字を出力 –デバッグや、動作ログの１つとして – Print メソッド： Web ブラウザへ文字を出力 –エージェント処理結果をブラウザに出力させたいときなど

ウィジェットの利用



画面左下にウィジェットを表示させることが可能

– ウィジェットは、 Lotus Notes 用ウィジェットの「 Web ウィジェット」が対象

– HTTP ページへの GET/POST がサポート – ウィジェットの利用は基本的にコーディング不要



サーバー単位

/ ユーザー単位で設定可能

– ユーザー単位：ポリシー機能を使い、対象ユーザーに メールポリシーを適用する – サーバー単位：サーバーにnotes.ini を設定し、対象 サーバー上のすべてのユーザーに有効にする。 iNotes_WA_Widgets=1 を設定



　 表示させるウィジェットは２種類

– 管理者が設定した、標準ウィジェット – ユーザーが選択した、個人利用ウィジェット

ウィジェット利用時の関連ファイル

Lotus iNotes サーバー ウィジェット カタログ inotes _Config .xml m a ilD B in o te s _ c o n fig .x m l

で、標準ウィ

ウィジェットカタログより

ユーザーが選択したもの

はメールファイルのウィ

ジェットプロファイルに格

納

W e b ブラウザ

標準のウィジェット

個人利用の

ウィジェット

Lotus Notes 用ウィジェットとは



Lotus Notes のサイドバーに表示するコンポーネント

– Google ガジェットや Web ページ、その他プラグインなどが利用可能 – iNotes では「 Web ページ」ウィジェットが対象



ウィジェットカタログ

DB で共有

– クライアント上で動作させたウィジェットを共有などの 目的でサーバーにカタログ配置が可能 – 「ウィジェットカタログ」テンプレート(toolbox.ntf) を使い 任意の名前でサーバー上に作成する。 – クライアントから「カタログに公開」することが可能 –説明やカテゴリなどを入力する（次ページ）

ウィジェットカタログ文書の作成

タイトルとカテゴリ

とプラットフォーム

を設定する。

_{L o tu s N o te s}

S ta n d a r d クライア

ントから、カタログ文

書を作成する

ウィジェット利用の設定



inotes_config.xml ファイルの設定

– ウィジェットの使われ方を設定するファイル –サーバー上のウィジェットカタログを設定する –デフォルトでの表示ウィジェットを設定する – iNotes サーバーの <dominodata>/domino/html/inotes_config.xml を編集す る –カタログ情報の定義 – ウィジェットカタログDB ファイルの指定 (Lotus iNotes サーバーに配置） – iNotes で利用するウィジェットカテゴリの指定 （プラットフォームは「 iNotes85 」のみが利用可能） –デフォルトウィジェットの定義 – 明確なXML のガイドがないため、まずウィジェットカタログにカタログ文書を作 成し、そこからXML をコピーする。

参考：

_{inotes_config.xml の設定}

ウィジェットカタログを定義する

サーバー上の D B ファイル名、

対象カテゴリを指定

ユーザー操作（表示・追加）



ウィジェットのユーザー操作

– 利用可能になると、Lotus iNotes 画面にデフォルトウィジェットが表示される。 – 右クリックでウィジェットカタログの参照が可能 – ウィジェットカタログ選択画面で、利用したいウィジェットを選択して OK すると、 追加される。 – 右クリックで削除も可能

ユーザー操作（利用）



ウィジェットを利用する

– GET ウィジェット –クリックすると、ウィジェットで定義した位置に GET 結果が表示される。 – POST ウィジェット –クリックすると、ウィジェットで定義した必須入力フィールドが求められ、入力 に応じてその POST 結果が表示される。

（参考）

_{GET ウィジェットの作成方法}



Lotus Notes Standard クライアントでウィジェットを作成

1. クライアントのプリファレンスよりウィジェットを有効にし、カタログを設定

2. クライアントメニューより [ ツール ]-[ ウィジェット ]-[ ウィジェットの構成を開始 ]

3. 作成するウィジェットは「 Web ページ」を指定する

4. 「URL での Web ページ」を指定し、任意の Web ページを入力する

5. HTTP GET のウィジェットを選択する

6. サイドバーの「マイウィジェット」から、「カタログ

（参考）

_{POST ウィジェットの作成方法}



Lotus Notes Standard クライアントでウィジェットを作成

1. クライアントのプリファレンスよりウィジェットを有効にし、カタログを設定

2. クライアントメニューより [ ツール ]-[ ウィジェット ]-[ ウィジェットの構成を開始 ]

3. 作成するウィジェットは「 Web ページ」を指定する

4. 「URL での Web ページ」を指定し、任意の Web ページを入力する

5. HTTP POST のウィジェットを選択する 6. 入力フォームを選択する 7. 「アクションとしてワイヤリング」を選択し、入力フィールドを定義する 8. 拡張メニューで必要な入力フィールドを定義し「必須」フラグをたてる 9. 「他のコンテント」「テキスト選択」「 contents 」を設定する。また、アクションの結 果を「新規ウィンドウ」か「タブ」で設定する。

ウィジェット利用時の考慮点



ウィジェットの設定

– Lotus Notes ウィジェットに比べて POST ウィジェットに制限あり

–Lotus Administrator ヘルプ「 Lotus iNotes でウィジェットを使用する」参照



サーバー設定について

– Web ページの出力は UTF-8 にする

– サーバー文書： [ インターネットプロトコル ]-[Domino Web Engine]-[ 出力に

UTF-8 を使用 ]

開発のヒント

ツール 説明 Internet Explorer Developer Toolbar • IE 用プラグイン • Web ページの構成要素の把握や変更のプレビューが可 能 • IE8 には標準で付属（「ツール」 > 「開発者ツール」） Firebug • Firefox 用アドオン • JavaScript のデバッグを始め、 Web ブラウザ側での様々 なデバッグが可能

Web Developer • Firefox 用アドオン

• CSS 、 JavaScript 、 Cookie の無効化など、様々な機能



Web 用デバッグツールの活用

開発のヒント



フォームファイルの更新について

–

サーバーを再起動する

–

もしくは、以下のコンソールコマンドを実施する

• tell http inotes flushforms



サブフォームのデバッグについて

–

呼び出されたサブフォームをサーバー側でトレースするために、以下のデバッ

グパラメータが利用可能

デバッグのヒント



設計要素のテキスト出力＋検索

– DXL を使って、データベースの情報を出力する

– DXL(XML) ＝テキストファイルのため、設計要素の中からテキスト名を検索可



Lotus Domino Designer を使って、 DXL 出力する

– Forms85.nsf の設計要素を全選択し、 Lotus Domino Designer から [ ツー

ル ] – [DXL ユーティリティ ] – [ エクスポーター ] を実行する



DXL ファイルを検索する

– 「クラス名」はわかっているが、それが Lotus iNotes の設計上、どこで定義さ

れているかがわからないときなど

まとめ



Lotus iNotes のカスタマイズは、旧来までは、メンテナンスリリースや、 Hotfix

の適用時に問題があった。



Lotus iNotes 8.5.1 からは、 Forms85_x.nsf という形で、カスタマイズ要素の

外だしが可能になり、製品コードと分離することが可能になった。



Lotus iNotes では、簡単にカスタマイズ出来るように、一部の設計が用意さ

れており、用意されたコードを多少修正すればよい。



本格的に変更をする場合は、 Lotus iNotes の構造だけではな

く、 HTML/CSS/JavaScript/DOM など、 Web 汎用技術の知識が必要



一部の修正は、 Forms85_x.nsf 内だけではなく、 Forms85.nsf も修正する

必要があるため、注意が必要



今後も製品として、容易にカスタマイズがしやすい方向で拡張していく予定

必要性と影響範囲を見極め、安全なカスタマイズを！

必要性と影響範囲を見極め、安全なカスタマイズを！

参考情報

 AD216 -- IBM Lotus iNotes Customization (Lotusphere 2009 セッション資料 )

　http://www.slideshare.net/rledwich/cust

 Lotus Domino Administrator 8.5.1 ヘルプ

– Lotus iNotes

–Lotus iNotes の外観をカスタマイズする

–Lotus iNotes でウィジェットを利用する

–Lotus iNotes エージェントを利用する

 General Information about Lotus iNotes Customization

http://www.lotus.com/ldd/dominowiki.nsf/dx/all-you-want-to-know-about-domino-web-access-customization

参考情報

 Customization updates for 8.5.1

http://www.lotus.com/ldd/dominowiki.nsf/dx/customization-updates-for-8.5.1

 iNotes Lite framework

http://www.lotus.com/ldd/dominowiki.nsf/dx/inotes-lite-framework

 Inserting Custom Sidebar Panels in iNotes 8.5

http://www.lotus.com/ldd/dominowiki.nsf/dx/Inserting-Custom-Sidebar-Panels-in-iNotes-8.5

 Using Dojo on Domino web forms

http://www.lotus.com/ldd/ddwiki.nsf/page.xsp?

documentId=33F12895ECCDD5AD852575CA004D9E13&action=openDocume nt