この章では、iPlanet Messenger Express 5.0 の一般機能をカスタマイズする方法について説明します。
-
ログイン画面のカスタマイズ
ログイン画面のカスタマイズ
この節では、Messenger Express のログイン画面 (図 2-1 を参照) をカスタマイズする方法について説明します。
図 2-1 Messenger Express のログイン画面
ログイン画面に関するカスタマイズの内容
Messenger Express のログイン画面では、以下の変更を行うことができます。
-
言語/default.html ファイルを編集します。
-
画面の表示内容を変更するには、言語/default.html ファイルの本文部分を編集します。言語/default.html には、以下のような 4 つのフォーム (2 つは画面に表示され、残りの 2 つは表示されません) が含まれています。
-
実際にサーバに送られるのは、非表示のフォームのみです (ユーザ名およびパスワードを login.msc に POST)。
- 画面に表示されているフォームを送信すると post() 関数が呼び出され、この関数によって login() が呼び出されます。そして、login() が表示フォームに入力された値に基づいて非表示フォームを完成し、[新規のウィンドウ] ボックスがチェックされているかどうかに基づいて適切な非表示フォームをサーバに送ります。新規のウィンドウを開く場合は、サーバが応答できるように、FORM タグ内に TARGET ウィンドウを指定します。
- 画面に表示されているフォームを送信すると post() 関数が呼び出され、この関数によって login() が呼び出されます。そして、login() が表示フォームに入力された値に基づいて非表示フォームを完成し、[新規のウィンドウ] ボックスがチェックされているかどうかに基づいて適切な非表示フォームをサーバに送ります。新規のウィンドウを開く場合は、サーバが応答できるように、FORM タグ内に TARGET ウィンドウを指定します。
例 - ログイン画面のカスタマイズ
図 2-2 は、iPlanet ロゴをカスタム グラフィックおよびカスタム リンクに変更し、カラー スキームをえび茶と銀に変更し、タイトル テキストを [Web Mail サービス] に変更した場合の例です。
図 2-2 ログイン画面のカスタマイズ例
コード例 2-1 および コード例 2-2 は、それぞれ編集前と編集後の en/default.html ファイルを示しています。
カラー セットのカスタマイズ
この節では、iPlanet Messenger Express ユーザ インターフェイスのカラー セット (図 2-3 を参照) をカスタマイズする方法について説明します。
図 2-3 Messenger Express カラー セット
カラー セットに関するカスタマイズの内容
Messenger Express ユーザ インターフェィスのデフォルトのカラー セットをカスタマイズして、タイトル バー、タブの外枠、カラム ヘッダーなどの色を変更できます。
ユーザ インターフェィスのカラー セットをカスタマイズするには
-
main.js ファイルの始めの方にある ui[] array の定義を編集します。
-
main.js の refreshColorSet() 関数は、chrome1、accent2 など、インターフェイスのカラー スキームの値を設定するためのものです。この値は、main.js 内のその他の表示関数で使用されます。
- ui[] 要素が実際にどのようなカラー値に変換されるかについては、main.js の refreshColorSet() を見てください。
- ui[] array には、必要に応じて複数の行を含めることができます。main.js で新しい行を定義すると、新しいカラー スキームが環境設定ページに表示されます。定義スクリプトから行が削除され、ユーザの環境が ui[] array にあるものよりも上位のカラー テーブル インデックスをポイントしている場合、ユーザの JavaScript アプリケーションは起動しません。
- 表 2-1 に、ui[] コントロールのカラー インデックスを示します。
インデックス
名前
決定事項
- ui[] 要素が実際にどのようなカラー値に変換されるかについては、main.js の refreshColorSet() を見てください。
例 - カラー セットのカスタマイズ
図 2-4 は、デフォルトのカラー セットをカスタマイズして、accent1 の色をえび茶に、chrome4 の色を紺に、chrome5 の色を銀にそれぞれ変更した場合の例です。
図 2-4 カラー セットのカスタマイズ例
コード例 2-3 は、編集後の main.js ファイルを示しています。
コーナー ロゴとリンクのカスタマイズ
この節では、Messenger Express のコーナー ロゴおよびリンク (図 2-5 を参照) をカスタマイズする方法について説明します。
図 2-5 Messenger Express のコーナー ロゴとリンク
コーナー ロゴとリンクに関するカスタマイズの内容
Messenger Express のコーナー ロゴおよびリンクは、以下のようにカスタマイズできます。
-
main.js ファイルの toolFrame() 関数を編集します。
例 - コーナー ロゴとリンクのカスタマイズ
図 2-6 は、iPlanet ロゴを異なるサイズのカスタム ロゴで置き換え、リンク先を変更した場合の例です。
図 2-6 コーナー ロゴとリンクのカスタマイズ例
コード例 2-4 は、編集後の main.js ファイルを示しています。
タイトル テキストのカスタマイズ
この節では、Messenger Express のタイトル テキスト (図 2-7 を参照) をカスタマイズする方法について説明します。
図 2-7 Messenger Express のタイトル テキスト
タイトル テキストに関するカスタマイズの内容
Messenger Express のタイトル テキストを他のサービス名に変更することができます。
-
タイトル テキストのレイアウトを変更するには、main.js ファイルの toolFrame() 関数を編集します。タイトル テキストそのものを変更するには、言語/i18n.js ファイルの i18n_tab_header() 関数を編集します。
-
一般に、言語/i18n.js ファイル内のすべての Messenger Express 文字列をカスタム ブランド名に置き換えることにより、インターフェイスを簡単にカスタマイズすることができます。
例 - タイトル テキストのカスタマイズ
図 2-8 は、テキストを [ユーザ の Web Mail サービス] に変更した場合の例です。
図 2-8 タイトル テキストのカスタマイズ例
コード例 2-5 は、編集後の en/i18n.js ファイルを示しています。
function i18n_tab_header(user) {
return user + '<nobr>の Web Mail サービス</nobr>'
}
ブランド イメージのカスタマイズ
この節では、ブランド イメージ (図 2-9 を参照) をカスタマイズする方法について説明します。
図 2-9 Messenger Express のブランド イメージ
ブランド イメージに関するカスタマイズの内容
Messenger Express のブランド イメージは、以下のようにカスタマイズできます。
-
main.js ファイルを編集します。
例 - ブランド イメージのカスタマイズ
図 2-10 は、Messenger Express を別のブランド イメージで置き換えた例です。
図 2-10 ブランド イメージのカスタマイズ例
コード例 2-6 は、編集後の main.js ファイルを示しています。
// トップ フレームにブランド名を挿入するには、これを該当するテキストまたはイメージに設定
// Navigator 3.x で正しく表示されるようにするには、必ず高さと幅を指定すること
var brandht = 45
var brandwd = 45
var brandwd = 45