Lotus iNotes 8.5.1 新カスタマイズ機能解説 Lotus Technical Update Workshop 2010/6

by user

on 15 сентября 2016

Category: Documents

>> Downloads: 7

views

Report

Comments

Description

Download Lotus iNotes 8.5.1 新カスタマイズ機能解説 Lotus Technical Update Workshop 2010/6

Transcript

Lotus iNotes 8.5.1 新カスタマイズ機能解説 Lotus Technical Update Workshop 2010/6

®
Lotus iNotes 8.5.1 新カスタマイズ機能解説
Lotus Technical Update Workshop 2010/6
ISE Workplace, Core Collaboration Group
© 2008 IBM Corporation
IBM Software Group | Lotus software
特記事項
 本資料の記載内容は、正式な IBM のテストやレビューを受けておりま
せん。内容について、できる限り正確を期すよう努めてはおりますが、い
かなる明示または暗黙の保証も責任も負いかねます。本資料の情報
は、使用先の責任において使用されるべきものであることを、あらかじめ
ご了承ください。
 掲載情報は不定期に変更されることもあります。他のメディア等に無
断で転載する事はご遠慮ください。
 本資料の著作権は日本アイ･ビー･エムにあります。非営利目的の個
人利用の場合において、自由に使用してもかまいませんが、営利目的
の使用は禁止させていただきます。
 IBM, AIX, Lotus, Lotus Notes, Lotus Domino は Internal Business
Machines Corporation の米国およびその他の国における商標。その
他、記載された社名および製品名は、それぞれ各社の商標または登
録商標です。
IBM Software Group | Lotus software
Agenda
 Lotus iNotes の基本アーキテクチャとカスタマイズ概要
 Lotus iNotes でのロゴ・外観のカスタマイズ
 Lotus iNotes でのアクション・動作のカスタマイズ
 Lotus iNotes でのウィジェットの活用
 カスタマイズにあたっての、 Hint & Tips
このセッションの目標：
このセッションの目標：
• •Lotus
LotusiNotes
iNotesのアーキテクチャを理解し、カスタマイズ時の課題を理解する。
のアーキテクチャを理解し、カスタマイズ時の課題を理解する。
iNotes
でカスタマイズ可能な箇所を理解する。
• •Lotus
Lotus iNotes でカスタマイズ可能な箇所を理解する。
• •Lotus
LotusiNotes
iNotesで、カスタマイズを行うための方法の概要を理解する。
で、カスタマイズを行うための方法の概要を理解する。
IBM Software Group | Lotus software
Lotus iNotes のカスタマイズとは
 Lotus iNotes について
– メール・カレンダー・スケジュール機能などを、 HTTP クライアントに対して提供する
、 Lotus Notes/Domino 標準の機能
– これまでの「フォーム」「ビュー」といった、 Lotus Domino Web アプリケーションの開
発思想とは異なるアーキテクチャ
– カスタマイズを実施するためには、通常の Domino Web アプリケーション開発
スキルとは別途、 Lotus iNotes カスタマイズスキルが必要
 Lotus iNotes カスタマイズの事前考慮点
– サポートポリシーを理解する
– カスタマイズを行った場合は、標準テンプレートで問題が再現するかどうかを確
認する必要がある
– バージョンアップ・障害修正モジュールの適用時の注意点
– Lotus iNotes に問題があり修正モジュールを適用する場合、カスタマイズした
設計を上書きする可能性がある
– HTML/CSS/JavaScript/DOM など、先端 Web 技術の知識が必要なこともある
– さらに Web ブラウザによって動作が異なるため、開発・検証など考慮が必要
4
IBM Software Group | Lotus software
Lotus Domino Designer 不要で出来る簡単カスタマイズ
 一部の画面設定は、サーバー設定文書、 notes.ini で設定可能
– デフォルトの起動画面を、メール画面にする
– 必要なタブのみ表示させる
– など
 ポリシーを使うことで、プリファレンスの一部などを設定可能
– メールポリシー
– デスクトップポリシー
– セキュリティポリシー
 簡単なウィジェットの適用
Lotus Domino Administrator ヘルプ
「 Lotus iNotes とポリシーを併用する」
5
IBM Software Group | Lotus software
Lotus iNotes のカスタマイズ可能な主な項目
 Lotus iNotes ロゴの変更
 背景など、各種色の変更
 アラートメッセージや表示文字の変更
 アクションメニューの追加・変更・削除
 各種イベント発生時の動作
 マストヘッドの変更
 エージェントの実行
 ウィジェットの追加
6
IBM Software Group | Lotus software
Lotus iNotes 8.5.1 のアーキテクチャー
 Lotus iNotes 8.5.1 アーキテクチャー図
メールテンプ
レート
参照
L o tu s iN o te s の設計
要素を格納した D B
変更をした場合は、
将来的な F ix 適用時
などに再度変更が必
要
mail85.ntf
iNotes\Forms85.nsf
継承
Most Design:
ユーザー
のメール
ファイル
mail\JUser.nsf
CSS,
JavaScript,
Images, HTML
N ew
!
iNotes\Forms85_x.nsf
View Design
カスタマイズ設計要素
を入れるための器。
Data
8 .5 .1 より利用可能
Lotus iNotes 画面
ユーザーに表
示される画面
7
IBM Software Group | Lotus software
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 で作成し、サーバーに配置する。
– 配置可能な設計要素は、 Lotus iNotes 8.5.1 の段階では限定されている
8
IBM Software Group | Lotus software
Forms85_x.nsf の中身
 カスタマイズ設計用の、サブフォームが用意されている
– Custom_XXX という設計要素でカスタマイズ設計の格納ポイントになる
 独自の設計要素を追加可能
– 独自のサブフォームや、イメージファイルなど
9
IBM Software Group | Lotus software
（参考） 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
韓国語名表示形式のコードを指定します
Custom_Page_Dictionary
Custom_CSS サブフォームで使用する新しい変数値を追加します
Custom_WelcomePage
エンドユーザーの Welcome ページに選択事項を追加します
 Forms85_x.nsf に対して行ったカスタマイズは、 hotfix を適用しても上書きされず保持されま
す
10
IBM Software Group | Lotus software
Lotus iNotes ロゴの変更
 画面左上の Lotus iNotes ロゴを別のイメージファイルに置き換え可能
– イメージファイルをインポートし、サブフォーム（ Custom_Banner_Lite ）を編集
変更前
変更後
11
IBM Software Group | Lotus software
Lotus iNotes ロゴの変更概要
1 Forms85_x.nsf のファイルリソースに、ロゴファイルを格納
2 Forms85_x.nsf の Custom_Banner_Lite サブフォームを変更する
●
サブフォーム内で、インポートしたロゴファイルを指定する。
変更なし！
変更なし！
Forms85.nsf
Forms85.nsf
ロゴファイルの
ロゴファイルの
インポート
インポート
サブフォームを変更
サブフォームを変更
し、インポートした
し、インポートした
ロゴを設定する
ロゴを設定する
Forms85_x.nsf
Forms85_x.nsf
12
IBM Software Group | Lotus software
（参考）サブフォームの変更 (1)

Custom_Banner_Lite サブフォームの編集
●
●
「 Forms85_x.nsf 」のサブフォーム「 Custom_Banner_Lite 」を修正する
サブフォーム内には、変更の方法がコメントで英語で記載されており、また変
更のためのコードが既にコメント内に記載されている。
●
基本はコード内のファイル名だけ変更すればよい
<Notes C omment>
<ta b le c la s s = "s -le f tp 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 tL o g o {d is p la y :n o n e }</s ty le >
</Notes C omment>
●
1.1. サンプルコード
サンプルコード
のコメントを外す
のコメントを外す
サンプルコードから、まずコメント部分を取り除く
●
（“ <NotesComment>” および“ </NotesComment>” を削除）
<NotesComment> 内はコメントのため注意
13
IBM Software Group | Lotus software
（参考）サブフォームの変更 (2)
●
コード内に、変更したいロゴのファイル名を設定
●
コード内の「 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)
2.2. サンプルコー
サンプルコー
ドのファイル名を
ドのファイル名を
変更する
変更する
14
IBM Software Group | Lotus software
ロゴ表示エリアサイズの変更
 置き換えたロゴは自動的に既定の大きさにリサイズされる
– 幅： 111px / 高さ： 16px
元のファイル（幅： 5 3 0 p x / 高さ： 1 2 0 p x ）
 どうしてもロゴの表示エリアのサイズの変更が必要な場合には以下のファイ
ルを編集する　（可能な限り、実施しないことを推奨）
– 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 の変更となるので注意が必要
15
IBM Software Group | Lotus software
ロゴ表示エリアサイズの変更
変更前
変更後
16
IBM Software Group | Lotus software
( 参考 ) ロゴ表示エリアサイズの変更手順（ 1/5 ）
 Custom_Banner_Lite の編集
1. 「 Forms85_x.nsf 」の [ 共有要素 ] > [ サブフォーム ] を展開し、
「 Custom_Banner_Lite 」を開きます
2. ロゴの置き換え手順内でコピー・ペーストしたコード内（コメントタグに含まれてい
ない部分）の以下の記述を変更します（イメージファイルの幅 / 高さを指定
し、 xoffset/yoffset の記述を削除します）
変更前
+ ' width="111" height="16" xoffset="0" yoffset="60"'
変更後例
+ ' width=“530" height=“120"
3. 変更を保管します
17
IBM Software Group | Lotus software
( 参考 ) ロゴ表示エリアサイズの変更手順（ 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;
画面右にあるパネル位置
66
#e-maintabs-container {
height: 1.75em;
top: 2.25em;
#e-maintabs-container {
height: 1.75em;
top: 8em;
タブの位置
18
IBM Software Group | Lotus software
( 参考 ) ロゴ表示エリアサイズの変更手順（ 3/5 ）
行番号
変更前
変更後例
変更内容
98
<div id="e-toppanel"
class="s-toppanel s-tabselected-color" style="
height:4.3em;
<div id="e-toppanel"
class="s-toppanel s-tabselected-color" style="
height:10.05em;
タブの直下部分の位置
（ IE ）
104
<div id="e-toppanel"
class="s-toppanel s-tabselected-color" style="
height:4.3em;
<div id="e-toppanel"
class="s-toppanel s-tabselected-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="etoptoolbar-background"
class="s-toppanel"
style="top:-1px;
height:4em;
<canvas id="etoptoolbar-background"
class="s-toppanel"
style="top:-1px;
height:9.75em;
ロゴの背景の高さ
（ Firefox ）
19
IBM Software Group | Lotus software
( 参考 ) ロゴ表示エリアサイズの変更手順（ 4/5 ）
行番号
変更前
変更後例
変更内容
305
（ l_Shimmer
Skinh_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
Skinh_ListFolde
r は 299 ）
<div class="s-leftpanel"
style="width:163px;">
<div class="s-leftpanel"
style="width:530px;">
ロゴ表示エリアの幅
20
IBM Software Group | Lotus software
( 参考 ) ロゴ表示エリアサイズの変更手順（ 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') {
if (s_SceneName == 'e-panelmanager:EVy') {
var oTopPanel = AAA.EcK.getElementById('e-toppanel');
var oTopPanel = AAA.EcK.getElementById('e-toppanel');
oTopPanel.style.height = '10.05em';
oTopPanel.style.height = '10.05em';
var oTopPanelNext=oTopPanel.nextSibling
var oTopPanelNext=oTopPanel.nextSibling
while(oTopPanelNext.nodeType!=1){
while(oTopPanelNext.nodeType!=1){
oTopPanelNext=oTopPanelNext.nextSibling;}
oTopPanelNext=oTopPanelNext.nextSibling;}
oTopPanelNext.style.height = '10.05em';
oTopPanelNext.style.height = '10.05em';
AAA.EcK.getElementById('e-content').style.paddingTop = '10.35em';
AAA.EcK.getElementById('e-content').style.paddingTop = '10.35em';
AAA.EcK.getElementById('e-leftpanel').style.paddingTop = '10.35em';
AAA.EcK.getElementById('e-leftpanel').style.paddingTop = '10.35em';
AAA.EcK.getElementById('e-maintabs-container').style.top = '8.3em';
AAA.EcK.getElementById('e-maintabs-container').style.top = '8.3em';
}
}
21
IBM Software Group | Lotus software
色の変更
 Lotus iNotes 画面上の色を変更するには「 Forms85.nsf 」内に
配置された以下のファイルを編集する
– dwa.properties
– f_ShimmerSkin-h_StyleSheet
– l_ShimmerSkin-h_StyleSheet
– f_ShimmerSkin-h_ListFolder
– l_ShimmerSkin-h_ListFolder
 変更する箇所により編集対象のファイルは異なる
 変更する箇所は特にガイドがない
– スキンファイル上のスタイル名による試行錯誤
– ブラウザ上での CSS デバッグでの変更箇所探索
– などのテクニックを使い変更する
22
IBM Software Group | Lotus software
色の変更概要
1 Forms85.nsf のファイルを変更する
●
dwa.properties のプロパティ
●
ShimmerSkin のスタイル
グラデーション
グラデーション
の変更
の変更
スタイルの
スタイルの
変更
)
変更( 注
(注)
Forms85.nsf
変更なし・・・
変更なし・・・
Forms85_x.nsf
注：スタイルは Forms85_x.nsf から上書きも可能です
23
IBM Software Group | Lotus software
色の指定方法

色の指定方法は以下の 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
24
IBM Software Group | Lotus software
グラデーションの指定方法（ 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 ％の領域が白、最下部が赤のグラデーション
25
IBM Software Group | Lotus software
グラデーションの指定方法（ 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 ％の領域が白のグラデーション
26
IBM Software Group | Lotus software
色のカスタマイズ例
 以下の部分などの色が変更可能
– 次ページ以降の変更箇所は、 Lotus iNotes 8.5.1 での非公式な検証
結果による検証例を記載しております。
モードパネル
タブ
画面最上部
ツールバー
ステータスバー
アクションバー
メニュー
左パネル
27
IBM Software Group | Lotus software
画面最上部（ 1/2 ）
変更前
変更後
青→白→赤
28
IBM Software Group | Lotus software
画面最上部　変更例（ 2/2 ）
 Firefox
ファイル
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]
青→白→赤
 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)"
青→白→赤
29
IBM Software Group | Lotus software
ツールバーの背景（ 1/2 ）
変更前
変更後
緑
30
IBM Software Group | Lotus software
ツールバーの背景　変更例（ 2/2 ）
 Firefox
ファイル
[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;
緑
 IE
ファイル
dwa.properties
変更前
D_COLOR_MODEPANEL=#547EB8
変更後
D_COLOR_MODEPANEL=#00FF00
緑
31
IBM Software Group | Lotus software
モードパネルの背景（ 1/2 ）
変更前
マウスオーバー時
黄→赤
変更後
マウスオーバー時
黄→青
32
IBM Software Group | Lotus software
モードパネルの背景　変更例（ 2/2 ）
 Firefox
ファイル
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]
マウスオーバー時
黄→青
 IE
ファイル
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"
黄→青
33
IBM Software Group | Lotus software
左パネルの背景（ 1/4 ）
選択時
マウスオーバー時
変更前
選択時
黄
青
マウスオーバー時
変更後
緑
緑
34
IBM Software Group | Lotus software
左パネルの背景　変更例（ 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);
}
緑
35
IBM Software Group | Lotus software
左パネルの背景　変更例（ 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);
}
黄
36
IBM Software Group | Lotus software
左パネルの背景　変更例（ 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);
}
マウスオーバー時
青
37
IBM Software Group | Lotus software
ステータスバーの背景（ 1/2 ）
変更前
変更後
緑
38
IBM Software Group | Lotus software
ステータスバーの背景　変更例（ 2/2 ）
 Firefox
ファイル
dwa.properties
変更前
D_COLOR_STATUS_BACKGROUND=rgb(232,235,241)
変更後
D_COLOR_STATUS_BACKGROUND=rgb(0,255,0)
緑
 IE
ファイル
[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>
緑
39
IBM Software Group | Lotus software
メッセージ表示時のステータスバーの背景（ 1/2 ）
状況メッセージ表示時
変更前
完了メッセージ表示時
状況メッセージ表示時
ピンク
変更後
完了メッセージ表示時
黄
40
IBM Software Group | Lotus software
メッセージ表示時のステータスバーの背景　変更例
（ 2/2 ）
 Firefox / IE
状況メッセージ表示時
ファイル
dwa.properties
変更前
完了メッセージ表示時
D_STATUS_BAR_BACKGROUND=#D8D8E9
D_STATUS_BAR_BACKGROUND_COMPLETION=#D8F8C0
変更後
D_STATUS_BAR_BACKGROUND=#FF00FF
D_STATUS_BAR_BACKGROUND_COMPLETION=#FFFF00
ピンク
黄
41
IBM Software Group | Lotus software
タブ（ 1/2 ）
非選択時
マウスオーバー時
選択時
非選択時
マウスオーバー時
選択時
変更前
変更後
白→青
白→ピンク
白→緑
42
IBM Software Group | Lotus software
タブ　変更例（ 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]
白→緑
白→ピンク
43
IBM Software Group | Lotus software
アクションバーの背景（ 1/3 ）
変更前
変更後
マウスオーバー時
マウスオーバー時
白→ピンク
白→緑
44
IBM Software Group | Lotus software
アクションバーの背景変更例（ 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]
白→緑
白→ピンク
45
IBM Software Group | Lotus software
アクションバーの背景　変更例（ 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)
白→ピンク
46
IBM Software Group | Lotus software
メニューの背景（ 1/2 ）
変更前
変更後
緑
緑
47
IBM Software Group | Lotus software
メニューの背景　変更例（ 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);
緑
48
IBM Software Group | Lotus software
色の変更　応用編
 スタイルの変更を、外出しする
– forms85.nsf への直接変更を避ける
– 変更を forms85_x.nsf に行う
 Custom_CSS (forms85_x.nsf) に、同じセレクタに対するスタイルを記述する
– CSS の !important ルールを使い、 forms85.nsf 内で定義されている、オリジナ
ルのスタイルを上書きする
– dwa.properties の外出しについては、 8.5.1 では未対応
.s-leftpanel-inner
.s-leftpanel-inner{{
background-color:
background-color:rgb(0,255,0)
rgb(0,255,0)! !
important;
important;
}}Custom_CSS に追加する例
49
IBM Software Group | Lotus software
メッセージの変更

Lotus iNotes のポップアップメッセージや、メニューのテキストを変更する
– 「 Forms85.nsf 」内の dwa_XX.properties （ XX は国コード）を編集す
る
– エンドユーザー向けにわかりやすい用語や、その固有のシステム名を表
示したい場合など

注意点
– プロパティファイルは Unicode で記述されているため、日本語のプロパ
ティファイル（ dwa_ja.properties ）等の 2 バイト文字が含まれるファイル
は、編集の際にコード変換する必要がある
例：
#h _ S c e n e L a b .n x
#h _ S c e n e L a b .n x
L _ A C T IO N _ S C E N E L A B _ N E X T = \u 6 b 2 1 \u 3 0 7 8
L _ A C T I O N _ S C E N E L A B _ N E X T = 次へ
L _ A C T IO N _ S C E N E L A B _ B A C K = \u 6 2 3 b \u 3 0 8 b
L _ A C T I O N _ S C E N E L A B _ B A C K = 戻る
50
IBM Software Group | Lotus software
（参考）メッセージの変更 / コード変換ツール
 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/
51
IBM Software Group | Lotus software
メッセージの変更 / カスタマイズ例① ポップアップ～英語版～


例はメール、カレンダーエントリーを削除するときに出るポップアップ
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 IE .n x
L _ A L E R T _ C O N F IR M D E L E T E = A r e y o u s u r e y o u w a n t to d e le te th e s e le c te d p a g e s ?
# 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 IE .n x
L _ A L E R T _ C O N F IR M D E L E T E = A r e y o u s u r e y o u w a n t to d e le te th e s e le c te d
ite m s ?
52
IBM Software Group | Lotus software
メッセージの変更 / カスタマイズ例② ポップアップ～日本語版～

前頁の例の日本語版。 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 IE .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 IE .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 = 選択したアイテムを削除しますか ?
53
IBM Software Group | Lotus software
メッセージの変更 / カスタマイズ例③ モードパネル


モードパネルのメニュー名を変更
利用者によわかりやすい用語を表示したい場合など

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 f3 \u 3 0 b 9
-----------------------------------------↓変換後 ------------------------------------------L _ P R E F E R E N C E S = プリファレンス
# 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 8 a 2 d \u 5 b 9 a
----------------------------------------↓変換後 -------------------------------------------L _ P R E F E R E N C E S = 設定
54
IBM Software Group | Lotus software
メッセージの変更 / カスタマイズ例④
ロード中メッセージ（ログイン時、ページ更新時に表示）

「 IBM Lotus iNotes 」という製品名の代わりに、対象のシステム名を表示
するなど

dwa_ja.properties 内の「 L_LOADING 」を以下のように編集
# h _ p a g e u i.n x
# h _ p a g e u i.n x
L _ L O A D IN G = IB M L o tu s iN o te 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 = S y s te 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 = IB M L o tu s iN o te s をロードしていま
す ...
L _ L O A D IN G = S ys te m N a m e をロードしていま
す ...
55
IBM Software Group | Lotus software
メッセージの変更 / 注意点（ 1/2 ）

ポップアップは、テキストの長さに合わせて横幅が伸びる
例：
L_ALERT_CONFIRMDELETE=12345678912345678912345678912345678912345678912345678912
3456789123456789123456789123456789123456789

改行を挿入したい場合は、改行箇所に「 \n 」を挿入する
例：
L_ALERT_CONFIRMDELETE=123456789\n123456789\n123456789
\n123456789\n123456789\n123456789\n123456789\n123456789
\n123456789\n123456789\n123456789
56
IBM Software Group | Lotus software
メッセージの変更 / 注意点（ 2/2 ）

テキスト表示エリアの幅が固定な場合
– 長いテキストだと文字が隠れるため注意
– モードパネルなど
– 必要な場合は、テキストエリアの幅を広げる必要がある
例：
L_PREFERENCES=123456789123456789123456789
57
IBM Software Group | Lotus software
アクション・動作に関するカスタマイズ概要（サブフォーム
Custom_JS/Custom_JS_Lite の変更）
 アクションメニューバーへの機能追加
 イベントドリブン（ロード時、メール送信時）のアクション挿入
 サイドバーの機能追加
 マストヘッドの機能追加
変更なし！
変更なし！
Forms85.nsf
Forms85.nsf
Custom_JS/Custom_
Custom_JS/Custom_
JS_Lite
JS_Lite
サブフォームの変更
サブフォームの変更
Forms85_x.nsf
Forms85_x.nsf
58
IBM Software Group | Lotus software
カスタマイズ例
マストヘッド（上部領域）の追加表示
アクションバーに機能追加
イベントをトリガーにした機能追加
サイドバーに機能追加
59
IBM Software Group | Lotus software
カスタマイズポイント
 Forms85_x.nsf の Custom_JS / Custom_JS_Lite サブフォームで
JavaScript を記述する
iNotes \Forms 85_x.ns f
60
IBM Software Group | Lotus software
アクションメニューのカスタマイズ例
標準のアクションメニュー
カスタマイズ後
新規アクション　（サブメニュー）
アクションの削除
（「転送」など）
メニュー ID の
チップ表示
アクションの表示順の移動
選択文書の ID 表示
新規アクション（メッセージ表示）
サイドバーの表示
61
IBM Software Group | Lotus software
アクションメニューのカスタマイズ
 Custom_JS_Lite サブフォームの、 Custom_Scene_Actions_Lite 関数の中で
定義する。
関数
説明
addActionsLite
アクションメニューに追加する
removeActionsLite
アクションメニューから削除する
repositionActionsLite
アクションを移動する
checkActionIDs
アクション ID を取得する
利用例：
利用例：
addActionsLite(
addActionsLite(s_MenuID,
s_MenuID,bLeftItems,
bLeftItems,a_ToAdd
a_ToAdd))
ツールバーやドロップダウンメ
ニューのウィジェット ID 。変数
は Custom_Scene_Actions_Lite
に渡される
true は left-hand メニュー項目
の修正、 false は right-hand メ
ニュー項目
追加するメニュー項目の中身が
記述された配列
62
IBM Software Group | Lotus software
アクションメニューの追加、削除、位置変更サンプルコード（ Custom_JS_Lite ）
“Hello world” という文字列で表記され
る、 ID”hello1” のアクションを既存の” new” （「新
規」）のアクションの前に追加する。
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 ”))
は、” com_ibm_dwa_ui_EXAMPLE_alert” アク
r e tu r n fa ls e ;
ションを実施し、 sMsg の” Hello1” の文字列を表
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
var aA dd1 = [
{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”,
subm enus: [
{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 },
（続く）
63
IBM Software Group | Lotus software
アクションメニューの追加、削除、位置変更サンプルコード（ Custom_JS_Lite ）
（続き）
title なし（アイコン表示の
み）
{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 }
];
addActionsLite: アクションを追加する関数
s_MenuID: ツールバーやドロップダウンメニューのウィジェット ID 。変数は Custom_Scene_Actions_Lite
に渡される bLeftItems: true は left-hand メニュー項目の修正、 false は right-hand メニュー項目
JavaScript のオブジェクト配列名
a ddA c tio ns L ite ( s _M e nuI D , bL e ftI tem 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 "]}
];
removeActionsLite:
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 );
r e p o s itio n A c tio n s L ite ( s _ M e n u ID , tr u e , "p r in t", "r e p ly to a ll", tr u e );
repositionActionsLite: アクションを移動する関数
c he c k A c tio nI D s ( s _ M e n u ID );
}
checkActionIDs:
メニュー ID の表示を制する関数
s_MenuID: ウィジェット ID
bLeftItems: true は left-hand メニュー項目の修正
from_Id: 移動元のメニュー項目 ID
to_Id: 移動先のメニュー項目 ID
before: true は to_Id の前に挿入、 false は後
64
IBM Software Group | Lotus software
addActions におけるパラメーター
 addActions(Lite) 関数におけるプロパティ・パラメーター (top level オブジェクト )
パラメーター
説明
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
サブメニューの配列
 Submenu オブジェクトにおけるプロパティ・パラメーター
パラメーター
説明
title
top level オブジェクトと同じ
action
top level オブジェクトと同じ
is_divider
1 か true であれば、分離線を追加
65
IBM Software Group | Lotus software
イベントドリブンのアクション
 Custom_JS_Lite サブフォームの中で、関数が用意されている。
関数
説明
Custom_Scene_PostLoad_Lite
フォームが呼び出されたタイミングで実行される
Custom_Scene_PreSubmit_Lite
フォームから Submit されたタイミングで実行される
“return false” で、 Submit を中止させることも可能
66
IBM Software Group | Lotus software
イベントドリブンのアクションのカスタマイズ例
• メール送信時にポップアップメッセージ表示
• 文言はアクションのスクリプトに直書き、もしく
は多言語対応したプロパティー・ファイルから
の挿入も可能
• 宛先がホワイトリストに無い場合、処
理を進めるか否か OK/ キャンセルの
ボタンを表示
67
IBM Software Group | Lotus software
サイドバーのカスタマイズ例
Notebook 、 Todo 、 Contacts を追加表示
（このサンプルではサイドバー表示から３秒
遅延を設けている）
68
IBM Software Group | Lotus software
サイドバーのカスタマイズサンプルコード（ 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 In E d itM 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 to m S id e b a r ();
}
パネルの表示に Dojo を利用
f u n c t io n addDojoPanel(s Id ,s P a n e lT itle ,s C o o r d s ,o H tm 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 ts = E K c ;
v a r o S id e b a r = o W id g e ts = = 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 ta c ts P a n e l();
a d d T o d o P a n e l();
a d d N o te 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 ty 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 ta c ts ",s C o o r d s ,o D iv ,o P a r a m s ,0 );
69
IBM Software Group | Lotus software
マストヘッドのカスタマイズ① （シンプルな例）
シンプルな内容をバナー上部に領域
を重ねて表示
マストヘッドのカスタマイズサンプルコード① （サブフォーム 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 >
</t r >
</t a b le >
</d iv >
通常の HTML コードを記述しただ
け
70
IBM Software Group | Lotus software
マストヘッドのカスタマイズ② （高度な例）
マウスを重ねると動的に高さを変えて表示
Dojo ライブラリの Fisheye を用いた
高度な表現のランチャー
71
IBM Software Group | Lotus software
Lotus iNotes での Web エージェントの利用
 Lotus iNotes から Web エージェントを利用することが可能
– WebQueryOpen, WebQuerySave エージェント
– @DBCommand からのエージェント呼び出し
– HTTP GET コマンドでのエージェント呼び出し
 フォーム・サブフォームに対してエージェントを使ったデータの処
理が可能
– 利用するサブフォームなどから、エージェントを呼び出す
 エージェントを利用する場合は、パフォーマンスに注意する
– フォームの使用頻度が高い場合、過剰負荷となる可能性がある
72
IBM Software Group | Lotus software
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 はエージェント名
73
IBM Software Group | Lotus software
WebQuery エージェントの利用
まずはテンプレートに
エージェントを作成
テンプレートはフォー
ム / サブフォームから
呼び出す
参照
mail85.ntf
iNotes\Forms85.nsf
継承
iNotes\Forms85_x.nsf
エージェントは
メール D B に設定する
Lotus iNotes
mail\JUser.nsf
画面
ユーザーがアクセス
すると、エージェント
が実行される
74
IBM Software Group | Lotus software
WebQuery エージェントを作成する
 エージェントは、メールデータベースに作成する
– エージェントプロパティは、通常の Web エージェントと同様にする
– 実行トリガー：「アクションメニューより選択」
– 対象：「なし」：
– Web ユーザーとして実行
– サーバー文書で、署名者のセキュリティが許可されていることが前提
 エージェントから、文書アイテムなども取得可能
– DocumentContext プロパティ経由で、アイテムを取得する
75
IBM Software Group | Lotus software
@DBCommand からのエージェント呼び出し
 サーバーサイドタグからの出力
– サブフォーム内に @DBCommand を記述し、エージェントを呼び出す。
– 例： @{@DbCommand(“haiku”;“h_RunAgent”;“ エージェント名 ";"1")}
– @{ } でくくることで、結果を「計算結果テキスト」で出力可能
– エージェントは、メールファイル、もしくは Forms85.nsf に配置が可能
– 最後の引数が” 0”( デフォルト ) の場合、エージェントはメールファイルに存在
– 最後の引数が” 1” の場合、エージェントは Forms85.nsf に存在
– 将来的には引数” 2” が用意され、エージェントを、 Forms85_x.nsf に格納可
能になる
76
IBM Software Group | Lotus software
HTTP Get でのエージェント呼び出し
 URL 経由でエージェントを呼び出す
– iNotes/Forms85.nsf/iNotes/Proxy/?
EditDocument&Form=s_RunAgent&PresetFields=AgentName;name
– エージェントは Forms85.nsf に配置する。
– 将来的に Forms85_x.nsf への配置も可能になる予定
 必要に応じて、 Ajax 技術 (XmlHttpRequest+DHTML) と併用
して呼び出し、結果を出力することも可能
77
IBM Software Group | Lotus software
エージェント利用時の Tips
 Domino サーバーコンソールへの文字出力
– Messagebox メソッド： Domino サーバーコンソールへ文字を出力
– デバッグや、動作ログの１つとして
– Print メソッド： Web ブラウザへ文字を出力
– エージェント処理結果をブラウザに出力させたいときなど
78
IBM Software Group | Lotus software
ウィジェットの利用

画面左下にウィジェットを表示させることが可能
– ウィジェットは、 Lotus Notes 用ウィジェットの「 Web ウィジェット」が対象
– HTTP ページへの GET/POST がサポート
– ウィジェットの利用は基本的にコーディング不要

サーバー単位 / ユーザー単位で設定可能
– ユーザー単位：ポリシー機能を使い、対象ユーザーに
メールポリシーを適用する
– サーバー単位：サーバーに notes.ini を設定し、対象
サーバー上のすべてのユーザーに有効にする。
iNotes_WA_Widgets=1 を設定
 表示させるウィジェットは２種類
– 管理者が設定した、標準ウィジェット
– ユーザーが選択した、個人利用ウィジェット
79
IBM Software Group | Lotus software
ウィジェット利用時の関連ファイル
個人利用の
ウィジェット
ウィジェットカタログより
ユーザーが選択したもの
はメールファイルのウィ
ジェットプロファイルに格
納
Lotus iNotes
m a ilD B サーバー
inotes
_Config
.xml
W e b ブラウザ
標準のウィジェット
ウィジェット
カタログ
L o tu s N o te s S ta n d a r d
ウィジェットカタロ
グにウィジェットを
追加
in o te s _ c o n fig .x m l
で、標準ウィ
ジェットとウィ
ジェットカタログ
ファイルを定義す
る
80
IBM Software Group | Lotus software
Lotus Notes 用ウィジェットとは
 Lotus Notes のサイドバーに表示するコンポーネント
– Google ガジェットや Web ページ、その他プラグインなどが利用可能
– iNotes では「 Web ページ」ウィジェットが対象
 ウィジェットカタログ DB で共有
– クライアント上で動作させたウィジェットを共有などの
目的でサーバーにカタログ配置が可能
– 「ウィジェットカタログ」テンプレート (toolbox.ntf) を使い
任意の名前でサーバー上に作成する。
– クライアントから「カタログに公開」することが可能
– 説明やカテゴリなどを入力する（次ページ）
81
IBM Software Group | Lotus software
ウィジェットカタログ文書の作成
タイトルとカテゴリ
とプラットフォーム
を設定する。
L o tu s N o te s
S ta n d a r d クライア
ントから、カタログ文
書を作成する
ウィジェットの実体
は X M L 。ウィジェッ
トの定義から自動的
に作成される。
82
IBM Software Group | Lotus software
ウィジェット利用の設定
 inotes_config.xml ファイルの設定
– ウィジェットの使われ方を設定するファイル
– サーバー上のウィジェットカタログを設定する
– デフォルトでの表示ウィジェットを設定する
– iNotes サーバーの <dominodata>/domino/html/inotes_config.xml を編集す
る
– カタログ情報の定義
– ウィジェットカタログ DB ファイルの指定 (Lotus iNotes サーバーに配置）
– iNotes で利用するウィジェットカテゴリの指定
（プラットフォームは「 iNotes85 」のみが利用可能）
– デフォルトウィジェットの定義
– 明確な XML のガイドがないため、まずウィジェットカタログにカタログ文書を作
成し、そこから XML をコピーする。
83
IBM Software Group | Lotus software
参考： inotes_config.xml の設定
ウィジェットカタログを定義する
サーバー上の D B ファイル名、
対象カテゴリを指定
デフォルトのウィジェットを定義する。
複数値の設定が可能。
84
IBM Software Group | Lotus software
ユーザー操作（表示・追加）
 ウィジェットのユーザー操作
– 利用可能になると、 Lotus iNotes 画面にデフォルトウィジェットが表示される。
– 右クリックでウィジェットカタログの参照が可能
– ウィジェットカタログ選択画面で、利用したいウィジェットを選択して OK すると、
追加される。
– 右クリックで削除も可能
85
IBM Software Group | Lotus software
ユーザー操作（利用）
 ウィジェットを利用する
– GET ウィジェット
– クリックすると、ウィジェットで定義した位置に GET 結果が表示される。
– POST ウィジェット
– クリックすると、ウィジェットで定義した必須入力フィールドが求められ、入力
に応じてその POST 結果が表示される。
P O S T ウィジェットの例。
入力した値を使い、対象
のフォームに自動 P O S T
して結果を表示する。
86
IBM Software Group | Lotus software
（参考） GET ウィジェットの作成方法

Lotus Notes Standard クライアントでウィジェットを作成
1. クライアントのプリファレンスよりウィジェットを有効にし、カタログを設定
2. クライアントメニューより [ ツール ]-[ ウィジェット ]-[ ウィジェットの構成を開始 ]
3. 作成するウィジェットは「 Web ページ」を指定する
4. 「 URL での Web ページ」を指定し、任意の Web ページを入力する
5. HTTP GET のウィジェットを選択する
6. サイドバーの「マイウィジェット」から、「カタログ
に公開」を選択する。
87
IBM Software Group | Lotus software
（参考） POST ウィジェットの作成方法

Lotus Notes Standard クライアントでウィジェットを作成
1. クライアントのプリファレンスよりウィジェットを有効にし、カタログを設定
2. クライアントメニューより [ ツール ]-[ ウィジェット ]-[ ウィジェットの構成を開始 ]
3. 作成するウィジェットは「 Web ページ」を指定する
4. 「 URL での Web ページ」を指定し、任意の Web ページを入力する
5.
6.
7.
8.
9.
HTTP POST のウィジェットを選択する
入力フォームを選択する
「アクションとしてワイヤリング」を選択し、入力フィールドを定義する
拡張メニューで必要な入力フィールドを定義し「必須」フラグをたてる
「他のコンテント」「テキスト選択」「 contents 」を設定する。また、アクションの結
果を「新規ウィンドウ」か「タブ」で設定する。
10. サイドバーの「マイウィジェット」から、「カタログ公開」を選択する
88
IBM Software Group | Lotus software
ウィジェット利用時の考慮点
 ウィジェットの設定
– Lotus Notes ウィジェットに比べて POST ウィジェットに制限あり
– Lotus Administrator ヘルプ「 Lotus iNotes でウィジェットを使用する」参照
 サーバー設定について
– Web ページの出力は UTF-8 にする
– サーバー文書： [ インターネットプロトコル ]-[Domino Web Engine]-[ 出力に
UTF-8 を使用 ]
– 出力が Shift-JIS の場合はウィジェットカタログの一覧の入手が出来ない。
89
IBM Software Group | Lotus software
開発のヒント
 Web 用デバッグツールの活用
– ブラウザプラグイン・拡張、ローカルプロキシなど（以下、代表的デバッグツール例）
ツール
説明
Internet Explorer
Developer Toolbar
• IE 用プラグイン
• Web ページの構成要素の把握や変更のプレビューが可
能
• IE8 には標準で付属（「ツール」 > 「開発者ツール」）
Firebug
• Firefox 用アドオン
• JavaScript のデバッグを始め、 Web ブラウザ側での様々
なデバッグが可能
• Firefox 用アドオン
• CSS 、 JavaScript 、 Cookie の無効化など、様々な機能
で Web ページの分析が可能
Web Developer
Fiddler
• コンピューターとインターネット間の HTTP トラフィックを記
録する、 Web Debugging Proxy
90
IBM Software Group | Lotus software
開発のヒント
 フォームファイルの更新について
– サーバーを再起動する
– もしくは、以下のコンソールコマンドを実施する
• tell http inotes flushforms
 サブフォームのデバッグについて
– 呼び出されたサブフォームをサーバー側でトレースするために、以下のデバッ
グパラメータが利用可能
• iNotes_WA_Debug_SubForms=1
91
IBM Software Group | Lotus software
デバッグのヒント
 設計要素のテキスト出力＋検索
– DXL を使って、データベースの情報を出力する
– DXL(XML) ＝テキストファイルのため、設計要素の中からテキスト名を検索可
 Lotus Domino Designer を使って、 DXL 出力する
– Forms85.nsf の設計要素を全選択し、 Lotus Domino Designer から [ ツー
ル ] – [DXL ユーティリティ ] – [ エクスポーター ] を実行する
 DXL ファイルを検索する
– 「クラス名」はわかっているが、それが Lotus iNotes の設計上、どこで定義さ
れているかがわからないときなど
– DXL ファイルを、テキスト検索ユーティリティ (grep コマンドなど ) を使って検索
92
IBM Software Group | Lotus software
まとめ
 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 も修正する
必要があるため、注意が必要
 今後も製品として、容易にカスタマイズがしやすい方向で拡張していく予定
必要性と影響範囲を見極め、安全なカスタマイズを！
必要性と影響範囲を見極め、安全なカスタマイズを！
93
IBM Software Group | Lotus software
参考情報
 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-dominoweb-access-customization
 iNotes customization changes for 8.5
http://www.lotus.com/ldd/dominowiki.nsf/dx/inotes-customization-changes-for8.5
94
IBM Software Group | Lotus software
参考情報
 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-Panelsin-iNotes-8.5
 Using Dojo on Domino web forms
http://www.lotus.com/ldd/ddwiki.nsf/page.xsp?
documentId=33F12895ECCDD5AD852575CA004D9E13&action=openDocume
nt
95