第 3 章 ユーザ インターフェイス機能のカスタマイズ


この章では、iPlanet Messenger Express 5.0 のユーザ インターフェイスの機能をカスタマイズする方法について説明します。

この章には、以下の項目があります。

• メイン機能タブのカスタマイズ

• [メールボックス] ツールバーのカスタマイズ

• メッセージ リスト ウィンドウのカスタマイズ

• メッセージ表示ウィンドウのカスタマイズ

• [メッセージ] ツールバーのカスタマイズ

• メッセージ作成ウィンドウのカスタマイズ

• アドレス (ディレクトリ検索) ウィンドウのカスタマイズ

• オプション ウィンドウのカスタマイズ

• フォルダ ウィンドウのカスタマイズ

メイン機能タブのカスタマイズ

---

この節では、Messenger Express のメイン機能タブ (図 3-1 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-1 Messenger Express のメイン機能タブ (デフォルトのラベル)

メイン機能タブに関するカスタマイズの内容

Messenger Express のメイン機能タブは、以下のようなカスタマイズができます。

• タブのレイアウトを変更する

• タブ ラベルのテキストを変更する

メイン機能タブをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • タブのレイアウトを変更するには、main.js ファイルの toolFrame() 関数を編集します。

  • タブ ラベルのテキストを変更するには、言語/i18n.js ファイルの // Tabs セクションにある folders、message、options の i18n[] 値、および // Tool Bars セクションにある help と logout の i18n[] 値を編集します。

  • デフォルトのフォルダ名ラベル (最初に表示される 受信箱タブ ラベルを含む) のテキストを変更するには、言語/i18n.js ファイルの // Localized folder names セクションにある fldr[] 値を編集します。

  タブは toolFrame() によって構成されており、この関数によって、表示するタブ ラベル、現在選択されているかどうかを示すフラグ、タブがクリックされた際に呼び出される関数などを指定する main.js ファイルの tab() 関数が呼び出されます。

  以下に挙げるのは、デフォルトのタブを処理する main.js ファイル内の関数です。

  • フォルダ : displayFolders()

  • 受信箱 : (状態によって) displayMbox() または refreshMbox()

  • メッセージ : selectMsg()

  • オプション : selectOptions()

  • ヘルプ : help()

  • ログアウト : logout()

例 - メイン機能タブのカスタマイズ

図 3-2 は、[オプション] タブを右側に移動し、ラベルを [環境設定] に変更した場合の例です。

図 3-2 メイン機能タブのカスタマイズ例

コード例 3-1 および コード例 3-2 は、それぞれ編集後の main.js ファイル (レイアウト) および en/i18n.js ファイル (タブ ラベル) を示しています。

コード例 3-1 メイン機能タブのレイアウトを変更した場合 (main.js)

---

function toolFrame() {

.....

'<td width=50%>' + nbsp + '</td>\n' +

tab(i18n['options'], state == 'options', 'selectOptions()') +

....

}

コード例 3-2 メイン機能タブのラベルを変更した場合 (en/i18n.js)

---

// Tabs

i18n['folders'] = 'フォルダ'

i18n['message'] = 'メッセージ'

i18n['options'] = '環境設定'

[メールボックス] ツールバーのカスタマイズ

---

この節では、Messenger Express の [メールボックス] ツールバー (図 3-3 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-3 Messenger Express の [メールボックス] ツールバー

[メールボックス] ツールバーに関するカスタマイズの内容

Messenger Express の [メールボックス] ツールバーは、以下のようなカスタマイズができます。

• ツールの順番を変更する

• ツールのテキストを変更する

[メールボックス] ツールバーをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • ページに対するツールバーの相対的レイアウトを変更するには、main.js ファイルの toolFrame() 関数を編集します。

  • ツールバー内部のレイアウトおよびグラフィックを変更するには、mbox_fs.html ファイルの getToolbar() 関数を編集します。

  • ツールバーのグラフィックに関連付けられているテキストを変更するには、言語/i18n.js ファイルの get mail、compose、search、new search、file selected message、delete、undelete、および expunge の I18n[] 値を編集します。

  main.js の toolFrame() は、mbox_fs.html の getToolbar() を呼び出して、ページに書き出す HTML コードを取得します。

  mbox_fs.html の getToolbar() は、色の項目とテキストだけのバージョンの項目などの項目を制御する main.js の toolbar() を呼び出すことにより、コードをアセンブルし、各関数をグラフィックに割り当てます。

  また、mbox_fs.html の getToolbar() は、main.js の folderSelection() を呼び出してドロップダウン フォルダ リストを生成します。

  クリックに反応できるように mbox_fs.html の getToolbar() によって各ツールに割り当てられている関数は、以下のとおりです。

  • メールの受信 : main.js の refreshMbox()

  • 作成 : main.js の compose("new")

  • 検索 : parent.srch()

  • メッセージをフォルダに移動 : parent.move()

  • 削除 : parent.delmsg()、parent.undelmsg()、parent.exmsg() (ごみ箱フォルダ内であるかどうかによって異なります。)

例 - [メールボックス] ツールバーのカスタマイズ

図 3-4 は、[検索] を左端に移動し、[メールの受信] を [メッセージの受信] に変更した場合の例です。

図 3-4 [メールボックス] ツールバーのカスタマイズ例

コード例 3-3 および コード例 3-4 は、それぞれ編集後の mbox_fs.html (レイアウト) および en/i18n.js (テキスト) を示しています。

コード例 3-3 ツールバーのレイアウトを変更した場合 (mbox_fs.html)

---

function getToolbar() {

....

main.toolbar(

....

(main.srch != '' ? i18n['new search'] : i18n['search']),

'parent.srch()', 'imx/search.gif', 27, 25, true,

i18n['get mail'], 'main.refreshMbox()', 'imx/pull.gif', 27, 25, true,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif', 27, 25, true)

....

}

コード例 3-4 ツールバーのテキストを変更した場合 (en/i18n.js)

---

// Tool Bars

....

i18n['get mail'] = 'メッセージの受信'

メッセージ リスト ウィンドウのカスタマイズ

---

この節では、Messenger Express のメッセージ リスト ウィンドウ (図 3-5 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-5 Messenger Express のメッセージ リスト ウィンドウ

メッセージ リスト ウィンドウに関するカスタマイズの内容

Messenger Express のメッセージ リスト ウィンドウは、以下のようなカスタマイズができます。

• デフォルトのメッセージの表示の順序を変更する

• 外部からメールを受信するためのテキストを変更する

メッセージ リスト ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • メッセージ リストの表示方法を変更するには、mbox_fs.html ファイルの listFrameHTML() 関数を編集します。

  • カラム ヘッダーのテキストを変更するには、言語/i18n.js ファイルの search results、date、from、to、size、および subject に対する i18n[] 値を編集します。

  • [外部メールの収集] リンクのテキストを変更するには、言語/i18n.js ファイルの i18n['collect long']を編集します。

  • メッセージの表示順序を変更するには、main.js ファイルの始めの方にある defaults[] の値を変更します。

  listFrameHTML() は、mbox_fs.html の getSortHeader() を呼び出して、カラム ヘッダーがクリックされた際に main.js の sortMsgs() が適切に呼び出されるようにします。また、listFrameHTML() は「外部メールの収集」ハイパーリンクを main.js の collect() にリンクします。

例 - メッセージ リスト ウィンドウのカスタマイズ

図 3-6 は、メッセージが新着順に表示されるようにデフォルト設定を変更し、さらに「外部メールの収集」リンクのテキストを変更した場合の例です。

図 3-6 メッセージ リスト ウィンドウのカスタマイズ例

コード例 3-5 および コード例 3-6 は、それぞれ編集後の main.js および en/i18n.js を示しています。

コード例 3-5 メッセージ リスト ウィンドウのレイアウトを変更した場合 (main.js)

---

var defaults = new Array(

.....

'meSortOrder', 'last',

.....

)

コード例 3-6 メッセージ リスト ウィンドウのテキストを変更した場合 (en/i18n.js)

---

// POP3 Collection

....

i18n['collect long'] = '他のサーバからメッセージを受信'

メッセージ表示ウィンドウのカスタマイズ

---

この節では、Messenger Express のメッセージ表示ウィンドウ (図 3-7 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-7 Messenger Express のメッセージ表示ウィンドウ

メッセージ表示ウィンドウに関するカスタマイズの内容

Messenger Express のメッセージ表示ウィンドウは、以下のようなカスタマイズができます。

• メッセージの表示方法を変更する

• ウィンドウやメッセージのレイアウトを変更する

• テキストを変更する

メッセージ表示ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • メッセージの表示方法を変更するには、msg_fs.html ファイルの listFrameHTML(doc) 関数を編集します。

  • デフォルトのテキストを変更するには、言語/i18n.js ファイルの // Message Headers セクションおよび // Message セクションの i18n[] 値を編集します。

  • メッセージの表示方法のデフォルト設定 (行の折り返しなど) を変更するには、main.js ファイルの始めの方にある defaults[] の値を編集します。

例 - メッセージ表示ウィンドウのカスタマイズ

図 3-8 は、[件名] を [宛先] の上に移動した場合の例です。

図 3-8 メッセージ表示ウィンドウのカスタマイズ例

コード例 3-7 は、編集後の msg_fs.html ファイルを示しています。

コード例 3-7 メッセージ表示ウィンドウのレイアウトを変更した場合

---

function listFrameHTML(doc) {

....

s += header('from') + header('date') + header('subject')+ header('to') + header('cc')

....

}

[メッセージ] ツールバーのカスタマイズ

---

この節では、Messenger Express の [メッセージ] ツールバー (図 3-9 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-9 Messenger Express の [メッセージ] ツールバー

[メッセージ] ツールバーに関するカスタマイズの内容

Messenger Express の [メッセージ] ツールバーは、以下のようなカスタマイズができます。

• ページに対するツールバーの相対的レイアウトを変更する

• ツールバー内部のレイアウトを変更する

• グラフィックに関連付けられているテキストを変更する

[メッセージ] ツールバーをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • ページに対する相対的レイアウトを変更するには、main.js ファイルの toolFrame() 関数を編集します。

  • ツールバー内部のレイアウトやグラフィックを変更するには、msg_fs.html ファイルの getToolbar() 関数を編集します。

  • ツールバーのグラフィックに関連付けられているテキストを変更するには、言語/i18n.js ファイルの compose、reply、replay all、forward、file msg、delete、undelete、previous、next に対する i18n[] 値を編集します。

  msg_fs.html の getToolbar() は、色の項目とテキストだけのバージョンの項目などを制御する main.js の toolbar() を呼び出すことにより、コードをアセンブルし、各関数をグラフィックに割り当てます。

  また、msg_fs.html の getToolbar() は、main.js の folderSelection() を呼び出してドロップダウン フォルダ リストを生成します。

  クリックに対応できるように msg_fs.html の getToolbar() によって各ツールに割り当てられている関数は、以下のとおりです。

  • 作成 : main.js の compose(\'new\')

  • 返信 : main.js の compose(\'reply\')

  • 全員に返信 : main.js の compose(\'replyall\')

  • 転送 : main.js の compose(\'forward\')

  • メッセージをフォルダに移動 : parent.move()

  • 削除/削除解除 : parent.delmsg()

  • 前へ : parent.prev()

  • 次へ : parent.next()

例 - [メッセージ] ツールバーのカスタマイズ

図 3-10は、[作成] を右端へ移動して独立させ、[前へ] を [戻る] に変更した場合の例です。

図 3-10 [メッセージ] ツールバーのカスタマイズ例

コード例 3-8 および コード例 3-9 は、それぞれ編集後の msg_fs.html および en/i18n.js ファイルを示しています。

コード例 3-8 [メッセージ] ツールバーのレイアウトを変更した場合 (msg_fs.html)

---

function getToolbar() {

....

main.toolbar(

....

i18n['next'], 'parent.next()', n ? 'imx/next-1.gif' : 'imx/next-0.gif', 27, 25, n,

null, null, 'imx/divider.gif', 2, 24, false,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif', 27, 25, true)

....

}

コード例 3-9 [メッセージ] ツールバーのテキストを変更した場合 (en/i18n.js)

---

// Tool Bars

....

i18n['previous'] = '戻る'

メッセージ作成ウィンドウのカスタマイズ

---

この節では、Messenger Express のメッセージ作成ウィンドウ (図 3-11 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-11 Messenger Express のメッセージ作成ウィンドウ

メッセージ作成ウィンドウに関するカスタマイズの内容

Messenger Express のメッセージ作成ウィンドウは、以下のようなカスタマイズができます。

• ウィンドウ内のツールの位置を変更する

• ツールのテキストを変更する

メッセージ作成ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • ツールバーをカスタマイズするには、comp_fs.html ファイルの getToolbar() 関数を編集します。

  • ウィンドウ内のツールバー以外の部分を変更するには、comp_fs.html ファイルの compFrameHTML() 関数を編集します。

  • テキストを変更するには、言語/i18n.js ファイルの // Message Composition および // Tool Bars セクションの値を編集します。

  comp_fs.html の getToolbar() は、色やテキストだけのバージョンなどの項目を制御する main.js の toolbar() を呼び出すことにより、コードをアセンブルし、各関数をグラフィックに割り当てます。また、comp_fs.html の compFrameHTML() は、言語/i18n.js ファイルの i18n_compose_controls() を呼び出して「宛先/Cc/Bcc」コントロール領域を生成します。

  comp_fs.html の getToolbar() および compFrameHTML() によって割り当てられている関数は、以下のとおりです。

  • 送信 : parent.send(\'smtp\')

  • アドレス : parent.lookup()

  • 添付 : parent.attach()

  • 下書きを保存 : parent.send(\'draft\')

  • ヘルプ : main.js の help(1007399)

  • キャンセル : parent.cancel()

  • 宛先/Cc/Bcc : parent.add()

例 - メッセージ作成ウィンドウのカスタマイズ

図 3-12 は、[アドレス] を境界バーと [ヘルプ] の間に移動し、[受取人の追加] を [宛先] に変更した場合の例です。

図 3-12 メッセージ作成ウィンドウのカスタマイズ例

コード例 3-10 およびコード例 3-11 は、それぞれ編集後の comp_fs.html および en/i18n.js を示しています。

コード例 3-10 メッセージ作成ウィンドウのレイアウトを変更した場合 (comp_fs.html)

---

function getToolbar() {

....

i18n['send'], 'parent.send("smtp")', 'imx/send.gif', 27, 25, true)

if ((!main.cfg['meAutoQuote'] || main.cfg['meAutoQuote'] == 'false') &&

(compose_type != 'new' && compose_type != 'draft')) {

s += main.toolbar(

i18n['quote'], 'parent.quote(true)', 'imx/quote.gif', 29, 25, true)

}

s += main.toolbar(

i18n['attach'], 'parent.attach()', 'imx/attach_comp.gif', 24, 24, true,

i18n['draft'], 'parent.send("draft")', 'imx/draft.gif', 27, 25, true,

null, null, 'imx/divider.gif', 2, 24, false,

i18n['lookup'], 'parent.lookup()', 'imx/address.gif', 27, 25, true,

i18n['help'], 'main.help(1007399)', 'imx/help.gif', 27, 25, true,

....

}

コード例 3-11 メッセージ作成ウィンドウのテキストを変更した場合 (en/i18n.js)

---

// Message Composition

....

i18n['recipient'] = '宛先'

アドレス (ディレクトリ検索) ウィンドウのカスタマイズ

---

この節では、Messenger Express のアドレス (ディレクトリ検索) ウィンドウ (図 3-13 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-13 Messenger Express のアドレス (ディレクトリ検索) ウィンドウ

アドレス (ディレクトリ検索) ウィンドウに関するカスタマイズの内容

Messenger Express のアドレス (ディレクトリ検索) ウィンドウは、以下のようなカスタマイズができます。

• ウィンドウ全体の外観を変更する

• 検索コントロールおよびそのテキストを変更する

• その他のテキストを変更する

アドレス (ディレクトリ検索) ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • ウィンドウ全体の外観を変更するには、ldap_fs.html ファイルの searchFrameHTML()、listFrameHTML()、および addFrameHTML() 関数を編集します。

  • 検索コントロールおよびそのテキストを変更するには、言語/i18n.js ファイルの i18n_ldap_controls() を編集します。

  • その他のテキストを変更するには、言語/i18n.js ファイルの // LDAP Lookup セクションの値を編集します。

  searchFrameHTML() および addFrameHTML() によって各ボタンに割り当てられている関数は、以下のとおりです。

  • 検索 : parent.doSearch()

  • キャンセル : parent.cancel()

  • 宛先/Cc/Bcc : parent.add()

例 - アドレス (ディレクトリ検索) ウィンドウのカスタマイズ

図 3-14 は、[ローカル ディレクトリを検索] というテキストを [iPlanet ディレクトリを検索] に変更した場合の例です。

図 3-14 アドレス (ディレクトリ検索) ウィンドウのカスタマイズ例

コード例 3-12 は、編集後の en/i18n.js ファイルを示しています。

コード例 3-12 アドレス ウィンドウのテキストを変更した場合

---

function i18n_ldap_controls() {

....

'<select name="dir">\n' +

'<opti'<select name="dir">\n' + on value="3 200">iPlanet ディレクトリを検索 </option>\n' +

....

}

オプション ウィンドウのカスタマイズ

---

この節では、Messenger Express のオプション ウィンドウ (図 3-15 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-15 Messenger Express のオプション ウィンドウ

オプション ウィンドウに関するカスタマイズの内容

Messenger Express のオプション ウィンドウは、以下のようなカスタマイズができます。

• ウィンドウやオプションのレイアウトを変更する

• テキストを変更する

オプション ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • オプションやそのレイアウトを変更するには、opts_fs.html ファイルの toggleFrameHTML() 関数を編集します。

  • ウィンドウ内のテキストを変更するには、言語/i18n.js ファイルの // Options セクションの i18n[] 値を変更します。

例 - オプション ウィンドウのカスタマイズ

図 3-16 は、[Vacation メッセージ] を [個人情報] と [パスワード] の間に移動し、[パスワード] フォームの説明部分を [このフォームを使って Mozilla Super Speedy Web Mail へのアクセスに使用するパスワードを変更します。] に変更した場合の例です。

図 3-16 オプション ウィンドウのカスタマイズ例

コード例 3-13 およびコード例 3-14 は、それぞれ編集後の opts_fs.html および en/i18n.js ファイルを示しています。

コード例 3-13 オプション ウィンドウのレイアウトを変更した場合 (opts_fs.html)

---

function toggleFrameHTML() {

....

getToggle(main.i18n['personal'], 'personal',

'javascript:parent.toggle("personal")') +

getToggle(main.i18n['vacation'], 'vacation',

'javascript:parent.toggle("vacation")') +

getToggle(main.i18n['password'], 'password',

'javascript:parent.toggle("password")') +

....

}

コード例 3-14 オプション ウィンドウのテキストを変更した場合 (en/i18n.js)

---

// Options

....

i18n['passwd exp'] = 'このフォームを使って Mozilla Super Speedy Web Mail へのアクセスに使 用するパスワードを変更します。'

フォルダ ウィンドウのカスタマイズ

---

この節では、Messenger Express のフォルダ ウィンドウ (図 3-17 を参照) をカスタマイズする方法について説明するとともに、ファイルの編集例を紹介します。

図 3-17 Messenger Express のフォルダ ウィンドウ

フォルダ ウィンドウに関するカスタマイズの内容

Messenger Express のフォルダ ウィンドウは、以下のようなカスタマイズができます。

• ツールの位置を変更する

• ツールやフォルダのテキストを変更する

フォルダ ウィンドウをカスタマイズするには

• 必要に応じて以下のようにファイルを編集します。
  • フォルダ ツールバーをカスタマイズするには、fldr_fs.html ファイルの getToolbar() 関数を編集します。

  • ウィンドウ内のその他の部分をカスタマイズするには、fldr_fs.html ファイルの listFrameHTML() 関数を編集します。

  • [外部メールの収集] ハイパーリンクのテキストを変更するには、言語/i18n.js ファイルの i18n['collect long']を編集します。

  • ウィンドウ内のその他のテキストを変更するには、言語/i18n.js ファイルの // Folders セクションを編集します。

  fldr_fs.html の getToolbar() および listFrameHTML() によってツールやリンクに割り当てられている関数は、以下のとおりです。

  • 更新 : main.js の refreshFolders()

  • 作成 : main.js の compose(\'new\')

  • 新規 : parent.addFolder()

  • 名前の変更 : parent.renFolder()

  • フォルダの移動 : parent.moveFolder(options[selectedIndex].value)

  • 削除 : parent.delFolder()

  • フォルダの選択 : parent.select('i')

例 - フォルダ ウィンドウのカスタマイズ

図 3-18 は、[更新] および [作成] を他のツールと離して右端に移動した場合の例です。

図 3-18 フォルダ ウィンドウのカスタマイズ例

コード例 3-15 は、編集後の fldr_fs.html ファイルを示しています。

コード例 3-15 フォルダ ウィンドウのレイアウトを変更した場合  

---

function getToolbar() {

....

main.toolbar(

i18n["new folder"], 'parent.addFolder()', 'imx/fldr_new.gif', 27, 25, true,

i18n['rename'], 'parent.renFolder()', 'imx/fldr_edit.gif', 27, 25, true) +

....

main.toolbar(

i18n['delete'], 'parent.delFolder()', 'imx/delete.gif', 27, 25, true,

null, null, 'imx/divider.gif', 2, 24, false,

i18n['update'] ? i18n['update'] : i18n['get mail'], 'main.refreshFolders()', 'imx/pull.gif', 27, 25, true,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif', 27, 25, true)

....

}

前へ    目次    索引    次へ

---

Copyright (c) 2000 Sun Microsystems, Inc. 既存部分の一部: Copyright (c) 2000 Netscape Communications Corp. All rights reserved.

最終更新日 2000 年 9 月 14 日