画面デザインガイドライン

Transcription

1 画 面 デザインガイドライン Version5.0 初 版 2005 年 6 月 2 日

2

3 変 更 年 月 日 2005/06/02 初 版 << 変 更 履 歴 >> 変 更 内 容

4

5 目 次 << 目 次 >> 1 はじめに 開 発 環 境 条 件 ユーザインタフェース ガイドライン ガイドラインの 全 体 構 成 デザイン 性 に 関 するガイドラインについて 操 作 性 に 関 する 指 針 について デザイン 性 に 関 するガイドライン すべてのページにデザインスタイルシートタグを 記 述 する すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する 処 理 リンクは 画 面 共 通 モジュールを 使 用 する 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する 入 力 項 目 のデザインを 統 一 する 処 理 ボタンのデザインを 統 一 する テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する スタイルシートで 文 字 サイズを 指 定 しない 背 景 色 を 統 一 する 操 作 性 に 関 するガイドライン 各 画 面 ごとにヘルプ 画 面 を 用 意 する 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける コンボボックスで 大 量 データを 表 示 しない フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する 横 方 向 のスクロールが 発 生 しないようにする 画 面 共 通 モジュール 画 面 共 通 モジュールの 全 体 構 成 ページベース 開 発 モデルについて J2EEベース 開 発 モデルについて 重 要 事 項 デザインスタイルシートの 宣 言 ページベース 開 発 モデル デザインスタイルシート タイトルバー ツールバー 入 力 項 目 リストコントロール リストヘッダ J2EEベース 開 発 モデル デザインスタイルシート タイトルバー ツールバー 入 力 項 目 リストコントロール...76 作 成 者 株 式 会 社 NTT データ イントラマート Page i

6 intra-mart 画 面 デザインガイドライン(Version5.0) リストヘッダ 画 面 デザインサンプル 検 索 系 画 面 検 索 条 件 入 力 画 面 検 索 結 果 一 覧 画 面 登 録 系 画 面 更 新 削 除 系 画 面 一 覧 系 画 面 ユーザ 一 覧 ロール 一 覧 共 通 アイコン タイトルバー 処 理 系 検 索 種 別 ページ 切 替 昇 順 / 降 順 切 替 選 択 リストボックス ツリー 表 示 ボタン タブ Page ii Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

7 目 次 作 成 者 株 式 会 社 NTT データ イントラマート Page iii

8

9 1 はじめに 1 はじめに 本 ドキュメントは ユーザインタフェースの 大 幅 な 向 上 を 目 的 とした 画 面 デザインガイドラインです intra-mart 開 発 者 が 本 ドキュメント 内 で 示 す ユーザインタフェース ガイドラインや 画 面 共 通 モジュール を 利 用 することで 製 品 全 体 の 画 面 デザインや 操 作 性 が 統 一 されることを 目 指 します また 操 作 性 とともに 画 面 デザインを 見 直 すことで 見 た 目 といった 製 品 の 格 調 向 上 だけではなく 利 用 者 がわか りやすく 使 いやすい 製 品 を 目 指 します 1.1 開 発 環 境 条 件 以 下 の 環 境 条 件 を 整 えた 上 で 開 発 作 業 を 進 めてください 使 用 するブラウザは 基 本 的 に IE とする 文 字 サイズは ブラウザのメニュー [ 表 示 ]-[ 文 字 サイズ] を 中 とする(IE の 場 合 ) 画 面 の 解 像 度 を とする ブラウザのスクロールバー アドレスバー ツールバー メニューバーなどは 表 示 する 作 成 者 株 式 会 社 NTT データ イントラマート Page 1

10 intra-mart 画 面 デザインガイドライン(Version5.0) 2 ユーザインタフェース ガイドライン intra-mart 製 品 は バージョンアップ 複 数 ベンダによるアプリケーション 開 発 を 短 期 間 に 繰 り 返 してきたため 確 立 した 画 面 規 約 がありません そのため アプリケーションやページによってデザインが 異 なっていたり 文 字 サイズや 色 も 統 一 されていません ユーザインタフェース ガイドライン では intra-mart 製 品 の 画 面 設 計 時 に 考 慮 すべき 点 を 明 確 にすることで 製 品 全 体 の 画 面 デザインや 操 作 性 を 統 一 させることを 目 的 としています 2.1 ガイドラインの 全 体 構 成 ユーザインタフェース ガイドラインは 2 つのテーマで 構 成 しています デザイン 性 に 関 するガイドライン 操 作 性 に 関 するガイドライン 各 ガイドラインで 取 り 上 げた 内 容 について 現 状 の 問 題 点 や それに 対 する 改 善 対 策 を 記 述 しています intra-mart 開 発 者 は これらのガイドラインを 参 考 に 画 面 設 計 を 行 ってください また 各 ガイドラインには 実 装 方 法 についてより 理 解 しやすいように 具 体 的 な 実 装 例 を 記 述 しています 実 装 を 検 討 するときや ガイドラインの 意 図 が 不 明 確 なときに 参 考 にしてください デザイン 性 に 関 するガイドラインについて 画 面 構 成 カラー 文 章 ( 文 言 ) アイコンなど 画 面 全 体 で 統 一 していただきたい 要 件 を 記 載 します 詳 細 は 2.2 デザイン 性 に 関 するガイドライン に 示 します 操 作 性 に 関 する 指 針 について 画 面 の 遷 移 や ポップアップ 画 面 フレームの 扱 いなどについて 改 善 する 要 件 を 記 載 します 詳 細 は 2.3 操 作 性 に 関 するガイドライン に 示 します Page 2 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

11 2 ユーザインタフェース ガイドライン 2.2 デザイン 性 に 関 するガイドライン この 章 では 画 面 全 体 のデザインを 統 一 するために 画 面 を 作 成 する 際 にカラー 文 章 アイコンなどについて 基 準 となる 要 件 を 記 載 します デザイン 性 に 関 する 指 針 について 表 2-1 デザイン 性 に 関 するガイドライン に 示 します 表 2-1 デザイン 性 に 関 するガイドライン 項 番 項 目 ページ すべてのページにデザインスタイルシートタグを 記 述 する すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する 処 理 リンクは 画 面 共 通 モジュールを 使 用 する 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する 入 力 項 目 のデザインを 統 一 する 処 理 ボタンのデザインを 統 一 する テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する スタイルシートで 文 字 サイズを 指 定 しない 背 景 色 を 統 一 する 21 作 成 者 株 式 会 社 NTT データ イントラマート Page 3

12 intra-mart 画 面 デザインガイドライン(Version5.0) すべてのページにデザインスタイルシートタグを 記 述 する 各 ページで 別 々のスタイルシートを 使 用 していると サイト 内 全 体 の 画 面 デザインがバラバラになってしまいます デザインスタイルシートタグ を 使 用 してスタイルシートの 設 定 を 固 定 化 することで サイト 内 全 体 の 画 面 デザイン を 統 一 します デザインスタイルシートタグは 以 下 の 表 2-2 デザインスタイルシートの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 実 装 例 各 ページの<HEAD>タグ 内 には 必 ずデザインスタイルシートタグを 記 述 する デザインスタイルシートタグは 以 下 に 示 す 画 面 共 通 モジュールを 使 用 する 表 2-2 デザインスタイルシートの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imdesigncss"> デザインスタイルシート J2EE ベース 開 発 <imarttagimartdesigncss> デザインスタイルシート 良 い 例 デザインスタイルシートタグを 使 用 して スタイルシートを 設 定 ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> J2EE ベース 開 発 の 場 合 (JSP ファイルのサンプル) page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// " %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> 悪 い 例 <LINK>タグにより 各 自 でスタイルシートを 設 定 している <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css/common.css"> </HEAD> <BODY> Page 4 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

13 2 ユーザインタフェース ガイドライン すべてのページに 内 容 を 的 確 に 示 すタイトルバーをつける 現 在 位 置 の 表 示 がないと 利 用 者 はサイト 全 体 もしくはコンテンツ 内 のどこを 参 照 しているか わからなくなること があります 各 画 面 (ページ)の 最 上 部 には ページの 内 容 を 的 確 に 示 したタイトルバーを 表 示 します タイトルバーの 表 示 には 以 下 の 表 2-3 タイトルバーの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 実 装 例 各 画 面 (ページ)の 最 上 部 には タイトルバー を 配 置 する タイトルバーには アイコン+ページタイトル 名 を 表 示 する タイトルバーの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-3 タイトルバーの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imtitlebar"> タイトルバー J2EE ベース 開 発 <imarttagimarttitlebar> タイトルバー 良 い 例 ページの 最 上 部 に 内 容 を 的 確 に 示 したタイトルバーを 表 示 している 悪 い 例 タイトルバーの 表 示 がない 作 成 者 株 式 会 社 NTT データ イントラマート Page 5

14 intra-mart 画 面 デザインガイドライン(Version5.0) 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク を 画 面 内 のあらゆる 場 所 に 配 置 していると 次 の 処 理 に 戸 惑 うこ とがあります 各 画 面 (ページ)で タイトルバーの 下 部 にツールバーを 表 示 し 各 処 理 リンク はツールバー 内 に 配 置 します ツールバーの 表 示 には 以 下 の 表 2-4 ツールバーの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください また 処 理 リンクの 詳 細 については 次 章 の 処 理 リンクは 画 面 共 通 モジュールを 使 用 する で 説 明 します 実 装 例 各 画 面 (ページ)のタイトルバーの 下 部 に ツールバー を 表 示 する ページ 内 で 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は すべてツールバーに 配 置 する ( 処 理 リンクの 詳 細 については 処 理 リンクは 画 面 共 通 モジュールを 使 用 する を 参 照 ) ツールバーの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-4 ツールバーの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 J2EE ベース 開 発 <IMART type="imtoolbarframe"> <IMART type="imtoolbarleft"> <IMART type="imtoolbarright"> <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarttoolbarright> ツールバー ツールバー 処 理 リンク 配 置 位 置 の 方 針 メイン 処 理 系 ( 登 録 更 新 検 索 )のリンクは ツールバーの 左 側 に 配 置 する サブ 処 理 系 ( 最 新 情 報 ヘルプ)のリンクは ツールバーの 右 側 に 配 置 する [ 参 考 ] よく 使 用 される 処 理 リンクをツールバーの 右 側 / 左 側 に 分 けて 以 下 に 示 す 表 2-5 ツールバー 内 の 処 理 リンク 配 置 位 置 例 使 用 箇 所 アイコン 内 容 ツールバー 左 側 new.gif 新 規 登 録 や 追 加 など メイン 処 理 系 edit.gif 編 集 ( 登 録 更 新 検 索 など) print.gif 印 刷 search.gif 検 索 右 側 arrow_left.gif 戻 る サブ 処 理 系 reload.gif 最 新 の 情 報 ( 戻 る 最 新 情 報 ヘルプ help.gif ヘルプ など) close.gif 閉 じる(ポップアップ 画 面 のみ) その 他 のアイコンは 5 共 通 アイコン を 参 照 すること 良 い 例 各 ページのタイトルバーの 下 部 にツールバーを 表 示 し 処 理 リンクを 配 置 している Page 6 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

15 2 ユーザインタフェース ガイドライン 処 理 リンクは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 多 数 ある 処 理 リンク を 個 人 で 配 置 するとデザインや 表 示 方 法 がバラバラになってしまいます 処 理 リンクを 配 置 する 場 合 は 以 下 の 表 2-6 処 理 リンクの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュール を 使 用 してください 実 装 例 処 理 リンクは 画 面 共 通 モジュールすべてツールバー 内 に 配 置 する (ツールバーの 詳 細 については 処 理 や 画 面 を 切 り 替 えるための 処 理 リンク は ツールバー 内 に 配 置 する を 参 照 ) 処 理 リンクには アイコン+ 処 理 名 を 表 示 する 処 理 リンクの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-6 処 理 リンクの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imicon"> <IMART type="imicon"> J2EE ベース 開 発 <imarttagimarticon> <imarttagimarticon> 良 い 例 画 面 共 通 モジュールを 使 用 して 処 理 リンク を 作 成 している ページベース 開 発 の 場 合 (HTML のサンプル) <HTML> <HEAD> <IMART type = "imdesigncss"></imart> </HEAD> <BODY> <IMART type = "imicon" name = " 検 索 " icon = "images/standard/serch.gif" href = "javascriptonserch();"> </IMART> </BODY> </HTML> J2EE ベース 開 発 の 場 合 (JSP のサンプル) <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <imarttagimarticon name = " 検 索 " icon = "/images/standard/serch.gif" href = "javascriptonserch();" /> </BODY> </HTML> 作 成 者 株 式 会 社 NTT データ イントラマート Page 7

16 intra-mart 画 面 デザインガイドライン(Version5.0) 一 覧 のヘッダは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 一 覧 (リスト)を 表 示 するときの 一 覧 のヘッダ を 個 人 で 作 成 すると デザインや 表 示 方 法 がバラバラ になってしまいます 一 覧 (リスト)を 表 示 するときの 一 覧 ヘッダは 以 下 の 表 2-7 一 覧 ヘッダの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 実 装 例 一 覧 ヘッダの 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-7 一 覧 ヘッダの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imlistheader"> リストヘッダ J2EE ベース 開 発 <imarttagimartlistheader> リストヘッダ 良 い 例 画 面 共 通 モジュールを 使 用 して 一 覧 ヘッダを 作 成 している Page 8 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

17 2 ユーザインタフェース ガイドライン ソート 切 り 替 え ページ 切 り 替 えは 画 面 共 通 モジュールを 使 用 する 画 面 内 に 一 覧 (リスト)を 表 示 するときに 必 要 となる ソート 切 り 替 え および ページ 切 り 替 え のコントロール ( 以 下 リストコントロール) を 個 人 で 作 成 すると デザインや 表 示 方 法 がバラバラになってしまいます 一 覧 表 示 をするときの リストコントロールは 以 下 の 表 2-8 リストコントロールの 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 実 装 例 一 覧 表 示 をするときの リストコントロール には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-8 リストコントロールの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imlistcontrol"> リストコントロール J2EE ベース 開 発 <imarttagimartlistcontrol> リストコントロール 良 い 例 画 面 共 通 モジュールを 使 用 して リストコントロールを 作 成 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <TABLE class="" width="100%"> <TR> <IMART type="imlistcontrol " maxrecord=all_datacnt currentpage=page_num pageline=view_max </IMART> </TR> </TABLE> </BODY> </HTML> sortorder=sort_order> // 全 件 数 // 現 在 のページ 番 号 // 1 ページの 表 示 件 数 // ソート 昇 順 降 順 を 指 定 J2EEベース 開 発 の 場 合 のサンプルは リストコントロール の 使 用 例 を 参 照 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 9

18 intra-mart 画 面 デザインガイドライン(Version5.0) 入 力 項 目 のデザインを 統 一 する 新 規 登 録 や 更 新 削 除 および 検 索 条 件 入 力 画 面 などで 入 力 項 目 や 項 目 名 称 (ラベル)を 表 示 するときに 個 人 で 作 成 するとデザインや 表 示 方 法 がバラバラになってしまします 入 力 項 目 および 項 目 名 称 のデザインを 統 一 するために これらを 作 成 するときには 入 力 項 目 の 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 することを 推 奨 します また 画 面 共 通 モジュールを 使 用 しない 場 合 や 画 面 共 通 モジュールだけでは 賄 えない 入 力 項 目 の 部 品 を 各 自 で 作 成 する 場 合 は 入 力 項 目 の 書 式 方 法 に 示 す 書 式 で 作 成 してください 入 力 項 目 の 画 面 共 通 モジュール 入 力 項 目 および 項 目 名 称 を 作 成 するときには 以 下 の 表 2-9 入 力 項 目 を 作 成 するために 使 用 する 画 面 共 通 モジュール に 示 す 画 面 共 通 モジュールを 使 用 してください 実 装 例 入 力 項 目 の 表 示 には 以 下 の 画 面 共 通 モジュールを 使 用 する 表 2-9 入 力 項 目 を 作 成 するために 使 用 する 画 面 共 通 モジュール 入 力 項 目 部 品 画 面 共 通 モジュール 詳 細 項 目 名 <IMART type="imitemname"> 項 目 名 称 <imarttagimartitemnametd> 項 目 名 称 入 力 フィールド <IMART type="iminputtd"> 入 力 フィールド <imarttagimartinputtd> 入 力 フィールド 選 択 ボックス <IMART type="imselecttd"> 選 択 ボックス <imarttagimartselecttd> 選 択 ボックス 良 い 例 入 力 項 目 および 項 目 名 称 を 画 面 共 通 モジュールで 作 成 ししている 記 述 例 を 次 頁 の 表 2-10 入 力 項 目 を 作 成 する 画 面 共 通 モジュールの 記 述 例 に 示 します Page 10 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

19 2 ユーザインタフェース ガイドライン 表 2-10 入 力 項 目 を 作 成 する 画 面 共 通 モジュールの 記 述 例 page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% Vector from = new Vector(); HashMap hashtemp = new HashMap(); // 月 データ String[] fromlist = new String[]{" 東 京 都 ", " 神 奈 川 県 ", " 埼 玉 県 ", " 千 葉 県 "}; String[] fromvalue = new String[]{"Tokyo", "Kanagawa", "Saitama", "Chiba"}; // コンボ 値 ( 月 ) for(int i = 0 ; i < fromlist.length ; i++) { hashtemp = new HashMap(); hashtemp.put("value", fromvalue[i]); hashtemp.put("from", fromlist[i]); from.add(hashtemp); } %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <!-- 入 力 項 目 表 示 --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD align="center"> <TABLE class="edit"> <TR> <imarttagimartitemnametd name="ユーザ ID" /> <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" readonly /> </TR> <TR> <imarttagimartitemnametd name="ユーザ 名 " require /> <imarttagimartinputtd type="text" name="userid" size="50" value="ユーザ 00011" /> </TR> <TR> <imarttagimartitemnametd name="パスワード" require /> <imarttagimartinputtd type="password" name="password" size="40" /> </TR> <TR> <imarttagimartitemnametd name=" 出 身 地 " /> <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" /> </TR> <TR> <imarttagimartitemnametd name=" 転 送 ファイル" /> <imarttagimartinputtd type="file" name="forwarfile" size="50" /> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 作 成 者 株 式 会 社 NTT データ イントラマート Page 11

20 intra-mart 画 面 デザインガイドライン(Version5.0) 入 力 項 目 の 書 式 方 法 前 章 の 入 力 項 目 の 画 面 共 通 モジュール を 使 用 しない 場 合 で 項 目 名 称 (ラベル)や 入 力 項 目 およ び 選 択 項 目 を 各 自 で 作 成 するときには 画 面 デザインを 統 一 するために 各 HTMLタグに 指 定 するクラスや 書 式 方 法 を 必 ず 守 ってください 以 下 に 指 定 するクラスや 書 式 方 法 の 詳 細 を 示 します 入 力 項 目 項 目 名 称 に 指 定 するクラス 入 力 項 目 を 表 示 する <TABLE> <TD> および <INPUT>タグには 以 下 の 表 2-11 入 力 項 目 の 作 成 時 に 指 定 するタグのクラス に 示 すclassを 必 ず 指 定 してください 表 2-11 入 力 項 目 の 作 成 時 に 指 定 するタグのクラス タグ クラス 用 途 <TABLE> edit 全 体 のデザインを 整 える <TD> bottom アンダーラインを 表 示 する <INPUT> default 入 力 項 目 の 背 景 色 default_right 入 力 項 目 の 背 景 色 (テキスト 右 寄 せ 表 示 ) <SELECT> default 選 択 項 目 の 背 景 色 <FONT> attention 必 須 項 目 名 称 HTML の 記 述 例 <HTML> <BODY> <TABLE class="edit" width="100%"> <TR> <TD class="bottom"> <STRONG>ユーザ ID</STRONG> <FONT class="attention">( 必 須 )</FONT> </TD> <TD class="bottom"><input class="default" type="text" ></TD> </TR> <TR> <TD class="bottom">ソート 番 号 </TD> <TD class="bottom"><input class="default_right" type="text" ></TD> </TR> <TR> <TD class="bottom"> 出 身 地 </TD> <TD class="bottom"><select class="default" ></TD> </TR> </TABLE> </BODY> </HTML> 画 面 表 示 例 Page 12 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

21 2 ユーザインタフェース ガイドライン 項 目 名 称 の 書 式 入 力 項 目 および 項 目 名 称 (ラベル) を 表 示 する 場 合 は 以 下 の 書 式 を 必 ず 守 って 作 成 してください 必 須 項 目 の 場 合 項 目 名 称 を 黒 色 の 太 字 で 表 示 し 赤 色 で ( 必 須 ) の 文 字 を 記 述 する (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) <TD>タグに class="bottom" を 指 定 する (3) <STRONG> </STRONG> タグを 記 述 して 項 目 名 称 を 太 字 にする 必 須 の 文 字 を <FONT class="attention">( 必 須 )</FONT> で 記 述 する <TABLE class="edit"> (1) <TR> <TD class="bottom"> (2) <STRONG>ユーザ 名 </STRONG> <FONT class="attention">( 必 須 )</FONT> (3) </TD> <TD class="bottom"> <INPUT > </TD> </TR> </TABLE> ( 表 示 結 果 ) 通 常 項 目 の 場 合 項 目 名 称 を 黒 色 の 標 準 の 太 さで 表 示 する (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) <TD>タグに class="bottom" を 指 定 して 項 目 名 称 を 記 述 する <TABLE class="edit"> (1) <TR> <TD class="bottom">ユーザ 名 </TD> (2) <TD class="bottom"> <INPUT > </TD> </TR> </TABLE> ( 表 示 結 果 ) 作 成 者 株 式 会 社 NTT データ イントラマート Page 13

22 intra-mart 画 面 デザインガイドライン(Version5.0) 入 力 フィールドの 書 式 入 力 項 目 の 入 力 フィールド を 表 示 する 場 合 は 以 下 の 書 式 を 必 ず 守 って 作 成 してください (1) 入 力 項 目 を 作 成 する <TABLE>タグに class="edit" を 指 定 する (2) 項 目 名 称 を 記 述 する ( 項 目 名 称 の 書 式 を 参 照 ) (3) <TD>タグに class="bottom" を 指 定 する (4) 作 成 する 入 力 フィールドの <INPUT>タグや <SELECT>タグに class="default" を 指 定 する (5) 数 値 入 力 などで 入 力 文 字 を 右 寄 せ で 表 示 したい 場 合 は <INPUT>タグに class="default_right" を 指 定 する <INPUT> タグで 入 力 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <INPUT class="default" type="text" value="user001" > (4) </TD> </TR> </TABLE> ( 表 示 結 果 ) <INPUT> タグで 入 力 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <INPUT class="default_right" type="text" value="100" > (5) </TD> </TR> </TABLE> ( 表 示 結 果 ) <SELECT> タグで 選 択 項 目 の 作 成 <TABLE class="edit"> (1) <TR> <TD class="bottom"> 項 目 名 称 を 記 述 </TD> (2) <TD class="bottom"> (3) <SELECT class="default" > (4) </TD> </TR> </TABLE> ( 表 示 結 果 ) Page 14 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

23 2 ユーザインタフェース ガイドライン 処 理 ボタンのデザインを 統 一 する 画 面 内 に 多 数 ある 処 理 ボタン を 個 人 で 配 置 するとデザインや 表 示 方 法 がバラバラになってしまいます 処 理 ボタンのデザインを 統 一 するために 処 理 ボタンを 配 置 する 場 合 は 以 下 の 実 装 例 で 示 す 書 式 で 作 成 してください 実 装 例 デザインを 統 一 するために 処 理 ボタンを 作 成 するときは 必 ず 以 下 の 書 式 を 使 用 すること 良 い 例 処 理 ボタンを 決 められた 書 式 で 作 成 している [ 処 理 ボタンを 作 成 する HTML 部 分 のサンプル] <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <!-- 登 録 ボタンの 作 成 --> <TABLE class="button"> <TR> <TD class="button_padding"> <IMG src="images/standard/button_left.gif"> </TD> <TD class="button_bg"> <INPUT name="regist" type="submit" class="button_bg" value=" 登 録 "> </TD> <TD class="button_padding"> <IMG src="images/standard/button_right.gif"> </TD> </TR> </TABLE> </BODY> </HTML> [ 上 記 のサンプルにより 表 示 される 処 理 ボタン] 作 成 者 株 式 会 社 NTT データ イントラマート Page 15

24 intra-mart 画 面 デザインガイドライン(Version5.0) テーブルタグ<TABLE>を 使 用 して 表 を 作 成 するときのクラスを 統 一 する <TABLE>タグを 使 用 して 表 (リスト)を 作 成 する 場 合 は テーブルのボーダラインを 統 一 するために <TABLE> タグ および <TD>タグには 以 下 の 表 2-12 表 を 作 成 時 に 指 定 するクラス に 示 す classを 設 定 します <TABLE>タグと<TD>タグに 指 定 する class の 組 み 合 わせによって 表 の 作 成 を 実 現 することができます ( 例 ) <TABLE class="table_border_bg"> + <TD class="list_data_bg"> + = 実 装 例 表 を 作 成 する 場 合 は 必 ず <TABLE>タグ および <TD>タグに class の 指 定 を 記 述 する <TABLE>タグの class には list_border_bg または table_border_bg を 使 用 する <TD>タグには 使 用 する 用 途 によって class の 記 述 を 変 更 する 表 2-12 表 を 作 成 時 に 指 定 するクラス タグ クラス 用 途 表 示 例 <TABLE> <TD> class="list_border_bg" 表 全 体 の 枠 横 幅 100% 固 定 class="table_border_bg" 表 全 体 の 枠 横 幅 任 意 指 定 class="list_title_bg" 項 目 名 ( 通 常 ) 表 示 位 置 任 意 class="list_title_bg_center" 項 目 名 ( 通 常 ) 表 示 位 置 中 央 class="list_title_bg_left" 項 目 名 ( 通 常 ) 表 示 位 置 左 寄 せ class="list_title_bg_right" 項 目 名 ( 通 常 ) 表 示 位 置 右 寄 せ class="list_title_sort_bg" 項 目 名 ( 強 調 ) 表 示 位 置 任 意 class="list_title_sort_bg_center" 項 目 名 ( 強 調 ) 表 示 位 置 中 央 class="list_title_sort_bg_left" 項 目 名 ( 強 調 ) 表 示 位 置 左 寄 せ class="list_title_sort_bg_right" 項 目 名 ( 強 調 ) 表 示 位 置 右 寄 せ class="list_data_bg" データ 部 表 示 位 置 中 央 class="list_data_bg_left" データ 部 表 示 位 置 左 寄 せ class="list_data_bg_right" データ 部 表 示 位 置 右 寄 せ Page 16 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

25 2 ユーザインタフェース ガイドライン 良 い 例 表 を 作 成 する<TABLE>および<TD>タグに 規 定 の class を 指 定 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <TABLE class="list_border_bg"> <TR> <TD class="list_title_bg_center"> </TD> </TR> <TR> <TD class="list_data_bg"> </TD> </TR> </TABLE> </BODY> </HTML> 悪 い 例 <TABLE>および<TD>タグに 各 自 で 属 性 を 設 定 している ページベース 開 発 の 場 合 (HTML ファイルのサンプル) <HTML> <BODY> <TABLE border="0" cellpadding="0" cellspacing="2"> <TR> <TD> </TD> </TABLE> 作 成 者 株 式 会 社 NTT データ イントラマート Page 17

26 intra-mart 画 面 デザインガイドライン(Version5.0) 文 字 色 と 背 景 色 のコントラスト( 明 度 差 など)を 充 分 に 取 る 文 字 色 と 背 景 色 のコントラスト ( 明 度 差 など) が 小 さいほど 文 字 は 読 みにくくなります また ディスプレイやプリンタ OS の 種 類 によって 色 の 再 現 性 が 微 妙 に 異 なるため 明 度 コントラストが 小 さいと 文 字 が 読 みにくくなる 可 能 性 が 高 くなります 文 字 色 と 背 景 色 のコントラストを 充 分 に 取 って 文 字 を 読 みやすくしてください 実 装 例 背 景 色 と 文 字 色 の 明 度 の 差 を 充 分 に 確 保 する 特 に 赤 と 緑 白 と 黄 白 と 水 色 青 と 黒 青 紫 と 黒 の 組 み 合 わせになどに 注 意 する 良 い 例 背 景 色 と 文 字 色 に 明 度 差 があるので 文 字 が 読 みやすい 悪 い 例 背 景 色 と 文 字 色 に 明 度 差 がなく 文 字 が 読 みにくい Page 18 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

27 2 ユーザインタフェース ガイドライン 画 像 で 文 字 を 使 用 する 時 は 文 字 フォント サイズ コントラストなどを 考 慮 する 画 像 内 に 描 かれた 文 字 は ブラウザでサイズや 色 のコントラストを 変 更 できません 無 意 味 に 文 字 を 画 像 にすることは 避 け 画 像 にする 場 合 は サイズや 色 のコントラストに 配 慮 し 読 みやすくしてく ださい 実 装 例 文 字 ( 特 に 漢 字 ) の 装 飾 ( 斜 体 など) は 少 なくする 文 字 の 背 景 に 模 様 のある 画 像 や 写 真 などを 使 用 する 時 は 文 字 の 周 りを 縁 取 るなどし 文 字 を 見 やすく する 文 字 のフォントは ゴシック 系 を 使 用 することが 望 ましい ( 画 面 上 では 明 朝 系 よりも ゴシック 系 のフォント のほうが 見 やすいため) 良 い 例 読 みやすい 悪 い 例 いずれも 文 字 が 読 みにくい 作 成 者 株 式 会 社 NTT データ イントラマート Page 19

28 intra-mart 画 面 デザインガイドライン(Version5.0) スタイルシートで 文 字 サイズを 指 定 しない スタイルシートを 使 用 して 文 字 サイズを 指 定 する 場 合 絶 対 単 位 (in, cm, mm, pt, pc)を 使 用 すると ブラウザ の 文 字 サイズを 変 更 しても 大 きさが 変 わりません Page 20 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

29 2 ユーザインタフェース ガイドライン 背 景 色 を 統 一 する 各 ページや 画 面 によって 背 景 色 (バックグランドカラー)が 異 なっています また 同 一 画 面 内 でも フレーム 分 けされた 背 景 色 が 異 なっている 場 合 があります サイト 内 で 背 景 色 を 統 一 してください 実 装 例 背 景 色 (バックグランドカラー)を 規 定 し AP 内 で 統 一 する 文 字 や 画 像 の 邪 魔 にならない 背 景 色 を 使 用 する 悪 い 例 同 一 画 面 内 で 背 景 色 が 異 なる 悪 い 例 ページによって 背 景 色 が 異 なる 作 成 者 株 式 会 社 NTT データ イントラマート Page 21

30 intra-mart 画 面 デザインガイドライン(Version5.0) 2.3 操 作 性 に 関 するガイドライン 操 作 性 に 関 する 指 針 では 画 面 全 体 のデザインを 統 一 するために 画 面 を 作 成 する 際 にカラー 文 章 アイコンな どについて 基 準 となる 要 件 を 記 載 します 操 作 性 に 関 する 指 針 について 表 2-13 操 作 性 に 関 する 指 針 に 示 します 表 2-13 操 作 性 に 関 する 指 針 項 番 項 目 ページ 各 画 面 ごとにヘルプ 画 面 を 用 意 する 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける コンボボックスで 大 量 データを 表 示 しない フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する 横 方 向 のスクロールが 発 生 しないようにする 28 Page 22 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

31 2 ユーザインタフェース ガイドライン 各 画 面 ごとにヘルプ 画 面 を 用 意 する メインの 画 面 (ページ)に 解 説 やヘルプとなる 文 章 を 記 載 していると 画 面 全 体 がゴチャゴチャし まとまりがなくな ってしまいます ヘルプ 画 面 を 別 途 用 意 することで 入 力 項 目 とヘルプ 解 説 部 分 が 切 り 分 けられ 画 面 全 体 の 見 やすさだけでなく 操 作 性 も 向 上 します 実 装 例 各 画 面 ごとに ヘルプ 画 面 を 用 意 する ヘルプ 画 面 はポップアップで 表 示 する 良 い 例 解 説 部 分 が 別 途 ヘルプ 画 面 として 用 意 された [ヘルプ]ボタンを クリック 悪 い 例 メイン 画 面 内 に 解 説 を 書 き 過 ぎていて 見 づらい 作 成 者 株 式 会 社 NTT データ イントラマート Page 23

32 intra-mart 画 面 デザインガイドライン(Version5.0) 新 たなウィンドウ(ポップアップ 画 面 )を 開 くことは 必 要 最 小 限 にする 必 要 以 上 に 多 くのウィンドウを 開 くと サイトを 表 示 している 機 器 に 負 担 がかかるため コンテンツの 表 示 速 度 が 遅 くなることがあります また 新 しいウィンドウが 開 いたことに 気 づかなかったり どのウィンドウで 作 業 していたのかわからなくなり その 変 化 に 戸 惑 う 場 合 があります さらに 多 くのウィンドウが 開 いた 場 合 不 要 なウィンドウを 閉 じなければならず 余 計 な 操 作 が 発 生 することになり ます 新 たなウィンドウ(ポップアップ 画 面 )を 開 かずに ウィザード 形 式 で 画 面 を 遷 移 するようにしてください 実 装 例 新 たなウィンドウ(ポップアップ 画 面 )を 開 かずに ウィザード 形 式 で 画 面 遷 移 をする ポップアップ 画 面 のほうが 内 容 を 参 照 しやすい 場 合 は あらかじめリンク 元 で 新 しいウィンドウが 開 くこと を 明 示 しておくほうが 望 ましい 例 えば ユーザ 検 索 ( 新 しいウィンドウで 表 示 ) などと 表 記 する 悪 い 例 新 しいウィンドウ(ポップアップ 画 面 )がいくつも 表 示 されている Page 24 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

33 2 ユーザインタフェース ガイドライン 画 像 には 画 像 の 内 容 を 的 確 に 示 す alt 属 性 をつける 利 用 者 は 画 像 に alt 属 性 が 指 定 されていないと 画 像 の 内 容 を 把 握 できない 場 合 があります また リンクのある 画 像 の 場 合 は リンクでの 遷 移 先 が 明 確 でないと 操 作 に 戸 惑 う 場 合 があります 画 像 には alt 属 性 をつけて 画 像 の 内 容 を 的 確 に 示 してください 実 装 例 画 像 にリンクがない 場 合 alt 属 性 で 画 像 の 内 容 を 記 述 する 意 味 を 持 たない 画 像 ( 箇 条 書 きのポインタなど) や テキストが 併 記 されている 画 像 には alt=""と 記 述 する ( ""の 中 には 何 も 入 力 しない) 画 像 にリンクがある 場 合 alt 属 性 でリンク 先 を 記 述 する リンク 先 を alt 属 性 として 記 述 することで 画 像 の 説 明 が 不 要 となる 場 合 は 画 像 の 説 明 を 省 略 して よい 画 像 の 内 容 を 詳 細 に 解 説 する 必 要 がある 場 合 は リンク 先 は alt 属 性 に 記 述 し 画 像 の 解 説 は 画 像 と 同 じ HTML 内 にテキストで 記 述 する その 他 画 像 のボタン(image タイプの<input>タグに type="image" を 使 用 する 場 合 )にも alt 属 性 を 指 定 する 良 い 例 alt 属 性 でリンク 先 を 記 述 良 い 例 alt 属 性 で 画 像 を 解 説 悪 い 例 alt 属 性 なし 作 成 者 株 式 会 社 NTT データ イントラマート Page 25

34 intra-mart 画 面 デザインガイドライン(Version5.0) コンボボックスで 大 量 データを 表 示 しない 大 量 データをコンボボックスで 表 示 すると 画 面 の 内 容 が 隠 れてしまったり スクロールによってデータを 探 さなけ ればならなため 操 作 に 戸 惑 う 場 合 があります 大 量 データや 可 変 データの 場 合 は コンボボックス 表 示 ではなく リスト 表 示 形 式 にすることで 参 照 や 操 作 性 が 向 上 します 実 装 例 大 量 データや 可 変 データは コンボボックスではなくリスト 形 式 で 表 示 する 良 い 例 大 量 データをリスト 形 式 で 表 示 している 悪 い 例 大 量 のデータをコンボボックスで 表 示 している Page 26 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

35 2 ユーザインタフェース ガイドライン フレーム 化 を 廃 止 し ウィザード 形 式 に 変 更 する 無 駄 なフレームわけが 多 く ユーザビリティーだけでなく デザイン 性 やレスポンスの 低 下 を 招 く 原 因 となっていま す フレーム 分 けを 廃 止 し ウィザード 形 式 やタブによるページ 切 り 替 えに 変 更 することで 操 作 性 がアップし 見 やす さも 向 上 します 実 装 例 フレーム 分 けを 廃 止 する ウィザード 形 式 やタブによるページ 切 り 替 えに 変 更 良 い 例 ウィザード 形 式 に 変 更 し 操 作 性 やデザイン 性 がアップ 対 象 を 選 択 すると 画 面 が 切 り 替 わり [ 更 新 削 除 ] 画 面 が 表 示 される 悪 い 例 フレーム 分 けが 多 く 操 作 がわかりずらい またデザイン 性 も 悪 い 作 成 者 株 式 会 社 NTT データ イントラマート Page 27

36 intra-mart 画 面 デザインガイドライン(Version5.0) 横 方 向 のスクロールが 発 生 しないようにする ブラウザで 縦 と 横 のスクロールが 表 示 されている 場 合 ページ 全 体 の 把 握 が 困 難 になります スクロールを 縦 方 向 だけにすることで ページを 参 照 しやすくなります 実 装 例 画 面 を 作 成 する 際 には 横 方 向 のスクロールが 表 示 されないように 設 計 する 良 い 例 横 方 向 スクロールが 表 示 されないように 画 面 を 設 計 悪 い 例 横 方 向 スクロールと 縦 方 向 スクロールが 混 同 していて 操 作 が 困 難 またデザイン 性 も 悪 い Page 28 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

37 3 画 面 共 通 モジュール 3 画 面 共 通 モジュール intra-mart 製 品 の 画 面 (ページ) 内 で 共 通 して 使 用 されるコントロール 部 品 を 画 面 共 通 モジュール (ページベ ース 開 発 モデル および J2EE ベース 開 発 モデル) として 用 意 しています 本 章 で 示 す 各 画 面 共 通 モジュール を 利 用 することで 製 品 全 体 の 画 面 デザインや 操 作 性 を 統 一 させること を 目 的 としています 3.1 画 面 共 通 モジュールの 全 体 構 成 画 面 共 通 モジュールは 2 つの 開 発 モデルで 用 意 されています ページベース 開 発 モデル J2EE ベース 開 発 モデル 各 画 面 共 通 モジュールでは 使 用 方 法 についてより 理 解 しやすいように 具 体 的 な 使 用 例 を 記 述 していま す 実 装 する 際 の 参 考 にしてください ページベース 開 発 モデルについて ページベース 開 発 モデル 用 に 用 意 されている 画 面 共 通 モジュールを 以 下 に 示 します 表 3-1 ページベース 開 発 モデルの 画 面 共 通 モジュール 画 面 共 通 モジュール ページ デザインスタイルシート タイトルバー ツールバー 入 力 項 目 リストコントロール リストヘッダ J2EE ベース 開 発 モデルについて J2EE ベース 開 発 モデル 用 に 用 意 されている 画 面 共 通 モジュールを 以 下 に 示 します 表 3-2 J2EE ベース 開 発 モデルの 画 面 共 通 モジュール 画 面 共 通 モジュール ページ デザインスタイルシート タイトルバー ツールバー 入 力 項 目 リストコントロール リストヘッダ 81 作 成 者 株 式 会 社 NTT データ イントラマート Page 29

38 intra-mart 画 面 デザインガイドライン(Version5.0) 3.2 重 要 事 項 デザインスタイルシートの 宣 言 本 章 で 示 す 画 面 共 通 モジュール を 使 用 する 際 は 必 ず 各 画 面 を 構 成 している HTML の<HEAD>タグ 内 に デザインスタイルシート の 宣 言 を 行 ってください デザインスタイルシートは 画 面 共 通 モジュールとして 用 意 されています 詳 細 は 以 下 をご 覧 ください 表 3-3 デザインスタイルシートの 画 面 共 通 モジュール 開 発 モデル 画 面 共 通 モジュール 詳 細 ページベース 開 発 <IMART type="imdesigncss"> デザインスタイルシート J2EE ベース 開 発 <imarttagimartdesigncss> デザインスタイルシート 以 下 に デザインスタイルシートの 記 述 例 を 示 します [ 記 述 例 1] ページベース 開 発 モデルの 場 合 (HTML ファイルのサンプル) <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> [ 記 述 例 2] J2EE ベース 開 発 モデルの 場 合 (JSP ファイルのサンプル) <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> Page 30 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

39 3 画 面 共 通 モジュール 3.3 ページベース 開 発 モデル デザインスタイルシート 機 能 詳 細 <IMART type="imdesigncss"> により スタイルシートを 設 定 する 制 約 本 タグを 配 置 する 場 所 は HTML の<HEAD> タグ 内 です 属 性 <IMART type="imdesigncss"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imdesigncss を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imdesigncss" 使 用 例 デザインスタイルシートを 設 定 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> </BODY> </HTML> 注 意 点 各 画 面 (ページ)を 作 成 する htlm ファイルの <HEAD> タグ 内 には 必 ず デザインスタイルシート <IMART type="imdesigncss"></imart> を 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 31

40 intra-mart 画 面 デザインガイドライン(Version5.0) タイトルバー 機 能 詳 細 <IMART type="imtitlebar"> により タイトルバーを 表 示 する タイトルバーには アイコン と ページタイトル 名 を 指 定 して 表 示 することができる 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 属 性 <IMART type="imtitlebar"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtitlebar を 指 定 する 属 性 title には ページタイトル 名 を 指 定 する 属 性 icon には アイコン のファイル 名 を ドキュメントルートからの 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は アイコン (images/standard/title.gif) が 表 示 される 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtitlebar" title ページタイトル 名 - title=" 新 規 登 録 " icon アイコンのファイル 名 (ドキュメントルートからの 相 対 パス) list.gif icon="images/standard/title.gif" 使 用 例 タイトルバーを 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> </HEAD> <BODY> <!-- タイトルバー 表 示 --> <IMART type="imtitlebar" title=" 新 規 登 録 " icon="images/standard/title.gif"> </IMART> </BODY> </HTML> 表 示 結 果 Page 32 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

41 3 画 面 共 通 モジュール ツールバー 機 能 詳 細 <IMART type="imtoolbarfame"> タグにより ツールバーの 外 枠 を 表 示 する (タグの 詳 細 は <IMART type ="imtoolbarframe"> を 参 照 ) ツールバーの 中 には 複 数 の 処 理 リンク を 配 置 することができる <IMART type="imtoolbarleft"> タグに 挟 まれた 処 理 リンク は ツールバーの 左 側 に 配 置 される (タグの 詳 細 は <IMART type="imtoolbarleft"> を 参 照 ) <IMART type="imtoolbarright"> タグに 挟 まれた 処 理 リンク は ツールバーの 右 側 に 配 置 される (タグの 詳 細 は <IMART type="imtoolbarright"> を 参 照 ) <IMART type="imtoolbarfame"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarright"> タグおよ び <IMART type="imtoolbarleft"> タグがどちらも 存 在 しない 場 合 の 動 作 については 未 定 義 とする <IMART type="imicon"> タグにより アイコン+ 処 理 名 の 処 理 リンクを 表 示 する (タグの 詳 細 は <IMART type="imicon"> を 参 照 ) 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 手 順 ここでは ツールバーを 作 成 するための 手 順 として HTML ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します ソースコードのサンプルについては 使 用 例 を 参 照 してください (1) <IMART type="imdesigncss"> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については デザインスタイルシート を 参 照 ) (2) <IMART type="imtoolbarframe"> タグを 記 述 して ツールバーの 外 枠 を 表 示 します (3) <IMART type="imtoolbarframe"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarleft"> タグを 記 述 します (ツールバーの 左 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (4) <IMART type="imtoolbarframe"> タグに 挟 まれた 範 囲 に <IMART type="imtoolbarright"> タグを 記 述 します (ツールバーの 右 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (5) <IMART type="imicon" > タグを <IMART type="imtoolbarleft"> タグ または <IMART type="imtoolbarright"> タグに 挟 まれた 範 囲 に 記 述 して アイコン+ 処 理 名 の 処 理 リンクを 表 示 します (6) 処 理 リンク をツールバーの 左 側 に 表 示 するときは <IMART type="imtoolbarleft"> タグに 挟 まれた 範 囲 に <IMART type="imicon" > タグを 記 述 してください (7) 処 理 リンク をツールバーの 右 側 に 表 示 するときは <IMART type="imtoolbarright"> タグに 挟 まれ た 範 囲 に <IMART type="imicon" > タグを 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 33

42 intra-mart 画 面 デザインガイドライン(Version5.0) 使 用 例 ツールバーを 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type = "imdesigncss"></imart> </HEAD> <BODY> <!-- タイトルバー 表 示 --> ( 省 略 ) <!-- ツールバー 表 示 --> <IMART type = "imtoolbarframe"> <IMART type = "imtoolbarleft"> <IMART type = "imicon" name = " 新 規 登 録 " icon = "images/standard/new.gif" 手 順 (5) (6) href = "javascriptonaddaction();"> </IMART> <IMART type = "imicon" name = " 検 索 条 件 " icon = "images/standard/search.gif" 手 順 (5) (6) href = "javascriptonsearchaction();"> </IMART> </IMART> <IMART type = "imtoolbarright"> <IMART type = "imicon" name = " 戻 る" 手 順 (5) (7) icon = "images/standard/arrow_left.gif" href = "javascriptonbackaction();"> </IMART> <IMART type = "imicon" name = " 最 新 情 報 " icon = "images/standard/refresh.gif" 手 順 (5) (7) href = "javascriptonreloadaction();"> </IMART> </IMART> </IMART> </BODY> </HTML> 手 順 (3) 手 順 (4) 手 順 (1) 手 順 (2) 表 示 結 果 Page 34 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

43 3 画 面 共 通 モジュール ツールバーを 作 成 するために 必 要 な<IMART>タグ この 章 では ツールバーを 作 成 するために 必 要 な <IMART> タグの 詳 細 を 示 します ツールバーは 以 下 の 表 3-4 ツールバーに 必 要 な 画 面 共 通 モジュール に 示 す <IMART> タグで 構 成 されて います 表 3-4 ツールバーに 必 要 な 画 面 共 通 モジュール 参 照 ページ <IMART type ="imtoolbarframe"> <IMART type="imtoolbarleft"> <IMART type="imtoolbarright"> <IMART type="imicon"> <IMART type ="imtoolbarframe"> 詳 細 ツールバーの 外 枠 を 表 示 する ツールバーの 表 示 色 は テーマによって 自 動 に 設 定 される 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 属 性 <IMART type="imtoolbarfame"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarfame を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarfame" 作 成 者 株 式 会 社 NTT データ イントラマート Page 35

44 intra-mart 画 面 デザインガイドライン(Version5.0) <IMART type="imtoolbarleft"> 詳 細 ツールバー 内 の 左 側 に 処 理 リンク を 表 示 させたいときに 使 用 する ツールバーの 左 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <IMART type="imtoolbarframe"> </IMART> に 挟 まれた 範 囲 に 記 述 すること <IMART type="imtoolbarleft"> </IMART> に 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツールバ ー 内 で 左 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <IMART type="imicon"> タグ ( 詳 細 は <IMART type="imicon"> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> や <IMART type="link"> なども 記 述 すること が 可 能 である 制 約 本 タグを 単 独 で 利 用 することはできない <IMART type="imtoolbarframe"> タグの 内 部 タグとして 利 用 すること (タグの 詳 細 は <IMART type ="imtoolbarframe"> を 参 照 ) 本 タグは<IMART type="imtoolbarright"> </IMART> タグの 前 に 記 述 すること (タグの 詳 細 は <IMART type="imtoolbarright"> を 参 照 ) 属 性 <IMART type="imtoolbarleft"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarleft を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarleft" Page 36 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

45 3 画 面 共 通 モジュール <IMART type="imtoolbarright"> 詳 細 ツールバー 内 の 右 側 に 処 理 リンク を 表 示 させたいときに 使 用 する ツールバーの 右 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <IMART type="imtoolbarframe"> </IMART> に 挟 まれた 範 囲 に 記 述 すること <IMART type="imtoolbarright"> </IMART> に 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツール バー 内 で 右 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <IMART type="im_icon"> タグ ( 詳 細 は <IMART type="imicon"> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> や <IMART type="link"> なども 記 述 すること が 可 能 である 制 約 本 タグを 単 独 で 利 用 することはできない <IMART type="imtoolbarframe"> タグの 内 部 タグとして 利 用 すること (タグの 詳 細 は <IMART type ="imtoolbarframe"> を 参 照 ) 本 タグは<IMART type="imtoolbarleft"> </IMART> タグの 後 に 記 述 すること (タグの 詳 細 は <IMART type="imtoolbarleft"> を 参 照 ) 属 性 <IMART type="imtoolbarright"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imtoolbarright を 指 定 する 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imtoolbarright" 作 成 者 株 式 会 社 NTT データ イントラマート Page 37

46 intra-mart 画 面 デザインガイドライン(Version5.0) <IMART type="imicon"> 詳 細 ツールバー 内 に 処 理 リンク を 表 示 する この <IMART type="imicon"> タグにより アイコン+ 処 理 名 の 処 理 リンクが 表 示 される アイコン のみ または 処 理 名 のみの 表 示 も 可 能 である 属 性 icon により 表 示 するアイコンを 指 定 できる 属 性 name により 表 示 する 処 理 名 を 指 定 できる 処 理 を 選 択 された 時 のリンク 先 として js の 関 数 名 や URL を 指 定 することができる また リンク 先 の 表 示 ウィンドウを 指 定 することができる 本 タグを <IMART type="imtoolbarleft"> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 左 寄 せ に 表 示 される 本 タグを <IMART type="imtoolbarright"> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 右 寄 せ に 表 示 される 本 タグを 記 述 した 順 番 に ツールバーの 左 から 処 理 リンク が 配 置 される 属 性 <IMART type="imicon"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imicon を 指 定 する 属 性 name には 処 理 名 を 指 定 する 属 性 name を 未 指 定 にした 場 合 は アイコン だけが 表 示 される 属 性 icon には アイコン のファイル 名 を ドキュメントルートから 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は 処 理 名 だけが 表 示 される 属 性 name および 属 性 icon がどちらも 未 指 定 の 場 合 は 処 理 リンクの 配 置 を 無 視 する 属 性 href には 処 理 を 選 択 された 際 のリンク 先 を 指 定 する 指 定 する 値 は js の 関 数 名 (javascriptxxxxx();)や URL などが 可 能 である 属 性 href を 未 指 定 にした 場 合 は リンク 表 示 ではなく ただのテキスト 表 示 になる 属 性 target にはリンク 先 の 表 示 ウィンドウを 指 定 する 指 定 する 値 は HTML の target 属 性 に 従 う 属 性 target を 未 指 定 にした 場 合 は 同 ウィンドウに 表 示 される 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imicon" name 処 理 名 - name=" 新 規 登 録 " icon アイコンのファイル 名 (ドキュメントルートからの 相 対 パ - icon= "images/standard/new_item.gif" ス) href 処 理 選 択 時 のジャンプ 先 (js 実 行 関 数 名 や URL など) - href="javascriptonaddaction()" href="http// jp" target 表 示 ウィンドウ - target="_top" Page 38 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

47 3 画 面 共 通 モジュール 入 力 項 目 ここでは 登 録 系 画 面 や 更 新 削 除 系 画 面 などで 頻 繁 に 使 用 される 項 目 名 称 + 入 力 フィールド をまとめて 入 力 項 目 として 説 明 しています 機 能 詳 細 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 を 作 成 する 際 に 使 用 するタグである <IMART type=" imitemname"> により 項 目 名 称 を 表 示 する (タグの 詳 細 は 項 目 名 称 を 参 照 ) <IMART type="iminputtd"> により 入 力 フィールドを 表 示 する (タグの 詳 細 は 入 力 フィールド を 参 照 ) <IMART type="imselecttd"> により 選 択 部 品 (セレクトボックス) を 表 示 する (タグの 詳 細 は 選 択 ボックス を 参 照 ) 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 手 順 ここでは 入 力 項 目 を 作 成 するための 手 順 として HTML ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します (1) <IMART type="imdesigncss"> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については デザインスタイルシート を 参 照 ) (2) デザインを 統 一 するため <TABLE><TR>~</TR></TABLE> を 記 述 します (3) <IMART type="imitemname"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 項 目 名 称 を 表 示 します (4) <IMART type="iminputtd"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 入 力 フィールドを 表 示 します (5) 選 択 ボックスに 設 定 する 表 示 データ を ファンクション コンテナ(.js ファイル)の init() 関 数 内 で 構 築 します (6) <IMART type="imselecttd"> タグを (2) に 挟 まれた 範 囲 に 記 述 して 選 択 ボックスを 表 示 します ソースコードのサンプルについては 使 用 例 を 参 照 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 39

48 intra-mart 画 面 デザインガイドライン(Version5.0) 使 用 例 入 力 項 目 を 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type = "imdesigncss"></imart> 手 順 (1) </HEAD> <BODY> <!-- 入 力 項 目 表 示 --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD align="center"> <TABLE class="edit"> <TR> <IMART type = "imitemname" name = "ユーザ ID"></IMART> 手 順 (3) <IMART type = "iminputtd" style = "text" name = "userid" size = "30" 手 順 (4) value = "User00011" readonly></imart> </TR> <TR> <IMART type = "imitemname" name = "ユーザ 名 " require></imart> 手 順 (3) <IMART type = "iminputtd" style = "text" name = "username" 手 順 (4) size = "50" value = "ユーザ 00011"></IMART> </TR> <TR> <IMART type = "imitemname" name = "パスワード" require></imart> 手 順 (3) <IMART type = "iminputtd" style = "password" 手 順 (4) name = "password" size = "40"></IMART> </TR> <TR> <IMART type = "imitemname" name = " 出 身 地 "></IMART> 手 順 (3) <IMART type = "imselecttd" list = listdata 次 ページの js のサンプル 参 照 手 順 (6) name = "hometown" size = "1"></IMART> </TR> <TR> <IMART type="imitemname" name=" 転 送 ファイル"></IMART> 手 順 (3) <IMART type = "iminputtd" style = "file" 手 順 (4) name = "forwarfile" size = "50"></IMART> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 手 順 (2) Page 40 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

49 3 画 面 共 通 モジュール js のサンプル // バインド 変 数 宣 言 var listdata; // 選 択 ボックスの 表 示 データ // ページの 初 期 化 関 数 function init() { listdata = new Object(); listdata["tokyo"] = " 東 京 都 "; listdata["kanagawa"] = " 神 奈 川 県 "; listdata["saitama"] = " 埼 玉 県 "; listdata["chiba"] = " 千 葉 県 "; 手 順 (5) } もしくは // バインド 変 数 宣 言 var listdata; // 選 択 ボックスの 表 示 データ // ページの 初 期 化 関 数 function init() { listdata = new Object(); listdata.tokyo = " 東 京 都 "; listdata.kanagawa = " 神 奈 川 県 "; listdata.saitama = " 埼 玉 県 "; listdata.chiba = " 千 葉 県 "; 手 順 (5) } 表 示 結 果 作 成 者 株 式 会 社 NTT データ イントラマート Page 41

50 intra-mart 画 面 デザインガイドライン(Version5.0) 入 力 項 目 を 作 成 するために 使 用 する<IMART>タグ 項 目 名 称 詳 細 <IMART type="imitemname"> により 入 力 項 目 の 項 目 名 称 を 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 項 目 名 称 を 記 述 する 際 に 使 用 する 属 性 name に 指 定 した 値 が 項 目 名 称 として 表 示 される 属 性 require を 指 定 すると 必 須 項 目 として 表 示 される 必 須 項 目 の 場 合 は 項 目 名 称 が 太 字 で 表 示 され 赤 色 で ( 必 須 ) の 文 字 が 記 述 される 属 性 require が 未 指 定 の 場 合 は 通 常 項 目 として 表 示 される 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 属 性 <IMART type="imitemname"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imitemname を 指 定 する 属 性 name には 項 目 名 称 を 指 定 する 属 性 require を 指 定 すると 必 須 項 目 として 表 示 される 属 性 require を 未 指 定 にした 場 合 は 通 常 項 目 として 表 示 される その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imitemname" name 項 目 名 称 - name="ユーザ 名 " require 必 須 項 目 の 指 定 - require その 他 <TD>タグに 設 定 する 各 属 性 値 width="150" colspan="2" [ 記 述 例 1] 属 性 require を 指 定 して 必 須 項 目 にした 場 合 <IAMRT type="imitemname" name="ユーザ 名 " require></imart> [ 記 述 例 2] 属 性 require を 未 指 定 して 通 常 項 目 にした 場 合 <IMART type="imitemname" name="ユーザ 名 "></IMART> Page 42 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

51 3 画 面 共 通 モジュール 入 力 フィールド 詳 細 <IMART type="iminputtd"> により 入 力 項 目 の 入 力 フィールドを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 入 力 フィールドを 記 述 する 際 に 使 用 する 属 性 style に 指 定 した 値 によって 異 なる 入 力 フィールドを 表 示 することができる 属 性 style="text" を 指 定 した 場 合 は テキスト 入 力 フィールドが 表 示 される 属 性 style="password" を 指 定 した 場 合 は パスワード 入 力 フィールドが 表 示 される 属 性 style="file" を 指 定 した 場 合 は ファイル 入 力 フィールドが 表 示 される 属 性 style="textarea" を 指 定 した 場 合 は テキストエリア 入 力 フィールドが 表 示 される (HTML の<TEXTAREA>タグとして 作 成 される) 属 性 style="textarea" 以 外 は HTML の<INPUT>タグとして 作 成 される 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 43

52 intra-mart 画 面 デザインガイドライン(Version5.0) 属 性 <IMART type="iminputtd"> に 指 定 する 属 性 を 以 下 に 示 します 共 通 属 性 属 性 type には IMART タグ 名 iminputtd を 指 定 する 属 性 style には 表 示 する 部 品 の 種 類 を 指 定 する ( 属 性 style="textarea" 以 外 は HTML の<INPUT>タグの type 属 性 同 様 ) 属 性 name には 名 前 を 指 定 する (HTML の<INPUT> および <TEXTAREA>タグの name 属 性 同 様 ) 属 性 colspan には <TD>タグに 設 定 する colspan 属 性 を 指 定 する 属 性 rowspan には <TD>タグに 設 定 する rowspan 属 性 を 指 定 する 属 性 align には <TD>タグに 設 定 する align 属 性 を 指 定 する 属 性 tdclass には <TD>タグに 設 定 する class 属 性 を 指 定 する 属 性 class には <INPUT> および <TEXTAREA> タグに 設 定 する class 属 性 を 指 定 する 属 性 type="text" の 場 合 この 属 性 class に class="default_right" を 指 定 すると テキスト 入 力 フィールドの 入 力 文 字 が 右 寄 せで 表 示 される その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="iminputtd" style 部 品 の 種 類 textテキスト 入 力 フィールド passwordパスワード 入 力 フィールド fileファイル 入 力 フィールド textareaテキストエリア 入 力 フィールド - style="text" style="password" style="file" style="textarea" name 名 前 - name="userid" colspan <TD>タグの colspan 属 性 - colspan="2" rowspan <TD>タグの rowspan 属 性 - rowspan="4" align <TD>タグの align 属 性 ( 横 方 向 表 示 位 置 ) canter 中 央 表 示 right 右 寄 せ left 左 寄 せ tdclass <TD>タグの class 属 性 class その 他 <INPUT>タグおよび <TEXTAREA>の class 属 性 <TD>タグに 設 定 する 各 属 性 値 - default default aligh="center" tdclass ="default_right" class ="default_right" width="150" colspan="2" Page 44 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

53 3 画 面 共 通 モジュール style="text" の 属 性 テキスト 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" value 初 期 値 value="user00011" - readonly 入 力 不 可 の 指 定 - readonly [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011"></imart> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <IMART type="iminputtd" style="text" name="userid" size="30" value="user00011" readonly></imart> [ 記 述 例 3] 属 性 class に "default_right" を 指 定 した 場 合 <IMART type="iminputt d" style="text" class="default_right" name="sort_no" size="10" value="200"></imart> 作 成 者 株 式 会 社 NTT データ イントラマート Page 45

54 intra-mart 画 面 デザインガイドライン(Version5.0) style="password" の 属 性 パスワード 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="40" value 初 期 値 value="password00001" - readonly 入 力 不 可 の 指 定 - readonly [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <IMART type="iminputtd" style="password" name="pass" size="40" value="pass00011"></imart> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <IMART type="iminputtd" style="password" name="pass" size="40" value="pass00011" readonly></imart> style="file" の 属 性 ファイル 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" [ 記 述 例 ] 属 性 size="50" を 指 定 して 表 示 <IMART type="iminputtd" style="file" name="forward_file" size="50"></imart> Page 46 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

55 3 画 面 共 通 モジュール style="textarea" の 属 性 テキストエリア 表 示 属 性 value には 表 示 する 文 字 列 を 指 定 する 属 性 cols には テキストエリアの 横 幅 を 指 定 する (HTML の<TEXTAREA>タグの cols 属 性 同 様 ) 属 性 rows には テキストエリアの 縦 幅 ( 行 数 ) を 指 定 する (HTML の<TEXTAREA>タグの rows 属 性 同 様 ) 属 性 属 性 readonly を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になります (HTML の<TEXTAREA>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 にした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 value 表 示 する 文 字 列 - value=" ここに 長 い " cols テキストエリアの 横 幅 (<TEXTAREA>の cols 属 性 ) rows テキストエリアの 縦 幅 ( 行 数 ) (<TEXTAREA>の rows 属 性 ) readonly 入 力 不 可 の 指 定 cols="40" rows="5" readonly [ 記 述 例 ] 属 性 cols="40" 属 性 rows="5" を 指 定 して 表 示 <IMART type="iminputtd" style="textarea" name="comment" cols="40" rows="5" value="ここに 長 い 文 章 が 書 けます "></IMART> 作 成 者 株 式 会 社 NTT データ イントラマート Page 47

56 intra-mart 画 面 デザインガイドライン(Version5.0) 選 択 ボックス 詳 細 <IMART type="imselecttd"> により 入 力 項 目 の 選 択 ボックスを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 選 択 ボックスを 記 述 する 際 に 使 用 する 既 存 の 画 面 共 通 モジュール <IMART type="select"> とほぼ 同 じ 機 能 であり 画 面 デザインを 統 一 する ためにデザインが 変 更 されている 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 属 性 <IMART type="imselecttd"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imselecttd を 指 定 する 属 性 list には 表 示 リスト をオブジェクトで 指 定 する 属 性 list に 指 定 されたオブジェクトの プロパティ 名 が コンボボックス 内 の 各 要 素 (<OPTION>タグ) のvalue 値 になり 該 当 するプロパティに 格 納 されている 値 が コンボボックス 内 の 要 素 の 画 面 上 での 表 示 名 になる (オブジェクトに 格 納 されている 値 が 文 字 列 以 外 の 場 合 の 動 作 は 保 障 外 である ) 属 性 list に 指 定 したオブジェクトに 格 納 されているすべての 値 が コンボボックス 内 の 表 示 要 素 になる [ 属 性 list に 指 定 するオブジェクトの 例 ] listdata["tokyo"] = " 東 京 都 "; listdata.tokyo = " 東 京 都 "; value 値 表 示 名 value 値 表 示 名 属 性 selected には コンボボックスの 初 期 選 択 ( 初 期 表 示 ) 値 を 指 定 する 初 期 選 択 状 態 にする 値 のキー( 属 性 list に 指 定 したオブジェクトに 該 当 するプロパティ 名 )を 指 定 するこ とで 初 期 選 択 状 態 にすることができる 属 性 selected に 指 定 した 値 に 該 当 するキーが 属 性 list に 存 在 しない 場 合 は どの 値 も 選 択 状 態 に はならない また 初 期 選 択 状 態 とするキーを 同 時 に 複 数 個 指 定 する 場 合 は 属 性 selected に 対 して 配 列 を 指 定 す ることで 可 能 となる その 際 配 列 内 の 各 要 素 の 値 として 初 期 選 択 状 態 にするキー( 属 性 list に 格 納 したオブジェクトの 該 当 するプロパティ 名 )を 格 納 すること 属 性 blank には コンボボックス 内 に 空 データを 表 示 させる 位 置 を 指 定 する 属 性 blank に"top" を 指 定 した 場 合 は ボックス 内 の 先 頭 位 置 に 空 データが 表 示 される 属 性 blank に"bottom" を 指 定 した 場 合 は ボックス 内 の 最 後 尾 位 置 に 空 データが 表 示 される 属 性 size には 一 度 に 表 示 する 選 択 肢 の 行 数 を 指 定 する (HTML の<SELECT>タグの size 属 性 同 様 ) 属 性 size を 未 指 定 にした 場 合 は デフォルト 値 1 が 設 定 される 属 性 multiple を 指 定 した 場 合 は 複 数 行 選 択 が 可 能 になる (HTML の<SELECT>タグの multiple 属 性 が 付 加 される) 属 性 multiple を 未 指 定 にした 場 合 は 複 数 行 選 択 が 不 可 になる その 他 <TD> タグに 設 定 する 各 属 性 値 が 指 定 できる 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う Page 48 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

57 3 画 面 共 通 モジュール 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imselecttd" list 表 示 リスト - list=listdata selected 初 期 選 択 値 の 設 定 selected - =selectedata blank 空 データを 表 示 する 位 置 blank="top" top 先 頭 位 置 に 空 データ - bottom 最 後 尾 位 置 に 空 データ name 名 前 - name="hometown" size 表 示 する 行 数 1 size="5" multiple 複 数 行 選 択 の 可 否 multiple - その 他 <TD>タグに 設 定 する 各 属 性 値 width="150" colspan="2" [ 記 述 例 1] listdataの 設 定 方 法 については 使 用 例 を 参 照 <IMART type="imselecttd" list=listdata name="hometown"></imart> [ 記 述 例 2] 属 性 blank="top" に 指 定 した 場 合 先 頭 に 空 データが 挿 入 <IMART type="imselecttd" list=listdata name="hometown" blank="bottom"></imart> [ 記 述 例 3] 属 性 blank="bottom" に 指 定 した 場 合 最 後 尾 に 空 データが 挿 入 <IMART type="imselecttd" list=listdata name="hometown" blank="bottom"></imart> [ 記 述 例 4] 属 性 size="3" に 指 定 した 場 合 <IMART type="imselecttd" list=listdata name="hometown" size="3"></imart> 作 成 者 株 式 会 社 NTT データ イントラマート Page 49

58 intra-mart 画 面 デザインガイドライン(Version5.0) リストコントロール 機 能 詳 細 <IMART type="imlistcontrol"> により 各 種 一 覧 に 対 する ソート 切 り 替 えコントロールと ページ 切 り 替 えコントロールを 表 示 する ソート および ページ 切 り 替 えコントロールはリンク 表 示 となっている 各 コントロールのリンクがクリックされると JavaScript 関 数 が 呼 び 出 されるため 本 タグを 使 用 した 場 合 は 各 コントロールに 対 してJavaScript 関 数 の 処 理 を 記 述 する 必 要 がある ( 詳 細 は 必 須 のJavaScript 関 数 を 参 照 ) ソート 切 り 替 えコントロールは 属 性 の 指 定 により 表 示 非 表 示 を 設 定 することができる ページ 切 り 替 えコントロールには 次 ページ 前 ページ 最 初 のページ 最 後 のページ の 矢 印 リンクが 用 意 されている 一 覧 表 示 が 最 後 のページの 場 合 は 次 ページ および 最 後 のページ リンクは 非 表 示 になる 一 覧 表 示 が 最 初 のページの 場 合 は 前 ページ および 最 初 のページ リンクは 非 表 示 になる 一 覧 の 表 示 件 数 が [ 全 件 数 <1ページの 表 示 数 ] の 場 合 は ページ 切 り 替 えコントロールは 表 示 されな い (ページ 件 数 の 表 示 のみ) 制 約 本 タグは HTML の<TABLE>タグとして 作 成 されます 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 属 性 <IMART type="imlistcontrol"> に 指 定 する 属 性 を 以 下 に 示 す 属 性 type には IMART タグ 名 imlistcontrol を 指 定 する 属 性 maxrecord には 一 覧 に 表 示 するデータの 全 件 数 を 指 定 する 属 性 currentpage には 表 示 するページ 番 号 を 指 定 する 属 性 currentpage を 未 指 定 にした 場 合 は 1 ページ 目 が 表 示 される 属 性 pageline には 1ページの 表 示 数 を 指 定 することができる 属 性 pageline を 未 指 定 にした 場 合 は 1 ページに 表 示 される 件 数 は 10 件 となる 昇 順 / 降 順 切 り 替 えコントロールは 表 示 または 非 表 示 を 指 定 することができる 属 性 sortdisplay に true を 指 定 した 場 合 は 表 示 false を 指 定 した 場 合 は 非 表 示 になる 属 性 sortdisplay が 未 指 定 の 場 合 は 昇 順 / 降 順 切 り 替 えコントロールが 表 示 される 属 性 sortorder には ソート 基 準 方 向 を 指 定 する 現 在 のソート 方 向 が 昇 順 の 場 合 は asc 降 順 の 場 合 は desc を 指 定 する 属 性 sortorder を 未 指 定 にした 場 合 は デフォルト 値 の asc ( 昇 順 ) となる 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imlistcontrol" maxrecord 全 件 数 - maxrecord="50" currentpage 表 示 するページ 番 号 1 currentpage="1" pageline 1 ページの 表 示 数 10 pageline="20" sortdisplay 昇 順 / 降 順 の 有 無 sortdisplay="true" true (true 表 示 /false 非 表 示 ) sortorder ソート 基 準 方 向 sortorder="desc" asc (asc 昇 順 /desc 降 順 ) Page 50 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

59 3 画 面 共 通 モジュール 使 用 例 リストコントロール(ソート 切 り 替 え ページ 切 り 替 え) を 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> <SCRIPT LANGUAGE="JavaScript"> // ページ 切 り 替 え<>がクリックされた 時 の 処 理 function onpagelinkfunc(num) { // ここには 各 自 で 処 理 を 記 述 する } // 昇 順 / 降 順 (ソート 条 件 )をクリックした 時 の 処 理 function onsortlinkfunc(mode) { // ここには 各 自 で 処 理 を 記 述 する } </SCRIPT> </HEAD> <BODY> <TABLE border="0" width="100%" cellpadding="0" cellspacing="2"> <TR> <TD> <!-- リストコントロール --> <IMART type="im_list_control" maxrecord="150" currentpage="1" pageline="5" sortorder="asc"> </IMART> </TD> </TR> </TABLE> </BODY> </HTML> 表 示 結 果 作 成 者 株 式 会 社 NTT データ イントラマート Page 51

60 intra-mart 画 面 デザインガイドライン(Version5.0) 必 須 の JavaScript 関 数 ソート 切 り 替 えコントロール およびページ 切 り 替 えコントロールのリンクがクリックされた 際 に Call される JavaScript 関 数 の 詳 細 を 以 下 に 示 します 本 タグを 使 用 した 場 合 は 以 下 の JavaScript 関 数 の 処 理 が 自 動 で 記 述 されます 必 須 の JavaScript 関 数 を 記 述 しない 場 合 の 動 作 については 保 障 外 とします コーディング 方 法 などの 詳 細 については 使 用 例 を 参 照 してください ソート 切 り 替 え ソート 切 り 替 えコントロールで 昇 順 および 降 順 のリンクがクリックされた 場 合 JavaScript 関 数 の onsortlinkfunc() が 呼 び 出 されます 以 下 に その 詳 細 を 示 します 関 数 名 onsortlinkfunc() 概 要 ソート 切 り 替 えコントロール( 昇 順 or 降 順 ) がクリックされた 際 に 呼 び 出 される 関 数 です 引 数 mode の 値 により 昇 順 降 順 のどちらが 選 択 されたかの 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 mode ソート 基 準 方 向 asc 昇 順 リンクが 選 択 された 場 合 desc 降 順 リンクが 選 択 された 場 合 ページ 切 り 替 え ページ 切 り 替 えコントロールで 各 矢 印 のリンクがクリックされた 場 合 JavaScript 関 数 の onpagelinkfunc() が 呼 び 出 されます 以 下 に その 詳 細 を 示 します 関 数 名 onpagelinkfunc() 概 要 ページ 切 り 替 えコントロールの 各 矢 印 リンクがクリックされた 際 に 呼 び 出 される 関 数 です 引 数 num の 値 により 次 に 表 示 するページ 番 号 の 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 num 次 のページ 番 号 1~n Page 52 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

61 3 画 面 共 通 モジュール リストヘッダ 機 能 詳 細 <IMART type="imlistheader"> により 各 種 一 覧 に 対 する ヘッダを 表 示 する 本 タグで 生 成 された 一 覧 のヘッダ 項 目 名 は リンク 表 示 となっている 各 項 目 のリンクがクリックされると JavaScript 関 数 が 呼 び 出 されるため 本 タグを 使 用 した 場 合 は 各 項 目 リンクに 対 してJavaScript 関 数 の 処 理 を 記 述 する 必 要 がある ( 詳 細 は 必 須 のJavaScript 関 数 を 参 照 ) ヘッダの 項 目 名 は 属 性 の 指 定 によりリンク 表 示 と 通 常 表 示 (ただの 文 字 列 )を 設 定 することができる ソートキーになっている 項 目 は 黄 色 表 示 通 常 の 項 目 は 水 色 表 示 になる ヘッダ 情 報 ( 項 目 名 など)は ファンクション コンテナ(.js ファイル)で 設 定 する 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です また HTML の<TR>タグとして 作 成 されるため <TABLE>~</TABLE> 内 に 記 述 してください その 際 <TABLE>タグには class="list_border_bg" または class="table_border_bg" を 指 定 してください 表 全 体 の 枠 ( 横 幅 100% 固 定 ) 表 全 体 の 枠 ( 横 幅 任 意 指 定 ) <TABLE class="list_border_bg"> <TABLE class="table_border_bg"> 属 性 <IMART type="imlistheader"> に 指 定 する 属 性 を 以 下 に 示 します 属 性 type には IMART タグ 名 imlistheader を 指 定 する 属 性 headerdata には ヘッダ 情 報 オブジェクト の 配 列 を 指 定 する ヘッダ 情 報 オブジェクトの 構 成 については ヘッダ 情 報 オブジェクト を 参 照 してください 属 性 説 明 必 須 デフォルト 値 書 式 type IMART タグ 名 - type="imlistheader" headerdata ヘッダ 情 報 オブジェクト - headerdata=aheader 作 成 者 株 式 会 社 NTT データ イントラマート Page 53

62 intra-mart 画 面 デザインガイドライン(Version5.0) ヘッダ 情 報 オブジェクト <IMART type="imlistheader"> を 使 用 してリストヘッダを 作 成 する 際 に 属 性 headerdata に 指 定 するオブジェ クトです ヘッダ 情 報 オブジェクトの 構 成 を 以 下 の 表 3-5 ヘッダ 情 報 オブジェクトの 構 成 に 示 します 表 3-5 ヘッダ 情 報 オブジェクトの 構 成 プロパティ 設 定 内 容 説 明 name 項 目 名 ヘッダに 表 示 する 項 目 名 を 指 定 する 未 指 定 の 場 合 は 空 のヘッダが 表 示 される また 項 目 ID="checkbox" を 指 定 した 場 合 は <INPUT type="checkbox> タグの name 属 性 となる key 項 目 ID 項 目 ID を 指 定 する ここに 指 定 した 値 は プロパティ href を 未 指 定 にした 場 合 の デフォルトの js 関 数 へ 渡 される 引 数 となる 現 在 のソートキー 項 目 を 判 定 するための ID となるので 他 項 目 との 重 複 は 不 可 とする 項 目 ID に "checkbox" を 指 定 すると ヘッダ 内 に チェックボックス が 表 示 される sortenable ソート 表 示 状 態 true リンク 表 示 false 通 常 表 示 項 目 名 の 表 示 状 態 を 指 定 する 未 指 定 の 場 合 は デフォルト 値 true が 設 定 される また 項 目 ID="checkbox" を 指 定 した 場 合 は ソート 対 象 外 となるため 通 常 表 示 false となる href 項 目 名 選 択 時 の js 関 数 項 目 名 がリンク 表 示 のとき リンクが 選 択 された 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は デフォルト 値 の onsortheadclick('id'); が 設 定 される また 項 目 ID="checkbox" を 指 定 した 場 合 は onclock イベントハンドラ に 記 述 される js 関 数 を 指 定 すること status align 現 在 のソートキー true ソートキー false ソートキーでない 項 目 名 の 表 示 位 置 現 在 のソートキーを 指 定 する 未 設 定 の 場 合 は デフォルト 値 false が 設 定 される また 項 目 ID="checkbox" を 指 定 した 場 合 は 設 定 が 無 視 され 自 動 的 に false となる 項 目 名 の 表 示 位 置 を 指 定 する center 中 央 表 示 left 左 寄 せ right 右 寄 せ 未 指 定 の 場 合 は デフォルト 値 center が 設 定 される Page 54 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

63 3 画 面 共 通 モジュール 使 用 例 リストヘッダを 表 示 するためのサンプルを 以 下 に 示 します HTML のサンプル <HTML> <HEAD> <IMART type="imdesigncss"></imart> <SCRIPT LANGUAGE="JavaScript"> // 一 覧 の 項 目 名 リンクがクリックされた 時 の 処 理 function onsortheadclick(mode) { // ここには 各 自 で 処 理 を 記 述 する } // (1) で 指 定 した JavaScript 関 数 の 処 理 function oncheckbox() { // ここには 各 自 で 処 理 を 記 述 する } </SCRIPT> </HEAD> <BODY> <TABLE class="list_border_bg"> <!-- リストヘッダ --> <IMART type="imlistheader" headerdata=aheader></imart> </TABLE> </BODY> </HTML> js のサンプル // バインド 変 数 宣 言 var aheader; // ヘッダ 項 目 情 報 // ページの 初 期 化 関 数 function init() { aheader = new Array(); } aheader[0] = new Object(); aheader[0].name = "checkctrl"; aheader[0].key = "checkbox"; aheader[0].href = "oncheckbox();"; aheader[1] = new Object(); aheader[1].name = "ユーザコード"; aheader[1].key = "user_cd"; aheader[1].status = true; aheader[2] = new Object(); aheader[2].name = "ユーザ 名 "; aheader[2].key = "name_kana"; aheader[3] = new Object(); aheader[3].name = " 会 社 / 組 織 "; aheader[3].key = "division"; aheader[3].sortenable = false; aheader[3].align = "left"; (1) (2) (3) (4) 表 示 結 果 (1) (2) (3) (4) 作 成 者 株 式 会 社 NTT データ イントラマート Page 55

64 intra-mart 画 面 デザインガイドライン(Version5.0) 必 須 の JavaScript 関 数 リストヘッダの 項 目 名 リンクがクリックされた 際 に Call される JavaScript 関 数 の 詳 細 を 以 下 に 示 す 本 タグを 使 用 する 場 合 は 各 自 で 必 ず JavaScript 関 数 の 処 理 を 記 述 すること 必 須 の JavaScript 関 数 を 記 述 しない 場 合 の 動 作 については 保 障 外 とする コーディング 方 法 などの 詳 細 については 使 用 例 を 参 照 ソートの 項 目 切 り 替 え リストヘッダの 項 目 名 リンクがクリックされた 場 合 JavaScript 関 数 の onsortheadclick() が 呼 び 出 されます 以 下 に その 詳 細 を 示 す 関 数 名 onsortheadclick() 概 要 リストヘッダの 項 目 名 リンクがクリックされた 際 に 呼 び 出 される 関 数 です 引 数 mode の 値 により どのヘッダ 項 目 が 選 択 されたかの 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 mode ヘッダの 項 目 ID ( 例 ) user_cd リストのヘッダ 項 目 リンクが 選 択 された 引 数 mode の 値 は ヘッダ 情 報 オブジェクトの key プロパティで 指 定 した ヘッダの 項 目 ID Page 56 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

65 3 画 面 共 通 モジュール 3.4 J2EE ベース 開 発 モデル この ドキュメント 内 では prefix 属 性 を "imarttag" として 説 明 を 行 います 記 述 例 を 以 下 に 示 します [ 記 述 例 ] <%@ taglib prefix="imarttag" uri="http// %> デザインスタイルシート 機 能 詳 細 <imarttagimartdesigncss>により 現 在 指 定 されているテーマ( 色 )のスタイルシートを 設 定 する 制 約 本 タグを 配 置 する 場 所 は HTML の<HEAD> タグ 内 です 属 性 <imarttagimartdesigncss> に 指 定 する 属 性 は ありません 使 用 例 デザインスタイルシートを 設 定 するためのサンプルを 以 下 に 示 します JSP のサンプル <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> </BODY> </HTML> 注 意 点 各 画 面 (ページ)を 作 成 する JSP ファイルの <HEAD> タグ 内 には 必 ず デザインスタイルシート<imarttagimartDesignCss> を 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 57

66 intra-mart 画 面 デザインガイドライン(Version5.0) タイトルバー 機 能 詳 細 <imarttagimarttitlebar> により タイトルバーを 表 示 する タイトルバーには アイコン と ページタイトル 名 を 指 定 して 表 示 することができる 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 属 性 <imarttagimarttitlebar> に 指 定 する 属 性 を 以 下 に 示 します 属 性 title には ページタイトル 名 を 指 定 する 属 性 icon には アイコン のファイル 名 を JSP からの 相 対 パス またはコンテキストルートからの 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は アイコン (/images/standard/title.gif) が 表 示 される 属 性 icon に 指 定 する 相 対 パスの 記 述 例 JSP からの 相 対 パス images/standard/title.gif コンテキストルートからの 相 対 パス /images/standard/title.gif 属 性 型 必 須 デフォルト 値 説 明 title java.lang.string - ページタイトル 名 icon java.lang.string - アイコンのファイル 名 JSP からの 相 対 パス または コンテキストルートからの 相 対 パス 使 用 例 タイトルバーを 表 示 するためのサンプルを 以 下 に 示 します JSP のサンプル <%@ page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> <%@ taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <!-- タイトルバー 表 示 --> <imarttagimarttitlebar title=" 新 規 登 録 " icon="/images/standard/title.gif" /> </BODY> </HTML> 表 示 結 果 Page 58 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

67 3 画 面 共 通 モジュール ツールバー 機 能 詳 細 <imarttagimarttoolbarframe> タグにより ツールバーを 表 示 する (タグの 詳 細 は <imarttagimarttoolbarframe> を 参 照 ) ツールバーの 中 には 複 数 の 処 理 リンク を 配 置 することができる <imarttagimarttoolbarleft> タグに 挟 まれた 処 理 リンク は ツールバーの 左 側 に 配 置 される (タグの 詳 細 は <imarttagimarttoolbarleft> を 参 照 ) <imarttagimarttoolbarright> タグに 挟 まれた 処 理 リンク は ツールバーの 右 側 に 配 置 される (タグの 詳 細 は <IMART type="imtoolbarright"> を 参 照 ) <imarttagimarttoolbarframe> タグの 内 部 に <imarttagimarttoolbarright> タグおよび <imarttagimarttoolbarleft> タグがどちらも 存 在 しない 場 合 の 動 作 については 未 定 義 とする <imarttagimarticon> タグにより アイコン+ 処 理 名 の 処 理 リンクを 表 示 する (タグの 詳 細 は <imarttagimarticon> を 参 照 ) 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です 手 順 ここでは ツールバーを 作 成 するための 手 順 として JSP ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します ソースコードのサンプルについては 使 用 例 を 参 照 してください (1) <imarttagimartdesigncss> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については デザインスタイルシート を 参 照 ) (2) <imarttagimarttoolbarframe> タグを 記 述 して ツールバーの 外 枠 を 表 示 します (3) <imarttagimarttoolbarframe> タグに 挟 まれた 範 囲 に <imarttagimarttoolbarleft> タグを 記 述 し ます (ツールバーの 左 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (4) <imarttagimarttoolbarframe> タグに 挟 まれた 範 囲 に <imarttagimarttoolbarright> タグを 記 述 します (ツールバーの 右 側 に 配 置 する 処 理 リンク がない 場 合 は 省 略 可 能 ) (5) <imarttagimarticon> タグを <imarttagimarttoolbarleft> タグ または <imarttagimarttoolbarright> タグに 挟 まれた 範 囲 に 記 述 して アイコン+ 処 理 名 の 処 理 リンクを 表 示 します (6) 処 理 リンク をツールバーの 左 側 に 表 示 するときは <imarttagimarttoolbarleft> タグに 挟 まれた 範 囲 に <imarttagimarticon> タグを 記 述 してください (7) 処 理 リンク をツールバーの 右 側 に 表 示 するときは <imarttagimarttoolbarright> タグに 挟 まれた 範 囲 に <imarttagimarticon> タグを 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 59

68 intra-mart 画 面 デザインガイドライン(Version5.0) 使 用 例 ツールバーを 表 示 するためのサンプルを 以 下 に 示 す JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% %> <HTML> <HEAD> <imarttagimartdesigncss /> 手 順 (1) </HEAD> <BODY> <!-- タイトルバー 表 示 --> ( 省 略 ) <!-- ツールバー 表 示 --> <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarticon name = " 新 規 登 録 " icon = "/images/standard/new.gif" 手 順 (5) (6) 手 順 (3) href = "javascriptonaddaction();" /> <imarttagimarticon name = " 検 索 条 件 " icon = "/images/standard/search.gif" 手 順 (5) (6) href = "javascriptonsearchaction();" /> </imarttagimarttoolbarleft> <imarttagimarttoolbarright> 手 順 (2) <imarttagimarticon name = " 戻 る" 手 順 (5) (7) icon = "/images/standard/arrow_left.gif" href = "javascriptonbackaction();" /> <imarttagimarticon name = " 最 新 情 報 " icon = "/images/standard/refresh.gif" 手 順 (5) (7) 手 順 (4) href = "javascriptonreloadaction();" /> </imarttagimarttoolbarright> </imarttagimarttoolbarframe> </BODY> </HTML> 表 示 結 果 Page 60 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

69 3 画 面 共 通 モジュール ツールバーを 作 成 するために 必 要 なタグライブラリ この 章 では ツールバーを 作 成 するために 必 要 な タグライブラリの 詳 細 を 示 します ツールバーは 以 下 の 表 3-6 ツールバーに 必 要 な 画 面 共 通 モジュール に 示 す タグライブラリで 構 成 され ています 表 3-6 ツールバーに 必 要 な 画 面 共 通 モジュール 参 照 ページ <imarttagimarttoolbarframe> <imarttagimarttoolbarleft> <imarttagimarttoolbarright> <imarttagimarticon> <imarttagimarttoolbarframe> 詳 細 ツールバーの 外 枠 を 表 示 する ツールバーの 表 示 色 は テーマによって 自 動 に 設 定 される 属 性 <imarttagimarttoolbarframe> に 指 定 する 属 性 は ありません 作 成 者 株 式 会 社 NTT データ イントラマート Page 61

70 intra-mart 画 面 デザインガイドライン(Version5.0) <imarttagimarttoolbarleft> 詳 細 ツールバー 内 の 左 側 に 処 理 リンク を 表 示 させたいときに 使 用 する ツールバーの 左 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <imarttagimarttoolbarframe> タグの 内 部 に 記 述 すること <imarttagimarttoolbarleft> タグに 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツールバー 内 で 左 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <imarttagimarticon> タグ ( 詳 細 は <imarttagimarticon> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> なども 記 述 することが 可 能 である 制 約 本 タグを 単 独 で 利 用 することはできない <imarttagimarttoolbarframe> タグの 内 部 タグとして 利 用 すること 本 タグは<imarttagimartToolbarRight> タグの 前 に 記 述 すること 属 性 <imarttagimarttoolbarleft> タグに 指 定 する 属 性 は ありません <imarttagimarttoolbarright> 詳 細 ツールバー 内 で 処 理 リンク を 右 側 に 表 示 させたいときに 使 用 するタグである ツールバーの 右 側 に 表 示 する 処 理 リンク がないときは 省 略 可 能 である 必 ず <imarttagimarttoolbarframe> タグの 内 部 に 記 述 すること <imarttagimarttoolbarright> タグに 挟 まれた 範 囲 に 記 述 された 処 理 リンク は ツールバー 内 で 右 寄 せに 表 示 される 本 タグに 挟 まれた 範 囲 には 複 数 の 処 理 リンク を 記 述 することができる 処 理 リンク には <imarttagimarticon> タグ ( 詳 細 は <imarttagimarticon> を 参 照 ) だけでなく 通 常 のHTMLタグ<A href="xxxx"></a> なども 記 述 することが 可 能 である 制 約 本 タグを 単 独 で 利 用 することはできない <imarttagimarttoolbarframe> タグの 内 部 タグとして 利 用 すること 本 タグは<imarttagimartToolbarLeft> タグの 後 に 記 述 すること 属 性 <imarttagimarttoolbarright> タグに 指 定 する 属 性 は ありません Page 62 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

71 3 画 面 共 通 モジュール <imarttagimarticon> 詳 細 ツールバー 内 に 処 理 リンク を 表 示 する この <imarttagimarticon> タグにより アイコン+ 処 理 名 の 処 理 リンクが 表 示 される アイコン のみ または 処 理 名 のみの 表 示 も 可 能 である 表 示 するアイコンは 属 性 icon により 指 定 できる 表 示 する 処 理 名 は 属 性 name により 指 定 できる 処 理 を 選 択 されたときのリンク 先 として js の 関 数 名 や URL を 指 定 することができる また リンク 先 の 表 示 ウィンドウを 指 定 することができる 本 タグを <imarttagimarttoolbarleft> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 左 寄 せに 表 示 される 本 タグを <imarttagimarttoolbarright> タグに 挟 まれた 範 囲 に 記 述 すると ツールバー 内 で 右 寄 せ に 表 示 される 本 タグを 記 述 した 順 番 に ツールバーの 左 から 処 理 リンク が 配 置 される 属 性 <imarttagimarticon> に 指 定 する 属 性 を 以 下 に 示 す 属 性 name には 処 理 名 を 指 定 する 属 性 name を 未 指 定 にした 場 合 は アイコン だけが 表 示 される 属 性 icon には アイコン のファイル 名 を JSP からの 相 対 パス またはコンテキストルートからの 相 対 パスで 指 定 する 属 性 icon を 未 指 定 にした 場 合 は 処 理 名 だけが 表 示 される 属 性 icon に 指 定 する 相 対 パスの 記 述 例 JSP からの 相 対 パス コンテキストルートからの 相 対 パス images/standard/search.gif /images/standard/search.gif 属 性 name および 属 性 icon がどちらも 未 指 定 の 場 合 は 処 理 リンクの 配 置 を 無 視 する 属 性 href には 処 理 を 選 択 された 際 のリンク 先 を 指 定 する 指 定 する 値 は js の 関 数 名 (javascriptxxxxx();)や URL などが 可 能 である 属 性 href を 未 指 定 にした 場 合 は リンク 表 示 ではなく ただのテキスト 表 示 になる js の 関 数 名 URL href="javascriptonaddaction()" href="http// 属 性 target にはリンク 先 の 表 示 ウィンドウを 指 定 する 指 定 する 値 は HTML の target 属 性 に 従 う 属 性 target を 未 指 定 にした 場 合 は 同 ウィンドウに 表 示 される 属 性 型 必 須 デフォルト 値 説 明 name java.lang.string - 処 理 名 icon java.lang.string アイコンのファイル 名 - JSP からの 相 対 パス または href java.lang.string - コンテキストルートからの 相 対 パス 処 理 選 択 時 のジャンプ 先 js 実 行 関 数 名 や URL など target java.lang.string 表 示 ウィンドウ 作 成 者 株 式 会 社 NTT データ イントラマート Page 63

72 intra-mart 画 面 デザインガイドライン(Version5.0) 入 力 項 目 ここでは 登 録 系 画 面 や 更 新 削 除 系 画 面 などで 頻 繁 に 使 用 される 項 目 名 称 + 入 力 フィールド をまとめて 入 力 項 目 として 説 明 しています 機 能 詳 細 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 を 作 成 する 際 に 使 用 するタグである <imarttagimartitemnametd> により 項 目 名 称 を 表 示 する (タグの 詳 細 は 項 目 名 称 を 参 照 ) <imarttagimartinputtd> により 入 力 フィールドを 表 示 する (タグの 詳 細 は 入 力 フィールド を 参 照 ) <imarttagimartselecttd> により 選 択 部 品 (セレクトボックス) を 表 示 する (タグの 詳 細 は 選 択 ボックス を 参 照 ) 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 手 順 ここでは 入 力 項 目 を 作 成 するための 手 順 として JSP ファイルに 記 述 する 内 容 を 簡 単 に 説 明 します ソースコードのサンプルについては 使 用 例 を 参 照 してください (1) <imarttagimartdesigncss> を 記 述 して スタイルシートの 宣 言 を 行 います ( 記 述 方 法 については デザインスタイルシート を 参 照 ) (2) デザインを 統 一 するため <TABLE><TR>~</TR></TABLE> を 記 述 します (3) <imarttagimartitemnametd> タグを (2) に 挟 まれた 範 囲 に 記 述 して 項 目 名 称 を 表 示 します (4) <imarttagimartinputtd> タグを (2) に 挟 まれた 範 囲 に 記 述 して 入 力 フィールドを 表 示 します (5) 選 択 ボックスに 設 定 する 表 示 データを 構 築 します (6) <imarttagimartselecttd> タグを (2) に 挟 まれた 範 囲 に 記 述 して 選 択 ボックスを 表 示 します Page 64 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

73 3 画 面 共 通 モジュール 使 用 例 入 力 項 目 を 表 示 するためのサンプルを 以 下 に 示 します JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <% Vector from = new Vector(); HashMap hashtemp = new HashMap(); // <imartselecttd> の list 属 性 に 指 定 するデータを 生 成 String[] fromlist = new String[]{" 東 京 都 ", " 神 奈 川 県 ", " 埼 玉 県 ", " 千 葉 県 "}; String[] fromvalue = new String[]{"Tokyo", "Kanagawa", "Saitama", "Chiba"}; for(int i = 0 ; i < fromlist.length ; i++) { hashtemp = new HashMap(); hashtemp.put("value", fromvalue[i]); hashtemp.put("from", fromlist[i]); from.add(hashtemp); } %> <HTML> <HEAD> <imarttagimartdesigncss /> </HEAD> <BODY> <!-- 入 力 項 目 表 示 --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD align="center"> <TABLE class="edit"> <TR> <imarttagimartitemnametd name="ユーザ ID" /> <imarttagimartinputtd type = "text" name = "userid" size = "30" value = "User00011" readonly /> </TR> <TR> <imarttagimartitemnametd name="ユーザ 名 " require /> <imarttagimartinputtd type = "text" name = "username" size = "50" value = "ユーザ 00011" /> </TR> <TR> <imarttagimartitemnametd name="パスワード" require /> <imarttagimartinputtd type = "password" name = "password" size = "40" /> </TR> 手 順 (5) 手 順 (1) 手 順 (3) 手 順 (4) 手 順 (3) 手 順 (2) 手 順 (4) 手 順 (3) 手 順 (4) 作 成 者 株 式 会 社 NTT データ イントラマート Page 65

74 intra-mart 画 面 デザインガイドライン(Version5.0) <TR> <imarttagimartitemnametd name=" 出 身 地 " /> <imarttagimartselecttd list = "<%= from %>" name = "hometown" optionvalue = "value" optiontext = "from" size = "1" /> </TR> <TR> <imarttagimartitemnametd name=" 転 送 ファイル" /> <imarttagimartinputtd type = "file" name = "forwarfile" size = "50" /> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> 手 順 (3) 手 順 (6) 手 順 (3) 手 順 (4) 手 順 (2) 表 示 結 果 Page 66 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

75 3 画 面 共 通 モジュール 入 力 項 目 を 作 成 するために 使 用 するタグライブラリ 項 目 名 称 詳 細 <imarttagimartitemnametd> により 入 力 項 目 の 項 目 名 称 を 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 項 目 名 称 を 記 述 する 際 に 使 用 する 属 性 name に 指 定 した 値 が 項 目 名 称 として 表 示 される 属 性 attr に 指 定 した 値 は <TD>タグの 属 性 として 出 力 される 属 性 require に 指 定 した 値 によって 必 須 項 目 または 通 常 項 目 を 切 り 替 えることができる 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 属 性 <imarttag imartitemnametd> に 指 定 する 属 性 を 以 下 に 示 します 属 性 name には 項 目 名 称 を 指 定 する 属 性 attr には <TD>タグに 指 定 する その 他 の 属 性 値 を 指 定 する 属 性 attr に 指 定 する 値 は 一 度 変 数 に 代 入 してから attr="<%= attr %>"で 指 定 すること 属 性 attr に 指 定 した 値 は 指 定 された 文 字 列 のまま <TD>タグの 属 性 として 出 力 される <TD>タグ 属 性 を 複 数 指 定 する 場 合 は [ 属 性 名 ]= [ 値 ] をスペース 区 切 りで 繋 げた 文 字 列 とする 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartitemnametd name="ユーザ ID" attr="<%= attr %>" /> 属 性 require には 必 須 項 目 または 通 常 項 目 の 種 別 を 指 定 する 属 性 require に "true" を 指 定 すると 必 須 項 目 として 表 示 される 属 性 require を 未 指 定 または "false" を 指 定 した 場 合 は 通 常 項 目 として 表 示 される 属 性 型 必 須 デフォルト 値 説 明 name java.lang.string - 項 目 名 称 attr java.lang.string - <TD>タグに 指 定 する 属 性 値 require boolean - 必 須 項 目 の 指 定 作 成 者 株 式 会 社 NTT データ イントラマート Page 67

76 intra-mart 画 面 デザインガイドライン(Version5.0) <imarttag imartitemnametd>の 記 述 例 を 示 します [ 記 述 例 1] 属 性 require を 指 定 して 必 須 項 目 にした 場 合 <IAMRT type="imitemname" name="ユーザ 名 " require="true"></imart> [ 記 述 例 2] 属 性 require を 未 指 定 して 通 常 項 目 にした 場 合 <IMART type="imitemname" name="ユーザ 名 "></IMART> [ 記 述 例 3] 属 性 attr を 未 指 定 して <TD>タグに 属 性 を 追 加 した 場 合 <% String attr="width=\"150\" height=\"100\""; %> <imarttagimartitemnametd name="ユーザ ID" attr="<%= attr %>" /> Page 68 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

77 3 画 面 共 通 モジュール 入 力 フィールド 詳 細 <imarttagimartinputtd> により 入 力 項 目 の 入 力 フィールドを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 入 力 フィールドを 記 述 する 際 に 使 用 する 属 性 type に 指 定 した 値 によって 異 なる 入 力 フィールドを 表 示 することができる 属 性 type="text" を 指 定 した 場 合 は テキスト 入 力 フィールドが 表 示 される 属 性 type="password" を 指 定 した 場 合 は パスワード 入 力 フィールドが 表 示 される 属 性 type="file" を 指 定 した 場 合 は ファイル 入 力 フィールドが 表 示 される 属 性 type="textarea" を 指 定 した 場 合 は テキストエリア 入 力 フィールドが 表 示 される (HTML の<TEXTAREA>タグとして 作 成 される) 属 性 type="textarea" 以 外 は HTML の<INPUT>タグとして 作 成 される 制 約 HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 作 成 者 株 式 会 社 NTT データ イントラマート Page 69

78 intra-mart 画 面 デザインガイドライン(Version5.0) 属 性 <imarttagimartinputtd> に 指 定 する 属 性 を 以 下 に 示 します 共 通 属 性 属 性 type には 表 示 する 部 品 の 種 類 を 指 定 する 属 性 type に 指 定 できる 値 は 以 下 の 通 りである text password file textarea テキスト 入 力 フィールド パスワード 入 力 フィールド ファイル 入 力 フィールド テキストエリア 入 力 フィールド ( 属 性 type="textarea" 以 外 は HTML の<INPUT>タグの type 属 性 同 様 ) 属 性 name には 名 前 を 指 定 する (HTML の<INPUT> および <TEXTAREA>タグの name 属 性 同 様 ) 属 性 attr には <TD>タグに 指 定 する その 他 の 属 性 値 を 指 定 する 属 性 attr に 指 定 する 値 は 一 度 変 数 に 代 入 してから attr="<%= attr %>"で 指 定 すること 属 性 attr に 指 定 した 値 は 指 定 された 文 字 列 のまま <TD>タグの 属 性 として 出 力 される <TD>タグ 属 性 を 複 数 指 定 する 場 合 は [ 属 性 名 ]= [ 値 ] をスペース 区 切 りで 繋 げた 文 字 列 とする 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartinputtd name="userid" attr="<%= attr %>" /> 属 性 inputattr には <INPUT>タグに 指 定 する その 他 の 属 性 値 を 指 定 する 属 性 inputattr に 指 定 する 値 は 一 度 変 数 に 代 入 してから inputattr="<%= inputattr %>"で 指 定 すること 属 性 inputattr に 指 定 した 値 は 指 定 された 文 字 列 のまま <INPUT>タグの 属 性 として 出 力 される 複 数 指 定 する 場 合 は [ 属 性 名 ]= [ 値 ] をスペース 区 切 りで 繋 げた 文 字 列 とする 指 定 する 値 は HTML の <INPUT>タグ 属 性 に 従 う ( 例 ) <% String inputattr = "maxlength=\"256\""; %> <imarttagimartinputtd name="userid" inputattr="<%= inputattr %>" /> 属 性 型 必 須 デフォルト 値 説 明 type java.lang.string - name attr inputattr java.lang.string - 部 品 の 種 類 textテキスト 入 力 フィールド passwordパスワード 入 力 フィールド fileファイル 入 力 フィールド textareaテキストエリア 入 力 フィールド 名 前 java.lang.string - <TD>タグに 指 定 する 属 性 値 java.lang.string - <INPUT>タグに 指 定 する 属 性 値 Page 70 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

79 3 画 面 共 通 モジュール type="text" の 属 性 テキスト 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 readonly には 入 力 の 可 否 を 指 定 する 属 性 readonly に "true" を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になる (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 または に false をした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" value 初 期 値 - value="user00011" readonly 入 力 不 可 の 指 定 - readonly="true" [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" /> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <imarttagimartinputtd type="text" name="userid" size="30" value="user00011" readonly="true" /> type="password" の 属 性 パスワード 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 value には 入 力 フィールドの 初 期 値 を 指 定 する (HTML の<INPUT>タグの value 属 性 同 様 ) 属 性 readonly には 入 力 の 可 否 を 指 定 する 属 性 readonly に "true" を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になる (HTML の<INPUT>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 または に false をした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="40" value 初 期 値 - value="password00001" readonly 入 力 不 可 の 指 定 - readonly="true" [ 記 述 例 1] 属 性 readonly を 未 指 定 して 入 力 可 能 にした 場 合 <imarttagimartinputtd type="password" name="pass" size="40" value="password00011" /> [ 記 述 例 2] 属 性 readonly を 指 定 して 入 力 不 可 にした 場 合 <imarttagimartinputtd type="password" name="pass" size="40" value="password00011" readonly="true" /> 作 成 者 株 式 会 社 NTT データ イントラマート Page 71

80 intra-mart 画 面 デザインガイドライン(Version5.0) type="file" の 属 性 ファイル 入 力 フィールド 属 性 size には 入 力 フィールドの 大 きさ を 指 定 する (HTML の<INPUT>タグの size 属 性 同 様 ) 属 性 説 明 必 須 デフォルト 値 書 式 size 大 きさ - size="50" [ 記 述 例 ] 属 性 size="50" を 指 定 して 表 示 <imarttagimartinputtd type="file" name="forward_file" size="50" /> style="textarea" の 属 性 テキストエリア 表 示 属 性 value には 表 示 する 文 字 列 を 指 定 する 属 性 cols には テキストエリアの 横 幅 を 指 定 する (HTML の<TEXTAREA>タグの cols 属 性 同 様 ) 属 性 rows には テキストエリアの 縦 幅 ( 行 数 ) を 指 定 する (HTML の<TEXTAREA>タグの rows 属 性 同 様 ) 属 性 readonly には 入 力 の 可 否 を 指 定 する 属 性 readonly に "true" を 指 定 した 場 合 は 入 力 フィールドへの 入 力 が 不 可 になる (HTML の<TEXTAREA>タグの readonly 属 性 同 様 ) 属 性 readonly を 未 指 定 または に false をした 場 合 は デフォルト 値 入 力 可 能 が 設 定 される 属 性 説 明 必 須 デフォルト 値 書 式 value 表 示 する 文 字 列 - value=" ここに 長 い " cols テキストエリアの 横 幅 cols="40" - (<TEXTAREA>の cols 属 性 ) rows テキストエリアの 縦 幅 ( 行 数 ) rows="5" - (<TEXTAREA>の rows 属 性 ) readonly 入 力 不 可 の 指 定 - readonly="true" [ 記 述 例 ] 属 性 cols="40" 属 性 rows="5" を 指 定 して 表 示 <IMART type="iminputtd" style="textarea" name="comment" cols="40" rows="5" value="ここに 長 い 文 章 が 書 けます "></IMART> Page 72 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

81 3 画 面 共 通 モジュール 選 択 ボックス 詳 細 <imarttagimartselecttd> により 入 力 項 目 の 選 択 ボックスを 表 示 する 登 録 系 画 面 や 更 新 削 除 系 画 面 で 入 力 項 目 の 選 択 ボックスを 記 述 する 際 に 使 用 する 既 存 の 画 面 共 通 モジュール <imarttagselect> と 同 じ 機 能 であり 画 面 デザインを 統 一 するためにデ ザインが 変 更 されている 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です HTML の<TD>タグとして 作 成 されるため <TABLE><TR>~</TR></TABLE> 内 に 記 述 してください また デザインを 統 一 するために 本 タグを 使 用 する 際 には 必 ず 使 用 例 に 示 す <TABLE><TR>~</TR></TABLE>の 中 に 記 述 してください 属 性 <imarttagimartselecttd> に 指 定 する 属 性 を 以 下 に 示 します 属 性 list には 表 示 リスト を 指 定 する 属 性 list には List インターフェースを 実 装 したクラスのインスタンスに Map インターフェースを 実 装 した クラスのインスタンスを 格 納 して 指 定 する 属 性 list に 指 定 したインスタンスに 格 納 されているすべての Map インターフェースを 実 装 したクラスのイン スタンスの 値 が コンボボックス 内 の 表 示 要 素 になる 属 性 list に 指 定 されたインスタンスに 格 納 されている Map インターフェースを 実 装 したクラスの optionvalue 属 性 で 指 定 されたキー 名 に 格 納 されている 値 が コンボボックス 内 の 各 要 素 (<OPTION>タグ) の value 値 になり optiontext 属 性 で 指 定 されたキー 名 に 格 納 されている 値 がコンボボックス 内 の 要 素 の 画 面 上 での 表 示 名 になる (ただし Map インターフェースを 実 装 したクラスのインスタンスに 格 納 されているキーおよび 値 が String 以 外 の 場 合 の 動 作 は 保 証 外 である ) 属 性 optionvalue を 未 指 定 にした 場 合 は デフォルト 値 の option_value が 設 定 される 属 性 optiontext を 未 指 定 にした 場 合 は デフォルト 値 の option_text が 設 定 される 属 性 selected には コンボボックスの 初 期 選 択 ( 初 期 表 示 ) 値 を 指 定 する 初 期 選 択 状 態 にする 値 のキー( 属 性 list に 指 定 した Map インターフェースを 実 装 したクラスのインスタン スの 該 当 するキー 名 称 ) と 一 致 する 文 字 列 を 含 む List インターフェースを 実 装 したクラスのインスタンス を 指 定 することで 初 期 選 択 状 態 にする ことができる 属 性 selected に 指 定 した 値 に 該 当 するキーが 属 性 list に 指 定 した Map インターフェースを 実 装 し たクラスのインスタンスのキー 名 称 として 存 在 しない 場 合 は どの 値 も 選 択 状 態 にはならない (ただし コンボボックスの 初 期 選 択 指 定 が 存 在 しない 場 合 は ブラウザの 仕 様 で 自 動 的 にコンボボック ス 内 の 先 頭 の 要 素 が 初 期 選 択 状 態 として 表 示 される ) また 初 期 選 択 状 態 とするキーを 同 時 に 複 数 個 指 定 する 場 合 は 属 性 selected に 対 して 複 数 のキー 文 字 列 を 含 む List インターフェースを 実 装 したクラスのインスタンスを 指 定 する 事 で 可 能 になる その 際 配 列 内 の 各 要 素 の 値 として 初 期 選 択 状 態 にするキー( 属 性 list に 格 納 した Map インターフェ ースを 実 装 したクラスのインスタンスのキー 名 称 ) を 格 納 すること 属 性 blank には コンボボックス 内 に 空 データを 表 示 させる 位 置 を 指 定 する 属 性 blank に"top" を 指 定 した 場 合 は ボックス 内 の 先 頭 位 置 に 空 データが 表 示 される 属 性 blank に"bottom" を 指 定 した 場 合 は ボックス 内 の 最 後 尾 位 置 に 空 データが 表 示 される 作 成 者 株 式 会 社 NTT データ イントラマート Page 73

82 intra-mart 画 面 デザインガイドライン(Version5.0) 属 性 size には 一 度 に 表 示 する 選 択 肢 の 行 数 を 指 定 する (HTML の<SELECT>タグの size 属 性 同 様 ) 属 性 size を 未 指 定 にした 場 合 は デフォルト 値 1 が 設 定 される 属 性 multiple を 指 定 した 場 合 は 複 数 行 選 択 が 可 能 になる (HTML の<SELECT>タグの multiple 属 性 が 付 加 される) 属 性 multiple を 未 指 定 にした 場 合 は 複 数 行 選 択 が 不 可 になる 属 性 attr には <TD>タグに 指 定 する その 他 の 属 性 値 を 指 定 する 属 性 attr に 指 定 する 値 は 一 度 変 数 に 代 入 してから attr="<%= attr %>"で 指 定 すること 属 性 attr に 指 定 した 値 は 指 定 された 文 字 列 のまま <TD>タグの 属 性 として 出 力 される <TD>タグ 属 性 を 複 数 指 定 する 場 合 は [ 属 性 名 ]= [ 値 ] をスペース 区 切 りで 繋 げた 文 字 列 とする 指 定 する 値 は HTML の <TD>タグ 属 性 に 従 う ( 例 ) <% String attr="width=\"150\" height=\"30\" colspan=\"2\""; %> <imarttagimartselecttd name="sel" attr="<%= attr %>" /> 属 性 selectattr には <INPUT>タグに 指 定 する その 他 の 属 性 値 を 指 定 する 属 性 selectattr に 指 定 する 値 は 一 度 変 数 に 代 入 してから selectattr="<%= selectattr %>" で 指 定 すること 属 性 selectattr に 指 定 した 値 は 指 定 された 文 字 列 のまま <SELECT>タグの 属 性 として 出 力 される 複 数 指 定 する 場 合 は [ 属 性 名 ]= [ 値 ] をスペース 区 切 りで 繋 げた 文 字 列 とする 指 定 する 値 は HTML の <SELECT>タグ 属 性 に 従 う ( 例 ) <% String selectattr ="title=\"ユーザ ID\" disabled"; %> <imarttagimartselecttd name="sel" selectattr ="<%= selectattr %>" /> 属 性 型 必 須 デフォルト 値 説 明 list java.util.list - 表 示 リスト selected java.util.list - 初 期 選 択 値 の 設 定 blank java.util.string 空 データを 表 示 する 位 置 - top 先 頭 位 置 に 空 データ bottom 最 後 尾 位 置 に 空 データ name size multiple optionvalue optiontext java.util.string java.util.string または double java.util.string java.util.string 1 option_value option_text 名 前 表 示 する 行 数 複 数 行 選 択 の 可 否 <OPTION> タグの value 値 に 対 応 する キー 名 <OPTION> タグの text 値 に 対 応 する キー 名 ( 任 意 ) attr java.lang.string - <TD>タグに 指 定 する 属 性 値 selectattr java.lang.string - <SELECT>タグに 指 定 する 属 性 値 Page 74 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

83 3 画 面 共 通 モジュール [ 記 述 例 1] 属 性 list に 指 定 した 値 を 選 択 ボックスで 表 示 <%= from %> の 設 定 方 法 については 使 用 例 を 参 照 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" /> [ 記 述 例 2] 属 性 blank="top" に 指 定 した 場 合 先 頭 に 空 データが 挿 入 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" blank="top" /> [ 記 述 例 3] 属 性 blank="bottom" に 指 定 した 場 合 最 後 尾 に 空 データが 挿 入 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" blank="bottom" /> [ 記 述 例 4] 属 性 size="3" に 指 定 した 場 合 <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" size="3" /> [ 記 述 例 5] 属 性 selectattr="disabled" を 指 定 し <SELECT>タグに 属 性 を 設 定 <% String selectattr ="disabled"; %> <imarttagimartselecttd list="<%= from %>" name="hometown" optionvalue="value" optiontext="from" selectattr="<%= selectattr %>" /> 作 成 者 株 式 会 社 NTT データ イントラマート Page 75

84 intra-mart 画 面 デザインガイドライン(Version5.0) リストコントロール 機 能 詳 細 <imarttagimartlistcontrol> タグにより 各 種 一 覧 に 対 する ソート 切 り 替 えコントロールと ページ 切 り 替 えコントロールを 表 示 する ソート および ページ 切 り 替 えコントロールはリンク 表 示 となっている 各 コントロールのリンクがクリックされると JavaScript 関 数 が 呼 び 出 されるため 本 タグを 使 用 した 場 合 は 各 コントロールに 対 してJavaScript 関 数 の 処 理 を 記 述 する 必 要 がある ( 詳 細 は デフォルトの 必 須 JavaScript 関 数 を 参 照 ) ソート 切 り 替 えコントロールには 昇 順 ソート( 有 効 および 無 効 ) 降 順 ソート( 有 効 および 無 効 )の 矢 印 リ ンクが 用 意 されている ソート 対 象 昇 順 アイコン 降 順 アイコン 昇 順 ( 有 効 ) ( 無 効 ) 降 順 ( 無 効 ) ( 有 効 ) ソート 切 り 替 えコントロールは 属 性 の 指 定 により 表 示 非 表 示 を 設 定 することができる ページ 切 り 替 えコントロールには ( 前 のページ) ( 次 のページ) ( 最 初 のページ) ( 最 後 のページ) の 矢 印 リンクが 用 意 されている 一 覧 で 表 示 しているページによって 矢 印 アイコンの 表 示 および 非 表 示 を 切 り 替 える 表 示 ページ 最 初 のページ 前 のページ 次 のページ 最 後 のページ アイコン アイコン アイコン アイコン 最 初 のページ 非 表 示 非 表 示 最 後 のページ 非 表 示 非 表 示 一 覧 の 表 示 件 数 が [ 全 件 数 <1ページの 表 示 数 ] の 場 合 は ページ 切 り 替 えコントロールの 矢 印 部 分 は 表 示 されない (ページ 件 数 の 表 示 のみ) 制 約 本 タグは HTML の<TABLE>タグとして 作 成 されます 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です Page 76 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

85 3 画 面 共 通 モジュール 属 性 <imarttagimartlistcontrol> に 指 定 する 属 性 を 以 下 に 示 す 属 性 maxrecord には 一 覧 に 表 示 するデータの 全 件 数 を 指 定 する 属 性 currentpage には 表 示 するページ 番 号 を 指 定 する 属 性 currentpage を 未 指 定 にした 場 合 は 1 ページ 目 が 表 示 される 属 性 pageline には 1ページの 表 示 数 を 指 定 することができる 属 性 pageline を 未 指 定 にした 場 合 は 1 ページに 表 示 される 件 数 は 10 件 となる 昇 順 / 降 順 切 り 替 えコントロールは 表 示 または 非 表 示 を 指 定 することができる 属 性 sortdisplay に true を 指 定 した 場 合 は 表 示 false を 指 定 した 場 合 は 非 表 示 になる 属 性 sortdisplay が 未 指 定 の 場 合 は 昇 順 / 降 順 切 り 替 えコントロールが 表 示 される 属 性 orderby には ソート 基 準 方 向 を 指 定 する 現 在 のソート 方 向 が 昇 順 の 場 合 は asc 降 順 の 場 合 は desc を 指 定 する 属 性 orderby を 未 指 定 にした 場 合 は デフォルト 値 の asc ( 昇 順 ) となる 属 性 prevpagefunc には 前 ページリンク が 選 択 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonpagelinkfunc('[ 属 性 currentpage]-1') が 設 定 される 属 性 nextpagefunc には 次 ページリンク が 選 択 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonpagelinkfunc('[ 属 性 currentpage]+1') が 設 定 される 属 性 firstpagefunc には 最 初 ページリンク が 選 択 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonpagelinkfunc('1') が 設 定 される 属 性 lastpagefunc には 最 終 ページリンク が 選 択 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonpagelinkfunc('[ 属 性 maxrecord]/[ 属 性 pageline]') が 設 定 さ れる 属 性 ascsortfunc には 昇 順 ソートリンク ( 有 効 )および ( 無 効 )が 選 択 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonsortlinkfunc('asc') が 設 定 される 属 性 descsortfunc には 降 順 ソートリンク ( 有 効 )および ( 無 効 )が 選 択 時 のjs 関 数 を 指 定 する 未 指 定 の 場 合 は javascriptonsortlinkfunc('desc') が 設 定 される 属 性 型 必 須 デフォルト 値 説 明 maxrecord java.util.string 全 件 数 または double - currentpage java.util.string 表 示 するページ 番 号 または 1 double pageline java.util.string 1 ページの 表 示 件 数 または 10 double sortdisplay boolean 昇 順 / 降 順 の 有 無 true (true 表 示 /false 非 表 示 ) sortorder java.lang.string ソート 基 準 方 向 asc (asc 昇 順 /desc 降 順 ) prevpagefunc java.lang.string 上 記 参 照 前 ページ 選 択 時 の js 関 数 nextpagefunc java.lang.string 上 記 参 照 次 ページ 選 択 時 の js 関 数 firstpagefunc java.lang.string 上 記 参 照 最 初 ページ 選 択 時 の js 関 数 lastpagefunc java.lang.string 上 記 参 照 最 終 ページ 選 択 時 の js 関 数 ascsortfunc java.lang.string 上 記 参 照 昇 順 ソート 選 択 時 の js 関 数 descsortfunc java.lang.string 上 記 参 照 降 順 ソート 選 択 時 の js 関 数 作 成 者 株 式 会 社 NTT データ イントラマート Page 77

86 intra-mart 画 面 デザインガイドライン(Version5.0) 使 用 例 リストコントロール(ソート 切 り 替 え ページ 切 り 替 え) を 表 示 するためのサンプルを 以 下 に 示 します JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> <HTML> <HEAD> <imarttagimartdesigncss /> <SCRIPT LANGUAGE="JavaScript"> // ページ 切 り 替 え<>がクリックされた 時 の 処 理 function onpagelinkfunc(num) { // ここには 各 自 で 処 理 を 記 述 する } // 昇 順 / 降 順 (ソート 条 件 )をクリックした 時 の 処 理 function onsortlinkfunc(mode) { // ここには 各 自 で 処 理 を 記 述 する } </SCRIPT> </HEAD> <BODY> <TABLE border="0" width="100%" cellpadding="0" cellspacing="2"> <TR> <TD> <!-- リストコントロール --> <imarttagimartlistcontrol maxrecord="150" currentpage="1" pageline="10" sortorder="asc" /> </TD> </TR> </TABLE> </BODY> </HTML> 表 示 結 果 Page 78 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

87 3 画 面 共 通 モジュール デフォルトの 必 須 JavaScript 関 数 ソート 切 り 替 えコントロール およびページ 切 り 替 えコントロールのリンクがクリックされた 際 に 呼 び 出 される デフォルトの JavaScript 関 数 の 詳 細 を 以 下 に 示 します 本 タグを 使 用 する 際 に 以 下 の 属 性 を 未 指 定 にした 場 合 は 各 自 で 必 ずデフォルトの JavaScript 関 数 の 処 理 を 記 述 してください 属 性 prevpagefunc 属 性 nextpagefunc 属 性 firstpagefunc 属 性 lastpagefunc 属 性 ascsortfunc 属 性 descsortfunc 必 須 の JavaScript 関 数 を 記 述 しない 場 合 の 動 作 については 保 障 外 とします コーディング 方 法 などの 詳 細 については 使 用 例 を 参 照 してください 上 記 の 属 性 を 指 定 した 場 合 は デフォルトの JavaScript 関 数 の 処 理 を 記 述 する 必 要 はありません 作 成 者 株 式 会 社 NTT データ イントラマート Page 79

88 intra-mart 画 面 デザインガイドライン(Version5.0) ソート 切 り 替 え <imarttagimartlistcontrol>で 属 性 ascsortfunc および 属 性 descsortfunc のいずれかを 未 指 定 にし た 場 合 ソート 切 り 替 えコントロールで 昇 順 および 降 順 のリンクがクリックされると JavaScript 関 数 の onsortlinkfunc() が 呼 び 出 されます 以 下 に その 詳 細 を 示 します 関 数 名 onsortlinkfunc( mode ) 概 要 ソート 切 り 替 えコントロール( 昇 順 or 降 順 ) がクリックされた 際 に 呼 び 出 される 関 数 です 引 数 mode の 値 により 昇 順 降 順 のどちらが 選 択 されたかの 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 mode ソート 基 準 方 向 asc 昇 順 リンクが 選 択 された 場 合 desc 降 順 リンクが 選 択 された 場 合 ページ 切 り 替 え <imarttagimartlistcontrol>で 属 性 prevpagefunc nextpagefunc firstpagefunc lastpagefunc の いずれかを 未 指 定 にした 場 合 ページ 切 り 替 えコントロールで 各 矢 印 のリンクがクリックされた 場 合 JavaScript 関 数 の onpagelinkfunc() が 呼 び 出 されます 以 下 に その 詳 細 を 示 します 関 数 名 onpagelinkfunc( num ) 概 要 ページ 切 り 替 えコントロールの 各 矢 印 リンクがクリックされた 際 に 呼 び 出 される 関 数 です 引 数 num の 値 により 次 に 表 示 するページ 番 号 の 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 num ページ 番 号 1 最 初 ページ リンク が 選 択 された 場 合 ([ 属 性 maxrecord] /[ 属 性 pageline]) の 小 数 点 繰 上 げ [ 属 性 currentpage] -1 [ 属 性 currentpage] +1 最 後 ページ リンク が 選 択 された 場 合 前 ページ リンク が 選 択 された 場 合 次 ページ リンク が 選 択 された 場 合 Page 80 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

89 3 画 面 共 通 モジュール リストヘッダ 機 能 詳 細 <imarttagimartlistheader> により 各 種 一 覧 (リスト)に 対 する ヘッダを 表 示 する 属 性 headerdataには 一 覧 ヘッダ 情 報 を 指 定 する 属 性 headerdataには Listインターフェースを 実 装 したクラスのインスタンスに 一 覧 のヘッダ 情 報 クラス (ListHeaderObject) のインスタンスを 格 納 して 指 定 する 属 性 headerdataに 指 定 したインスタンスに 格 納 されているすべてのListHeaderObjectクラスのインスタン スの 値 が ヘッダ 項 目 の 表 示 要 素 になる ( 一 覧 のヘッダ 情 報 クラス (ListHeaderObject) の 詳 細 は クラスListHeaderObject を 参 照 ) 属 性 headerdata に 指 定 されたインスタンスに 格 納 されている ListHeaderObject クラスのインスタンスを 生 成 するときに 指 定 した 項 目 ID が 属 性 sortkey の 値 と 一 致 する 場 合 に 該 当 の 項 目 がソートキー ( 現 在 ソートの 基 準 になっている 項 目 のこと) となる 属 性 sortkey には ヘッダ 項 目 の 初 期 表 示 時 にソートキーとする 項 目 ID を 指 定 する 属 性 sortkey に 指 定 した 値 が 属 性 headerdata に 指 定 した ListHeaderObject クラスのインスタンスを 生 成 するときに 指 定 した 項 目 ID として 存 在 しない 場 合 は どの 項 目 もソートキーにはならない 制 約 本 タグを 配 置 する 場 所 は HTML の<BODY> タグ 内 です また HTML の<TR>タグとして 作 成 されるため <TABLE>~</TABLE> 内 に 記 述 してください その 際 <TABLE>タグには class="list_border_bg" または class="table_border_bg" を 指 定 してください 表 全 体 の 枠 ( 横 幅 100% 固 定 ) 表 全 体 の 枠 ( 横 幅 任 意 指 定 ) <TABLE class="list_border_bg"> <TABLE class="table_border_bg"> 属 性 <imarttagimartlistheader> に 指 定 する 属 性 を 以 下 に 示 します 属 性 headerdata には Listインターフェースを 実 装 したクラスのインスタンスに ListHeaderObjectク ラスのインスタンスを 格 納 して 指 定 する (ListHeaderObjectクラス の 詳 細 は クラスListHeaderObject を 参 照 ) 属 性 sortkey には ソートキーとする 項 目 ID を 指 定 する 属 性 型 必 須 デフォルト 値 説 明 headerdata java.util.list - 一 覧 ヘッダ 情 報 sortkey java.util.string - ソートキーとする 項 目 ID 作 成 者 株 式 会 社 NTT データ イントラマート Page 81

90 intra-mart 画 面 デザインガイドライン(Version5.0) 使 用 例 リストヘッダを 表 示 するためのサンプルを 以 下 に 示 します JSP のサンプル page contenttype="text/html; charset=windows-31j" pageencoding="shift_jis" %> taglib prefix="imarttag" uri="http// %> page import="java.util.arraylist" %> page import="jp.co.intra_mart.foundation.core.taglib.listheaderobject" %> <% // ヘッダ 項 目 情 報 を 設 定 ListHeaderObject objdata = null; ArrayList data = new ArrayList(); objdata = new ListHeaderObject("checkbox", "checkctrl", "oncheckbox();"); (1) data.add(objdata); objdata = new ListHeaderObject("userId", "ユーザ ID"); data.add(objdata); objdata = new ListHeaderObject("userName", "ユーザ 名 "); data.add(objdata); objdata = new ListHeaderObject("comp", " 会 社 / 組 織 ", false); objdata.setalign("left"); data.add(objdata); %> <HTML> <HEAD> <imarttagimartdesigncss /> <SCRIPT LANGUAGE="JavaScript"> // 一 覧 の 項 目 名 リンクがクリックされた 時 の 処 理 function onsortheadclick( key ) { // ここには 各 自 で 処 理 を 記 述 する } // (1) で 指 定 した JavaScript 関 数 の 処 理 function oncheckbox() { // ここには 各 自 で 処 理 を 記 述 する } } </SCRIPT> </HEAD> <BODY> <TABLE class="list_border_bg"> <!-- リストヘッダ--> <imarttagimartlistheader headerdata="<%= data %>" sortkey="userid" /> </TABLE> </BODY> </HTML> (2) (3) 手 順 (4) 表 示 結 果 (1) (2) (3) (4) Page 82 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

91 3 画 面 共 通 モジュール クラス ListHeaderObject List インターフェースを 実 装 したクラスのインスタンスに このヘッダ 情 報 クラス ListHeaderObject のインスタン スを 格 納 して 属 性 headerdata に 指 定 します jp.co.intra_mart.foundation.core.taglib.listheaderobject ListHeaderObjectクラスをインスタンスするときに 使 用 するコンストラクタによって 異 なるヘッダ 情 報 を 生 成 するこ とができます コンストラクタの 詳 細 は コンストラクタ を 参 照 してください ヘッダ 情 報 クラス ListHeaderObject に 設 定 するヘッダ 情 報 項 目 の 内 容 について 以 下 の 表 3-8 ListHeaderObjectクラスの 設 定 メソッド に 示 します 表 3-7 ListHeaderObject クラスに 設 定 するヘッダ 情 報 設 定 内 容 型 説 明 項 目 ID java.lang.string 項 目 ID の 値 を 属 性 sortkey に 指 定 すると ソートキーになる 項 目 ID に "checkbox" を 指 定 すると ヘッダ 内 に チェックボックス が 表 示 される 項 目 名 java.lang.string ヘッダに 表 示 する 項 目 名 を 指 定 する 未 指 定 の 場 合 は 空 のヘッダが 表 示 される また 項 目 ID="checkbox"を 指 定 した 場 合 は <INPUT type="checkbox">タグの name 属 性 となる ソート 表 示 状 態 boolean true リンク 表 示 false 通 常 表 示 項 目 名 の 表 示 状 態 を 指 定 する 未 指 定 の 場 合 は デフォルト 値 true が 設 定 される ただし 項 目 ID="checkbox"を 指 定 した 場 合 は ソート 対 象 外 となるため 通 常 表 示 false が 設 定 される 項 目 名 選 択 時 の js 関 数 java.lang.string 項 目 名 がリンク 表 示 のとき リンクが 選 択 された 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は デフォルト 値 の onsortheadclick('id'); が 設 定 される また 項 目 ID="checkbox" を 指 定 した 場 合 は onclock イベントハンドラ に 記 述 される js 関 数 を 指 定 する 項 目 名 の 表 示 位 置 java.lang.string 項 目 名 の 表 示 位 置 を 指 定 する center 中 央 表 示 left 左 寄 せ right 右 寄 せ 未 指 定 の 場 合 は デフォルト 値 center が 設 定 さ れる 注 意 事 項 ListHeaderObject クラスをインスタンスした 際 に ソート 表 示 状 態 が リンク 表 示 に 設 定 された 場 合 は 項 目 名 はリンク 表 示 となります 項 目 名 のリンクがクリックされると JavaScript 関 数 が 呼 び 出 されるため 本 タグを 使 用 した 場 合 は 各 項 目 名 リン クに 対 しての JavaScript 関 数 の 処 理 を 記 述 する 必 要 があります 項 目 名 選 択 時 の js 関 数 を 指 定 した 場 合 は その JavaScript 関 数 を 未 指 定 にした 場 合 は デフォルトの JavaScript 関 数 の onsortheadclick を 必 ず 記 述 してください ( 詳 細 は デフォルトの 必 須 JavaScript 関 数 を 参 照 ) 作 成 者 株 式 会 社 NTT データ イントラマート Page 83

92 intra-mart 画 面 デザインガイドライン(Version5.0) コンストラクタ ListHeaderObject クラスをインスタンスするときに 使 用 するコンストラクタによって 異 なるヘッダ 情 報 を 生 成 する ことができます public ListHeaderObject( ) 空 のヘッダ 情 報 オブジェクトを 作 成 します 引 数 なし 空 のヘッダ 項 目 を 作 成 する 際 に 使 用 する public ListHeaderObject( String id, String name ) 項 目 ID と 項 目 名 を 指 定 して ヘッダ 情 報 オブジェクトを 作 成 します 引 数 型 説 明 id name java.lang.string java.lang.string 項 目 ID 項 目 名 引 数 id に checkbox を 指 定 すると ヘッダ 内 にチェックボックスが 表 示 される チェックボックスをクリックした 際 の onclick イベントは 無 し ソート 表 示 状 態 は デフォルト 値 の リンク 表 示 (true) になる ただし 引 数 id="checkbox" の 場 合 は 通 常 表 示 (false) になる 項 目 名 選 択 時 の js 関 数 は デフォルト 値 の onsortheadclick('id'); になる public ListHeaderObject( String id, String name, boolean sortlink ) 項 目 ID と 項 目 名 とソート 表 示 状 態 を 指 定 して ヘッダ 情 報 オブジェクトを 作 成 します 引 数 型 説 明 id java.lang.string 項 目 ID name java.lang.string 項 目 名 sortlink boolean ソート 表 示 状 態 true リンク 表 示 false 通 常 表 示 引 数 id に checkbox を 指 定 すると ヘッダ 内 にチェックボックスが 表 示 される この 場 合 引 数 sortlink の 指 定 は 無 視 される チェックボックスをクリックした 際 の onclick イベントは 無 し 項 目 名 選 択 時 の js 関 数 は デフォルト 値 の onsortheadclick('id'); になる public ListHeaderObject( String id, String name, String href ) 項 目 ID と 項 目 名 と 項 目 名 選 択 時 の js 関 数 を 指 定 して ヘッダ 情 報 オブジェクトを 作 成 します 引 数 型 説 明 id java.lang.string 項 目 ID name java.lang.string 項 目 名 href java.lang.string 項 目 名 選 択 時 の js 関 数 引 数 id に checkbox を 指 定 すると ヘッダ 内 にチェックボックスが 表 示 される ソート 表 示 状 態 は デフォルト 値 の リンク 表 示 (true) になる ただし 引 数 id="checkbox" の 場 合 は 通 常 表 示 (false) になる ソート 表 示 状 態 は デフォルト 値 の リンク 表 示 (true) になる ただし 引 数 id="checkbox" の 場 合 は 通 常 表 示 (false) になる 引 数 id に checkbox を 指 定 した 場 合 引 数 href で 指 定 した js 関 数 は チェックボックスの onclick イベントハンドラに 記 述 される Page 84 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

93 3 画 面 共 通 モジュール メソッド ヘッダ 情 報 を 設 定 するためのメソッドについて 以 下 の 表 3-8 ListHeaderObjectクラスの 設 定 メソッド に 示 します 表 3-8 ListHeaderObject クラスの 設 定 メソッド メソッド パラメータ 説 明 setsortlink(boolean sortlink) ソート 表 示 状 態 項 目 名 の 表 示 状 態 を 指 定 する true リンク 表 示 false 通 常 表 示 未 指 定 の 場 合 は デフォルト 値 true が 設 定 される sethref(string href) 項 目 名 選 択 時 の js 関 数 項 目 名 がリンク 表 示 のとき リンクが 選 択 さ れた 時 の js 関 数 を 指 定 する 未 指 定 の 場 合 は デフォルト 値 の onsortheadclick('id'); が 設 定 され る また 項 目 ID="checkbox" を 指 定 した 場 合 は onclock イベントハンドラ に 記 述 される js 関 数 を 指 定 すること setalign(string align) 項 目 名 の 表 示 位 置 center 中 央 表 示 項 目 名 の 表 示 位 置 を 指 定 する 未 指 定 の 場 合 は left 左 寄 せ デフォルト 値 center が 設 定 される right 右 寄 せ 作 成 者 株 式 会 社 NTT データ イントラマート Page 85

94 intra-mart 画 面 デザインガイドライン(Version5.0) デフォルトの 必 須 JavaScript 関 数 リストヘッダの 項 目 名 リンクがクリックされた 際 に 呼 び 出 される デフォルトの JavaScript 関 数 の 詳 細 を 以 下 に 示 し ます 本 タグを 使 用 する 際 に 属 性 headerdata に 指 定 する ListHeaderObject クラスをインスタンスするときに ソート 表 示 状 態 が リンク 表 示 で 項 目 名 選 択 時 の js 関 数 を 指 定 しないでデフォルト 値 のまま 設 定 した 場 合 は 各 自 でデフォルトの JavaScript 関 数 の 処 理 を 記 述 する 必 要 があります 必 須 の JavaScript 関 数 を 記 述 しない 場 合 の 動 作 については 保 障 外 とします コーディング 方 法 などの 詳 細 については 使 用 例 を 参 照 してください ListHeaderObject クラスをインスタンスするときに 項 目 名 選 択 時 の js 関 数 を 指 定 した 場 合 は デフォ ルトの JavaScript 関 数 の 処 理 を 記 述 する 必 要 はありません ソートの 項 目 切 り 替 え 属 性 headerdata に 指 定 する ListHeaderObject クラスをインスタンスするときに 項 目 名 選 択 時 の js 関 数 を 未 指 定 にした 場 合 リストヘッダの 項 目 名 リンクがクリックされると JavaScript 関 数 の onsortheadclick() が 呼 び 出 されます 以 下 に その 詳 細 を 示 します 関 数 名 onsortheadclick( mode ) 概 要 リストヘッダの 項 目 名 リンクがクリックされた 際 に 呼 び 出 される 関 数 です 引 数 mode の 値 により どのヘッダ 項 目 が 選 択 されたかの 情 報 を 取 得 することができます 引 数 変 数 内 容 値 条 件 key ヘッダの 項 目 ID ( 例 ) username リストヘッダの 項 目 名 リンクが 選 択 された 場 合 引 数 key の 値 は ListHeaderObject クラスをインスタンスするときに 指 定 した 項 目 ID です Page 86 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

95 4 画 面 デザインサンプル 4 画 面 デザインサンプル 共 通 でよく 使 用 されると 思 われる 画 面 デザインのイメージサンプルを 定 義 します このドキュメント 内 で 示 す 画 面 全 体 図 はあくまでイメージ であり こんな 用 途 の 場 合 は このような 感 じの 画 面 に する ということを 規 定 しています 規 定 されていない 画 面 仕 様 が 発 生 した 場 合 は 以 下 に 示 すデザイン 定 義 を 基 準 として 各 仕 様 に 応 じて 作 成 し てください 作 成 者 株 式 会 社 NTT データ イントラマート Page 87

96 intra-mart 画 面 デザインガイドライン(Version5.0) 4.1 検 索 系 画 面 検 索 画 面 についてのイメージを 定 義 します 検 索 条 件 入 力 画 面 と 検 索 結 果 一 覧 画 面 は フレーム 分 けで 一 画 面 に 表 示 するのではなく 別 画 面 に 遷 移 して 表 示 してください 検 索 条 件 入 力 画 面 (1) 検 索 に 必 要 な 検 索 条 件 項 目 を 表 示 する (2) [ 決 定 ] ボタンは 検 索 条 件 項 目 の 下 部 中 央 に 配 置 する 全 体 図 のイメージについては 以 下 図 4-1 検 索 条 件 入 力 画 面 の 全 体 図 を 参 照 してください 図 4-1 検 索 条 件 入 力 画 面 の 全 体 図 検 索 条 件 入 力 画 面 の 必 須 コントロールを 以 下 表 4-1 検 索 条 件 入 力 画 面 の 必 須 コントロール に 示 します 表 4-1 検 索 条 件 入 力 画 面 の 必 須 コントロール コントロール 動 作 備 考 ( 条 件 ) 1 タイトルバー 2 ツールバー 3 検 索 条 件 項 目 必 要 な 検 索 条 件 を 表 示 する 4 [ 決 定 ] ボタン 検 索 結 果 あり 検 索 結 果 一 覧 画 面 検 索 結 果 なし 検 索 結 果 なし 画 面 へ 遷 移 する Page 88 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

97 4 画 面 デザインサンプル 検 索 結 果 一 覧 画 面 (1) 検 索 条 件 入 力 画 面 で 入 力 された 検 索 条 件 に 一 致 する 結 果 一 覧 を 表 示 する (2) 検 索 結 果 が 存 在 しない 場 合 は 検 索 結 果 なし 画 面 へ 遷 移 する 全 体 図 のイメージについては 以 下 図 4-2 検 索 結 果 一 覧 画 面 の 全 体 図 を 参 照 してください 図 4-2 検 索 結 果 一 覧 画 面 の 全 体 図 検 索 条 件 入 力 画 面 の 必 須 コントロールを 以 下 表 4-2 検 索 結 果 一 覧 画 面 の 必 須 コントロール に 示 します 表 4-2 検 索 結 果 一 覧 画 面 の 必 須 コントロール 1 タイトルバー 2 ツールバー 3 現 在 の 検 索 条 件 4 リストコントロール 名 称 コントロール 備 考 ( 条 件 ) [ 昇 順 / 降 順 ]ボタン [ページ 切 り 替 え]ボタン 5 リストヘッダ 一 覧 [ 項 目 名 ] 6 一 覧 [データ 部 ] <IMART type="imtitlebar"> または <imarttagimarttitlebar> <IMART type="imtoolbarframe"> または <imarttagimarttoolbarframe> 指 定 された 検 索 条 件 を 表 示 する 昇 順 / 降 順 で 並 べ 替 える ページを 切 り 替 える ( 詳 細 は リストコントロール または リストコントロール を 参 照 ) 項 目 名 をクリックすると ソートキーが 切 り 替 わる ( 詳 細 は リストヘッダ または リストヘッダ を 参 照 ) 一 覧 の 上 下 に 配 置 する ソートキー 項 目 名 と 通 常 項 目 名 は 色 分 けする 1ページ10 件 まで 作 成 者 株 式 会 社 NTT データ イントラマート Page 89

98 intra-mart 画 面 デザインガイドライン(Version5.0) 4.2 登 録 系 画 面 新 規 登 録 画 面 についてのイメージを 定 義 します (1) 登 録 情 報 の 項 目 は 必 須 入 力 項 目 と 通 常 入 力 項 目 を 区 別 できるように 色 分 けする (2) [ 登 録 ] ボタンは 登 録 情 報 項 目 の 下 部 中 央 に 配 置 する 全 体 図 のイメージについては 図 4-3 登 録 画 面 の 全 体 図 を 参 照 してください 図 4-3 登 録 画 面 の 全 体 図 登 録 画 面 の 必 須 コントロールを 以 下 表 4-4 登 録 画 面 の 必 須 コントロール に 示 します 表 4-3 登 録 画 面 の 必 須 コントロール 1 タイトルバー 2 ツールバー コントロール 動 作 備 考 ( 条 件 ) 3 登 録 情 報 項 目 登 録 に 必 要 な 項 目 を 表 示 する 必 須 項 目 には ( 必 須 ) と 記 述 する 4 [ 登 録 ] ボタン 更 新 削 除 画 面 へ 遷 移 する Page 90 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

99 4 画 面 デザインサンプル 4.3 更 新 削 除 系 画 面 更 新 削 除 画 面 についてのイメージを 定 義 します (1) 更 新 情 報 の 項 目 は 必 須 入 力 項 目 と 通 常 入 力 項 目 を 区 別 できるように 色 分 けする (2) 更 新 情 報 項 目 の 内 容 には 既 存 の 登 録 情 報 を 表 示 させる (3) [ 更 新 ]ボタン [ 削 除 ]ボタンは 登 録 情 報 項 目 の 下 部 中 央 に 配 置 する (4) [ 削 除 ]ボタンを Click した 後 は 削 除 確 認 のダイアログメッセージを 表 示 させること 全 体 図 のイメージについては 以 下 図 4-4 更 新 削 除 画 面 の 全 体 図 を 参 照 してください 図 4-4 更 新 削 除 画 面 の 全 体 図 更 新 削 除 画 面 の 必 須 コントロールを 以 下 表 4-4 登 録 画 面 の 必 須 コントロール に 示 します 表 4-4 登 録 画 面 の 必 須 コントロール 1 タイトルバー 2 ツールバー コントロール 動 作 備 考 ( 条 件 ) 3 更 新 情 報 項 目 既 存 の 登 録 情 報 を 表 示 する 必 須 項 目 は 色 分 けする 4 [ 更 新 ] ボタン 5 [ 削 除 ] ボタン 仕 様 により 遷 移 先 が 変 わる ボタン 押 下 時 に 削 除 確 認 ダイアログメッセ ージを 表 示 仕 様 により 動 作 の 変 更 可 能 作 成 者 株 式 会 社 NTT データ イントラマート Page 91

100 intra-mart 画 面 デザインガイドライン(Version5.0) 4.4 一 覧 系 画 面 ユーザ 一 覧 一 覧 系 画 面 についてのイメージを 定 義 します ユーザ 一 覧 画 面 および 会 社 組 織 ツリー 画 面 は フレーム 分 けをしないで 画 面 遷 移 して 表 示 してください ユーザ 検 索 画 面 ( 単 一 選 択 時 )についてのイメージを 定 義 します (1) 検 索 条 件 入 力 画 面 で 入 力 された 検 索 条 件 に 一 致 する 結 果 一 覧 を 表 示 する (2) 検 索 結 果 が 存 在 しない 場 合 は 別 途 検 索 結 果 なし 画 面 へ 遷 移 する 図 4-5 ユーザ 一 覧 画 面 の 全 体 図 (ポップアップ) ユーザ 一 覧 画 面 の 必 須 コントロールを 以 下 表 4-5 ユーザ 一 覧 画 面 の 必 須 コントロール(ポップアップ) に 示 します Page 92 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

101 4 画 面 デザインサンプル 表 4-5 ユーザ 一 覧 画 面 の 必 須 コントロール(ポップアップ) コントロール 動 作 備 考 ( 条 件 ) 1 ウィンドウタイトル 表 示 する 文 字 は リクエスト 引 数 により 変 更 可 能 request.wnd_title 2 タイトルバー 表 示 する 文 字 は リクエスト 引 数 により 変 更 可 能 request.message 3 ツールバー 3-1 [ 検 索 条 件 ] 検 索 条 件 入 力 画 面 へ 遷 移 する ( 戻 る) 戻 り 先 の 検 索 条 件 入 力 画 面 には 前 回 入 力 され た 検 索 条 件 を 再 表 示 する 3-2 [ 閉 じる] ポップアップウィンドウを 閉 じる 4 現 在 の 検 索 条 件 指 定 された 検 索 条 件 を 表 示 する 5 [ 決 定 ] ボタン 複 数 選 択 メイン 画 面 一 覧 に 選 択 内 容 を 追 加 単 一 選 択 選 択 を 確 定 し ウィンドウを 閉 じる 6 7 リストコントロール [ 昇 順 / 降 順 ]ボタン [ページ 切 り 替 え]ボタン リストヘッダ 一 覧 [ 項 目 名 ] 昇 順 / 降 順 で 並 べ 替 える ページを 切 り 替 える ( 詳 細 は リストコントロール または リストコントロール を 参 照 ) 項 目 名 をクリックすると ソートキーが 切 り 替 わる ( 詳 細 は リストヘッダ または リストヘッダ を 参 照 ) history.back()は 使 用 不 可 一 覧 の 上 下 に 配 置 する ソートキー 項 目 と 通 常 項 目 は 色 分 けする 8 一 覧 [データ 部 ] 1ページ10 件 まで 8-1 [ラジオボタン]or [ラジオボタン] 1 件 のみ 選 択 できる 複 数 選 択 単 一 選 択 により 表 [チェックボックス] [チェックボックス] 複 数 選 択 できる 示 内 容 を 変 更 する 作 成 者 株 式 会 社 NTT データ イントラマート Page 93

102 intra-mart 画 面 デザインガイドライン(Version5.0) ロール 一 覧 ロール 検 索 画 面 ( 複 数 選 択 時 )についてのイメージを 定 義 します (1) 検 索 条 件 入 力 画 面 で 入 力 された 検 索 条 件 に 一 致 する 結 果 一 覧 を 表 示 する (2) 検 索 結 果 が 存 在 しない 場 合 は 別 途 検 索 結 果 なし 画 面 へ 遷 移 する 図 4-6 ロール 一 覧 画 面 の 全 体 図 (ポップアップ) ロール 一 覧 画 面 の 必 須 コントロールを 表 4-6 ロール 一 覧 画 面 の 必 須 コントロール(ポップアップ) に 示 します Page 94 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

103 4 画 面 デザインサンプル 表 4-6 ロール 一 覧 画 面 の 必 須 コントロール(ポップアップ) コントロール 動 作 備 考 ( 条 件 ) 1 ウィンドウタイトル 表 示 する 文 字 は リクエスト 引 数 により 変 更 可 能 request.wnd_title 2 タイトルバー 表 示 する 文 字 は リクエスト 引 数 により 変 更 可 能 request.message 3 ツールバー 3-1 [ 検 索 条 件 ] 検 索 条 件 入 力 画 面 へ 遷 移 する ( 戻 る) history.back()は 使 用 不 可 3-2 [ 閉 じる] ポップアップウィンドウを 閉 じる 4 現 在 の 検 索 条 件 指 定 された 検 索 条 件 を 表 示 する 5 [ 決 定 ] ボタン 複 数 選 択 メイン 画 面 一 覧 に 選 択 内 容 を 追 加 単 一 選 択 選 択 を 確 定 し ウィンドウを 閉 じる 6 7 リストコントロール [ 昇 順 / 降 順 ]ボタン [ページ 切 り 替 え]ボタン リストヘッダ 一 覧 [ 項 目 名 ] 昇 順 / 降 順 で 並 べ 替 える ページを 切 り 替 える ( 詳 細 は リストコントロール または リストコントロール を 参 照 ) 項 目 名 をクリックすると ソートキーが 切 り 替 わる ( 詳 細 は リストヘッダ または リストヘッダ を 参 照 ) 一 覧 の 上 下 に 配 置 する 一 覧 の 上 下 に 配 置 する ソートキー 項 目 と 通 常 項 目 は 色 分 けする 8 項 目 欄 [チェックボックス] チェックボックスの 全 選 択 / 全 解 除 ができる 複 数 選 択 の 場 合 のみ 表 示 9 一 覧 [データ 部 ] 1ページ10 件 まで 9-1 [ラジオボタン]or [チェックボックス] [ラジオボタン] 1 件 のみ 選 択 できる [チェックボックス] 複 数 選 択 できる 複 数 選 択 単 一 選 択 によ り 表 示 内 容 を 変 更 する 作 成 者 株 式 会 社 NTT データ イントラマート Page 95

104 intra-mart 画 面 デザインガイドライン(Version5.0) 5 共 通 アイコン ツールバー および 画 面 内 で 主 に 使 用 される 共 通 のアイコンを 以 下 に 示 します アプリケーションで 新 たに 必 要 なアイコンが 発 生 した 場 合 は その 都 度 作 成 し 使 用 してください 5.1 タイトルバー アイコン ファイルパス 内 容 images/standard/title.gif タイトルバーのデフォルトアイコン ( 属 性 icon 未 指 定 時 ) 5.2 処 理 系 アイコン ファイルパス 内 容 images/standard/refresh.gif images/standard/help.gif images/standard/close.gif images/standard/arrow_left.gif images/standard/new.gif images/standard/delete.gif images/standard/edit.gif images/standard/print.gif images/standard/search.gif images/standard/copy.gif images/standard/inoutput.gif images/standard/leader.gif images/standard/user_setting.gif images/standard/list.gif images/standard/info.gif 最 新 情 報 ヘルプ 閉 じる 戻 る 新 規 登 録 追 加 など 削 除 クリア など 編 集 印 刷 検 索 コピー 情 報 の 取 り 込 み 取 り 出 し 極 秘 個 人 設 定 表 示 情 報 5.3 検 索 種 別 アイコン ファイルパス 内 容 images/standard/company_group.gif 会 社 / 組 織 images/standard/offical_group.gif オフィシャルグループ images/standard/private_group.gif プライベートグループ images/standard/role.gif ロール Page 96 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

105 5 共 通 アイコン 5.4 ページ 切 替 アイコン ファイルパス 内 容 images/standard/previous.gif 前 のページ images/standard/arrow_l2.gif 最 初 のページ images/standard/arrow_r1.gif 次 のページ images/standard/arrow_r2.gif 最 後 のページ 5.5 昇 順 / 降 順 切 替 アイコン ファイルパス 内 容 images/standard/up.gif 昇 順 ソート( 有 効 時 ) images/standard/up_none.gif 昇 順 ソート( 無 効 時 ) images/standard/down.gif 降 順 ソート( 有 効 時 ) images/standard/down_none.gif 降 順 ソート( 無 効 時 ) 5.6 選 択 リストボックス アイコン ファイルパス 内 容 images/standard/arrow_up.gif 上 に 移 動 images/standard/arrow_down.gif 下 に 移 動 images/standard/arrow_left.gif 右 のリストボックスに 移 動 images/standard/arrow_right.gif 左 のリストボックスに 移 動 5.7 ツリー 表 示 アイコン ファイルパス 内 容 images/standard/home_icon.gif ルート images/standard/folder_close.gif 下 階 層 を 閉 じたとき images/standard/folder_open.gif 下 階 層 を 開 いたとき images/standard/item.gif メニュー 項 目 images/standard/up.gif すべて 閉 じる images/standard/down.gif すべて 開 く 作 成 者 株 式 会 社 NTT データ イントラマート Page 97

106 intra-mart 画 面 デザインガイドライン(Version5.0) 5.8 ボタン タブ アイコン ファイルパス 内 容 左 枠 実 行 ボタン images/standard/button_left.gif 文 字 表 示 部 文 字 表 示 部 は 文 字 列 幅 に 合 わせ 伸 縮 images/standard/button_middle.gif 右 枠 images/standard/button_right.gif 左 枠 タブ images/standard/portal_tab_left.gif 文 字 表 示 部 文 字 表 示 部 は 文 字 列 幅 に 合 わせ 伸 縮 images/standard/portal_tab_middle.gif 右 枠 images/standard/portal_tab_right.gif Page 98 Copyright 2005 株 式 会 社 NTT データ イントラマート All rights Reserved.

107

108 画 面 デザインガイドライン Version5.0 初 版 June 2, 2005 Copyright 2005 ( 株 )NTT データイントラマート All rights Reserved. TEL FAX URL http//