intra-mart Accel Platform — UIデザインガイドライン(PC版)   第5版  

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "intra-mart Accel Platform — UIデザインガイドライン(PC版)   第5版 2015-04-01  "

Transcription

1 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 Copyright 0 NTT DATA INTRAMART CORPORATION Top

2 UIデザインガイドライン( PC 版 ) intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 改 訂 情 報. 禁 止 事 項. はじめに.. 本 書 の 目 的.. 対 象 読 者.. 本 書 の 構 成. UI 基 本 方 針. 対 応 環 境 条 件.. クライアント 要 件.. 画 面 解 像 度.. Webブラウザ 設 定 6. UIデザイン 6.. UIデザインの 流 れ 6.. 画 面 レイアウト 6.. body 部 分 6.. 画 面 遷 移 6.. エラー 処 理 6.6. 国 際 化 情 報 入 力 項 目 6.7. HTML / CSSコーディング Tips 7. 基 本 的 な 画 面 の 作 り 方 7.. 基 本 的 な 画 面 の 作 り 方 スクリプト 開 発 編 7.. 基 本 的 な 画 面 の 作 り 方 SAStruts+SJDBC 開 発 編 7.. 基 本 的 な 画 面 の 作 り 方 TERASOLUNA Server Framework for Java (.x) 開 発 編

3 改 訂 情 報 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 変 更 年 月 日 変 更 内 容 初 版 第 版 ツールバー にツールバーに 配 置 可 能 な 文 字 列 の 説 明 を 追 加 ツールバー の タブアイコン の 注 意 を 修 正 画 面 タイトル の 画 面 キャプチャを 貼 り 換 え 第 版 テーブル の セル 内 の 位 置 / 文 字 寄 せ(align) を 修 正 0--0 第 版 バリデーション の JSSP Validation と 連 携 する 場 合 にコラムを 追 加 第 版 TERASOLUNA Global FrameworkをTERASOLUNA Server Framework for Java (.x)に 変 更

4 禁 止 事 項 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 intra-mart Accel Platform は 使 用 許 諾 によって 以 下 を 禁 止 しています. Copyright を 変 更 削 除 しないでください. Powered by intra-mart の 画 像 を 変 更 削 除 しないでください

5 はじめに intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 項 目 本 書 の 目 的 対 象 読 者 本 書 の 構 成 本 書 の 目 的 本 書 では intra-mart Accel Platform における UIデザインガイドラインを 説 明 します 開 発 者 は 本 書 を 利 用 することで intra-mart Accel Platform と 統 一 された 画 面 開 発 を 行 うことができます intra-mart Accel Platform では UI 基 本 方 針 を 定 め それに 則 した UIデザイン を 定 めました UIデザイン では intra-mart Accel Platform で 提 供 するインタ フェースを 使 用 した 画 面 開 発 とルールを 説 明 します intra-mart Accel Platform で 提 供 するインタフェースは UIモジュール と テーマ です UIモジュール は 画 面 を 構 成 する 部 品 群 です 開 発 者 は UIモジュー ル を 利 用 し intra-mart Accel Platform と 同 じデザインの 画 面 開 発 を 行 えます テーマ は 画 面 レイアウトを 切 り 替 えるための 仕 組 みです 開 発 者 はこの 仕 組 み を 利 用 することにより 簡 単 に 画 面 レイアウトを 切 り 替 えられ コーディングの 負 担 が 減 ります これらのインタフェースを 利 用 し UIデザイン に 則 り 基 本 的 な 画 面 の 作 り 方 を 参 考 に 画 面 開 発 を 行 ってください 旧 バージョンに 比 べて より 早 く より 簡 単 に intra-mart Accel Platform と 同 じユーザインタフェースの 画 面 開 発 を 行 えるでしょう コラム 本 書 の 画 面 キャプチャは 全 てGoogle Chromeにて 表 示 しています Web ブラウザの 違 いやバージョンによって グラデーションや 影 丸 み 等 の 見 え 方 が 異 なります これは Web ブラウザにより 表 示 の 解 釈 が 異 なるためと ブラウザによりCSSの 対 応 状 況 が 異 なるためです 対 象 読 者 次 の 開 発 者 を 対 象 としてます intra-mart Accel Platform のUIデザインガイドラインを 確 認 したい 方 intra-mart Accel Platform で 初 めてプログラミングを 行 う 開 発 者 本 書 の 構 成 本 書 の 構 成 は 以 下 の 部 構 成 です UI 基 本 方 針 intra-mart Accel Platform のアプリケーションを 作 成 するときの 考 え 方 を 説 明 します UIデザイン UIデザインの 流 れに 沿 って 部 品 の 配 置 から 画 面 遷 移 のルールなど 説 明 します 基 本 的 な 画 面 の 作 り 方 実 際 の 画 面 のサンプルを 使 用 して 説 明 します 注 意 UIデザイン は スクリプト 開 発 を 用 いて 説 明 します 外 部 ドキュメントへのリンクは 全 てスクリプト 開 発 用 となりますので SAStruts+SJDBC で 開 発 している 場 合 は 適 宜 読 み 替 えてください

6 UI 基 本 方 針 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 intra-mart Accel Platform におけるUI 基 本 方 針 は 以 下 の 通 りです 使 用 するユーザの 目 線 を 忘 れないこと 操 作 方 法 が 分 かりやすく 迷 わないこと 同 じ 動 きをするものは 操 作 方 法 が 統 一 されていること 画 面 デザインが 全 体 で 統 一 されていること コラム ユーザにとって 使 いやすさ や 見 た 目 と 動 き がアプリケーションへの 評 価 となります 6

7 対 応 環 境 条 件 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 項 目 クライアント 要 件 画 面 解 像 度 Webブラウザ 設 定 クライアント 要 件 対 応 するOS ブラウザは intra-mart Accel Platform リリースノートの クライアント 要 件 を 参 照 してください 最 新 の 情 報 が 確 認 できます 注 意 上 記 リリースノートは 最 新 のバージョンです 古 いバージョンのクライアント 要 件 は 以 下 を 手 順 で 参 照 してください. Products Information Site を 表 示 します. intra-mart Accel Platform 旧 アップデート 版 リリースノート / 公 開 ソースダウンロード の 該 当 バージョンをクリックします. リリースノート をクリックします. システム 要 件 をクリックします. クライアント 要 件 を 確 認 します コラム 本 書 の 画 面 キャプチャは 全 てGoogle Chromeにて 表 示 しています Web ブラウザの 違 いやバージョンによって グラデーションや 影 丸 み 等 の 見 え 方 が 異 なります これは Web ブラウザにより 表 示 の 解 釈 が 異 なるためと ブラウザによりCSSの 対 応 状 況 が 異 なるためです 画 面 解 像 度 対 応 する 画 面 の 解 像 度 は 以 下 の 通 りです intra-mart Accel Platform は 0 x 768 を 基 準 とします Webブラウザ 設 定 IEは 文 字 サイズを 中 とします 表 示 倍 率 (ズーム)は 00% とします 7

8 UIデザイン intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 本 章 よりUIデザインの 流 れにそった 画 面 作 成 を 説 明 します 目 次 は 以 下 のとおりです UIデザインの 流 れ UIデザインの 流 れを 簡 単 に 説 明 します 注 意 スクリプト 開 発 にて 説 明 します 外 部 ドキュメントへのリンクは 全 てスクリプト 開 発 用 となりますので SAStruts+SJDBC で 開 発 している 場 合 は 適 宜 読 み 替 えてください 画 面 レイアウト を 指 定 します 基 本 的 な 画 面 レイアウトの 方 法 を 確 認 します テーマ を 利 用 し 画 面 構 成 のパーツを 組 み 合 わせた 画 面 レイアウトを 行 います body 部 分 を 作 成 します まずは UIモジュール にどんな 部 品 があるかを 確 認 します 初 めに 画 面 タイトル を 作 成 します 戻 るやイベントを 配 置 する ツールバー を 作 成 します コンテンツエリア を 作 成 します 見 出 し にて 画 面 をセクションごとに 分 けます テーブル にて 表 のルールを 確 認 し 配 置 します 入 力 フォーム にて 部 品 ごとのルールを 確 認 し 配 置 します ボタン にて 種 類 や 画 面 ごとのルールを 確 認 し 配 置 します 処 理 リンク/ 処 理 アイコン にて の 種 類 やルールを 確 認 し 配 置 します アラートとコンファーム の 表 示 方 法 やルールを 確 認 表 示 します 作 成 した 画 面 を 画 面 遷 移 の 規 約 を 確 認 し 実 装 します エラー 処 理 を 確 認 します 入 力 項 目 の 国 際 化 を 行 う 場 合 は 国 際 化 情 報 入 力 項 目 を 確 認 します 画 面 レイアウト 本 章 では 画 面 レイアウトの 方 法 について 説 明 します intra-mart Accel Platform では テーマ を 利 用 して 画 面 レイアウトの 大 枠 (ヘッダ フッタの 有 無 など)を 作 成 します テーマ を 利 用 すると 開 発 者 が 作 成 するのは HTML の 要 素 の body 部 分 だけです head header body footer をそれぞれコーディングする 必 要 はありま せん 注 意 本 章 は テーマ を 利 用 して 画 面 レイアウトを 行 う 方 法 を 説 明 します body 部 分 にコンテンツを 配 置 する 説 明 は body 部 分 にて 説 明 します コラム 本 書 の 画 面 キャプチャは 標 準 テーマ( 青 ) を 用 いています 画 面 レイアウトの 目 次 は 以 下 の 通 りです 基 本 的 な 画 面 レイアウト 本 章 では 全 ての 構 成 要 素 を 含 んだ 画 面 レイアウトを 用 いて 画 面 構 成 を 説 明 します 構 成 要 素 の 組 み 合 わせによる 画 面 レイアウトの 方 法 は テーマを 使 って 画 面 レ イアウトを 行 う で 説 明 します 項 目 基 本 的 な 画 面 構 成 6 つの 構 成 要 素 つのパーツ 名 基 本 的 な 構 成 要 素 の 実 装 例 基 本 的 な 画 面 構 成 基 本 的 な 画 面 は 6 つの 構 成 要 素 が 含 まれます 8

9 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 つの 構 成 要 素 つのパーツ 名 6 つの 構 成 要 素 は 本 書 では つのパーツに 分 類 します パーツ 名 の 詳 細 は テーマからみた 画 面 の つのパーツ にて 行 います No 場 所 HTML 要 素 パーツ 名 配 置 内 容 ヘッダー <body> 配 下 の <header> head メニュー My Menu 画 面 タイトル <body> body 画 面 タイトル ツールバー <body> body 処 理 アイコン 処 理 リンク(アイコンのみ アイコン+リンク リンクのみ) コンテンツエリア <body> body 入 力 フォーム 一 覧 ボタン 等 フッター <body> 配 下 の <footer> footer コピーライト 6 ヘッド 情 報 <head> head 文 書 のヘッダ 情 報 です 画 面 上 に 表 示 されません HTML 構 造 は 以 下 の 通 り 出 力 されます <html> <head>6ヘッド 情 報 </head> <body> <header>ヘッ ダー</header> <div> ツールバー コンテンツエリア <footer>フッタ</footer> </body> </html> 注 意 基 本 的 な 構 成 要 素 の 実 装 例 で 触 れますが 開 発 者 は のヘッダー のフッターをコーディングする 必 要 はありません html タグや body タグ 等 の タグも 不 要 です テーマを 使 って 画 面 レイアウトを 行 う で 詳 しく 説 明 します 基 本 的 な 構 成 要 素 の 実 装 例 9

10 実 際 に intra-mart Accel Platform では 以 下 のようにコーディングします のヘッダー のフッター 6のヘッダ 情 報 html タグや body タグは テーマ が 自 動 的 に 生 成 します intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 注 意 テーマ の 機 能 を 使 用 して ヘッダーやフッターの 有 無 をレイアウト 指 定 できます テーマを 使 って 画 面 レイアウトを 行 う で 詳 しく 説 明 します HTML 実 装 例 <!-- 6head タグ--> <imart type="head"> <title> 画 面 名 </title> <script> function hoge(){ dosomething(); </script> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 画 面 タイトル</h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-toolbar-utility"> <li><a href="#" class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container"> JavaScript 実 装 例 function init(request) { dosomething(); コーディング 内 容 No 場 所 配 置 内 容 ヘッダー テーマが 自 動 的 に 生 成 します 明 示 的 にコーディングする 必 要 はありません 画 面 タイトル <h>に 画 面 タイトルを 入 力 します ツールバー ツールバー を 参 照 してください コンテンツエリア body 部 分 を 参 照 してください UIモジュール や 独 自 に 用 意 した 表 などのコンポーネントを 配 置 します フッター テーマが 自 動 的 に 生 成 します 明 示 的 にコーディングする 必 要 はありません 6 ヘッド 情 報 テーマが 自 動 的 に 生 成 します 画 面 上 表 示 されていませんが head タグが 出 力 されています title タグに 画 面 名 を 記 述 してください 必 要 に 応 じて script link タグなどを 記 述 してください コラム コンテンツエリアは div 要 素 内 に 記 述 します div に 設 定 すべき class 属 性 は imui-form-containerを 含 め つ 用 意 しています 次 の 項 固 定 レイアウト(カラム) にて 説 明 します 0

11 基 本 的 な 画 面 レイアウト 別 実 装 例 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 以 下 に 基 本 的 な 画 面 レイアウト 別 の 実 装 例 を 示 します 項 目 固 定 レイアウト(カラム) 左 右 に 分 割 するレイアウト(カラム) 固 定 レイアウト(カラム) コンテンツエリアの 一 番 外 側 の div の class 属 性 の 説 明 です 一 番 外 側 の div の class 属 性 に imui-form-container imui-form-container-narrow imui-form-container-wide のいずれかのコンテナクラスを 指 定 します <div class="imui-form-container">... 指 定 した class により 枠 の 幅 (%) が 変 わります (サンプル 画 像 では style=height:00px を 指 定 ) imui form container imui form container narrow imui form container wide width:7% width:60% width:90% コラム imui-form-container imui-form-container-narrow imui-form-container-wide は UIモジュール の つです 別 ドキュメントの CSS Module List の コンテナ で 説 明 しています 左 右 に 分 割 するレイアウト(カラム) コンテンツエリアを 左 右 に 分 割 したい 場 合 の 実 装 例 です Twitter の Bootstrap を 利 用 します 実 装 例 <div class="container-fluid"> <div class="row-fluid"> <div class="span" style="height:00px;"> <div>sidebar content <div class="span0" style="height:00px;"> <div>body content 画 面

12 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 テーマを 使 って 画 面 レイアウトを 行 う 基 本 的 な 画 面 レイアウト で 触 れたとおり 開 発 者 はヘッダー フッター 等 のコーディングする 必 要 がありません intra-mart Accel Platform が 提 供 するインタフェース テーマ を 利 用 して 作 成 します テーマ を 利 用 すると 開 発 者 が 作 成 するのは body 部 分 だけです 開 発 者 は テーマ を 利 用 することで 共 通 部 分 に 修 正 が 入 った 時 の 手 間 や 記 述 ミスによる 不 具 合 を 避 けることができます 本 章 では テーマを 使 って 画 面 レイアウトを 行 う 方 法 を 説 明 します さらに 構 成 要 素 の 組 み 合 わせ 方 についても 説 明 します 項 目 テーマとは テーマからみた 画 面 の つのパーツ コラム 標 準 テーマ( 青 ) を 用 いて 説 明 します テーマとは テーマ とは 以 下 を 指 します 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み その 構 成 ファイル 群 本 書 では テーマ を 利 用 して 画 面 レイアウトを 指 定 する 方 法 を 説 明 をします 注 意 本 ドキュメントでは テーマ を 利 用 した 画 面 レイアウトの 方 法 を 説 明 します テーマの 仕 組 みを 知 りたい テーマの 色 を 変 更 したい ロゴを 変 更 したい 場 合 は 以 下 の 別 ドキュメントを 参 照 してください 標 準 テーマカスタマイズ セットアップガイド 標 準 テーマカスタマイズ 操 作 ガイド テーマの 仕 組 みの 詳 細 は 以 下 の 別 ドキュメントを 参 照 してください テーマ 仕 様 書 テーマからみた 画 面 の つのパーツ まず テーマからみた 画 面 の 考 え 方 を 説 明 します 基 本 的 な 画 面 レイアウト では 6 つの 構 成 要 素 つのパーツとして 説 明 しました この つのパーツ( head header body footer )は テーマ の 仕 組 みから 分 類 しています

13 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 No 場 所 パーツ 名 ヘッダー header 画 面 タイトル body ツールバー body コンテンツエリア body フッター footer 6 ヘッド 情 報 head コラム テーマを 使 った 画 面 レイアウトの 組 み 合 わせ 方 法 は パーツ 名 で 説 明 します 画 面 レイアウトの 指 定 方 法 本 項 では テーマ を 利 用 した 画 面 レイアウトの 方 法 を 説 明 します テーマ を 利 用 すると 画 面 によって header を 表 示 しない 作 成 した 画 面 だけを 表 示 したい など 組 み 合 わせることが 可 能 です コラム テーマの 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 みの 中 の PageBuilder を 使 い 画 面 レイアウトの 指 定 します 詳 細 は テーマ 仕 様 書 の PageBuilder を 参 照 してください 項 目 画 面 を 構 成 する つのパーツ パーツ 組 合 せの 種 類 PageBuilder で 実 装 可 能 な 画 面 レイアウトの 種 類 PageBuilderを 利 用 した 画 面 レイアウトの つの 指 定 方 法 適 用 順 位 画 面 を 構 成 する つのパーツ テーマからみた 画 面 の つのパーツ に 示 したとおり intra-mart Accel Platform の 画 面 レイアウトは テーマの 観 点 から head header body footer の つの パーツに 分 類 されます

14 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 この つのパーツは 標 準 テーマ 標 準 (シンプル)テーマにおいては 以 下 の 通 り HTML 要 素 として 出 力 します パーツ 名 HTML 要 素 備 考 head head タグ 画 面 上 には 表 示 されません header body タグ 内 の header タグ 標 準 テーマにおいては グローバルナビ 等 が 表 示 されます body body タグ 内 の div.imui-container タグ 開 発 者 が 作 成 した 画 面 タイトル ツールバーやコンテンツが 表 示 されま す footer body タグ 内 の footer タグ 標 準 テーマにおいては コピーライト 等 が 表 示 されます HTML ソースは 以 下 の 通 り 出 力 されます <html> <head>ヘッド 情 報 </head> <body> <header>ヘッ ダー</header> <div class="imuicontainer"> 画 面 タイトル ツールバー コンテンツエリア <footer>フッタ</footer> </body> </html> パーツ 組 合 せの 種 類 つのパーツの 組 合 せの 種 類 を 説 明 します 組 合 せの 種 類 は 以 下 つです head header body footer ヘッダー フッタ 表 示 あり head body footer ヘッダー 表 示 なし フッタ 表 示 あり head body ヘッダー フッタ 表 示 なし body ヘッダー フッタ 表 示 なし テーマ 適 用 無 し ヘッダー フッタ 表 示 なし これらのパーツの 組 合 せは PageBuilder にて 実 装 を 行 います PageBuilder で 実 装 可 能 な 画 面 レイアウトの 種 類 PageBuilder で 実 装 可 能 な 画 面 レイアウトの 6 種 類 を 説 明 します (パーツの 組 み 合 わせ 方 のうち head body の 組 み 合 わせが パターンあります ). HeadWithFooterThemeBuilder head body footer を 含 んだ HTML を 生 成 します

15 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 header (メニューや ユーティリティ)を 表 示 したくないが footer は 表 示 したい 場 合 に 使 用 します body は <div id= imui-container > で 囲 まれて 出 力 されます. HeadWithContainerThemeBuilder head body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に intra-mart Accel Platform 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 しています body は <div id= imui-container > で 囲 まれて 出 力 されます. HeadOnlyThemeBuilder head body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に iwp7. 以 前 のシステム 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 しています body は 指 定 された URL の HTML そのものが 出 力 されます. BodyOnlyThemeBuilder DOCTYPE htmlタグ body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 せず CSS やクライアントサイド JavaScript も 使 用 しない 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます. NoThemeBuilder 指 定 された URL の HTML をそのまま 返 します テーマを 一 切 使 用 せず 自 分 で 作 成 した HTML をそのまま 出 力 したい 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます 6. FullThemeBuilder head header body footer のすべてを 含 んだ HTML を 生 成 します body は <div id= imui-container > で 囲 まれて 出 力 されます 基 本 はこれを 使 用 します 注 意 パーツの 組 み 合 わせ 方 のうち head body を 含 んだ HTML を 生 成 する 実 装 は HeadWithContainerThemeBuilder と HeadOnlyThemeBuilder の つあります つの 違 いは HeadWithContainerThemeBuilder は bodyを <div id= imui-container > で 囲 んで 出 力 します が HeadOnlyThemeBuilder は 出 力 されません intra-mart Accel Platform の UIモジュール を 利 用 する 場 合 は HeadWithContainerThemeBuilder を 指 定 してください コラム FullThemeBuilder は 基 本 的 な 画 面 レイアウト の 説 明 で 使 用 した 全 ての 構 成 を 含 むレイアウトです PageBuilderを 利 用 した 画 面 レイアウトの つの 指 定 方 法 PageBuilderを 利 用 した 画 面 レイアウトの 指 定 方 法 は つあります 設 定 ファイルに 指 定 する 方 法 パーツの 組 み 合 わせ 方 を 静 的 に 決 定 する 場 合 リクエストへ 属 性 /パラメータで 指 定 する 方 法 パーツの 組 み 合 わせ 方 を 動 的 に 決 定 する 場 合 や forward する 場 合 以 下 つの 指 定 方 法 があります リクエストに 属 性 として 指 定 する 方 法 リクエストパラメータを 指 定 する 方 法 適 用 順 位 画 面 レイアウトの つの 指 定 方 法 には 適 用 順 位 があります 設 定 ファイル パラメータ 属 性 の 適 用 は 以 下 の 順 に 検 索 し 最 初 に 合 致 した PageBuilder を 使 用 します 設 定 ファイルに 記 述 したものより 属 性 に 指 定 したものの 方 が 優 先 されます. 属 性. パラメータ

16 . 設 定 ファイル intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 設 定 ファイルに 指 定 する 方 法 パーツの 組 み 合 わせ 方 を 静 的 に 決 定 する 場 合 設 定 ファイルに 記 述 します 手 順 は 以 下 の 通 りです. 設 定 ファイルを 配 置 する. 設 定 ファイルの 内 容 を 指 定 する 設 定 ファイルは WEB-INF/conf 配 下 の PageBuilder の 実 装 毎 のフォルダに 配 置 します ファイル 名 は 任 意 です 適 用 したい PageBuilder HeadWithFooterThemeBuilder 指 定 する 値 WEB-INF/conf/theme-head-with-footer-path-config HeadWithContainerThemeBuilder WEB-INF/conf/theme-head-with-container-path-config HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder FullThemeBuilder WEB-INF/conf/theme-head-only-path-config WEB-INF/conf/theme-body-only-path-config WEB-INF/conf/theme-no-theme-path-config なし 注 意 それぞれの 設 定 ファイルは 異 なる XML Schema で 定 義 されています いずれかの 設 定 ファイルを 別 のフォルダにコピーしても 動 作 しないので 注 意 してください 設 定 ファイルに 指 定 する 例 設 定 ファイルで 指 定 する 方 法 の 例 として へのリクエストを head body footer を 含 んだ HTML としたい 場 合 を 取 り 上 げま す この 場 合 使 用 する PageBuilder は HeadWithFooterThemeBuilder になります HeadWithFooterThemeBuilder の 設 定 ファイルは 以 下 のようになります <?xml version=".0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns=" <path>/sample/page</path> </theme-head-only-path-config> path の 中 に コンテキストパス 以 下 のパスを / から 記 述 します 別 の 例 として へのリクエストを 異 なるビルダーモジュー ルで 表 示 する 場 合 を 取 り 上 げます この 場 合 正 規 表 現 を 利 用 して path を 表 現 します path 要 素 に regex 属 性 を true として 追 加 することで 正 規 表 現 として 扱 われ ます <?xml version=".0" encoding="utf-8"?> <theme-head-with-container-path-config xmlns=" <path regex="true">/example/[^/]+?</path> </theme-head-only-path-config> <?xml version=".0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns=" <path regex="true">/example/[^/]+?/[^/]+?</path> </theme-head-only-path-config> リクエストへ 属 性 /パラメータで 指 定 する 方 法 パーツの 組 み 合 わせ 方 を 動 的 に 決 定 する 場 合 や forward する 場 合 リクエストへ 属 性 またはパラメータを 指 定 します forward を 行 うと PageBuilder が 処 理 対 象 とする URL は forward 前 の URL となります forward 後 のページに 対 して forward 前 の PageBuilder とは 別 の PageBuilder を 指 定 したい 場 合 リクエストにパラメータを 指 定 することで PageBuilder を 切 り 6

17 替 えることができます intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 指 定 するキー imui-theme-builder-module 適 用 したい PageBuilder HeadWithFooterThemeBuilder 指 定 する 値 headwithfooter HeadWithContainerThemeBuilder headwithcontainer HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder headonly bodyonly notheme 上 記 の 値 をリクエストのパラメータ または 属 性 として 指 定 することで PageBuilder が 切 り 替 わります リクエストに 属 性 として 指 定 する 例 function init(request) { request.setattribute("imui-theme-builder-module", "headwithfooter"); forward("somewhere"); リクエストパラメータとして 指 定 する 例 <form name="form" action="sample/page"> <input type="hidden" name="imui-theme-builder-module" value="headwithfooter"> <input type="submit" value="submit"/> </form> 画 面 レイアウトの 作 成 ルール 項 目 作 成 ルール テーマで 指 定 してあるので 変 更 できないもの 指 定 しなくてはならないもの タイトルタグ <title></title> 任 意 で 指 定 するもの head タグにスクリプトを 記 述 したい body タグの onload 属 性 にJavaScriptを 記 述 したい 作 成 ルール. html body head を 書 いてはいけません. title を 書 きましょう. <imart type= head > を 使 って script link を 書 きましょう. <body onload= func > は $(document).ready(func) に 置 き 換 えましょう テーマで 指 定 してあるので 変 更 できないもの 以 下 は テーマで 指 定 してあるため 変 更 できません DOCTYPE <!DOCTYPE html> charset <meta charset= UTF-8 > base 7

18 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <base href= target= _self /> ホスト 名 などはシステムによって 異 なります favicon <link rel= icon href= favicon.ico type= image/x-icon /> <link rel= Shortcut Icon type= img/x-icon href= favicon.ico /> 必 須 の CSS テーマ 固 有 の CSS theme.css 後 述 の UI コンポーネント 固 有 の CSS imui.css Twitter Bootstrap の CSS bootstrap.css 必 須 の JavaScript ライブラリ jquery jqueryui jquery jqueryui Plugin 後 述 の UI コンポーネントが 定 義 してある JavaScript imui.js 画 面 遷 移 のユーティリティが 定 義 してある JavaScript imui-form-util.js im_json.js im_window.js メニュー 制 御 で 使 用 します html.js IE8 で intra-mart にアクセスした 際 に 読 み 込 まれます このライブラリを 読 み 込 むことによって HTML で 追 加 されたタグを 利 用 することができるように なります 指 定 しなくてはならないもの タイトルタグ <title></title> すべての 画 面 に 説 明 的 なタイトルを 記 述 しなければなりません タイトルに 指 定 する 内 容 は アプリケーション 名 画 面 名 操 作 対 象 などから 構 築 します これらを 詳 細 なものから 広 範 なものへと 並 べ - (ハイフン) でつなげることを 推 奨 します スケジュールの 参 照 画 面 を 例 にとると リソース 名 例 アプリケーション 名 スケジューラ 画 面 名 操 作 対 象 名 予 定 の 参 照 対 象 の 予 定 のタイトル のようになり title タグは 以 下 のようになります <title> 打 ち 合 わせ - 予 定 の 参 照 - スケジューラ</title> titleタグに 指 定 した 文 字 列 は 以 下 のような 用 途 に 使 われます ブラウザのお 気 に 入 り (ブックマーク) へ 登 録 する 際 の 名 前 の 初 期 値 ブラウザウィンドウ またはタブの 名 前 ユーザがお 気 に 入 りに 登 録 することを 考 慮 すると ユーザごとに 一 意 なタイトルを 記 述 することを 推 奨 します タイトルが 一 意 になることで お 気 に 入 りの 中 で 重 複 し なくなるためです 任 意 で 指 定 するもの 独 自 で 追 加 したい CSS や JavaScript 独 自 CSS <link rel= stylesheet type= text/css href= somewhere/cssfile > ページ 独 自 の css ファイルへの 参 照 を 記 述 する 独 自 JavaScript <script src= somewhere/csjs.js > ページ 独 自 のクライアント JavaScript ファイルへの 参 照 を 記 述 する ただし これらのタグを head タグに 直 接 記 述 することはできません これらのタグを 記 述 したい 場 合 は <imart type= head > タグの 中 に 追 記 したいタグを 記 述 しま す <imart type= head > タグの 中 に 記 述 した 内 容 が head タグの 必 須 のスクリプトの 後 に 追 加 されます 8

19 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <link rel="stylesheet" href="sample.css" type="text/css" /> <style type="text/css">.sample { background-color: black; </style> <script type="text/javascript" src="sample.js"></script> <script type="text/javascript"> function dosomething() { var foo='foo'; somefunction(foo); </script> </imart> コラム テーマおよびUIコンポーネントは jqueryを 利 用 しています prototype.js を 利 用 したい 場 合 <imart type= head >タグの 中 で prototype.js を 読 み 込 んでください UIコンポーネントは (function($){...)(jquery) のように 無 名 関 数 として 実 装 しているので $ 関 数 の 競 合 は 発 生 しません head タグにスクリプトを 記 述 したい head タグに 画 面 固 有 のスクリプトやCSSを 記 述 したい 場 合 は <imart type= head ></imart> タグの 中 に 記 述 します 下 記 の HTML 実 装 例 を 参 考 にしてくださ い <!-- head タグ--> <imart type="head"> <title> 画 面 名 </title> <script> function hoge(){ dosomething(); </script> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 画 面 タイトル</h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-toolbar-utility"> <li><a href="#" class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container"> <!--コンテンツエリア--> body タグの onload 属 性 にJavaScriptを 記 述 したい body タグの onload 属 性 に JavaScript を 記 述 したい 場 合 jquery の 機 能 を 利 用 して 実 行 するようにしてください jquery(document).ready(function() { dosomething(); ); 9

20 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 body 部 分 本 章 では body 部 分 の 作 成 について 説 明 します 画 面 を 構 成 する つのパーツ で 説 明 したとおり body 部 分 には 以 下 を 配 置 します 画 面 タイトル ツールバー コンテンツエリア これらは intra-mart Accel Platform で 提 供 する UIモジュール を 使 って 配 置 してください 従 来 よりも 効 率 よく 画 面 開 発 を 行 えます 本 章 では 全 体 で 利 用 する UI モジュールを 説 明 のあと 画 面 に 配 置 する 順 番 に 説 明 します UIモジュール UIモジュールは PC 向 けの 画 面 を 効 率 的 に 作 成 するためのモジュールです 開 発 者 はUIモジュールを 利 用 することで 効 率 的 にかつ 統 一 したデザインの PC 向 け 画 面 開 発 を 行 うことができます intra-mart Accel Platform におけるUIモジュールは 以 下 を 示 します jquery UI jquery UI は jquery のプラグインとして 稼 働 する PC 用 ライブラリです jquery UI を 利 用 すると 開 発 者 はインタフェースを 意 識 しなくても PC 用 に 最 適 化 された Web 画 面 を 作 ることが 可 能 になります UI モジュールをインストールすると jquery UI を 利 用 する 環 境 が 整 いますので 開 発 者 は 改 めて jquery UI をインストールする 必 要 はありません jquery UI の 詳 細 については 下 記 サイトを 参 照 してください UIコンポーネント jquery UI を 拡 張 したプラグインを 利 用 した 入 力 部 品 です スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント を 参 照 してください CSSモジュール intra-mart Accel Platform 全 体 で 統 一 されたデザインの CSS を 提 供 します 詳 細 は CSS Module List を 参 照 してください ツールバーや 表 見 出 しなどを 用 意 しています CSS Sprite アイコンを CSS Sprite として 提 供 します 詳 細 は CSS Sprite Image List の PC 向 け を 参 照 してください 画 面 タイトル 画 面 タイトルを 指 定 しましょう H タグを 使 用 します 0

21 画 面 タイトルの HTML ソース intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <div class="imui-title"> <h> 画 面 タイト ル</h> コラム CSS Module List の 見 出 しでも HTML ソースを 中 心 に 情 報 公 開 を 行 っています h h6の 見 出 しを 用 意 しています ツールバー ツールバーは 画 面 を 操 作 する 処 理 リンクを 配 置 します 本 章 では 画 面 タイトル 下 に 配 置 するツールバーについて 説 明 します 項 目 ツールバーの 構 成 ツールバー 実 装 例 配 置 内 容 HTMLコーディング 指 定 内 容 まとめ 処 理 リンク/ 処 理 アイコン 配 置 方 法 まとめ アイコン アイコン+ 文 字 リンク 文 字 リンク タブアイコン 文 字 列 6 区 切 り 線 処 理 リンクや 表 示 切 替 など 表 示 画 面 に 対 して 操 作 を 行 う 場 合 ツールバーを 利 用 しましょう 以 下 点 を 説 明 します. ツールバーの 構 成. 処 理 リンクの 配 置 方 法 注 意 全 機 能 でツールバーを 必 須 ではありません 配 置 するアイコンがつもない 場 合 は 不 要 です 注 意 intra-mart Accel Platform では アイコンを CSS Sprite としてを 用 意 しています CSS Spriteは UIモジュール の つです 処 理 リンクや 処 理 アイコ ンとして 利 用 してください アイコンリストは CSS Sprite Image List の PC 向 け を 参 照 してください コラム CSS Module List のツールバーでも HTML ソースを 中 心 に 情 報 公 開 を 行 っています 記 述 レベルは 本 書 が 詳 細 にわたっています ツールバーの 構 成 ツールバーは 複 数 の div で 構 成 されます 処 理 リンク 処 理 アイコンは ツールバー 左 右 いずれかに 配 置 します ツールバーの 基 本 構 成 は 以 下 のとおりです HTML ソース

22 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <div class="imui-toolbar-wrap">[] <div class="imui-toolbar-inner">[] <ul class="imui-list-toolbar">[] <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li>[-] </ul> <ul class="imui-list-toolbar-utility">[] <li><a href="#" class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li>[- ] </ul> Class 名 配 置 先 備 考 imui-toolbar-wrap 外 枠 imui-toolbar-inner 内 枠 [] の 中 に 配 置 imui-list-toolbar ツールバー 左 側 [] の 中 に 配 置 imui-list-toolbar-icon 処 理 リンクまたは 処 理 アイコ ン [] []の 中 に 配 置 [-] [-] に CSS Sprite のクラスを 指 定 し アイコン 表 示 imui-list-toolbar-utility ツールバー 右 側 [] の 中 に 配 置 ツールバー 実 装 例 配 置 内 容 名 称 場 所 構 成 用 途 a 戻 る 左 側 の 最 左 アイコン+ツールチップ 前 のページへ 戻 る b 区 切 り 線 任 意 区 切 り 線 区 切 り 線 として 利 用 c 処 理 リンク 左 側 の 中 アイコン+ 文 字 リンク 設 定 の 処 理 リンクに 利 用 d タブアイコン 左 側 の 中 アイコン+ツールチップ タブ 切 替 に 利 用 e 文 字 列 左 側 の 中 文 字 列 文 字 列 表 示 に 利 用 f 最 新 表 示 右 側 の 最 右 アイコン+ツールチップ( 最 新 表 示 ) 再 表 示 HTMLコーディング 上 記 を HTML コーディングすると 以 下 のようになります

23 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 るアイコン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 リンク --> <li><a href="#" class="imui-toolbar-icon"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- お 気 に 入 りタブアイコン --> <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- 検 索 タブアイコン --> <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- ヘルプタブアイコン --> <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 文 字 列 --> <li class="imui-toolbar-text-only"> 文 字 列 </li> <!-- 文 字 列 --> <li><span class="imui-toolbar-text-only"> 文 字 列 </span></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-toolbar-utility"> <!-- 最 新 表 示 アイコン --> <li><a href="#" class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a> </li> </ul> 指 定 内 容 まとめ 上 記 の 指 定 内 容 をまとめると 以 下 のようになります 名 称 <li>の class <a>の class <a>の title <span>の class 表 示 されるアイコ ン a 戻 る imui-toolbar-icon 戻 る im-ui-icon-common-6-back b 区 切 り 線 icon-split c 処 理 リンク imui-toolbar-icon im-ui-icon-common-6-settings mr- [] b 区 切 り 線 icon-split d タブアイコン imui-toolbar-tab 各 機 能 で 指 定 im-ui-icon-common-6-star im-ui-icon-common-6-search im-ui-icon-common-6-question b 区 切 り 線 icon-split f 文 字 列 imui-toolbar-text-only [] imui-toolbar-text-only [] b 区 切 り 線 icon-split e 最 新 表 示 imui-toolbar-icon 最 新 表 示 im-ui-icon-common-6-refresh [] アイコン+ 文 字 リンクの 処 理 リンクは アイコンと 文 字 リンクの 間 隔 が 狭 くなってしまうため mr- クラスを 指 定 します [] liタグ spanタグどちらかに imui-toolbar-text-only クラスを 指 定 します [] liタグ spanタグどちらかに imui-toolbar-text-only クラスを 指 定 します 処 理 リンク/ 処 理 アイコン 配 置 方 法 まとめ 処 理 リンク/ 処 理 アイコンの 配 置 の 表 現 は 以 下 の 6 通 りあります

24 アイコン アイコン+ 文 字 リンク 文 字 リンク タブアイコン 文 字 列 6 区 切 り 線 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 注 意 ツールバーは 解 像 度 0 x 768 で 表 示 した 際 に 行 で 収 まるようにしてください ダイアログの 場 合 指 定 したウィンドウサイズで 行 で 収 まるようにしてください 表 示 したい 処 理 リンクが 行 で 収 まらない 場 合 は 以 下 の 対 応 をしてください. 文 字 数 を 再 考 慮 し 収 まるようにしてください. アイコンのみの 表 示 とし 文 字 はツールチップで 表 示 してください 注 意 本 章 では ツールバーに 配 置 する 場 合 の 説 明 です 汎 用 的 な 使 用 方 法 は 処 理 リンク/ 処 理 アイコン を 参 照 してください アイコン 以 下 のとおり HTML コーディングを 行 います <li><a href="aa" class="imui-toolbar-icon" title="bb"><span class="cc"></span></a></li> AA BB 遷 移 先 を 指 定 ツールチップの 表 示 内 容 CC CSS Sprite の class 指 定 注 意 アイコンのみの 表 示 の 場 合 ツールチップを 指 定 しましょう アイコン+ 文 字 リンク 以 下 のとおり HTML コーディングを 行 います <li><a href="aa" class="imui-toolbar-icon"><span class="bb mr-"></span>cc</a></li> AA BB 遷 移 先 を 指 定 CSS Sprite の class 指 定 CC 文 字 リンクの 表 示 内 容 文 字 リンク 以 下 のとおり HTML コーディングを 行 います <li><a href="aa" class="imui-toolbar-icon">bb</a></li> AA 遷 移 先 を 指 定 BB 文 字 リンクの 表 示 内 容 タブアイコン 以 下 のとおり HTML コーディングを 行 います <li><a href="aa" class="imui-toolbar-tab" title="bb"><span class="cc"></span></a></li>

25 AA BB 遷 移 先 を 指 定 ツールチップの 表 示 内 容 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 CC CSS Sprite の class 指 定 注 意 タブアイコンは 以 下 つの class を 用 意 しています 未 選 択 時 用.imui-toolbar-tab マウスホバーすると アイコン 下 に 薄 いテーマカラーの 下 線 が 入 ります active 時 用.imui-list-toolbar-tab-selected アイコン 下 に 濃 いテーマカラーの 下 線 が 入 ります 使 用 方 法 intra-mart Accel Platform では class の 切 り 替 えを 行 いません 開 発 者 にて クリックしたアイコンの a タグの class 属 性 に.imui-list-toolbar-tab-selected が addclass されるようプログラミングを 行 ってく ださい 文 字 列 以 下 のとおり HTML コーディングを 行 います 記 述 方 法 は 通 りあります <li class="imui-toolbar-text-only">aa</li> <li><span class="imui-toolbar-text-only">aa</span></li> AA 文 字 列 を 指 定 6 区 切 り 線 以 下 のとおり HTML コーディングを 行 います <li class="icon-split"></li> コンテンツエリア コンテンツエリアには 入 力 フォームや 一 覧 表 などのコンテンツを 配 置 します 基 本 ルールは 以 下 のとおりです コンテンツエリア 内 で コンテンツの 塊 ごとに div で 囲 みます コンテンツの 内 容 に 応 じて 見 出 しを 配 置 します コンテンツの 内 容 に 応 じて 構 造 化 を 意 識 して 要 素 を 配 置 します コンテンツ 配 置 に UIモジュール を 利 用 します コンテンツエリアは 以 下 の 順 番 に 説 明 します 見 出 し 見 出 し <h>は 画 面 タイトルやダイアログウィンドウのタイトルで 使 用 しています コンテンツエリアでは <h> <h6>を 使 って 見 出 しをつけましょう intra-mart Accel Platform で 提 供 する 以 下 の 見 出 し<h> <h6>は CSS Module List の 見 出 し を 参 照 してください. <div class= imui-chapter-title ><h> 見 出 しレベル</h>. <div class= imui-section-title ><h> 見 出 しレベル</h>. <div class= imui-subsection-title ><h> 見 出 しレベル</h>. <div class= imui-paragraph-title ><h> 見 出 しレベル</h>. <div class= imui-subparagraph-title ><h6> 見 出 しレベル6</h6> テーブル

26 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 intra-mart Accel Platform では UI モジュールとして テーブルを 用 意 しています 下 記 以 外 の 表 を 含 め 詳 細 は 別 ドキュメントの CSS Module List の テー ブル を 参 照 してください 項 目 入 力 フォームのテーブル 一 覧 テーブル 検 索 条 件 / 詳 細 検 索 セル 内 の 位 置 / 文 字 寄 せ(align) 横 並 びの 表 縦 並 びの 表 文 字 寄 せの CSS クラス 名 サイズ 指 定 方 法 HTML で table を 記 述 する 場 合 (スクロール 無 ) HTML で table を 記 述 する 場 合 (スクロール 有 ) imuilisttable を 使 わない 場 合 のソート 順 ソートキー 指 定 例 入 力 フォームのテーブル 入 力 や 選 択 項 目 がある 場 合 は 入 力 フォーム 用 テーブル table.imui-form を 使 用 します 詳 細 は 別 ドキュメントの CSS Module List の 入 力 フォーム 用 テーブル table.imui-form を 参 照 してください <table class="imui-form"> <tr> <th><label> 項 目 </label></th> <td><input type="text" name="item" /> </td> </tr> <tr> <th><label> 項 目 </label></th> <td><input type="text" name="item" /> </td> </tr> </table> 項 目 名 となる th の 中 には 直 接 文 字 列 を 指 定 せず label の 中 に 文 字 列 を 指 定 します 一 覧 テーブル 一 覧 画 面 などで 使 用 するテーブルは imuilisttable を 使 います imuilisttable は ページャーのや 表 示 件 数 を 表 示 カラムのソートなどの 機 能 を 備 えています 詳 細 は 別 ドキュメントの PC 版 UIコンポーネント imuilisttable を 参 照 してください 検 索 条 件 / 詳 細 検 索 6

27 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 検 索 条 件 の 指 定 を 行 う 場 合 は 検 索 条 件 用 テーブル table.imui-form-search-condition を 使 用 します 詳 細 は 別 ドキュメントの CSS Module Listの 検 索 条 件 用 テーブル table.imui-form-search-condition を 参 照 してください <table class="imui-form-search-condition"> <tr> <th><label> 項 目 </label></th> <td><input type="text" name="item" /> </td> </tr> <tr> <th><label> 項 目 </label></th> <td><input type="text" name="item" /> </td> </tr> </table> 項 目 名 となる th の 中 には 直 接 文 字 列 を 指 定 せず label の 中 に 文 字 列 を 指 定 します セル 内 の 位 置 / 文 字 寄 せ(align) 横 並 びの 表 横 並 びの 表 は 行 目 : 項 目 行 目 以 降 :データ 入 力 フォーム 部 品 処 理 アイコン 処 理 リンクとなります 文 字 の 寄 せは 以 下 のとおりとします 種 類 項 目 ( 行 ) データ: 数 値 データ: 文 字 列 データ: 処 理 アイコン データ: 処 理 リンク データ: 日 付 / 日 時 データ: 区 分 /コード チェックボックス ラジオボタン アイコン( 状 態 表 示 など) 文 字 寄 せ 左 寄 せ 右 寄 せ 左 寄 せ 中 央 寄 せ 中 央 寄 せ 左 寄 せ 中 央 寄 せ 中 央 寄 せ 中 央 寄 せ 中 央 寄 せ 縦 並 びの 表 縦 並 びの 表 は 列 目 : 項 目 列 目 :データ 入 力 フォーム 部 品 処 理 アイコン 処 理 リンクとなります 文 字 の 寄 せは 以 下 のとおりとします 種 類 項 目 ( 列 ) 文 字 寄 せ 左 寄 せ データ: 数 値 右 寄 せ [] データ: 文 字 列 データ: 処 理 アイコン データ: 処 理 リンク データ: 日 付 / 日 時 データ: 区 分 /コード チェックボックス 左 寄 せ 左 寄 せ 左 寄 せ 左 寄 せ 左 寄 せ 左 寄 せ 7

28 種 類 ラジオボタン アイコン( 状 態 表 示 など) intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 文 字 寄 せ 左 寄 せ 左 寄 せ 文 字 寄 せの CSS クラス 名 文 字 寄 せを 指 定 するには 以 下 の CSS クラスを 指 定 してください 文 字 寄 せ class 左 寄 せ 不 要 [] 中 央 寄 せ align-c 右 寄 せ align-r [] ただし 数 値 とその 他 の 入 力 フォーム ラベルなどが 左 右 に 極 端 に 離 れてしまう 場 合 数 値 の 入 力 フォーム 幅 を 小 さくするなどし 視 線 の 移 動 が 少 なく なるように 注 意 してください [] CSSの 継 承 により 左 寄 せにならない 場 合 align-l を 指 定 してください コラム align-c align-r align-l は それぞれ UIコンポーネントのCSSモジュールです 詳 細 は 以 下 を 参 照 してください CSS Module List の 文 字 寄 せ( 左 ).align-l CSS Module List の 文 字 寄 せ( 中 央 ).align-c CSS Module List の 文 字 寄 せ( 右 ).align-r サイズ 指 定 方 法 テーブルのサイズ 指 定 の 方 法 は 以 下 とします HTML で table を 記 述 する 場 合 (スクロール 無 ). table a. width 指 定 不 要 です (スタイルシートに 指 定 があるため) b. imui-form-container で 囲 みます または Bootstrap を 使 用 します. th a. width はスタイルシートで 準 備 されたクラスを 使 用 します wd- wd-0 wd-px wd-px があります wd- は width:%!important; wd-0は width:0%!important;が 指 定 されます または Bootstrap を 使 用 します. td a. 基 本 的 にサイズを 指 定 しません コラム Bootstrap について Bootstrap の 詳 細 は 別 サイト Bootstrap を 参 照 してください テーブル 全 体 で Bootstrap を 使 用 する 場 合 は 該 当 のクラスを 指 定 します HTML で table を 記 述 する 場 合 (スクロール 有 ) つのテーブルを 上 下 または 左 右 に 配 置 してスクロールを 表 示 させるため td の width の 幅 を 指 定 する 必 要 があります px を 指 定 しないと 線 のずれが 発 生 するため style= width: 0px を 指 定 してください 8

29 コラム intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML の 廃 止 タグ th 要 素 は HTML では abbr 属 性 align 属 性 axis 属 性 char 属 性 charoff 属 性 height 属 性 nowrap 属 性 valign 属 性 width 属 性 が 廃 止 されています td 要 素 は HTML では abbr 属 性 align 属 性 axis 属 性 char 属 性 charoff 属 性 height 属 性 nowrap 属 性 scope 属 性 valign 属 性 width 属 性 が 廃 止 されています imuilisttable を 使 わない 場 合 のソート 順 テーブルのソートについて 説 明 します 以 下 は 基 本 ルールとなります 画 面 のユーザビリティが 低 下 する 場 合 は 各 画 面 にて 仕 様 を 決 定 してください また 画 面 仕 様 により 機 能 単 位 で 決 定 する 場 合 は 画 面 間 の 差 異 が 発 生 しないよう 注 意 しましょう 一 覧 テーブルに 複 数 列 存 在 する 場 合 は ソートキーを 第 ソートキーまで 指 定 しましょう 初 期 表 示 のソートキーは 画 面 表 示 の 基 準 となります 従 って 以 下 を 実 行 時 に 初 期 表 示 と 同 じソートとなります 検 索 ボタンを 押 下 した 場 合 最 新 表 示 アイコンを 押 下 した 場 合 ソートの 順 番 は 昇 順 から 降 順 になります 未 ソート 例 を 押 下 した 場 合 昇 順 になります コラム imuilisttableのソートについては 別 ドキュメントの PC 版 UIコンポーネント imuilisttable を 参 照 してください ソートキー 指 定 例 例 :ソートを 実 行 した 場 合 直 前 の 第 ソートキーが 第 ソートキーになります 初 期 表 示 第 ソートキー:ユーザ 名 昇 順 第 ソートキー:ユーザコード 昇 順 住 所 をクリック 第 ソートキー: 住 所 昇 順 第 ソートキー:ユーザ 名 昇 順 電 話 番 号 をクリック 第 ソートキー: 電 話 番 号 昇 順 第 ソートキー: 住 所 昇 順 例 : 第 Xソートキーを 固 定 キーにします ( 以 下 更 新 日 時 は 一 覧 表 には 非 表 示 ) 初 期 表 示 第 ソートキー:ユーザ 名 昇 順 第 ソートキー: 更 新 日 時 降 順 住 所 をクリック 第 ソートキー: 住 所 昇 順 第 ソートキー: 更 新 日 時 降 順 電 話 番 号 をクリック 第 ソートキー: 電 話 番 号 昇 順 第 ソートキー: 更 新 日 時 降 順 入 力 フォーム 本 章 では 入 力 フォームの 部 品 (テキストボックスやセレクトボックスなど)について 説 明 します 項 目 入 力 フォーム 全 体 HTML コーディング 実 装 例 コンテナの 違 い 入 力 フォーム 部 品 入 力 フォーム 部 品 の 基 本 ルール テキストボックス(imuiTextbox) パスワード(imuiPassword) テキストエリア(imuiTextArea) チェックボックス(imuiCheckbox) ラジオボタン(imuiRadio) セレクトボックス(imuiSelect) 入 力 ヒント( placeholder ) の 表 示 Tab キーによる 移 動 順 序 ( tabindex ) 文 字 寄 せ( align ) 必 須 入 力 の 表 記 方 法 入 力 フォーム 全 体 以 下 を 推 奨 します 登 録 / 更 新 / 参 照 画 面 / 一 覧 画 面 は 以 下 のコンテナいずれかで 囲 みます 9

30 imui form container imui form container narrow imui form container wide HTML コーディング 実 装 例 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <div class="imui-form-container"> ここに 表 や 入 力 フォームなどが 配 置 されます コンテナの 違 い 指 定 した class により 枠 の 幅 (%) が 変 わります (サンプル 画 像 では style=height:00px を 指 定 ) imui form container imui form container narrow imui form container wide width:7% width:60% width:90% コラム imui-form-container imui-form-container-narrow imui-form-container-wide は UIモジュール の つです 別 ドキュメントの CSS Module List の コンテナ で 説 明 しています 入 力 フォーム 部 品 本 章 で 説 明 する 部 品 一 覧 は 以 下 の 通 りです 名 称 imart タグ 生 成 される HTML タグ placeholder 属 性 [] テキストボックス imuitextbox <input type= text /> パスワード imuipassword <input type= password /> テキストエリア imuitextarea <textarea></textarea> チェックボックス imuicheckbox <input type= checkbox /> - ラジオボタン imuiradio <input type= radio /> - セレクトボックス imuiselect <select></select> - [] [] placeholder は 入 力 ヒント( placeholder ) の 表 示 を 参 照 してください [] list の 番 目 に 入 力 ヒント( placeholder ) を 体 言 止 めで 記 述 します ( 例 :ロケールを 選 択 ) 注 意 上 記 以 外 に imuimultidragbox や imuirichtextbox などの 入 力 フォーム 部 品 も 用 意 しています スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント を 参 照 してください 入 力 フォーム 部 品 の 基 本 ルール 入 力 フォーム 部 品 の 基 本 的 な 記 述 方 法 と 基 本 ルールを 説 明 します 詳 細 は スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント を 参 照 してください テキストボックス(imuiTextbox) パスワード(imuiPassword) 外 観 と 基 本 的 な HTML ソース imuitextbox 0

31 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="imuitextbox" value="テキストボックス" /> imuipassword <imart type="imuipassword" value="password" /> 注 意 詳 細 は スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント の imuitextbox imuipassword を 参 照 してください 共 通 ルール autofocus 属 性 は 任 意 指 定 です 画 面 表 示 時 に 番 最 初 に 入 力 してほしい 部 品 に 指 定 します 例 :ログイン 画 面 で ユーザコードのテキストボックスに autofocus を 指 定 します 検 索 画 面 で 検 索 文 字 列 のテキストボックスに autofocus を 指 定 します 横 幅 の 指 定 方 法 は 以 下 の 通 りです style= width:000px; で 指 定 します (000 は 該 当 のサイズを 指 定 してください) size 属 性 は 使 用 しません size 属 性 は ブラウザによる 表 示 の 差 異 が 発 生 します ( 表 示 フォントにも 依 存 します) maxlength 属 性 を 指 定 します ( 一 般 ユーザのユーザビリティ 向 上 の 為 に 指 定 します) class を 指 定 せずに 自 動 で 角 丸 デザインが 適 用 されます 入 力 不 可 の 場 合 () readonly 属 性 を 指 定 します 例 :フローティングカレンダーからテキストボックスに 入 力 します ( 直 接 編 集 は 不 可 です) 入 力 不 可 の 場 合 () readonly 属 性 を 指 定 し class= imui-text-readonly を 指 定 します (class= imui-text-readonly は 線 なし 背 景 なしになります) 例 : 登 録 画 面 で 入 力 可 能 だった 項 目 を 参 照 画 面 編 集 画 面 で 表 示 します 入 力 不 可 の 場 合 () disabled 属 性 を 指 定 します 例 :ラジオボタンの 選 択 値 により 入 力 制 御 をします コラム 上 記 の 入 力 不 可 は imuitextbox imuipassword input type= text input type= password をそのまま 利 用 する 方 法 です これ 以 外 に label タグと input type= hidden を 組 み 合 わせて 入 力 不 可 にする 方 法 もあります どちらの 方 法 を 採 用 しても 問 題 ありませんが 画 面 単 位 での 統 一 を 図 るようにしてください テキストエリア(imuiTextArea) 外 観 と 基 本 的 な HTML ソース <imart type="imuitextarea" value="テキストエリア" /> 注 意 詳 細 は スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント の imuitextarea を 参 照 してください 共 通 ルール 縦 幅 横 幅 の 指 定 方 法 style= width: 000px; height: 000px; で 指 定 (000 は 該 当 のサイズを 指 定 してください) cols 属 性 rows 属 性 は 使 用 しません (テキストボックスと 合 わせます) class を 指 定 せずに 自 動 で 角 丸 デザインが 適 用 されます 入 力 不 可 の 場 合

32 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 テキストボックスに 準 拠 します (class= imui-text-readonly は 線 なし 背 景 なしになります) チェックボックス(imuiCheckbox) ラジオボタン(imuiRadio) 外 観 と 基 本 的 な HTML ソース imuicheckbox <imart type="imuicheckbox" label="ラベル" /> imuiradio <imart type="imuiradio" name="radio" label="ラベル" /> <imart type="imuiradio" name="radio" label="ラベル" /> <imart type="imuiradio" name="radio" label="ラベル" /> 注 意 詳 細 は スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント の imuicheckbox imuiradio を 参 照 してください 共 通 ルール 配 置 する 際 に スペースや HTML タグによる 空 白 の 調 整 は 不 要 です CSS で margin: px px 0px 0px; を 指 定 しています 選 択 不 可 の 場 合 テキストボックスに 準 拠 します セレクトボックス(imuiSelect) 外 観 と 基 本 的 なソース サーバサイド JavaScript

33 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 var samplelist = [ { type: "group", label: "グループラベ ル", list: [ { label: "ラベル", value: "value", { label: "ラベル", value: "value", { label: "ラベル", value: "value" ], { label: "ラベル", value: "value", { label: "ラベル", value: "value", { label: "ラベル6", value: "value6" ]; HTML ソース <imart type="imuiselect" list=samplelist /> 注 意 詳 細 は スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント の imuiselect を 参 照 してください ルール 入 力 ヒントを 記 述 しましょう 表 示 方 法 : optgroup(type: group )を 使 用 し リストの 行 目 に 表 示 します 体 言 止 めにしてください ( 例 :ロケールを 選 択 ) imuiselect をクリックし リストを 表 示 すると optgroup が 表 示 されます 表 示 方 法 : imuiselect の 右 側 または 近 くにラベルで 表 示 します 基 本 的 に 体 言 止 めとします ( 例 :ロケールを 選 択 ) ユーザビリティを 考 慮 し 敬 体 表 示 も 可 とします ( 例 :ロケールを 選 択 してください) 項 目 名 で 完 結 している 場 合 は 不 要 です リストを 生 成 する 際 のデータはソート 順 を 指 定 して 取 得 してください 入 力 ヒント( placeholder ) の 表 示 テキストボックスやテキストエリアの 入 力 ヒント( placeholder )について 説 明 します ソース 例 <imart type="imuitextbox" placeholder="ユーザ 氏 名 ユーザカナを 入 力 してください " /> 画 面 ルール placeholder (プレースホルダー)は テキストボックス テキストエリアの 入 力 欄 に 初 期 値 として 表 示 される 文 字 列 です 入 力 ヒントや 操 作 ヒントとして 使 用 します

34 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 placeholder が 非 表 示 の 状 態 で 入 力 内 容 がわからない 場 合 は 項 目 名 の 表 示 や ラベルでヒントを 明 示 してください placeholder の 未 対 応 のブラウザもあります width を placeholder に 合 わせる 必 要 はありません 入 力 桁 数 や 画 面 デザイン( 全 体 のテキストボックスの 横 幅 )を 考 慮 してください 入 力 項 目 にラベルが 無 い 画 面 の 構 成 上 ラベルが 付 けられない 場 合 のヒント 入 力 OK: ユーザコード ユーザ 名 を 入 力 してください 入 力 項 目 のラベルを 見 ても 入 力 値 が 想 像 しづらい 場 合 のヒント 文 章 の 場 合 は 敬 体 (です/ます)を 推 奨 します 入 力 OK: 画 面 上 に 表 示 される 名 前 です スペース 区 切 りで 単 語 を 複 数 指 定 できます ユーザに 入 力 フォーマットを 指 示 する 場 合 入 力 OK: (ハイフン 不 要 ) 000/0/0 YYYY/MM/DD( 例 : 0/0/0 ) 入 力 NG: YYYY-mm-dd (エンドユーザが 利 用 する 画 面 では 専 門 用 語 は 避 けてください) コラム xxして 下 さい( 実 質 動 詞 ) ではなく xxしてください( 補 助 動 詞 ) と 平 仮 名 で 記 述 します Tab キーによる 移 動 順 序 ( tabindex ) Tab キーによるフォーカスの 移 動 順 序 を tabindex 属 性 について 説 明 します 基 本 的 には tabindex の 指 定 は 不 要 です (Tab キーで 移 動 は 左 上 から 右 下 に 流 れるため) ただし 画 面 の 構 造 上 フォーカス 移 動 の 順 番 を 指 定 したい 場 合 は tabindex を 指 定 してください tab キーによる 移 動 で フォーカスをあてたくない 部 品 は tabindex= - を 指 定 してください 文 字 寄 せ( align ) 対 象 :テキストボックス テキストエリア 文 字 の 寄 せは 以 下 のとおりとします 種 類 数 値 文 字 列 日 付 / 日 時 区 分 /コード 文 字 寄 せ 右 寄 せ 左 寄 せ 左 寄 せ 左 寄 せ 文 字 寄 せを 指 定 するには 以 下 の CSS クラスを 指 定 してください 文 字 寄 せ class 左 寄 せ 不 要 [] 中 央 寄 せ align-c 右 寄 せ align-r [] CSSの 継 承 により 左 寄 せにならない 場 合 align-l を 指 定 してください コラム align-c align-r align-l は それぞれ UIコンポーネントのCSSモジュールです 詳 細 は 以 下 を 参 照 してください CSS Module List の 文 字 寄 せ( 左 ).align-l CSS Module List の 文 字 寄 せ( 中 央 ).align-c CSS Module List の 文 字 寄 せ( 右 ).align-r 必 須 入 力 の 表 記 方 法 入 力 項 目 が 必 須 入 力 かどうか 判 別 できるようにしましょう 以 下 のように HTML に 記 述 します HTML

35 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <table class="imui-form"> <tbody> <tr> <th><label class="imui-required"> 必 須 項 目 </label> </th> <td><input type="text" name="item"></td> </tr> <tr> <th><label> 項 目 </label></th> <td><input type="text" name="item"></td> </tr> </tbody> </table> 画 面 上 には 必 須 項 目 * と 表 示 されます コラム intra-mart Accel Platform では CSS クラスを 用 意 しています 以 下 が 有 効 になります.imui-required: after { color: #e00; content: " *"; コラム CSS Module List の 必 須 入 力 記 号 label.imui-required にて 同 じ 情 報 を 公 開 しています ボタン 本 章 では ボタンの 配 置 サイズについて 説 明 します 項 目 imuibutton と CSS クラスでボタン 作 成 ボタンのサイズ 種 類 と CSS クラス ボタン 配 置 登 録 画 面 編 集 画 面 処 理 ボタン( 登 録 / 更 新 / 削 除 ボタン) 入 力 補 助 呼 出 し ダイアログ 検 索 画 面 ( 検 索 条 件 エリア) imuibutton と CSS クラスでボタン 作 成 intra-mart Accel Platform では UIコンポーネントとして imuibutton を 用 意 しています また CSSモジュールとして ボタンの 複 数 サイズ 用 意 しています 本 章 では 基 本 的 なボタンの 記 述 方 法 を 説 明 します 詳 細 は 以 下 を 参 照 してください スクリプト 開 発 向 けタグライブラリのPC 版 UIコンポーネント の imuibutton CSS Module List の ボタン HTML 実 装 例 <imart type="imuibutton" value="ボタン" class="imui-medium-button" /> 画 面 上 には 以 下 のように 表 示 されます

36 ボタンのサイズ 種 類 と CSS クラス ボタンのサイズは 種 類 用 意 しています 以 下 にボタンの 種 類 と CSS の クラス を 下 記 にまとめます intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 ボタンの 種 類 class 画 面 上 の 表 示 大 imui-large-button 中 imui-medium-button 小 imui-small-button 通 常 imui-button コラム ボタンは imuibutton の 使 用 を 推 奨 します しかし やむをえず HTML タグの input タグ button タグ を 使 用 する 場 合 上 記 の CSS クラスを 使 用 してください intra-mart Accel Platform の 統 一 されたデザインのボタンを 配 置 できます コラム CSS クラスの 詳 細 は CSS Module List の ボタン を 参 照 してください ボタン 配 置 配 置 する 順 番 は 左 から 重 要 度 頻 度 などが 高 いものから 配 置 します 登 録 画 面 編 集 画 面 処 理 ボタン( 登 録 / 更 新 / 削 除 ボタン) ボタンサイズ ボタンサイズの 基 本 は 大 とします ボタン 配 置 画 面 下 部 の 中 央 配 置 とします CSS Module List のボタン 配 置 エリア.imui-operation-parts と 組 み 合 わせると 簡 単 に 配 置 できます 下 記 の HTML ソースを 参 照 してください <div class="imui-operation-parts"> <imart type="imuibutton" value=" 登 録 " class="imui-largebutton"> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 更 新 " class="imui-largebutton"> <imart type="imuibutton" value=" 削 除 " class="imui-largebutton"> 入 力 補 助 呼 出 し 連 続 登 録 が 可 能 な 登 録 画 面 は 左 から 登 録 ボタン 連 続 登 録 ボタン とします 編 集 画 面 の 配 置 順 番 は 左 から 更 新 ボタン 削 除 ボタン とします 本 章 は ボタンについての 説 明 ですが 本 項 に 関 しては 関 連 する 文 字 リンクなどもあわせて 説 明 します 入 力 補 助 画 面 を 呼 出 し 方 法 ボタン 文 字 リンク アイコン アイコン+ 文 字 リンクいずれかを 使 用 します ボタンの 場 合 6

37 ダイアログ ボタンサイズの 基 本 は 通 常 とします 配 置 はテキストボックス 等 入 力 フォーム 部 品 右 隣 とします 文 字 リンクの 場 合 配 置 はテキストボックス 等 入 力 フォーム 部 品 右 隣 とします アイコンの 場 合 配 置 はテキストボックス 等 入 力 フォーム 部 品 右 隣 とします アイコンのみの 処 理 ボタンの 場 合 title 属 性 を 必 ず 指 定 します (ユーザビリティ 向 上 のため 画 像 のみに 意 味 を 持 たせないようにしてください ) アイコン+ 文 字 リンクの 場 合 配 置 はテキストボックス 等 入 力 フォーム 部 品 右 隣 とします 左 からアイコン 文 字 リンクの 順 に 並 べます 処 理 ボタン ボタンサイズ ボタンサイズの 基 本 は 中 とします ボタン 配 置 配 置 は 右 下 配 置 とします 入 力 補 助 呼 出 し 登 録 画 面 に 従 います 検 索 画 面 ( 検 索 条 件 エリア) 簡 単 検 索 詳 細 検 索 ボタンサイズ ボタンサイズの 基 本 は 通 常 とします ボタン 配 置 配 置 はテキストボックス 等 入 力 フォーム 部 品 右 隣 とします ボタンサイズ ボタンサイズの 基 本 は 中 とします ボタン 配 置 配 置 は 右 下 配 置 とします intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 処 理 リンク/ 処 理 アイコン 本 章 では 処 理 リンク/ 処 理 アイコンについて 説 明 します ツールバー の 処 理 リンク/ 処 理 アイコン 配 置 方 法 まとめ ではツールバーに 関 してのみ 記 述 しています 本 章 では 汎 用 的 に 使 用 する 処 理 リンク/ 処 理 アイコンを 説 明 します 項 目 配 置 ルール 処 理 アイコンの 表 現 方 法 と 実 装 例 アイコン アイコン+ 文 字 リンク 文 字 リンク 文 字 リンクの CSS クラス 配 置 ルール 処 理 アイコン/ 処 理 リンクは 一 覧 テーブルの 処 理 アイコン 群 一 覧 テーブルのセル 入 力 フォーム 等 に 使 用 します 配 置 の 優 先 度 は 左 から 重 要 度 頻 度 などが 高 いものから 順 番 に 配 置 します 処 理 アイコン/ 処 理 リンクの 周 りは 誤 ってクリックしないよう 空 白 を 設 けましょう 反 対 の 意 味 の 処 理 アイコン/ 処 理 リンクを 配 置 する 場 合 処 理 アイコン/ 処 理 リンクのサイズを 十 分 とってください 処 理 アイコン/ 処 理 リンクの 周 りに 空 白 をおくようにします 6px x 6px のアイコンは 小 さいため ユーザによりわかりづらかったり 誤 った 操 作 が 発 生 することがあります よって アイコン+ 文 字 リンク を 推 奨 します 処 理 アイコン/ 処 理 リンクの 隙 間 を 0px 以 上 開 けてください 処 理 アイコンの 表 現 方 法 と 実 装 例 処 理 リンク/ 処 理 アイコンの 配 置 の 表 現 は 以 下 の 通 りあります 7

38 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 表 現 方 法 アイコン アイコン+ 文 字 リンク 文 字 リンク 以 下 は 処 理 リンク/ 処 理 アイコンを つ 並 べた 場 合 と つ 並 べた 場 合 の 実 装 例 です ml- ml-0 は 空 白 を 設 けるための 調 整 用 です 必 要 に 応 じて 使 用 します 複 数 配 置 する 場 合 や 一 覧 表 の 左 上 に 配 置 する 場 合 は CSS Module List の 操 作 リストエリア.imui-operation-list の 中 に <ul> を 使 って 記 述 します アイコン 以 下 のとおり HTML コーディングを 行 います つの 場 合 <a href="aa" title="bb"><span class="cc"></span></a> つの 場 合 6 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-" title="bb"><span class="cc"></span></a></li> <li><a href="aa" class="ml-0" title="bb"><span class="cc"></span></a> </li> </ul> AA BB 遷 移 先 を 指 定 ツールチップの 表 示 内 容 CC CSS Sprite の class 指 定 注 意 アイコンのみの 表 示 の 場 合 ツールチップを 指 定 しましょう 国 によって 記 号 やジェスチャの 考 え 方 が 異 なるため 誤 解 を 招 かないための 対 策 と してください アイコン+ 文 字 リンク 以 下 のとおり HTML コーディングを 行 います つの 場 合 <a href="aa" class="mr-"><span class="bb mr-"></span>cc</a> つの 場 合 6 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-"><span class="bb mr-"></span>cc</a></li> <li><a href="aa" class="ml-0"><span class="bb mr-"></span>cc</a> </li> </ul> AA BB 遷 移 先 を 指 定 CSS Sprite の class 指 定 CC 文 字 リンクの 表 示 内 容 文 字 リンク 以 下 のとおり HTML コーディングを 行 います つの 場 合 8

39 <a href="aa">bb</a> intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 つの 場 合 6 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-">bb</a></li> <li><a href="aa" class="ml-0">bb</a> </li> </ul> AA 遷 移 先 を 指 定 BB 文 字 リンクの 表 示 内 容 文 字 リンクの CSS クラス intra-mart Accel Platform は 文 字 リンクを 種 類 用 意 しています 通 常 a タグを 指 定 すると 自 動 で 青 字 (hover で+ 下 線 )となります よって 通 常 の 文 字 リンクにおいては CSS クラス の 指 定 は 不 要 になります ただし 表 現 箇 所 により 黒 字 青 字 をあえて 指 定 する 場 合 は 下 記 を 指 定 してください ( 例 :メニューでグラデーションがあるので 文 字 色 不 要 class= imui-unaccented を 指 定 してください) 種 類 class 指 定 なし class= imui-accent class= imui-unaccented デフォルト 青 字 青 字 黒 字 訪 問 済 青 字 青 字 黒 字 未 訪 問 青 字 青 字 黒 字 マウスオーバ 淡 青 字 + 下 線 淡 青 字 + 下 線 濃 灰 色 字 + 下 線 アクティブ 淡 青 字 + 下 線 淡 青 字 + 下 線 濃 灰 色 字 + 下 線 コラム ツールバーでは 文 字 リンクは 黒 字 になります 青 字 にしたい 場 合 は a タグにclass= imui-accent を 指 定 します <a href="aa" class="imui-accent">bb</a> 以 下 の 外 部 ドキュメントにて 情 報 公 開 しています CSS Module List の 文 字 リンク( 標 準 色 ) a.imui-accent CSS Module List の 文 字 リンク( 黒 文 字 ) a.imui-unaccented エンターキー 押 下 時 のフォームの 動 作 本 章 では サブミットについて 説 明 します 項 目 form のサブミット 方 法 エンターキー 押 下 時 にサブミットさせる form のサブミット 方 法 form のサブミットを 行 うにはいくつかの 方 法 がありますが intra-mart Accel Platform では 以 下 の 方 法 でサブミットします imuibutton または input type= button を 配 置 します click イベントで form.submit() を 実 行 します imuiajaxsend を 実 行 します imuiajaxsubmit を 実 行 します input type= submit はお 勧 めしません 理 由 は 以 下 の 通 りです 9

40 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 エンターキー 押 下 でサブミットされる imuiconfirm を 呼 び 出 そうとしても サブミットが 先 に 実 行 されてしまい 確 認 ダイアログが 表 示 されない もし input type= submit を 利 用 する 際 には 以 下 のとおり onsubmit 属 性 で return false; を 記 述 してください <form onsubmit="return false;">... </form> エンターキー 押 下 時 にサブミットさせる 検 索 画 面 などでエンターキー 押 下 時 にサブミットさせたいときは input type= submit を 利 用 しましょう ただし form のサブミット 方 法 で 注 意 書 きした 通 り imuiconfirm を 呼 び 出 そうとしても 確 認 ダイアログが 表 示 されないことに 注 意 してください <form> <input type="submit"/> </form> アラートとコンファーム 本 章 は アラートとコンファームについて 説 明 します 項 目 実 装 方 法 imuialert imuiconfirm と messagedialog の 違 い ボタン 配 置 ダイアログのタイトル 表 示 アイコン メッセージルール コンファームの 画 面 例 注 意 intra-mart Accel Platform ではデザイン 統 一 のために 基 本 的 に window.alert と window.confirm を 利 用 しません 実 装 方 法 window.alert() にあたる 警 告 ダイアログは クライアントサイド JavaScript の imuialert を 使 用 します window.confirm() にあたる 確 認 ダイアログは クライアントサイド JavaScript の imuiconfirm を 使 用 します その 他 は クライアントサイド JavaScript の imuimessagedialog を 使 用 します imuialert imuiconfirm と messagedialog の 違 い imuialert imuiconfirm と messagedialog の 違 いは 以 下 の 通 りです UIコンポーネント 名 imuialert imuiconfirm messagedialog アイコンの 変 更 不 可 不 可 可 能 ボタンのラベル 変 更 不 可 不 可 可 能 ボタンの 数 変 更 不 可 不 可 可 能 ボタンの 数 一 つ 二 つ 任 意 imuialert は 警 告 メッセージを 表 示 したい 時 に 使 用 します 決 定 ボタンを 表 示 します 0

41 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 imuiconfirm は 確 認 メッセージを 行 いたい 時 に 使 用 します 決 定 ボタンと 取 り 消 し ボタンを 表 示 します messagedialog は 上 記 の UI コンポーネントで 表 現 できないメッセージを 表 示 する 時 に 使 用 します ボタン 配 置 imuialert imuiconfirm の 場 合 ボタンの 配 置 は 変 更 できません messagedialog の 場 合 決 定 取 り 消 し のボタンを 配 置 します ただし 画 面 の 内 容 に 対 し ボタン 名 が 合 わない 場 合 は 入 力 確 定 登 録 など 変 更 します ボタン 名 は 機 能 内 で 統 一 します ダイアログのタイトル 入 力 エラー 登 録 確 認 のように 体 言 止 め で 設 定 します 表 示 アイコン imuialert imuiconfirm の 場 合 以 下 のアイコンが 表 示 されます 変 更 はできません 表 示 アイコン UIコンポーネント 名 imuialert imuiconfirm メッセージ 例 削 除 対 象 のXXXを 選 択 してください 登 録 します よろしいですか コラム 詳 細 は クライアントサイド JavaScript の 以 下 を 参 照 してください imuialert imuiconfirm messagedialog の 場 合 アイコンは CSS Sprite の class を 指 定 します アイコンとメッセージの 関 連 付 けは 以 下 で 統 一 します 表 示 アイコン 意 味 処 理 を 続 行 できない 失 敗 エラーなど ユーザ 操 作 により 処 理 を 続 行 できる 警 告 など メッセージ 例 処 理 に 失 敗 しました 登 録 できませんでした 削 除 対 象 のXXXを 選 択 してください 正 常 成 功 など 処 理 が 正 常 に 終 了 処 理 に 成 功 しました 登 録 しました 確 認 など ユーザ 操 作 の 続 行 を 確 認 登 録 します よろしいですか CSS Sprite の 指 定 方 法 span タグの class 属 性 に CSS Sprite の class 名 を 指 定 します <span class="css Spriteのclass 名 "></span> intra-mart Accel Platform が 提 供 するアイコンリストは CSS Sprite Image List の PC 向 け を 参 照 してください アイコンサイズは 6 pxを 用 意 しています 画 面 によりサイズを 選 んでください メッセージ 性 を 伝 えるために px または px をおすすめします 以 下 に 表 示 アイコンに 対 して 該 当 の CSS Sprite の class 名 ( px )をまとめました

42 表 示 アイコン intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 CSS Sprite の class 名 im-ui-icon-common--error im-ui-icon-common--warning im-ui-icon-common--confirmation im-ui-icon-common--question コラム imuimessagedialog の 詳 細 は クライアントサイド JavaScript の imuimessagedialog を 参 照 してください メッセージルール メッセージの 文 章 は 敬 体 です ます で 文 章 を 記 載 します 画 面 遷 移 本 章 では 画 面 遷 移 について 説 明 します 項 目 作 成 ルール 画 面 遷 移 パターン( 基 本 編 ) 新 規 登 録 画 面 更 新 画 面 削 除 画 面 編 集 画 面 で 削 除 一 覧 画 面 で 削 除 注 意 事 項 画 面 遷 移 パターン( 応 用 編 ) 新 規 登 録 画 面 ( 確 認 画 面 有 ) 編 集 画 面 ( 確 認 画 面 有 ) 参 照 画 面 ( 例 外 ) 画 面 遷 移 データ 保 持 検 索 条 件 ページ 番 号 ページ 件 数 ソート 順 登 録 画 面 / 編 集 画 面 例 外 的 処 置 作 成 ルール 以 下 は intra-mart Accel Platform の 画 面 遷 移 の 基 本 ルールです intra-mart Accel Platform は 参 照 画 面 を 用 意 しません データの 参 照 は 更 新 画 面 で 行 います 画 面 遷 移 図 の は 処 理 確 認 の コンファーム です トランザクションが 発 生 する 場 所 では 表 示 することを 推 奨 します ただし 連 続 登 録 をする 場 合 など ユーザビリティが 低 下 する 箇 所 は コンファーム 不 要 とします 新 規 登 録 画 面 / 更 新 画 面 の 呼 び 出 しは 画 面 遷 移 /ダイアログウィンドウどちらでも 可 能 です ただし 各 要 件 での 統 一 をしてください 画 面 遷 移 パターン( 基 本 編 ) 画 面 遷 移 で 基 本 的 なものを 画 面 種 類 ごとに 説 明 します

43 コラム intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 画 面 遷 移 図 の は 処 理 確 認 の コンファーム です コンファームの 詳 細 は アラートとコンファーム を 参 照 してください 新 規 登 録 画 面 新 規 登 録 画 面 から 画 面 遷 移 するパターンは 以 下 のようになります 配 置 内 容 配 置 場 所 新 規 登 録 リンク ツールバー 戻 る アイコン ツールバー 登 録 ボタン 画 面 下 部 中 央 更 新 画 面 更 新 画 面 画 面 から 画 面 遷 移 するパターンは 以 下 のようになります 配 置 内 容 配 置 場 所 編 集 アイコン 一 覧 表 の 編 集 列 文 字 リンク 一 覧 表 の 任 意 列 戻 る アイコン ツールバー 更 新 ボタン 画 面 下 部 中 央 削 除 画 面 編 集 画 面 と 削 除 画 面 でそれぞれの 画 面 遷 移 するパターンは 以 下 のようになります 編 集 画 面 で 削 除 配 置 内 容 配 置 場 所 編 集 アイコン 一 覧 表 の 編 集 列 文 字 リンク 一 覧 表 の 任 意 列 戻 る アイコン ツールバー

44 配 置 内 容 配 置 場 所 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 削 除 ボタン 画 面 下 部 中 央 一 覧 画 面 で 削 除 配 置 内 容 配 置 場 所 削 除 アイコン 一 覧 表 の 削 除 列 一 括 削 除 リンク 一 覧 表 の 左 上 注 意 事 項 削 除 方 法 は ユーザビリティ 考 慮 してどちらか 一 方 でも 双 方 配 置 も 可 能 です ただし 利 用 ユーザの 単 位 や 機 能 のまとまりを 考 慮 してください マスタ 画 面 Aでは 編 集 画 面 で 削 除 マスタ 画 面 Bでは 一 覧 で 削 除 だとユーザに 違 和 感 を 与 えます 画 面 遷 移 パターン( 応 用 編 ) 業 務 システムの 利 用 方 法 を 考 慮 した 場 合 下 記 確 認 画 面 を 挟 む 画 面 遷 移 を 選 択 することも 考 慮 します 確 認 画 面 を 挟 む 事 で 一 度 ユーザに 入 力 内 容 を 考 えさせることも 可 能 です 新 規 登 録 画 面 ( 確 認 画 面 有 ) 確 認 ダイアログがある 場 合 の 新 規 登 録 画 面 からの 画 面 遷 移 は 以 下 のようになります 編 集 画 面 ( 確 認 画 面 有 ) 確 認 ダイアログがある 場 合 の 編 集 画 面 からの 画 面 遷 移 は 以 下 のようになります 参 照 画 面 ( 例 外 ) intra-mart Accel Platform の 基 本 ルールでは 参 照 画 面 を 用 意 しません しかし 各 機 能 内 で 用 意 する 時 は 下 記 遷 移 方 法 とします 画 面 遷 移 データ 保 持

45 画 面 遷 移 時 に データ 保 持 は 次 画 面 まで 保 持 とします 詳 細 は 以 下 のとおりとします intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 検 索 条 件 一 覧 画 面 から 遷 移 した 画 面 で 戻 る クリック 時 保 持 した 状 態 を 表 示 します 登 録 / 更 新 / 削 除 ボタンクリック 後 一 覧 画 面 が 表 示 された 時 初 期 表 示 とします ページ 番 号 ページ 件 数 ソート 順 一 覧 画 面 から 遷 移 した 画 面 で 戻 る クリック 時 保 持 した 状 態 を 表 示 します 登 録 / 更 新 / 削 除 ボタンクリック 後 一 覧 画 面 が 表 示 された 時 初 期 表 示 とします ページャの 操 作 時 は ページ 件 数 ソート 順 を 保 持 します 登 録 画 面 / 編 集 画 面 確 認 画 面 を 設 けた 場 合 確 認 画 面 から 戻 った 時 保 持 した 状 態 を 表 示 します 登 録 / 更 新 / 削 除 ボタンクリック 後 一 覧 画 面 が 表 示 された 時 初 期 表 示 とします 例 外 的 処 置 ユーザビリティが 低 下 する 場 合 は データ 保 持 をしてください 例 : 一 覧 で searchitem の 入 ったデータを 一 括 削 除 したい searchitem 検 索 ページ 上 全 選 択 削 除 を 繰 り 返 します searchitem 検 索 の 後 ページ 上 全 選 択 削 除 を 繰 り 返 します エラー 処 理 バリデーション jquery Validation を 利 用 したクライアント 側 でのバリデーションをかけることができます バリデーションをかける 場 合 通 常 はクライアント 側 とサーバ 側 の 両 方 にバリデーションを 実 装 します Jssp Validator と 連 携 すると サーバ 側 に 設 定 ファイルを 書 くだけでサーバ 側 とクライアント 側 の 両 方 に 共 通 なバリデーションをかけられることになります なお クライアント 側 だけで 完 結 させることも 可 能 です この 場 合 は jquery Validation の 記 述 方 法 に 則 ったルール メッセージをクライアント 側 で 実 装 することになります 注 意 Jssp Validatorはスクリプト 開 発 モデルのみで 利 用 できます 項 目 前 提 JSSP Validation と 連 携 する 場 合 実 装 例 バリデーション 設 定 ファイルの 記 述 imuivalidationrule タグの 記 述 imuivalidation 関 数 の 記 述 クライアント 側 だけで 完 結 させる 場 合 実 装 例 必 須 チェックに 該 当 した 場 合 最 小 長 さチェックに 該 当 した 場 合 バリデーションをリセットする 方 法 前 提 バリデーションは jquery Validation Plugin を 利 用 します ライブラリは 自 動 的 に 読 み 込 まれません バリデーションを 利 用 する 際 は 以 下 のような 実 装 を 行 ってください

46 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"> </script> </imart> JSSP Validation と 連 携 する 場 合 Jssp Validator の 設 定 ファイルをクライアント 側 に 読 み 込 み jquery Validation Plugin の 設 定 に 変 換 することで サーバ 側 とクライアント 側 とでバリデーションの ルールを 共 有 することができます 共 有 するには バリデーション 設 定 ファイル の 記 述 imuivalidationrule タグの 記 述 imuivalidate 関 数 の 呼 び 出 しが 必 要 です 注 意 JSSP Validationに 独 自 に 追 加 したバリデーションルールは クライアント 側 で 共 有 することができません クライアント 側 で 同 じバリデーションを 行 いたい 場 合 は クライアント 側 でも 同 様 のルールを 定 義 してください クライアント 側 のカスタムバリデーションについては クライアントサイド JavaScript の imuiaddvalidationrule を 参 照 してください 実 装 例 以 下 のような HTML を 例 に 取 り user_cd に 対 して user_cd バリデーションをかけます 6 <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> バリデーション 設 定 ファイルの 記 述 項 目 user_cd に 対 して usercd バリデーションをかける というバリデーション 設 定 ファイルを 作 成 します バリデーション 設 定 ファイルとして 以 下 のようなファイルを WEB-INF/jssp/src/validator/sample.js として 保 存 します 設 定 ファイルの 内 容 の 詳 細 は バリデーションルール を 参 照 してください 6 var init = { 'user_cd': { caption: 'user_cd', usercd: true コラム JSSP Validator の file mimetype ルールは クライアントサイド JavaScript バリデーション( imuivalidate )では 動 作 しませんので 注 意 してく ださい imuivalidationrule タグの 記 述 上 記 で 作 成 したバリデーション 設 定 ファイルを 読 み 込 むために imuivalidationrule タグを HTML に 追 記 します imuivalidationrule タグの rule 属 性 に バリデーション 設 定 ファイルのパスを 指 定 します また 後 述 の imuivalidate 関 数 の 引 数 となる rulesname, messagesname 属 性 も 指 定 します <imart type="head"> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="validator/sample#init" rulesname="rules" messagesname="messages"></imart> </imart> <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> コラム imuivalidationrule タグは script タグを 出 力 するので script タグの 内 部 に 書 いてはいけません 6

47 imuivalidation 関 数 の 記 述 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 バリデーションを 実 行 するため imuivalidate 関 数 の 呼 び 出 しを 追 記 します imuivalidate 関 数 の 引 数 に form の id imuivalidationrule タグの rulesname messagesname に 指 定 した 値 のつを 指 定 します <imart type="head"> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="validator/sample#init" rulesname="rules" messagesname="messages"> </imart> <script type="text/javascript"> jquery(document).ready(function() { jquery('#validate-button').click(function() { imuivalidate('#sampleform', rules, messages); ); ); </script> </imart> <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> テキストボックスにひらがなを 入 力 し validate ボタンをクリックするとエラーが 表 示 されます クライアント 側 だけで 完 結 させる 場 合 クライアント 側 だけで 完 結 させる 場 合 jquery Validation Plugin のルール メッセージの 指 定 の 仕 方 に 則 って 実 装 します 使 用 できるバリデーションルールは バリデーション 設 定 ファイル と 同 様 です 実 装 例 バリデーションのルールと バリデーションの 結 果 チェックにかかった 場 合 のメッセージを 指 定 します 指 定 しない 場 合 メッセージは 英 語 で 表 示 されます var rules = { user_cd: { required: true, minlength:, ; var messages = { user_cd: { required: ' 必 須 です', minlength: ' 少 なくとも 文 字 必 要 です' ; imuivalidate( '#account', // 送 信 するフォームのID rules, // バリデーションルール messages // バリデーションメッセージ ); 上 記 のように 指 定 した 場 合 user_cd のバリデーションルールに 該 当 した 際 に 同 じキーのメッセージが 表 示 されます 必 須 チェックに 該 当 した 場 合 最 小 長 さチェックに 該 当 した 場 合 バリデーションをリセットする 方 法 imuivalidate を 実 行 すると 対 象 フォームに 対 し 常 にチェックをかけるようになるため 一 度 投 稿 処 理 をしてからでも 画 面 を 再 読 込 みしない 限 り 常 にチェックがかかります この 動 作 を 変 える 必 要 がある 場 合 imuiresetform メソッドでチェックをかけた form を 初 期 化 してください 7

48 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // バリデーションチェックに 成 功 したら 投 稿 処 理 dosomething(); // バリデーションのリセット imuiresetform('#form');... 汎 用 メッセージ 画 面 アプリケーション 内 で 発 生 したエラーによっては 回 復 不 能 な 場 合 があります このような 場 合 に 表 示 する 画 面 と その 画 面 に 遷 移 するための API を 提 供 します 項 目 API 実 装 例 汎 用 エラー 画 面 表 示 後 の 戻 り 先 画 面 汎 用 エラー 画 面 の 戻 る ボタンを 表 示 する 場 合 エラー 画 面 の 戻 る ボタンを 表 示 しない 場 合 API 表 示 できるメッセージ 表 示 画 面 の 種 類 その 画 面 に 遷 移 するための API は 以 下 のとおりです エラー Transfer.toErrorPage 警 告 Transfer.toWarningPage インフォメーション Transfer.toInformationPage メッセージ 表 示 画 面 に 表 示 できるのは 以 下 つです タイトル メッセージ 詳 細 なエラーメッセージ また メッセージ 表 示 画 面 表 示 後 の 遷 移 先 を 指 定 することも 可 能 です 遷 移 先 URL 遷 移 先 URL のラベルを 指 定 すると 画 面 遷 移 のボタンが 表 示 されます 遷 移 先 URL へ 引 き 渡 すパラメータを 指 定 すると そのパラメータが 遷 移 先 に 引 き 渡 されます メッセージ 表 示 画 面 へはリダイレクトを 利 用 して 遷 移 します 実 装 例 エラー 画 面 へ 遷 移 するための 例 を 示 します パラメータの 詳 細 は API リファレンスを 参 照 してください 8

49 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 function error(request) { Transfer.toErrorPage({ title: 'タイトル', message: 'メッセージ', detail: [' 詳 細 メッセージ', ' 詳 細 メッセージ '], returnurl: '/login', // 戻 り 先 URL returnurllabel: 'ログイン 画 面 へ 戻 る', parameter: { key: 'value', list: ['','',''] ); コラム 上 記 パラメータのメッセージは 多 言 語 対 応 していません 多 言 語 対 応 したい 場 合 は MessageManager から 取 得 したメッセージをセットしてください コラム テーマを 適 用 させたくない 場 合 には API を 呼 び 出 す 前 に request.setattribute( imui-theme-builder-module, notheme ) を 実 行 し テーマを 適 用 し ないようにしてください 汎 用 エラー 画 面 表 示 後 の 戻 り 先 画 面 汎 用 メッセージ 画 面 の 仕 組 みで 表 示 したエラー 画 面 の 戻 り 先 を 説 明 します 注 意 本 章 は 基 本 ルールです 個 別 の 機 能 の 事 情 で 従 うのが 無 理 な 場 合 は 従 う 必 要 はありません ただし 機 能 内 での 統 一 性 は 担 保 してください 汎 用 エラー 画 面 の 戻 る ボタンを 表 示 する 場 合 ( 例 ) メニュー 一 覧 画 面 登 録 / 更 新 画 面 の 様 な 画 面 遷 移 登 録 / 更 新 画 面 でエラーが 発 生 し 汎 用 エラー 画 面 に 遷 移 した 場 合 エラーが 発 生 した 画 面 の 遷 移 元 に 戻 る ( 一 覧 画 面 ) 遷 移 元 が 複 数 階 層 ある 場 合 は ( 可 能 であれば)エラーが 発 生 した 画 面 に 一 番 近 い 遷 移 元 に 遷 移 します エラー 画 面 の 戻 る ボタンを 表 示 しない 場 合 ( 例 ) メニュー 一 覧 画 面 登 録 / 更 新 画 面 の 様 な 画 面 遷 移 一 覧 画 面 でエラーが 発 生 し 汎 用 エラー 画 面 に 遷 移 した 場 合 戻 る ボタンを 表 示 しません Ajax のエラー 処 理 Ajax の 通 信 先 で 回 復 不 能 なエラーが 発 生 した 場 合 エラー 画 面 へ 遷 移 したい 場 合 があります ここではこのような 場 合 にエラー 画 面 へ 遷 移 するための 仕 組 みと 実 装 方 法 を 説 明 します 項 目 エラー 画 面 へ 遷 移 するための 仕 組 み 実 装 方 法 独 自 のエラー 処 理 をしながらエラー 画 面 へ 遷 移 したい エラー 画 面 へ 遷 移 するための 仕 組 み サーバ 側 で 例 外 が 発 生 すると httpxxx.jsp(http00.jsp, http0.jsp など)が 呼 び 出 されます Ajax のリクエストの 場 合 httpxxx.jsp のレスポンスは Ajax 内 で 閉 じるため 画 面 にエラーが 表 示 されません Ajax のリクエストでもエラー 画 面 に 遷 移 するため 以 下 のような 仕 組 みを 実 装 しています. Ajax のリクエストを 送 る 際 に HTTP Header へ x-jp-co-intra-mart-ajax-request-from-imui-form-util = true をセットする. サーバで 例 外 が 発 生 した 際 httpxxx.jsp は HTTP Header へ x-jp-co-intra-mart-ajax-request-to-imui-form-util = true をセットし エラー 情 報 を JSON と 9

50 してレスポンスを 返 す intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 $.ajax の error: で x-jp-co-intra-mart-ajax-request-to-imui-form-util が HTTP Header に 存 在 する 場 合 エラー 情 報 をパースし エラー 情 報 を Form に セットして 元 の 画 面 (httpxxx.jsp)へサブミットする. 画 面 にサーバで 発 生 した 例 外 が 表 示 される 実 装 方 法 jquery.ajax の headers, error に 以 下 のように 指 定 します 6 $.ajax({..., headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true', error: imuitransitiontoerrorpage,... ); このように 実 装 することで サーバで 例 外 が 発 生 した 際 にエラー 画 面 へ 遷 移 させることができます 独 自 のエラー 処 理 をしながらエラー 画 面 へ 遷 移 したい 上 記 サンプルでは エラー 画 面 へ 遷 移 するだけで 他 の 処 理 はしません 独 自 の 処 理 を 追 加 したい 場 合 は 以 下 のように 実 装 することができます $.ajax({..., headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true', error: function(xmlhttprequest, textstatus, errorthrown) { // // 独 自 の 処 理 を 実 行 // imuitransitiontoerrorpage(jqxhr, textstatus, errorthrown);,... ); 国 際 化 情 報 入 力 項 目 本 章 では 国 際 化 入 力 について 記 載 します 項 目 国 際 化 情 報 の 入 力 登 録 更 新 について 入 力 項 目 の 表 示 に 関 して 国 際 化 入 力 項 目 の 仕 様 入 力 項 目 が 全 て 必 須 かつ 項 目 数 が 少 ない 場 合 入 力 項 目 が 一 部 必 須 または 項 目 数 が 多 い 場 合 画 面 からの 入 力 および 登 録 更 新 処 理 に 関 して バリデーションチェック 実 装 例 validator.js ( サーバサイド JavaScript ) page.js(サーバサイド JavaScript ) page.html (クライアントサイド JavaScript HTML) ajax.js (サーバサイド JavaScript ) 国 際 化 情 報 の 入 力 登 録 更 新 について ここでは 入 力 登 録 更 新 する 場 合 の 国 際 化 情 報 についてを 説 明 します 0

51 intra-mart Accel Platform でもこの 処 理 例 を 利 用 しています intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 入 力 項 目 の 表 示 に 関 して 国 際 化 入 力 項 目 の 仕 様 国 際 化 入 力 項 目 が 必 須 入 力 の 場 合 標 準 表 示 名 とシステムにインストールしているロケール 分 の 入 力 項 目 を 用 意 します 例 : 日 本 語 ロケール 英 語 ロケールに 対 応 する 場 合 標 準 表 示 名 日 本 語 英 語 の つの 入 力 項 目 が 表 示 されます 項 目 の 表 示 順 標 準 表 示 名 テナントのデフォルトロケール その 他 のロケールの 順 番 に 表 示 します テナントのデフォルトロケール 以 外 の 並 び 順 は SystemLocale#getLocaleInfos() が 返 した 順 になります テナントのデフォルトロケールが 設 定 されていない 場 合 は システムデフォルトのロケールになります 標 準 表 示 名 を 必 須 項 目 とします 各 ロケールは 任 意 入 力 項 目 とします 各 ロケールが 未 入 力 の 場 合 標 準 表 示 名 が 有 効 になります 入 力 項 目 が 全 て 必 須 かつ 項 目 数 が 少 ない 場 合 標 準 表 示 名 とシステムにインストールしているロケール 分 入 力 項 目 をすべて 表 示 します デフォルトロケール 以 外 の 言 語 ロケールを あらかじめ 隠 しておくなどの 処 理 は 一 切 しません 入 力 項 目 が 一 部 必 須 または 項 目 数 が 多 い 場 合 標 準 表 示 名 のみ 表 示 し サーバ 側 のロジックで 各 ロケールに 何 を 登 録 するか 決 定 します コラム 国 際 化 情 報 の 対 応 を 行 う 場 合 は 表 示 する 文 字 列 をプロパティファイルで 管 理 します 入 力 項 目 と 同 様 に 標 準 表 示 名 とロケール 毎 に 管 理 します 詳 細 は スクリプト 開 発 モデル プログラミングガイド の 多 言 語 対 応 を 参 照 してください 画 面 からの 入 力 および 登 録 更 新 処 理 に 関 して 国 際 化 入 力 項 目 が 必 須 入 力 の 場 合 標 準 表 示 名 は 必 須 入 力 各 ロケールは 任 意 入 力 とします 任 意 入 力 の 項 目 に 何 も 入 力 されなかった 場 合 は 標 準 表 示 名 の 項 目 値 と 同 じ 値 が 入 力 されたものとみなします 登 録 更 新 時 任 意 項 目 が 未 入 力 の 場 合 標 準 表 示 名 より 該 当 する 項 目 の 内 容 をコピーします コピー 処 理 は サーバサイド JavaScript 側 で 行 います API 内 部 でコピーは 行 ってはなりません 任 意 入 力 の 国 際 化 入 力 項 目 値 を 補 完 は サーバサイド JavaScript 側 で 行 います バリデーションチェック 国 際 化 入 力 項 目 等 動 的 に 変 化 する 項 目 に 関 しては クライアントサイド JavaScript とサーバサイド JavaScript で 独 自 チェックします それ 以 外 の 固 定 的 な 項 目 は 通 常 どおり JS Validation を 利 用 したチェックをします 実 装 例

52 validator.js ( サーバサイド JavaScript ) バリデーションルールを 記 述 します 国 際 化 入 力 項 目 は required = true に 設 定 しておきます intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 var init = { dataid : { caption: MessageManager.getMessage("CAP.UI.DEFAULT.LABEL"), required: true, maxlength: 6, dataname : { caption: MessageManager.getMessage("CAP.UI.FACILITY.CATEGORY.NAME"), maxlength: 6 ; page.js(サーバサイド JavaScript ) テナントデフォルト 言 語 または システムデフォルト 言 語 が 上 に 来 るように 調 整 します var $result = {; function init(request) { getlocaleinfo($result); function getlocaleinfo(obj) { var tenantinfomanager = new TenantInfoManager(); obj.defaultlocaleid = tenantinfomanager.gettenantinfo(true).data.locale; if (isblank(obj.defaultlocaleid)) { obj.defaultlocaleid = SystemLocale.getDefaultLocaleInfo().data.locale; obj.locales = []; var localeinfos = SystemLocale.getLocaleInfos().data; for (var i = 0; i < localeinfos.length; i++) { if (obj.defaultlocaleid == localeinfos[i].locale) obj.locales.push({ id:localeinfos[i].locale, name:localeinfos[i].displayname ); for (var i = 0; i < localeinfos.length; i++) { if (obj.defaultlocaleid!= localeinfos[i].locale) obj.locales.push({ id:localeinfos[i].locale, name:localeinfos[i].displayname ); page.html (クライアントサイド JavaScript HTML) バリデーションルール メッセージの 読 み 込 みと 動 的 バリデーションの 設 定 をします サーバ 側 に 国 際 化 項 目 を 送 る 場 合 は ベースとなる 値 (デフォルト 言 語 )と 全 言 語 分 を 個 別 で 送 ります これにより デフォルト 言 語 の 必 須 と 長 さを 自 動 でチェックできます <imart type="head"> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="sample/validator#init" rulesname="validaterules" messagesname="validatemessages" /> <script type="text/javascript"> jquery(function() { // 生 成 されたテキストボックスに name 属 性 を 付 与 します jquery("#input_form [name=datanames] input").each(function() { var newname = "dataname_" + jquery(this).attr("locale"); var caption = jquery(this).parent().prev().text(); jquery(this).attr("name", newname); // 付 与 した name 属 性 に 対 するバリデーションを 追 加 します validaterules[newname] = {caption:caption, caption :caption,maxlength: 6; );

53 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 jquery("#submit-button").click(function() { // クライアントサイドのバリデーションチェックを 行 います if (imuivalidate("#input_form", validaterules, validatemessages)) { var names = {; jquery("#input_form [name=datanames] input").each(function() { names[jquery(this).attr("locale")] = jquery(this).val(); ); jquery.ajax({ type: "POST", url: "sample/ajax", datatype: "json", data: { dataid: jquery("#input_form [name=dataid]").val(), dataname: jquery("#input_form [name=datanames] input:first").val(), datanames: ImJson.toJSONString(names), success: function(result) { if (result.error) { imuishowerrormessage(result.errormessage, result.detailmessages); return; else { imuishowsuccessmessage(result.successmessage);, error: function(request, textstatus, errorthrown) { imuishowerrormessage(request.statustext + "(" + request.status + ")", ""); ); ); ); </script> </imart> <form id="input_form" onsubmit="return false;" class="imui-form-container"> <table class="imui-form"> <tbody> <tr> <th class="wd-0"><label><imart type="message" id="cap.ui.facility.category.name" escapexml="true" escapejs="false" /></label></th> <td> <table class="imui-form" > <tbody> <tr> <th class="wd-0"><label class="imui-required" data-locale="<imart type="string" value=$bind.defaultlocaleid escapexml="true" escapejs="false" />"><imart type="message" id="cap.ui.default.label" escapexml="true" escapejs="false" /></label></th> <td><imart type="imuitextbox" name="dataid" style="width: 00px;"/></td> </tr> <tr> <td colspan=""><imart type="message" id="cap.ui.description.locale.setting" escapexml="true" escapejs="false" /></td> </tr> </tbody> </table> <table class="imui-form" name="datanames"> <tbody> <imart type="repeat" list=$result.locales item="record"> <tr> <th class="wd-0"><label><imart type="string" value=record.name /></label></th> <td><imart type="imuitextbox" locale=record.id style="width: 00px;" /></td> </tr> </imart> </tbody> </table> </td> </tr> </tbody> </table> <div class="imui-operation-parts"> <imart type="imuibutton" id="submit-button" value="%cap.ui.act.registration" class="imui-large-button" /> </form> ajax.js (サーバサイド JavaScript )

54 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 0-0-0

55 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 /** request sample/validator#init handleerrors */ function init(request) { // 国 際 化 項 目 のみ 追 加 チェック( 必 須 チェック 済 なので 長 さチェックのみ) var datanames = isblank(request.datanames)? { : ImJson.parseJSON(request.dataNames); for (var localeid in datanames) { var dataname = datanames[localeid]; var result = {; if (isstring(dataname) && dataname.length > 6) { // バリデーションエラー result = { error: true, successmessage: "", errormessage: MessageManager.getMessage('MSG.E.IWP.ASYNC.TASKQUE.ADD.SERIESQUEUE.INPUT'), detailmessages: MessageManager.getMessage("MSG.W.IWP.JSSP.VALIDATION.MAXLENGTH", MessageManager.getMessage("CAP.UI.FACILITY.CATEGORY.NAME"), "6") ; sendjsonstring(result, result.errormessage, result.detailmessages); return; result.error = false; sendjsonstring(result, MessageManager.getMessage('CAP.UI.SUCCESS.MESSAGE')); function handleerrors(request, validationerrors) { let result = { error: true, successmessage: '', errormessage: MessageManager.getMessage('MSG.E.IWP.ASYNC.TASKQUE.ADD.SERIESQUEUE.INPUT'), detailmessages: validationerrors.getmessages() ; sendjsonstring(result, result.errormessage, result.detailmessages); function sendjsonstring(result, message, detailmessages) { message = (message == null)? '' : message; detailmessages = (detailmessages == null)? '' : detailmessages; var response = Web.getHTTPResponse(); response.setcontenttype('application/json; charset=utf-8'); response.sendmessagebodystring(imjson.tojsonstring({ error: result.error, successmessage: result.error? '' : message, errormessage: result.error? message : '', detailmessages: result.error? detailmessages : '' ));

56 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML / CSSコーディング Tips 本 章 では HTML/CSS コーディングの Tips を 記 載 します 項 目 ブロック 要 素 を 横 に 並 べたい div を 横 に 並 べたい 対 処 方 法 実 装 例 文 字 リンクを 青 字 / 黒 字 にしたい 仕 様 対 処 方 法 実 装 例 オペレーションボックスにタイトルバー/ツールバーを 配 置 したい 対 処 方 法 実 装 例 imuidialog にツールバーを 配 置 したい 対 処 方 法 テーマカラーを border 背 景 色 とし 使 用 したい 対 処 方 法 実 装 例 画 面 に ページの 説 明 文 を 配 置 したい 対 処 方 法 実 装 例 補 足 ブロック 要 素 を 横 に 並 べたい div を 横 に 並 べたい 対 処 方 法 親 要 素 に clearfix のクラス 子 要 素 に float 用 のクラスを 指 定 してください 実 装 例 HTML 6

57 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <div class="imui-box-operation cf ()"> <div class="float-l ()pl-0 ()"> <imart type="imuitextbox"/> <imart type="imuibutton" value=" 検 索 "/> <imart type="imuibutton" value="クリ ア"/> () cf clearfix クラス 各 ブラウザでブロック 要 素 の 回 り 込 みを 解 除 () float-l float 用 クラス float:left が 入 ります 右 に 配 置 する 場 合 は float-r クラスを 指 定 () pl-0 assist クラス padding-left:0px が 入 る 文 字 リンクを 青 字 / 黒 字 にしたい 仕 様 以 下 は 青 字 (マウスオーバー 時 淡 青 字 + 下 線 )になります a タグ class 指 定 なし 以 下 のテーブル imui-table-box imui-table table imui-table-calendar imui-table-sort imui-table-mixed imui-table-inner imui-form imui-form-search-condition 以 下 のテーブルの td imui-table-sort 以 下 は 黒 字 (マウスオーバー 時 濃 灰 色 字 + 下 線 )になります ツールバーの 文 字 リンク 対 処 方 法 黒 字 の 文 字 リンクをあえて 青 字 にしたい 場 合 <a class= imui-accent > を 指 定 してください 青 字 の 文 字 リンクをあえて 黒 字 にしたい 場 合 <a class= imui-unaccented > を 指 定 してください コラム 以 下 の 外 部 ドキュメントにて 情 報 公 開 しています CSS Module List の 文 字 リンク( 標 準 色 ) a.imui-accent CSS Module List の 文 字 リンク( 黒 文 字 ) a.imui-unaccented 実 装 例 HTML <a class="imui-accent"> 強 制 青 字 </a> <a class="imui-unaccent"> 強 制 黒 字 </a> オペレーションボックスにタイトルバー/ツールバーを 配 置 したい 対 処 方 法 CSS Module List のツールボックス.imui-box-toolbox を 用 意 しています 以 下 に 実 装 例 を 示 します 詳 細 は CSS Module List のツールボックス.imui-box-toolbox を 参 照 してください 7

58 実 装 例 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 構 造 HTML を 簡 単 に 表 すと 以 下 のようになります <div>ツールボックス <div>タイトルバー <div>ツールバー <div>コンテンツ HTML <div class="imui-box-toolbox () mt-0"> <div class="imui-box-title () imui-box-toolbox-look ()"> <h>これは H</h> <div class="imui-toolbar-wrap"> <div class="imui-box-toolbar-inner"> <ul class="imui-list-box-toolbar"> ( 中 略 ) </ul> <div class="imui-box-toolbox-content"> <!-- 簡 単 検 索 --> <imart type="imuitextbox" class="wd-px" placeholder="ユーザ 氏 名 ユーザカナを 入 力 してください " autofocus> </imart> <imart type="imuibutton" value=" 検 索 " class="imui-button"></imart> <imart type="imuibutton" value="クリア" class="imui-button"></imart> 追 加 したスタイル. ツールボックス(imui-box-operation と 同 じ 枠 線 ) imui-box-toolbox. タイトルバー(h, hは 同 じ 見 た 目 imui-chapter-title.h 使 用 時 は imui-box-title.h を 使 用 ) imui-box-title, imui-box-title.h, imui-box-title.h. タイトルバー/ツールバー 上 部 角 丸 効 果 (()にフィットさせる) imui-box-toolbox-look. コンテンツ imui-box-toolbox-content. ツールバー imui-toolbar-wrap, imui-box-toolbar-inner, imui-list-box-toolbar imuidialog にツールバーを 配 置 したい imuidialog に 属 性 を 用 意 しています 以 下 に 実 装 例 を 示 します 詳 細 は imuidialog を 参 照 してください 対 処 方 法 imuidialog の toolbarleft 属 性 toolbarright 属 性 をご 利 用 ください 詳 細 は APIリスト imuidialog をご 確 認 ください テーマカラーを border 背 景 色 とし 使 用 したい テーマカラーを border 背 景 色 を 指 定 する 場 合 色 情 報 のみ CSS Module として 提 供 しています 8

59 以 下 の CSS をご 利 用 ください intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 テーマカラーを 指 定 するプロパティ 指 定 するクラス 名 border の 色 指 定 imui-theme-border-color 同 じ 情 報 を CSS Module List のテーマカラー 線 色.imui-theme-border-color にて 公 開 しています 対 処 方 法 同 じ HTML 要 素 に 以 下 を 指 定 します class= imui-theme-border-color 線 の 位 置 と 線 の 太 さを 指 定 します ( class 属 性 style 属 性 どちらで 指 定 も 可 ) 実 装 例 left-border に 00px の 実 線 を 引 く 場 合 CSS width と style を 必 ず 入 れてください 6.new_class { border-left-width: 00px; border-left-style: solid;... HTML <div class="new_class imui-theme-border-color"> 左 側 に 00px の 実 線 が 表 示 されます 色 は 薄 いテーマカラーです コラム 色 を 変 更 することはできません left-border に px の 実 線 を 引 く 場 合 CSS width と style を 必 ず 入 れてください 6.new_class { border-left-width: px; border-left-style: solid;... HTML <div class="new_class imui-theme-border-color"> 左 側 に px の 実 線 が 表 示 されます 色 は 薄 いテーマカラーです コラム 色 を 変 更 することはできません 画 面 に ページの 説 明 文 を 配 置 したい 対 処 方 法 画 面 の 操 作 内 容 や 凡 例 などを 画 面 上 に 表 示 したい 場 合 ページの 説 明 文 を 配 置 します 9

60 以 下 にアイコンと 組 み 合 わせた 実 装 例 をつ 示 します intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 その 他 は 別 ドキュメントの CSS Module List の 補 足 ボックス.imui-box-supplementation を 参 照 してください 実 装 例 HTML <div class="imui-box-supplementation"> <span class="im-ui-icon-common--information float-l"></span> <p class="imui-pgh-section" style="padding-left:0px;">アイコンを 組 み 合 わせることも 可 能 です <br>アイコンは 任 意 の 画 像 を 指 定 しま す </p> 補 足 実 装 例 の 表 示 アイコンは インフォメーション 用 です その 他 のアイコンを 使 用 したい 場 合 は アラートとコンファーム の 表 示 アイコン を 参 照 してください 表 示 アイコン 意 味 入 力 フォームの 上 部 に 情 報 を 表 示 するインフォメーション 配 置 について セクションを 全 体 説 明 する 場 合 はセクション 表 題 ( h など)の 下 に 説 明 文 を 記 載 します 60

61 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 基 本 的 な 画 面 の 作 り 方 基 本 的 な 画 面 の 作 り 方 スクリプト 開 発 編 登 録 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト HTML / サーバサイド JavaScript 作 成 ガイド 登 録 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 補 足 事 項 見 出 し( h h6 )は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません ボタンラベルは 基 本 的 に 登 録 とします ユーザビリティを 考 慮 して 作 成 などにする 変 更 する 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 更 新 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト 6

62 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML / サーバサイド JavaScript 6

63 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

64 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <title> 新 規 登 録 画 面 </title> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 新 規 登 録 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuitextbox" id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuipassword" id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuitextarea" id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imart type="imuiselect" id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 登 録 " id="register-button" class="imui-large-button" /> </form> 6

65 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 更 新 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト HTML / サーバサイド JavaScript 作 成 ガイド 更 新 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 補 足 事 項 見 出 し(h h6)は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません 更 新 画 面 で 更 新 / 削 除 を 行 えるようにする 場 合 は 画 面 下 部 に 左 から 更 新 ボタン 削 除 ボタンの 順 番 に 配 置 します ボタンラベルは 基 本 的 に 更 新 削 除 とします ユーザビリティを 考 慮 して 保 存 などにする 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 登 録 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト 6

66 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML / サーバサイド JavaScript 66

67 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

68 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <title> 更 新 / 削 除 画 面 </title> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 更 新 / 削 除 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuitextbox" id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuipassword" id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imart type="imuitextarea" id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> <imart type="imuiradio" id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imart type="imuiselect" id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 更 新 " id="update-button" class="imui-large-button" /> <imart type="imuibutton" value=" 削 除 " id="delete-button" class="imui-large-button" /> </form> 68

69 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 一 覧 画 面 項 目 作 成 ガイド 実 装 サンプル 画 面 レイアウト HTML / クライアントサイド JavaScript サーバサイド JavaScript 実 装 サンプル 画 面 レイアウト HTML / クライアントサイド JavaScript サーバサイド JavaScript 作 成 ガイド 一 覧 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 実 装 サンプル 画 面 レイアウト 69

70 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML / クライアントサイド JavaScript 70

71 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

72 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <!-- ヘッド 情 報 --> <imart type="head"> <title> 一 覧 画 面 </title> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 一 覧 画 面 </h> <!-- 以 下 ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 ボタン --> <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- タブ お 気 に 入 りボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- タブ 検 索 ボタン --> <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- タブ ヘルプボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imart type="imuiselect" id="search-list" list=$bind.selectbox /> <div class="float-l"> <imart type="imuitextbox" id="search-text" maxlength="0" placeholder=" 検 索 条 件 の 入 力 " style="width:0px"/> <imart type="imuibutton" value=" 検 索 " id="submit" class="imui-button" /> <imart type="imuibutton" value="クリア" id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common-6-trashbox mr-"></span>チェックした 項 目 を 削 除 </a> <imart type="imuilisttable" data=$bind.listtable id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名 前 " /> <col name="col" caption="カナ" > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption="ローマ 字 " /> </cols> </imart> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選 択 したデータを 削 除 します よろしいですか?','',function(){ // 削 除 処 理 ) ) $('#submit').on('click',function(){ // 検 索 ボタン 押 下 時 の 処 理 ) $('#clear').on('click',function(){ // クリアボタン 押 下 時 の 処 理 7

73 // クリアボタン 押 下 時 の 処 理 ); ) </script> intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 サーバサイド JavaScript let $bind = {; function init(request) { $bind.listtable = [ {"col":" 上 田 辰 男 ", "col":"ウエダ タツオ", "col":"ueda tatsuo", {"col":" 青 柳 辰 巳 ", "col":"アオヤギ タツミ", "col":"aoyagi tatsumi", {"col":" 林 政 義 ", "col":"ハヤシ マサヨシ", "col":"hayashi masayoshi", {"col":" 円 山 益 男 ", "col":"マルヤマ マスオ", "col":"maruyama masuo", {"col":" 関 根 千 香 ", "col":"セキネ チカ", "col":"sekine chika", {"col":" 寺 田 雅 彦 ", "col":"テラダ マサヒコ", "col":"terada masahiko", {"col":" 吉 川 一 哉 ", "col":"ヨシカワ カズヤ", "col":"yoshikawa kazuya", {"col":" 大 磯 博 文 ", "col":"オオイソ ヒロフミ", "col":"ohiso hirohumi", {"col":" 萩 本 順 子 ", "col":"ハギモト ジュンコ", "col":"hagimoto jyunko", {"col":" 生 田 一 哉 ", "col":"イクタ カズヤ", "col":"ikuta kazuya", {"col":" 片 山 聡 ", "col":"カタヤマ サトシ", "col":"katayama satoshi" ]; $bind.selectbox = [ { type : "group", label : " 列 検 索 ", list : [ { label : " 名 前 ", value :, selected : true, { label : "カナ", value :, { label : "ローマ 字 ", value : ] ]; 実 装 サンプル 画 面 レイアウト 7

74 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 HTML / クライアントサイド JavaScript 7

75 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

76 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <!-- ヘッド 情 報 --> <imart type="head"> <title> 一 覧 画 面 </title> </imart> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 一 覧 画 面 </h> <!-- 以 下 ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 ボタン --> <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a> </li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- タブ お 気 に 入 りボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- タブ 検 索 ボタン --> <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- タブ ヘルプボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imart type="imuiselect" id="search-list" list=$bind.selectbox /> <div class="float-l"> <imart type="imuitextbox" id="search-text" maxlength="0" placeholder=" 検 索 条 件 の 入 力 " style="width:0px"/> <imart type="imuibutton" value=" 検 索 " id="submit" class="imui-button" /> <imart type="imuibutton" value="クリア" id="clear" class="imui-button" /> <imart type="imuilisttable" data=$bind.listtable id="listtable" viewrecords="true" oncellselect="oncellselect" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col0" caption=" 編 集 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common-6-update" /> </col> <col name="col" caption=" 名 前 " /> <col name="col" caption="カナ" /> <col name="col" caption="ローマ 字 " /> <col name="col0" caption=" 削 除 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common-6-ng" /> </col> </cols> </imart> <script> $(function(){ oncellselect = function(rowid,icol,cellcontent,e){ if($(cellcontent).hasclass('im-ui-icon-common-6-ng')){ imuiconfirm(' 削 除 します よろしいですか?','',function(){ // 削 除 処 理 ) 76

77 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 if($(cellcontent).hasclass('im-ui-icon-common-6-update')){ // 編 集 処 理 $('#submit').on('click',function(){ // 検 索 ボタン 押 下 時 の 処 理 ) $('#clear').on('click',function(){ // クリアボタン 押 下 時 の 処 理 ); ) function oncellattr(){ return 'style="min-width:0px;"' </script> サーバサイド JavaScript let $bind = {; function init(request) { $bind.listtable = [ {"col0":"", "col":" 上 田 辰 男 ", "col":"ウエダ タツオ", "col":"ueda tatsuo", {"col0":"", "col":" 青 柳 辰 巳 ", "col":"アオヤギ タツミ", "col":"aoyagi tatsumi", {"col0":"", "col":" 林 政 義 ", "col":"ハヤシ マサヨシ", "col":"hayashi masayoshi", {"col0":"", "col":" 円 山 益 男 ", "col":"マルヤマ マスオ", "col":"maruyama masuo", {"col0":"", "col":" 関 根 千 香 ", "col":"セキネ チカ", "col":"sekine chika", {"col0":"", "col":" 寺 田 雅 彦 ", "col":"テラダ マサヒコ", "col":"terada masahiko", {"col0":"", "col":" 吉 川 一 哉 ", "col":"ヨシカワ カズヤ", "col":"yoshikawa kazuya", {"col0":"", "col":" 大 磯 博 文 ", "col":"オオイソ ヒロフミ", "col":"ohiso hirohumi", {"col0":"", "col":" 萩 本 順 子 ", "col":"ハギモト ジュンコ", "col":"hagimoto jyunko", {"col0":"", "col":" 生 田 一 哉 ", "col":"イクタ カズヤ", "col":"ikuta kazuya", {"col0":"", "col":" 片 山 聡 ", "col":"カタヤマ サトシ", "col":"katayama satoshi" ]; $bind.selectbox = [ { type : "group", label : " 列 検 索 ", list : [ { label : " 名 前 ", value :, selected : true, { label : "カナ", value :, { label : "ローマ 字 ", value : ] ]; 画 面 遷 移 77

78 項 目 画 面 遷 移 がある 場 合 ( 登 録 更 新 など)の 実 装 例 画 面 遷 移 あり HTML (ヘッド 情 報 ) 画 面 遷 移 あり HTML ( 画 面 タイトル/ツールバー/コンテンツエリア) 画 面 遷 移 あり サーバサイドJavaScript 画 面 遷 移 がない 場 合 の 実 装 例 画 面 遷 移 なし HTML(ヘッド 情 報 ) 画 面 遷 移 なし HTML ( 画 面 タイトル/ツールバー/コンテンツエリア) 画 面 遷 移 なし サーバサイドJavaScript Ajax 通 信 の 利 用 方 法 parameter について Ajax 実 装 例 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 画 面 遷 移 がある 場 合 ( 登 録 更 新 など)の 実 装 例 画 面 遷 移 がある 場 合 の 概 要 と 実 装 方 法 についての 説 明 です 処 理 の 流 れ Form の 度 押 し 防 止 imuidisableonsubmit (セレクタ) バリデーションチェック imuivalidate 確 認 ダイアログ 表 示 imuiconfirm Ajax でのデータ 送 信 と 画 面 遷 移 imuiajaxsubmit 画 面 遷 移 あり HTML (ヘッド 情 報 ) 78

79 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <title> 新 規 登 録 画 面 </title> <!-- Load library --> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <script src="ui/js/imui-form-util.js"></script> <imart type="imuivalidationrule" rule="foo/bar#hoge" rulesname="rules" messagesname="messages" /> <script type="text/javascript"> (function($) { $(document).ready(function() { // Form の 度 押 し 防 止 imuidisableonsubmit('#form'); // 参 照 画 面 へ 引 き 渡 すキーの 配 列 生 成 var optionaldata = ['user_cd']; // 登 録 ボタンクリック $('#register-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確 認 ダイアログ 表 示 imuiconfirm( '<imart type="string" value=$data.dialogmessages.message escapejs="true" />', // メッセージ '<imart type="string" value=$data.dialogmessages.title escapejs="true" />', // タイトル function() { // OKクリック 時 のコールバック 関 数 // Ajax でのデータ 送 信 と 次 画 面 への 遷 移 imuiajaxsubmit('#form', 'POST', 'json', 'reference/list/views/list'); ); ); ); )(jquery); </script> </imart> 画 面 遷 移 あり HTML ( 画 面 タイトル/ツールバー/コンテンツエリア) 登 録 画 面 の 実 装 サンプル を 参 照 してください または 更 新 画 面 の 実 装 サンプル を 参 照 してください コラム imuivalidate を 利 用 するときは <input type= submit /> ではなく <input type= button /> を 利 用 してください 画 面 遷 移 あり サーバサイドJavaScript 79

80 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 /** * 初 期 化 処 理 * * foo/bar_validation#init handleerrors */ function init(request) { // 初 期 化 の 際 の 処 理 function handleerrors() { // 入 力 チェックに 失 敗 した 際 の 処 理 コラム バリデーションチェックについて 実 装 例 の 中 で バリデーションチェック( 送 信 値 チェック)をしています 送 信 値 が 規 定 のルールに 反 する 場 合 は 確 認 ダイアログを 表 示 せず 処 理 を 中 断 し ルールに 反 している 入 力 箇 所 にエラーの 旨 を 表 示 します 詳 しくは Jssp Validator を 参 照 してください Ajaxについて Ajax の 呼 び 出 し 先 を 参 照 してください 登 録 更 新 画 面 について 基 本 的 な 画 面 の 作 成 方 法 があります 詳 しくは 登 録 画 面 を 参 照 してください または 更 新 画 面 を 参 照 してください 画 面 遷 移 がない 場 合 の 実 装 例 画 面 遷 移 がない 場 合 の 概 要 と 実 装 方 法 についての 説 明 です 処 理 の 流 れ Form の 度 押 し 防 止 imuidisableonsubmit (セレクタ) バリデーションチェック imuivalidate 確 認 ダイアログ 表 示 imuiconfirm Ajaxでのデータ 送 信 imuiajaxsend 画 面 遷 移 なし HTML(ヘッド 情 報 ) 80

81 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imart type="head"> <title> 更 新 / 削 除 画 面 </title> <!-- Load library --> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <script src="ui/js/imui-form-util.js"></script> <imart type="imuivalidationrule" rule="foo/bar#hoge" rulesname="rules" messagesname="messages" /> <script type="text/javascript"> (function($) { $(document).ready(function() { // Form の 度 押 し 防 止 imuidisableonsubmit('#form'); // 参 照 画 面 へ 引 き 渡 すキーの 配 列 生 成 var optionaldata = ['user_cd']; // 更 新 ボタンクリック $('#update-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確 認 ダイアログ 表 示 imuiconfirm( '<imart type="string" value=$data.dialogmessages.message escapejs="true" />', // メッセージ '<imart type="string" value=$data.dialogmessages.title escapejs="true" />', // タイトル function() { // OKクリック 時 のコールバック 関 数 // Ajaxでのデータ 送 信 imuiajaxsend('#form', 'POST', 'json'); ); ); ); )(jquery); </script> </imart> 画 面 遷 移 なし HTML ( 画 面 タイトル/ツールバー/コンテンツエリア) 登 録 画 面 の 実 装 サンプル を 参 照 してください または 更 新 画 面 の 実 装 サンプル を 参 照 してください 画 面 遷 移 なし サーバサイドJavaScript /** * 初 期 化 処 理 * * foo/bar_validation#init handleerrors */ function init(request) { // 初 期 化 の 際 にしたい 処 理 function handleerrors() { // 入 力 チェックに 失 敗 した 際 にしたい 処 理 8

82 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 コラム バリデーションチェックについて 実 装 例 の 中 で バリデーションチェック( 送 信 値 チェック)をしています 送 信 値 が 規 定 のルールに 反 する 場 合 は 確 認 ダイアログを 表 示 せず 処 理 を 中 断 し ルールに 反 している 入 力 箇 所 にエラーの 旨 を 表 示 します 詳 しくは Jssp Validator を 参 照 してください Ajaxについて Ajax の 呼 び 出 し 先 を 参 照 してください 登 録 更 新 画 面 について 基 本 的 な 画 面 の 作 成 方 法 があります 詳 しくは 登 録 画 面 を 参 照 してください または 更 新 画 面 を 参 照 してください Ajax 通 信 の 利 用 方 法 imuiajaxsend, imuiajaxsubmit を 使 用 して Ajax 通 信 をする 場 合 呼 び 出 し 先 のページでは 処 理 成 功 時 のメッセージ 処 理 失 敗 時 のメッセージ 処 理 成 功 後 に 遷 移 するページへ 引 き 渡 すパラメータ を 返 すことができます 属 性 名 説 明 型 必 須 error 処 理 が 失 敗 した 場 合 true 成 功 した 場 合 false を 指 定 します boolean o successmessage 処 理 成 功 時 のメッセージ error: true の 場 合 表 示 されます String errormessage 処 理 失 敗 時 のメッセージ error: false の 場 合 表 示 されます String detailmessages 処 理 失 敗 時 の 詳 細 なメッセージ error: false の 場 合 表 示 されます String/String[] parameter 処 理 成 功 後 に 遷 移 するページへ 引 き 渡 すパラメータ Object parameter について オブジェクトのキーを input タグの name 属 性 に 値 を value 属 性 にセットして submit します 値 に 配 列 を 指 定 することが 可 能 です ただし 次 元 配 列 のみサポートします parameter の 指 定 方 法 と 次 画 面 での 取 得 例 は 以 下 のようになります parameter の 指 定 parameter: { key: 'value', key: 'value', array: [ 'array', 'array', 'array' ] 次 画 面 での 取 得 6 function init(request) { var v = request.key; // 'value' var v = request.key; // 'value' var a = request.getparametervalues('array'); // ['array', 'array', 'array']... となります Ajax 実 装 例 8

83 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 function init(request) {... response.setcontenttype('application/json; charset=utf-8');... var resultobject = SomeAPI.doSomething(); if (resultobject.error) { // 処 理 が 失 敗 した 場 合 response.sendmessagebodystring( ImJson.toJSONString({ error: resultobject.error, errormessage: resultobject.message, detailmessages: [' 管 理 者 にお 問 い 合 わせください', ' 連 絡 先 : ) ); // 処 理 が 成 功 した 場 合 response.sendmessagebodystring( ImJson.toJSONString({ error: false, errormessage: '', successmessage: ' 登 録 しました', parameter:{ param: 'value', param: 'value', array: ['array', 'array', 'array'] ) ); 基 本 的 な 画 面 の 作 り 方 SAStruts+SJDBC 開 発 編 登 録 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト JSP 作 成 ガイド 登 録 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 8

84 画 面 レイアウト intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 補 足 事 項 見 出 し( h h6 )は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません ボタンラベルは 基 本 的 に 登 録 とします ユーザビリティを 考 慮 して 作 成 などにする 変 更 する 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 更 新 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト JSP 8

85 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

86 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" taglib prefix="imui" uri=" <!-- ヘッド 情 報 --> <imui:head> <title> 新 規 登 録 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 新 規 登 録 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imui:select id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 登 録 " id="register-button" class="imui-large-button" /> </form> 86

87 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 更 新 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト JSP 作 成 ガイド 更 新 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 補 足 事 項 見 出 し( h h6 )は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません 更 新 画 面 で 更 新 / 削 除 を 行 えるようにする 場 合 は 画 面 下 部 に 左 から 更 新 ボタン 削 除 ボタンの 順 番 に 配 置 します ボタンラベルは 基 本 的 に 更 新 削 除 とします ユーザビリティを 考 慮 して 保 存 などにする 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 登 録 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト 87

88 JSP intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

89 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" taglib prefix="imui" uri=" <!-- ヘッド 情 報 --> <imui:head> <title> 更 新 / 削 除 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 更 新 / 削 除 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imui:select id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 更 新 " id="update-button" class="imui-large-button" /> <imui:button value=" 削 除 " id="delete-button" class="imui-large-button" /> </form> 89

90 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 一 覧 画 面 項 目 作 成 ガイド 実 装 サンプル 画 面 レイアウト JSP 実 装 サンプル 画 面 レイアウト JSP 作 成 ガイド 一 覧 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 90

91 画 面 遷 移 アラートとコンファーム intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 実 装 サンプル 画 面 レイアウト JSP 9

92 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

93 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> page import="java.util.list"%> page import="java.util.arraylist"%> page import="java.util.map"%> page import="java.util.hashmap"%> taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行 検 索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名 前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "カナ"); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "ローマ 字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% //リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col"," 上 田 辰 男 ", "col","ウエダ タツオ", "col","ueda tatsuo")); listtable.add(createvaluemap("col"," 青 柳 辰 巳 ", "col","アオヤギ タツミ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col"," 林 政 義 ", "col","ハヤシ マサヨシ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col"," 円 山 益 男 ", "col","マルヤマ マスオ", "col","maruyama masuo")); listtable.add(createvaluemap("col"," 関 根 千 香 ", "col","セキネ チカ", "col","sekine chika")); listtable.add(createvaluemap("col"," 寺 田 雅 彦 ", "col","テラダ マサヒコ", "col","terada masahiko")); listtable.add(createvaluemap("col"," 吉 川 一 哉 ", "col","ヨシカワ カズヤ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col"," 大 磯 博 文 ", "col","オオイソ ヒロフミ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col"," 萩 本 順 子 ", "col","ハギモト ジュンコ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col"," 生 田 一 哉 ", "col","イクタ カズヤ", "col","ikuta kazuya")); listtable.add(createvaluemap("col"," 片 山 聡 ", "col","カタヤマ サトシ", "col","katayama satoshi")); %> <!-- ヘッド 情 報 --> <imui:head> <title> 一 覧 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 一 覧 画 面 </h> <!-- 以 下 ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> 9

94 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 ボタン --> <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- タブ お 気 に 入 りボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- タブ 検 索 ボタン --> <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- タブ ヘルプボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検 索 条 件 の 入 力 " style="width:0px"/> <imui:button value=" 検 索 " id="submit" class="imui-button" /> <imui:button value="クリア" id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common-6-trashbox mr-"></span>チェックした 項 目 を 削 除 </a> <imui:listtable data="<%= listtable %>" id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名 前 " /> <col name="col" caption="カナ" > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption="ローマ 字 " /> </cols> </imui:listtable> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選 択 したデータを 削 除 します よろしいですか?','',function(){ // 削 除 処 理 ) ) $('#submit').on('click',function(){ // 検 索 ボタン 押 下 時 の 処 理 ) $('#clear').on('click',function(){ // クリアボタン 押 下 時 の 処 理 ); ) </script> 実 装 サンプル 画 面 レイアウト 9

95 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 JSP 9

96 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

97 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> page import="java.util.list"%> page import="java.util.arraylist"%> page import="java.util.map"%> page import="java.util.hashmap"%> taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行 検 索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名 前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "カナ"); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "ローマ 字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% //リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col0","","col"," 上 田 辰 男 ", "col","ウエダ タツオ", "col","ueda tatsuo")); listtable.add(createvaluemap("col0","","col"," 青 柳 辰 巳 ", "col","アオヤギ タツミ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col0","","col"," 林 政 義 ", "col","ハヤシ マサヨシ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col0","","col"," 円 山 益 男 ", "col","マルヤマ マスオ", "col","maruyama masuo")); listtable.add(createvaluemap("col0","","col"," 関 根 千 香 ", "col","セキネ チカ", "col","sekine chika")); listtable.add(createvaluemap("col0","","col"," 寺 田 雅 彦 ", "col","テラダ マサヒコ", "col","terada masahiko")); listtable.add(createvaluemap("col0","","col"," 吉 川 一 哉 ", "col","ヨシカワ カズヤ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col0","","col"," 大 磯 博 文 ", "col","オオイソ ヒロフミ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col0","","col"," 萩 本 順 子 ", "col","ハギモト ジュンコ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col0","","col"," 生 田 一 哉 ", "col","イクタ カズヤ", "col","ikuta kazuya")); listtable.add(createvaluemap("col0","","col"," 片 山 聡 ", "col","カタヤマ サトシ", "col","katayama satoshi")); %> <!-- ヘッド 情 報 --> <imui:head> <title> 一 覧 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 一 覧 画 面 </h> <!-- 以 下 ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> 97

98 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 ボタン --> <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a> </li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- タブ お 気 に 入 りボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- タブ 検 索 ボタン --> <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- タブ ヘルプボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検 索 条 件 の 入 力 " style="width:0px"/> <imui:button value=" 検 索 " id="submit" class="imui-button" /> <imui:button value="クリア" id="clear" class="imui-button" /> <imui:listtable data="<%= listtable %>" id="listtable" viewrecords="true" oncellselect="oncellselect" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col0" caption=" 編 集 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common-6-update" /> </col> <col name="col" caption=" 名 前 " /> <col name="col" caption="カナ" /> <col name="col" caption="ローマ 字 " /> <col name="col0" caption=" 削 除 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common-6-ng" /> </col> </cols> </imui:listtable> <script> $(function(){ oncellselect = function(rowid,icol,cellcontent,e){ if($(cellcontent).hasclass('im-ui-icon-common-6-ng')){ imuiconfirm(' 削 除 します よろしいですか?','',function(){ // 削 除 処 理 ) if($(cellcontent).hasclass('im-ui-icon-common-6-update')){ // 編 集 処 理 $('#submit').on('click',function(){ // 検 索 ボタン 押 下 時 の 処 理 ) $('#clear').on('click',function(){ // クリアボタン 押 下 時 の 処 理 ); ) function oncellattr(){ return 'style="min-width:0px;"' </script> 98

99 </script> intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 画 面 遷 移 項 目 画 面 遷 移 がある 場 合 ( 登 録 更 新 など)の 実 装 例 画 面 遷 移 あり JSP (ヘッド 情 報 ) 画 面 遷 移 あり JSP ( 画 面 タイトル/ツールバー/コンテンツエリア) 画 面 遷 移 がない 場 合 の 実 装 例 画 面 遷 移 なし JSP (ヘッダー/フッター) 画 面 遷 移 なし JSP ( 画 面 タイトル/ツールバー/コンテンツエリア) Ajax 通 信 の 利 用 方 法 parameter について Ajax 実 装 例 画 面 遷 移 がある 場 合 ( 登 録 更 新 など)の 実 装 例 画 面 遷 移 がある 場 合 の 概 要 と 実 装 方 法 についての 説 明 です 処 理 の 流 れ Form の 度 押 し 防 止 imuidisableonsubmit (セレクタ) バリデーションチェック imuivalidate 確 認 ダイアログ 表 示 imuiconfirm Ajax でのデータ 送 信 と 画 面 遷 移 imuiajaxsubmit 画 面 遷 移 あり JSP (ヘッド 情 報 ) 99

100 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" taglib prefix="imui" uri=" <!DOCTYPE HTML PUBLIC "-//WC//DTD HTML.0 Transitional//EN"> <imui:head> <title> 新 規 登 録 画 面 </title> <!-- Load library --> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"></script> <script type="text/javascript"> var rules = { textbox: { required:true, maxlength:0, textarea: { required:true ; var messages = { textbox: { required:"タイトルは 必 須 です ", maxlength:"タイトルは0 文 字 以 内 で 入 力 してください", textarea: { required:"テキストエリアは 必 須 です " ; (function($) { $(document).ready(function() { // Form の 度 押 し 防 止 imuidisableonsubmit('#form'); // 参 照 画 面 へ 引 き 渡 すキーの 配 列 生 成 var optionaldata = ['user_cd']; // 登 録 ボタンクリック $('#register-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確 認 ダイアログ 表 示 imuiconfirm( '<c:out value="message" />', // メッセージ '<c:out value="title" />', // タイトル function() { // OKクリック 時 のコールバック 関 数 // Ajax でのデータ 送 信 と 次 画 面 への 遷 移 imuiajaxsubmit('#form', 'POST', 'json', 'reference/list/views/list'); ); ); ); )(jquery); </script> </imui:head> 画 面 遷 移 あり JSP ( 画 面 タイトル/ツールバー/コンテンツエリア) 登 録 画 面 の 実 装 サンプル を 参 照 してください または 更 新 画 面 の 実 装 サンプル を 参 照 してください コラム imuivalidate を 利 用 するときは <input type= submit /> ではなく <input type= button /> を 利 用 してください 画 面 遷 移 がない 場 合 の 実 装 例 画 面 遷 移 がない 場 合 の 概 要 と 実 装 方 法 についての 説 明 です 処 理 の 流 れ 00

101 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 Form の 度 押 し 防 止 imuidisableonsubmit (セレクタ) バリデーションチェック imuivalidate 確 認 ダイアログ 表 示 imuiconfirm Ajaxでのデータ 送 信 imuiajaxsend 画 面 遷 移 なし JSP (ヘッダー/フッター) 0

102 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <imui:head> <title> 更 新 / 削 除 画 面 </title> <!-- Load library --> <script src="ui/libs/jquery-validation-.9.0/jquery.validate.js"> </script> <script type="text/javascript"> var rules = { textbox: { required:true, maxlength:0, textarea: { required:true ; var messages = { textbox: { required:"タイトルは 必 須 です ", maxlength:"タイトルは0 文 字 以 内 で 入 力 してください", textarea: { required:"テキストエリアは 必 須 です " ; (function($) { $(document).ready(function() { // Form の 度 押 し 防 止 imuidisableonsubmit('#form'); // 参 照 画 面 へ 引 き 渡 すキーの 配 列 生 成 var optionaldata = ['user_cd']; // 更 新 ボタンクリック $('#update-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確 認 ダイアログ 表 示 imuiconfirm( '<c:out value="message" />', // メッセージ '<c:out value="title" />', // タイトル function() { // OKクリック 時 のコールバック 関 数 // Ajaxでのデータ 送 信 imuiajaxsend('#form', 'POST', 'json'); ); ); ); )(jquery); </script> </imui:head> 画 面 遷 移 なし JSP ( 画 面 タイトル/ツールバー/コンテンツエリア) 登 録 画 面 の 実 装 サンプル を 参 照 してください または 更 新 画 面 の 実 装 サンプル を 参 照 してください Ajax 通 信 の 利 用 方 法 imuiajaxsend, imuiajaxsubmit を 使 用 して Ajax 通 信 をする 場 合 呼 び 出 し 先 のページでは 処 理 成 功 時 のメッセージ 処 理 失 敗 時 のメッセージ 処 理 成 功 後 に 遷 移 するページへ 引 き 渡 すパラメータ を 返 すことができます 属 性 名 説 明 型 必 須 error 処 理 が 失 敗 した 場 合 true 成 功 した 場 合 false を 指 定 します boolean o successmessage 処 理 成 功 時 のメッセージ error: true の 場 合 表 示 されます String errormessage 処 理 失 敗 時 のメッセージ error: false の 場 合 表 示 されます String detailmessages 処 理 失 敗 時 の 詳 細 なメッセージ error: false の 場 合 表 示 されます String/String[] 0

103 属 性 名 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 説 明 型 必 須 parameter 処 理 成 功 後 に 遷 移 するページへ 引 き 渡 すパラメータ Object parameter について オブジェクトのキーを input タグの name 属 性 に 値 を value 属 性 にセットして submit します 値 に 配 列 を 指 定 することが 可 能 です ただし 次 元 配 列 のみサポートします parameter の 指 定 方 法 と 次 画 面 での 取 得 例 は 以 下 のようになります parameter の 指 定 Map<String, Object> parameter = new HashMap<String, Object>(); ArrayList<String> arraylist = new ArrayList<String>(); arraylist.add("array"); arraylist.add("array"); arraylist.add("array"); parameter.put("param", "value"); parameter.put("param", "value"); parameter.put("array", arraylist); 次 画 面 での 取 得 public class TestAction { public String param; public String param; public ArrayList<String> public String index(){ return "/sa/hello/output.jsp"; となります Ajax 実 装 例 非 同 期 で 返 却 するレスポンスオブジェクトを 定 義 します package sample.sastruts.dto.samplesp; public class MyAjaxResponse { public String result; public boolean error; public String errormessage; public String successmessage; public String[] detailmessages; public Map<String, Object> parameter; アクションクラスでは 上 記 レスポンスオブジェクトに 対 して 値 をセットし JSON 文 字 列 に 変 換 します 変 換 した 結 果 の 文 字 列 をプロパティにセットします 0

104 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 public String = false) public String ajax() { MyAjaxResponse responseobject = new MyAjaxResponse(); try { Map<String, Object> parameter = new HashMap<String, Object>(); ArrayList<String> arraylist = new ArrayList<String>(); arraylist.add("array"); arraylist.add("array"); arraylist.add("array"); parameter.put("param", "value"); parameter.put("param", "value"); parameter.put("array", arraylist); // 成 功 時 responseobject.result = "success"; responseobject.error = false; responseobject.successmessage = " 登 録 が 完 了 しました "; responseobject.parameter = parameter; catch (Exception e) { responseobject.error = true; responseobject.errormessage = "データ 登 録 時 にエラーが 発 生 しました "; responseobject.detailmessages = new String[] { " 管 理 者 にお 問 い 合 わせください " ; // レスポンスオブジェクトをJSON 文 字 列 に 変 換 ajaxresponse = JSON.encode(responseObject); return "sample/ajaxresponse.jsp"; アクションクラスで 生 成 した JSON 文 字 列 をクライアントに application/json として 返 します 上 記 ajax メソッドの 返 却 値 sample/ajaxresponse.jsp に 相 当 します page language="java" contenttype="application/json; charset=utf-8" pageencoding="utf-8" %> ${ajaxresponse 基 本 的 な 画 面 の 作 り 方 TERASOLUNA Server Framework for Java (.x) 開 発 編 登 録 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト JSP 作 成 ガイド 登 録 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 0

105 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 補 足 事 項 見 出 し( h h6 )は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません ボタンラベルは 基 本 的 に 登 録 とします ユーザビリティを 考 慮 して 作 成 などにする 変 更 する 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 更 新 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト JSP 0

106 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

107 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" taglib prefix="imui" uri=" <!-- ヘッド 情 報 --> <imui:head> <title> 新 規 登 録 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 新 規 登 録 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a> </li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="example/tgfw/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imui:select id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 登 録 " id="register-button" class="imui-large-button" /> </form> 07

108 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 更 新 画 面 項 目 作 成 ガイド 補 足 事 項 実 装 サンプル 画 面 レイアウト JSP 08

109 作 成 ガイド intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 更 新 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト 補 足 事 項 見 出 し( h h6 )は 必 要 に 応 じて 配 置 します 必 須 部 品 ではありません 更 新 画 面 で 更 新 / 削 除 を 行 えるようにする 場 合 は 画 面 下 部 に 左 から 更 新 ボタン 削 除 ボタンの 順 番 に 配 置 します ボタンラベルは 基 本 的 に 更 新 削 除 とします ユーザビリティを 考 慮 して 保 存 などにする 場 合 関 係 画 面 の 統 一 を 図 ってください 同 じデータの 登 録 画 面 が 存 在 する 場 合 は レイアウトの 差 異 は 最 小 限 にしましょう 実 装 サンプル 画 面 レイアウト JSP 09

110 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版

111 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> taglib prefix="c" uri=" taglib prefix="imui" uri=" <!-- ヘッド 情 報 --> <imui:head> <title> 更 新 / 削 除 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 更 新 / 削 除 画 面 </h> <!-- ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <!-- 戻 るボタン --> <li><a href="#" class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-narrow"> <!-- h --> <div class="imui-chapter-title"> <h> 入 力 フォームのタイトル( 必 要 に 応 じて 配 置 )</h> <form id="form" method="post" class="target_form mt-0" action="example/tgfw/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項 目 名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> <imui:checkbox id="checkbox_" name="checkbox" label="チェック" /> </td> </tr> <tr> <th><label> 項 目 名 </label></th> <td> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> <imui:radio id="radio_" name="radio" label="ラジオ" /> </td> </tr> <tr> <th><label> 項 目 名 6</label></th> <td> <imui:select id="inputitem6" name="inputitem6" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 更 新 " id="update-button" class="imui-large-button" /> <imui:button value=" 削 除 " id="delete-button" class="imui-large-button" /> </form>

112 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 一 覧 画 面 項 目 作 成 ガイド 実 装 サンプル 画 面 レイアウト JSP 実 装 サンプル 画 面 レイアウト JSP 作 成 ガイド

113 一 覧 画 面 の 基 本 的 な 作 成 ガイドについて 記 載 します 詳 細 は 以 下 リンク 先 を 参 照 してください ただし 以 下 リンク 先 は スクリプト 開 発 にて 説 明 ています 画 面 タイトル ツールバー 見 出 し テーブル 入 力 フォーム ボタン 処 理 リンク/ 処 理 アイコン 画 面 遷 移 アラートとコンファーム 実 装 サンプルは 基 本 的 な 画 面 レイアウト を 使 用 しています 詳 細 は 以 下 リンク 先 を 参 照 してください 画 面 レイアウト intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 実 装 サンプル 画 面 レイアウト JSP

114 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 0-0-0

115 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> page import="java.util.list"%> page import="java.util.arraylist"%> page import="java.util.map"%> page import="java.util.hashmap"%> taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行 検 索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名 前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "カナ"); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", "ローマ 字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% //リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col"," 上 田 辰 男 ", "col","ウエダ タツオ", "col","ueda tatsuo")); listtable.add(createvaluemap("col"," 青 柳 辰 巳 ", "col","アオヤギ タツミ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col"," 林 政 義 ", "col","ハヤシ マサヨシ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col"," 円 山 益 男 ", "col","マルヤマ マスオ", "col","maruyama masuo")); listtable.add(createvaluemap("col"," 関 根 千 香 ", "col","セキネ チカ", "col","sekine chika")); listtable.add(createvaluemap("col"," 寺 田 雅 彦 ", "col","テラダ マサヒコ", "col","terada masahiko")); listtable.add(createvaluemap("col"," 吉 川 一 哉 ", "col","ヨシカワ カズヤ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col"," 大 磯 博 文 ", "col","オオイソ ヒロフミ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col"," 萩 本 順 子 ", "col","ハギモト ジュンコ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col"," 生 田 一 哉 ", "col","イクタ カズヤ", "col","ikuta kazuya")); listtable.add(createvaluemap("col"," 片 山 聡 ", "col","カタヤマ サトシ", "col","katayama satoshi")); %> <!-- ヘッド 情 報 --> <imui:head> <title> 一 覧 画 面 </title> </imui:head> <!-- 画 面 タイトル --> <div class="imui-title"> <h> 一 覧 画 面 </h> <!-- 以 下 ツールバー --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <!-- ツールバー 左 側 -->

116 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 <!-- ツールバー 左 側 --> <ul class="imui-list-toolbar"> <!-- 戻 る --> <li><a class="imui-toolbar-icon" title=" 戻 る"><span class="im-ui-icon-common-6-back"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- 設 定 ボタン --> <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common-6-settings mr-"></span> 設 定 </a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> <!-- タブ お 気 に 入 りボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-star"></span></a></li> <!-- タブ 検 索 ボタン --> <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common-6-search"></span></a></li> <!-- タブ ヘルプボタン --> <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common-6-question"></span></a></li> <!-- 区 切 り 線 --> <li class="icon-split"></li> </ul> <!-- ツールバー 右 側 --> <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最 新 情 報 "><span class="im-ui-icon-common-6-refresh"></span></a></li> </ul> <!-- コンテンツエリア --> <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検 索 条 件 の 入 力 " style="width:0px"/> <imui:button value=" 検 索 " id="submit" class="imui-button" /> <imui:button value="クリア" id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common-6-trashbox mr-"></span>チェックした 項 目 を 削 除 </a> <imui:listtable data="<%= listtable %>" id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名 前 " /> <col name="col" caption="カナ" > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption="ローマ 字 " /> </cols> </imui:listtable> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選 択 したデータを 削 除 します よろしいですか?','',function(){ // 削 除 処 理 ) ) $('#submit').on('click',function(){ // 検 索 ボタン 押 下 時 の 処 理 ) $('#clear').on('click',function(){ // クリアボタン 押 下 時 の 処 理 ); ) </script> 実 装 サンプル 画 面 レイアウト 6

117 intra-mart Accel Platform UIデザインガイドライン(PC 版 ) 第 版 JSP 7

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

intra-mart Accel Platform — ViewCreator ユーザ操作ガイド   第6版 2016-04-01  

intra-mart Accel Platform — ViewCreator ユーザ操作ガイド   第6版 2016-04-01   Copyright 2012 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel Platform ViewCreator ユーザ 操 作 ガイド 第 6 版 2016-04-01 改 訂 情 報 ViewCreator について 基 本 的 な 設 定 データ 参 照 一 覧 リスト 集 計 クロス 集 計 とグラフ 集 計 データ

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i -

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - ( 事 業 者 向 け) 1.0 版 2015 年 3 月 31 日 改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - 目 次 1. はじめに... 1 2. システム 動 作 環 境... 1 2.1. 動 作 の 条 件 注 意 事 項... 1 2.1.1. JAVA スクリプトの 設 定... 1 2.1.2.

More information

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01  

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01   intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 1. 改 訂 情 報 2. はじめに 3.

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

システム設計書

システム設計書 二 松 學 舍 大 学 二 松 メール(Gmail) 利 用 マニュアル バージョン 2.00 発 効 日 改 訂 日 2016 年 04 月 06 日 二 松 学 舎 大 学 情 報 センター i 目 次 1. はじめに...1 2. 二 松 メール(Gmail)ログイン ログアウト 方 法...1 2.1. 二 松 メール(Gmail)ログイン 方 法... 1 2.2. 二 松 メール(Gmail)ログアウト

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン

目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザイン ジーンコード 設 計 要 件 定 義 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 開 発 フロー... 4 第 2 章 要 件 定 義... 5 (1) 概 要... 5 (2) 変 換 による 制 約... 5 (3) デバイスによる 制 約... 6 (4) 端 末 の 保 証 についての 考 え 方... 6 (5) デザイン... 7 (6) デザインコンポーネントで

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ

Fckeditor の 基 本 的 な 使 い 方 Point!! fckeditor を 上 手 く 使 うコツ 始 めにページ 内 に 一 通 り 文 章 ( 画 像 や 表 を 含 む)を 書 いてから 文 字 装 飾 をして 下 さい 編 集 したいテキストや 画 像 を 選 択 し アイコ Fckeditor マニュアル 目 次 Fckeditor の 基 本 的 な 使 い 方... 2 記 事 の 登 録 プレビューの 前 に... 2 リンクを 挿 入... 5 画 像 を 挿 入 する... 6 PC に 保 存 している 画 像 の 挿 入... 6 WEB 上 の 画 像 を 挿 入... 8 文 字 装 飾... 10 文 章 を 見 出 しにする... 10 太 文 字

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.54 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7.

目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. Web メール 操 作 説 明 書 京 都 与 謝 野 町 有 線 テレビ 0 目 次 1. Web メールのご 利 用 について... 2 2. Web メール 画 面 のフロー 図... 3 3. Web メールへのアクセス... 4 4. ログイン 画 面... 5 5. ログイン 後 (メール 一 覧 画 面 )... 6 6. 画 面 共 通 項 目... 7 7. メール 一 覧 画 面...

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

More information

Microsoft Word - CMS操作説明会資料.docx

Microsoft Word - CMS操作説明会資料.docx 平 成 25 年 6 月 24 日 株 式 会 社 ネクストワン 1 今 回 の 操 作 説 明 会 では 次 のようなサンプル 記 事 を 作 成 してみたいと 思 います 2 管 理 画 面 にログインする 1. 九 重 町 役 場 ホームページにアクセスします 2.アドレスバーのホームページ URL の 後 ろに admin と 入 力 します http://www.town.kokonoe.oita.jp/admin/index.php

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 山 都 町 移 住 定 住 サイト マイホームページ 操 作 説 明 書 平 成 26 年 3 月 10 日 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.52 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

方程式を解いてみよう! C++ から PHP + JavaScriptへ

方程式を解いてみよう! C++ から PHP + JavaScriptへ 方 程 式 を 解 いてみよう! C++ から PHP + HTML + JavaScriptへ 静 岡 理 工 科 大 学 総 合 情 報 学 部 コンピュータシステム 学 科 幸 谷 智 紀 (こうや とものり) http://na-inet.jp/ 今 日 のメニュー 1. コンピュータ 環 境 と 本 日 のゴールの 確 認 2. PHPプログラムを 実 行 してみる 3. HTMLで 自

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル

More information

Peace & Piece 画面設計書

Peace & Piece 画面設計書 ホームページ 仕 様 書 株 式 会 社 目 次 1. 更 新 履 歴 2. 構 成 図 3. 制 作 における 基 本 事 項 4. 画 面 設 計 の 定 義 ルール 5. 各 画 面 仕 様 設 計 6. 仕 様 書 確 定 の 合 意 更 新 履 歴 更 新 日 付 更 新 箇 所 更 新 内 容 構 成 図 A-1 トップページ 会 社 サービス 特 徴 コンテンツ サブコンテンツ その

More information

返還金同意書作成支援ツール_操作説明書

返還金同意書作成支援ツール_操作説明書 20131101_ 東 北 厚 生 局 返 還 金 同 意 書 等 作 成 支 援 ツール 操 作 説 明 書 平 成 25 年 12 月 東 北 厚 生 局 1. はじめに 返 還 金 同 意 書 作 成 支 援 ツールは 保 険 医 療 機 関 及 び 保 険 薬 局 において 診 療 報 酬 を 誤 って 請 求 したこと 等 により 保 険 者 に 診 療 報 酬 を 返 還 する 場 合

More information

1.Web 履 修 登 録 とは 大 学 では 同 じ 学 科 の 学 生 であっても 全 員 が 同 じ 科 目 を 受 けるわけではなく 各 自 が 選 択 した 科 目 を 履 修 しますので 学 生 ごとに 履 修 科 目 が 異 なります 学 生 は 毎 学 期 の 始 めに その 学 期

1.Web 履 修 登 録 とは 大 学 では 同 じ 学 科 の 学 生 であっても 全 員 が 同 じ 科 目 を 受 けるわけではなく 各 自 が 選 択 した 科 目 を 履 修 しますので 学 生 ごとに 履 修 科 目 が 異 なります 学 生 は 毎 学 期 の 始 めに その 学 期 東 北 工 業 大 学 ( 注 ) 各 種 問 い 合 わせ 窓 口 統 合 認 証 システムのパスワードを 忘 れた 場 合 の 再 発 行 について 情 報 サービスセンター 演 習 システム 管 理 室 八 木 山 ( 八 木 山 キャンパス8 号 館 1 階 ) 長 町 ( 長 町 キャンパス2 号 館 3 階 ) 統 合 認 証 システムのユーザID パスワードとは 本 学 情 報 サービスセンターが

More information

スライド 1

スライド 1 Hos-CanR 3.0 運 用 マニュアル Hos-CanR 3.0 運 用 マニュアル 登 録 作 業 者 用 Ver. 2 バージョン 改 訂 日 付 改 訂 内 容 Ver. 1 2010/3/15 初 版 Ver. 2 2010/8/9 ファイル 取 り 込 み 時 の 同 一 レコードの 判 定 についての 記 載 を 追 記 Hos-CanR 3.0 運 用 マニュアル 目 次 1.

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >>

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 ましき はぴまるサイト マイホームページ 操 作 説 明 書 平 成 27 年 12 月 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト デザインの 設 定 (p5) 3 記 事 の 登

More information

STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です

STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です レンタルショッピングカートマニュアル ~ ショップ 開 店 準 備 part2 編 ~ 1 STEP8-1 各 ショップ 画 面 内 の 表 示 設 定 ( 設 定 箇 所 の 一 覧 ) この 画 面 は コンテンツ 設 定 の ショップの 画 面 一 覧 です 各 画 面 に 表 示 される 説 明 文 の 編 集 や 項 目 の 表 示 / 非 表 示 の 切 替 が 可 能 です ネットショップを

More information

表紙

表紙 EasyServlet V2 EsScreenEditorを 利 用 した Webアプリケーション 作 成 株 式 会 社 システムズリサーチ 1.1 EsScreenEditor 概 要 第 1 章 概 要 本 章 では EasyServletの 画 面 作 成 ツールであるEsScreenEditorの 概 要 について 説 明 します EasyServletは 本 来 Excelで 記 述 されたインタフェース

More information

情報資源組織演習B:

情報資源組織演習B: 情 報 資 源 組 織 演 習 A( 書 誌 の 作 成 ) 第 12 回 書 誌 データ 管 理 検 索 システムの 構 築 2013 年 度 跡 見 学 園 女 子 大 学 文 学 部 准 教 授 福 田 博 同 書 誌 データ 管 理 検 索 システムの 構 築 第 9 回 で 書 誌 データベース 構 築 は 理 解 Web 検 索 では 以 下 の 様 な 方 法 が 取 られる A B

More information

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel 広 域 機 関 システム 操 作 マニュアル 共 通 2016-01-00 前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel Word Internet

More information

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 操 作 マニュアル 学 生 編 - (204 年 3 月 ) - 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 ポータル 画 面 の 構 成... 4

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

03 CMS機能審査表.xls

03 CMS機能審査表.xls 厚 真 町 ホームページ 構 築 業 務 CMS 機 能 調 査 表 ( 別 紙 ) 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1 1.システム 基 本 要 件 Windows

More information

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ

メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受 信 したメールが 一 覧 表 示 されます メール 受 信 タブをクリックすると 受 信 箱 フ .3 1...3 メール 受 信 タブのサブメニューから 直 接 受 信 箱 以 外 のフォルダを 表 示 することもできます 共 有 メー ルボックスのフォルダは 指 定 できません 3. 35 メール 受 信 画 面 のレイアウトを 変 更 することができます ここでは 初 期 設 定 のレイアウトで 表 示 されているボタ ンやマークについて 解 説 します メール 一 覧 画 面 には 受

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基

3.コンテンツの 作 成 機 能 3-1 IDごとに 編 集 権 限 を 設 け 権 限 に 応 じたメニューが 表 示 されること 3-2 管 理 者 はすべてのページにおいて 編 集 する 権 限 があること 3-3 複 数 のユーザーが 同 時 に 同 一 のページを 更 新 できないこと 基 ( 別 紙 ) 志 摩 市 ホームページ 構 築 業 務 CMS 機 能 調 査 表 対 応 欄 : 本 業 務 の 委 託 費 用 内 で 対 応 可 能 : 代 替 案 により 本 業 務 の 委 託 費 用 内 で 対 応 可 能 ( 代 替 案 欄 に 代 替 案 をご 記 入 ください ) : 対 応 不 可 項 目 番 号 要 件 対 応 代 替 案 1-1 1.システム 基 本 要 件

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 22 年 7 月 1 SHIFTで 作 成 されるホームページ: 構 成 HP 完 成 イメージ SHIFT 作 成 メニュー 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン 画 面 1. 都 道 府 県 ID パスワードを 入 力 して OK をクリッ クします コミュニティTOP

More information

訪問介護勤務スケジュール作成

訪問介護勤務スケジュール作成 訪 問 介 護 勤 務 スケジュール 作 成 勤 務 表 作 成 編 (Ver. 6.0.0) Microsoft Excel 2003 対 応 Microsoft Excel 2007 対 応 Microsoft Excel 2010 対 応 こんなことができます!! 登 録 者 情 報 のチェック ( 基 本 登 録 情 報 のチェック) 対 象 月 の 情 報 チェック 勤 務 表 作 成 勤

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 23 年 1 月 1 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HP 完 成 イメージ 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン 画 面 1. 都 道 府 県 ID パスワードを 入 力 して OK をクリックします コミュニティTOP 画

More information

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 お 問 い 合 わせフォーム L-TOOL Inquiry (ver 4.2) 取 扱 説 明 書 Little Net http://l-tool.net/ - 2015 年 7 月 22 日 版 - 目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.デザイン 変 更 5. 外 国 語 対 応 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 1. 概 要 この

More information



 スタートアップガイド Ver. 3.0 管 理 者 編 株 式 会 社 アバンセシステム クラウド コンピューティング 事 業 部 JECC E-mail jecc_support@avancesys.co.jp URL http://www.avancesys.co.jp/ ANPIC スタートアップガイド 管 理 者 編 2 ごあいさつ このたびは 安 否 情 報 システム ANPIC をご 導

More information

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を メールテンプレート 編 集 ユーザーマニュアル Ver1.0 2016/5/1 株 式 会 社 シャノン 1 1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封

More information

目 次 本 書 では GP-Webシステムの 購 入 先 操 作 方 法 を 説 明 します 1 1. GP-Webを 活 用 した 化 学 物 質 情 報 収 集 の 流 れ 2. GP-Webへログインする 3. 調 査 依 頼 情 報 を 確 認 する 4. 製 品 情 報 を 登 録 する

目 次 本 書 では GP-Webシステムの 購 入 先 操 作 方 法 を 説 明 します 1 1. GP-Webを 活 用 した 化 学 物 質 情 報 収 集 の 流 れ 2. GP-Webへログインする 3. 調 査 依 頼 情 報 を 確 認 する 4. 製 品 情 報 を 登 録 する GP-Webシステム 購 入 先 様 用 基 本 操 作 説 明 書 2011 年 12 月 29 日 パナソニック 株 式 会 社 コーポレート 情 報 システム 社 0 目 次 本 書 では GP-Webシステムの 購 入 先 操 作 方 法 を 説 明 します 1 1. GP-Webを 活 用 した 化 学 物 質 情 報 収 集 の 流 れ 2. GP-Webへログインする 3. 調 査 依

More information

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時 1 1-1 サイト 全 般 デザイン 等 サイト 全 体 が 標 準 化 統 一 化 されたページデザインとすること ただし サイトで 異 なるデザインで 作 成 表 示 することができること 1-2 ヘッダー フッターは 原 則 すべてのページで 統 一 したデザインとすること 1-3 ロゴ イラスト バナーなどサイトに 応 じたデザインで 作 成 すること 1-4 スマートフォンやタブレット 端

More information

競 技 会 の 名 称 や 主 催 者 関 係 は どこにどのデータが 入 らなければならないということはありません ヘッダに 表 示 さ れる 順 に 並 んでいるので 日 程 以 外 は 主 催 者 1 などと 言 った 項 目 名 にこだわらず 適 宜 必 要 に 応 じて 入 力 してくだ

競 技 会 の 名 称 や 主 催 者 関 係 は どこにどのデータが 入 らなければならないということはありません ヘッダに 表 示 さ れる 順 に 並 んでいるので 日 程 以 外 は 主 催 者 1 などと 言 った 項 目 名 にこだわらず 適 宜 必 要 に 応 じて 入 力 してくだ ボルダリング 競 技 用 リザルトサービスのためのワークシート 2 0 1 4 / 0 9 / 0 3 版 これは 競 技 クライミングのボルダリング 種 目 で 成 績 処 理 を 行 うためのワークシートです IFSC 規 則 の 2010 年 版 に 準 拠 した 国 際 大 会 での 処 理 をおこなうためのものです 対 象 となる 競 技 会 は 2 もしくは 3 ラ ウンド 最 初 のラウンドで

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt) 平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔

More information

Microsoft PowerPoint - webmail_manual-estore_482.ppt

Microsoft PowerPoint - webmail_manual-estore_482.ppt 店 舗 メール 利 用 マニュアル 2013.04 04.08 08 ver.2.3 1 1. 目 次 表 紙... 1 1. 目 次... 2 2.ログイン(PC)... 3 3. 受 信... 4 4.メール 閲 覧,,,,,... 5 5.メール 削 除... 6 6.メール 作 成... 7 7.メール 作 成 ( 添 付 ファイル)... 12 8.メール 返 信... 13 9.フォルダ

More information

ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台 につき 1セット 購 入 が 原 則 となっ

ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台 につき 1セット 購 入 が 原 則 となっ Multi LABELIST V5 練 習 マニュアル - - 2014.3 第 2 版 2014 年 3 月 18 日 株 式 会 社 サトー ご 注 意 1. 本 ソフトウェアの 著 作 権 は 株 式 会 社 サトーにあります 2. 本 ソフトウェアおよびマニュアルの 一 部 または 全 部 を 無 断 で 使 用 複 製 することはできません 3. 本 ソフトウェアは コンピュータ 1 台

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

More information

bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ

bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ 操 作 マニュアル 04/04 株 式 会 社 インターアローズ bmobilized 操 作 マニュアル Ver.0404 目 次 ログインパスワードの 設 定 変 更... カスタマイズページへのログイン... ダッシュボード... 4 ツールの 基 本 操 作... 5 編 集 プラグイン... 6 電 話 をかける プラグイン... 6 編 集 コンテンツ 選 択... 8 編 集 デザイン...

More information

目 次 Ⅰ. はじめに 1. の 概 要 1 2. の 共 通 操 作 2 3. のログイン 方 法 8 Ⅱ. 届 出 情 報 管 理 機 能 1. 届 出 情 報 ( 事 業 者 ( 法 人 ) 情 報 )を 検 索 する [ 国 ][ 県 ][ 市 ] 13 2. 届 出 情 報 ( 事 業 者

目 次 Ⅰ. はじめに 1. の 概 要 1 2. の 共 通 操 作 2 3. のログイン 方 法 8 Ⅱ. 届 出 情 報 管 理 機 能 1. 届 出 情 報 ( 事 業 者 ( 法 人 ) 情 報 )を 検 索 する [ 国 ][ 県 ][ 市 ] 13 2. 届 出 情 報 ( 事 業 者 操 作 マニュアル 厚 生 労 働 省 社 会 援 護 局 障 害 保 健 福 祉 部 企 画 課 第 0.1 版 目 次 Ⅰ. はじめに 1. の 概 要 1 2. の 共 通 操 作 2 3. のログイン 方 法 8 Ⅱ. 届 出 情 報 管 理 機 能 1. 届 出 情 報 ( 事 業 者 ( 法 人 ) 情 報 )を 検 索 する [ 国 ][ 県 ][ 市 ] 13 2. 届 出 情 報

More information

ウェブアクセシビリティガイドライン

ウェブアクセシビリティガイドライン 兵 庫 県 小 野 市 ウェブアクセシビリティガイドライン 第 1 版 平 成 24 年 12 月 情 報 管 理 課 目 次 1 ガイドライン 策 定 の 目 的... 1 2 ガイドラインの 適 用 範 囲... 1 3 ウェブアクセシビリティの 必 要 性... 1 4 根 拠 となる 規 格... 1 5 配 慮 の 対 象 となる 利 用 者... 2 6 達 成 等 級 と 達 成 基

More information

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変 カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインのヘッダー 部 グローバルメニューは 右 上 の 3 本 線 アイコン に 格 納 され ます クリックすると メニュー 項 目 が 展 開 します 上 部 メニューはそれぞれ テキスト から 左 上 のアイコン( 画 像 )に 切 り 替 わります 管 理 画 面 でのブロック 配 置 ヘッダー

More information

サーバサイドスクリプトPHPを実感しよう

サーバサイドスクリプトPHPを実感しよう 第 3 講 サーバサイドスクリプト PHP を 実 感 しよう! クライアントサイドでは HTML に 埋 め 込 んだ(あるいは 別 ファイルから HTML に 読 み 込 まれた)JavaScript によって さまざまな 処 理 や 動 的 ページの 生 成 を 行 えることは すで に 第 3 講 までで 学 習 しました しかし HTML と JavaScript の 組 合 せではどうしても

More information

スライド 1

スライド 1 サイトクリエイション 機 能 一 覧 マニュアル 改 定 履 歴 平 成 18 年 5 月 17 日 平 成 18 年 9 月 5 日 平 成 18 年 12 月 11 日 平 成 19 年 4 月 21 日 SiteCreation 機 能 一 覧 マニュアル 配 布 開 始 しました (Ver1.0) 履 歴 機 能 を 追 加 しました (Ver2.0) RSSフィード 作 成 機 能 RSSボタン

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます  出 しの 部 分 をクリックするとコンテンツですよ の 字 が 表 されます もう 度  出 しをクリックするとコンテンツですよ の 字 が 非 表 になります 折 りたたみパネルの 基 / 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 24 年 10 月 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HPイメージ お 問 合 わせ フォーム BtoBページ 掲 示 板 メインページ 商 品 ページ 電 子 決 算 公 告 ページ 1 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン

More information

アスラテック株式会社 会社案内

アスラテック株式会社 会社案内 JavaScript SDK for V-Sido CONNECT 利 用 の 手 引 き Mac 編 アスラテック 株 式 会 社 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 構 成 と 開 発 イメージ p.5 2. 初 期 設 定 とVSidoConn4Macの 導 入 2-1. Bluetoothのペアリング

More information

スライド 1

スライド 1 株 式 会 社 アジタス コーディングレギュレーション 改 訂 履 歴 初 版 2009/10/01 一 部 修 正 2010/12/06 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2011/05/02 対 応 ブラウザ 修 正 2013/04/12 文 言 内 容 一 部 修 正 2014/02/25 対 応 メーラーの 追 加 2014/04/08 メールアドレスの

More information

1. 画 面 パターンと 画 面 の 見 方 (2) メインメニュー 画 面 c d e メインメニュー 画 面 1 ヘッダ ヘッダは システムバナー ログイン 情 報 ドロップダウンメニューで 構 成 されます 2 新 着 情 報 利 用 者 が 新 規 利 用 申 込 を 行 った 場 合 など

1. 画 面 パターンと 画 面 の 見 方 (2) メインメニュー 画 面 c d e メインメニュー 画 面 1 ヘッダ ヘッダは システムバナー ログイン 情 報 ドロップダウンメニューで 構 成 されます 2 新 着 情 報 利 用 者 が 新 規 利 用 申 込 を 行 った 場 合 など 1. 画 面 パターンと 画 面 の 見 方 詳 細 な 操 作 方 法 1. 画 面 パターンと 画 面 の 見 方 主 な 画 面 のパターン および 画 面 の 見 方 について 説 明 します (1) ログイン 画 面 ログイン 画 面 1 ログインの 入 力 項 目 ログイン ID パスワードの 入 力 項 目 ログインボタンを 表 示 します リンク 以 下 のリンクを 表 示 します

More information

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示..

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示.. Cform カレンダー 予 約 システム 機 能 解 説 マニュアル 目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示... 9 4. 予 約 申 込 管

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

迷惑メールフィルタリングコントロールパネル利用者マニュアル

迷惑メールフィルタリングコントロールパネル利用者マニュアル 迷 惑 メールフィルタリングサービス コントロールパネル 利 用 者 マニュアル( 一 般 ユーザ 向 け) 第 1.6 版 目 次 1. 本 マニュアルについて... 1 2. はじめに... 1 3. 使 用 方 法... 2 3.1. ご 使 用 の 前 に... 2 3.2. ログイン / ログアウト 操 作... 2 3.2.1. ログイン 操 作... 2 3.2.2. ログアウト 操

More information

SILAND.JP テンプレート集

SILAND.JP テンプレート集 i-vote ユーザ 操 作 手 順 書 ~ 立 候 補 申 請 編 ~ 第 1.0 版 作 成 日 2016 年 1 月 26 日 最 終 更 新 日 2016 年 1 月 26 日 1 / 24 Copyright 2016 MEC Corporation. All right Reserved 改 版 履 歴 版 数 日 付 改 版 内 容 1.0 2016/01/26 新 規 作 成 2 /

More information

staff_man

staff_man Webポータルシステム 学 務 部 教 務 課 学 生 課 平 成 8 年 4 月 日 目 次 はじめに ページ.ログイン ~4 ページ 接 続 方 法 ログイン ポータルトップ 画 面 4 アカウントについて.Webシステムの 構 成 5 ページ.シラバス シラバス 登 録 6 ページ 他 授 業 科 目 のコピー 8 ページ 4. 授 業 関 連 シラバス 照 会 8 ページ 担 当 科 目 時

More information

2. ステップアンケート 機 能 の 概 要 2-1 ステップアンケートとは ステップアンケートとは 1 画 面 につき1 質 問 を 表 示 する 段 階 式 アンケートのことです 本 機 能 では 運 用 中 の 既 存 会 員 に 対 するステップアンケートをより 簡 単 に 設 定 実 施

2. ステップアンケート 機 能 の 概 要 2-1 ステップアンケートとは ステップアンケートとは 1 画 面 につき1 質 問 を 表 示 する 段 階 式 アンケートのことです 本 機 能 では 運 用 中 の 既 存 会 員 に 対 するステップアンケートをより 簡 単 に 設 定 実 施 ステップアンケート 1. はじめに (1) 対 象 本 書 の 内 容 は スパイラル ( 以 下 本 サービス という ) をご 利 用 のユーザーを 対 象 としています (2) 本 書 の 目 的 本 書 では ユーザーが 本 サービスの ステップアンケート 機 能 を 理 解 し 適 切 な 設 定 が 行 えるようになること を 目 的 としています (3) 必 要 なシステム Internet

More information

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記

3. 管 理 画 面 (ダッシュボード) ログインすると 下 図 のダッシュボードの 画 面 となります ( 権 限 によって 左 のメニューが 異 なります ) 4.ブログの 投 稿 方 法 管 理 画 面 の 左 側 のメニューから 投 稿 をクリックします ここに 投 稿 された 公 開 記 2011.12.8 カメリア パルの 会 ホームページ 編 集 マニュアル http://pal.nono1.jp 1.はじめに カメリア パルの 会 のホームページは フリーのブログシステム(WORDPRESS)を 使 用 してい ます このシステムの 特 徴 としては ブログの 基 本 的 使 用 方 法 である 日 記 を 追 加 するだけでなく 固 定 的 なページを 作 成 することができ

More information

第5回

第5回 情 報 教 育 演 習 II 第 5 回 HTML(4) 前 回 に 引 き 続 き Webの 中 心 的 な 技 術 HTML について 実 習 をします 今 回 で HTMLのまとめ になります HTML(4) 1. 水 平 線 をつくる( 復 習 ) 2.イメージを 貼 り 付 ける 今 回 の 課 題 1.HTMLファイルを 作 成 する 2.HTMLファイルの 文 法 をチェックする -

More information

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度 より 各 種 結 婚 支 援 事 業 に 取 り 組 んでいるところであるが

石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度 より 各 種 結 婚 支 援 事 業 に 取 り 組 んでいるところであるが 石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) に 係 る 調 達 仕 様 書 平 成 27 年 10 月 公 益 財 団 法 人 いしかわ 子 育 て 支 援 財 団 石 川 県 結 婚 支 援 ポータルサイト( 仮 称 ) 調 達 仕 様 書 1 事 業 の 目 的 いしかわ 子 育 て 支 援 財 団 では 進 行 する 未 婚 化 晩 婚 化 に 対 応 し 平 成 17 年 度

More information

変 更 履 歴 版 日 付 区 分 変 更 内 容 変 更 個 所 1 1.00 2015/11/30 新 規 初 版 作 成 2 1.01 2015/12/10 修 正 資 料 カバー 画 像 設 定 の 操 作 内 容 を 追 加 5.1.3. 資 料 カバー 画 像 設 定 i

変 更 履 歴 版 日 付 区 分 変 更 内 容 変 更 個 所 1 1.00 2015/11/30 新 規 初 版 作 成 2 1.01 2015/12/10 修 正 資 料 カバー 画 像 設 定 の 操 作 内 容 を 追 加 5.1.3. 資 料 カバー 画 像 設 定 i J-STAGE 操 作 マニュアル 資 料 情 報 の 各 種 設 定 変 更 方 法 < 第 1.01 版 > 平 成 27 年 12 月 国 立 研 究 開 発 法 人 科 学 技 術 振 興 機 構 変 更 履 歴 版 日 付 区 分 変 更 内 容 変 更 個 所 1 1.00 2015/11/30 新 規 初 版 作 成 2 1.01 2015/12/10 修 正 資 料 カバー 画 像

More information

モール管理者マニュアル Ver.1.0

モール管理者マニュアル Ver.1.0 1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14 目 次 1. Html について... 3 1.1. Html とは... 4 1.2. Html タグの 基 本... 5 1.2.1. HTML タグの 基 礎... 5 1.2.2. HTML タグの 種 類 ( 主 要 タグ)... 7 2. Html 編 集 ツール...

More information

kagoemon-a

kagoemon-a かごえもんの 初 期 設 定 は 全 ての 設 定 で 行 います 基 本 設 定 ショッピングカートシステム ( 注 文 フォーム ) に 関 する 基 本 設 定 を 行 います 基 本 設 定 の 管 理 画 面 用 パスワード とは? 商 品 注 文 における 送 料 および 注 文 完 了 時 に 自 動 送 信 されるショップの 専 用 メールアドレス メール 文 に 記 載 する 挨

More information

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7

1.2. ご 利 用 環 境 1.2.1. 推 奨 ブラウザ Internet Explorer 10 11 Google Chrome(バージョン 32 時 点 で 動 作 確 認 済 み) Mozilla Firefox(バージョン 26 時 点 で 動 作 確 認 済 み) Safari 7 1. アーカイブデータベースを 検 索 / 閲 覧 する 1.1. データの 検 索 方 法 東 京 アーカイブ では 以 下 に 分 類 されるカテゴリの 画 像 データ 資 料 データを 閲 覧 できます 江 戸 城 浮 世 絵 双 六 和 漢 書 江 戸 東 京 の 災 害 記 録 絵 葉 書 写 真 帖 近 代 の 地 図 東 京 府 東 京 市 関 係 資 料 番 付 建 築 図 面 書

More information

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に 第 3クールSeason3 WebサービスAPI 勉 強 会 Google Maps API v3の 利 用 目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施

More information

(A) IE Javaキャッシュのクリア (A) IE Javaキャッシュのクリア 1 すべての 画 面 を[ ]ボタンで 閉 じ デスクトップ 画 面 の 状 態 にします 画 面 左 下 のWindowsのスタートボタンをクリックします 2 コントロールパネル をクリックし コントロールパネルを

(A) IE Javaキャッシュのクリア (A) IE Javaキャッシュのクリア 1 すべての 画 面 を[ ]ボタンで 閉 じ デスクトップ 画 面 の 状 態 にします 画 面 左 下 のWindowsのスタートボタンをクリックします 2 コントロールパネル をクリックし コントロールパネルを Internet Explorer Javaの 設 定 確 認 Internet Explorer Javaの 設 定 確 認 ~ 概 要 ~ こんなときにお 試 しください ストックハウスBasic ストックハウスExpertが 起 動 しない 起 動 するが 画 面 の 一 部 が 表 示 されない 動 作 や 反 応 が 重 い 遅 い 固 まる 上 記 のいずれかに 該 当 する 場 合 以

More information

<4D6963726F736F667420576F7264202D2083568389836F8358834B8343836883758362834E3230313381698B4C93FC8D8096DA8ADC82DE816A2E646F63>

<4D6963726F736F667420576F7264202D2083568389836F8358834B8343836883758362834E3230313381698B4C93FC8D8096DA8ADC82DE816A2E646F63> 2013 Webシラバスシステム ガイドブック 1 も く じ 2013 年 シラバス 入 力 項 目 について ( 必 ずご 確 認 ください) P3 シラバスシステム 利 用 可 能 クライアント 環 境 について P5 ログイン 方 法 P6 教 員 メニュー P7 シラバス 作 成 P8 担 当 講 義 一 覧 P9 シラバス 入 力 画 面 P10 基 本 的 な 入 力 方 法 統 合

More information

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの

目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの Google Blogger 入 門 目 次 アカウント 取 得... 1 Blogger にログイン... 3 Blogger の 基 本 ページ... 4 新 規 ブログの 作 成... 5 ブログの 管 理 画 面... 5 ブログの 投 稿... 6 挿 入 画 像 の 設 定... 7 ページの 作 成... 8 レイアウトの 編 集... 9 テンプレートの 設 定... 10 ブログの

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ページ 作 成 フローについて ページの 構 造 について(レイアウト/ 共 通 ヘッダー フッター) 1 共 通 ヘッダー フッターのレイアウトパターン * 共 通 ヘッダー フッター サイドバーのパターンは 複 数 作 成 することが 可 能 です * 基 本 上 層 ページの 共 通 パーツを 引 き 継 ぎますが 任 意 に 変 更 することも 可 能 です ページの 構 造 について(コンテンツ

More information

POWER EGG V2.01 ユーザーズマニュアル グループウェア編

POWER EGG V2.01 ユーザーズマニュアル グループウェア編 POWER EGG V2.0 ユーザーズマニュアル グループウェア 編 Copyright 2009 D-CIRCLE,INC. All Rights Reserved 2009.4 はじめに 本 書 では POWER EGG 利 用 者 向 けに POWER EGG のグループウェア 機 能 に 関 する 操 作 を します 当 マニュアルでは グループウェア 機 能 に 関 する のみ 行 います

More information

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に GC スクリプト 利 用 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に 追 加 してみよう...

More information

(Microsoft PowerPoint - \203|\203P\203J\203\223\221\200\215\354\201y201005\211\374\222\371\224\305\201z.ppt)

(Microsoft PowerPoint - \203|\203P\203J\203\223\221\200\215\354\201y201005\211\374\222\371\224\305\201z.ppt) ホームページセミナー 構 築 編 ポケカン 基 本 操 作 ホームページ 作 成 北 大 阪 商 工 会 議 所 目 次 ポケカン 基 本 操 作 Pokecan(ポケカン)とは.. 3 ログイン/ログアウト ログアウト Pokecanにログイン.. 5 管 理 ページトップ.. 6 マイホームページを 開 く.. 7 Pokecanからログアウト.. 8 初 期 設 定 管 理 ページトップ A.

More information

28年オンライン調査システム操作説明書

28年オンライン調査システム操作説明書 平 成 28 年 科 学 技 術 研 究 調 査 オ ン ラ イ ン 調 査 シ ス テ ム 操 作 説 明 書 科 学 技 術 研 究 調 査 では 郵 送 に 加 えてオンライン 調 査 システムを 利 用 した インターネットによるご 回 答 も 可 能 となっています オンライン 調 査 システムの 利 用 には フリーソフトである AdobeReader の 所 定 バージョン 等 の 利

More information

IM-Annotation for Accel Platform — 操作ガイド   第3版 2015-08-01  

IM-Annotation for Accel Platform — 操作ガイド   第3版 2015-08-01   Copyright 2014 NTT DATA INTRAMART CORPORATION 1 Top 目 次 IM-Annotation for Accel Platform 操 作 ガイド 第 3 版 2015-08-01 1. 改 訂 情 報 2. はじめに 2.1. 本 書 の 位 置 づけ 3. 各 部 の 名 称 3.1. フォーム 編 集 画 面 3.2. アプリケーション 実 行 画

More information

目 次 1 はじめに...4 1.1 本 マニュアルで 記 載 する 内 容...4 1.2 システム 要 件...4 1.2.1 対 応 OS(オペレーティングシステム) 要 件...4 1.2.2 対 応 Web ブラウザ 要 件...7 1.2.3 ディスプレイ 解 像 度 要 件...9 1

目 次 1 はじめに...4 1.1 本 マニュアルで 記 載 する 内 容...4 1.2 システム 要 件...4 1.2.1 対 応 OS(オペレーティングシステム) 要 件...4 1.2.2 対 応 Web ブラウザ 要 件...7 1.2.3 ディスプレイ 解 像 度 要 件...9 1 商 工 中 金 外 為 Web 為 替 予 約 サービス ご 利 用 マニュアル 1ログイン 編 Ver.1.2 2015 年 3 月 - 1 - 目 次 1 はじめに...4 1.1 本 マニュアルで 記 載 する 内 容...4 1.2 システム 要 件...4 1.2.1 対 応 OS(オペレーティングシステム) 要 件...4 1.2.2 対 応 Web ブラウザ 要 件...7 1.2.3

More information

スライド 1

スライド 1 SkyVisualEditorオンラインセミナー ~ 第 5 回 基 本 編 ~ Salesforceで 見 積 作 成 画 面 を 作 成 しよう 2014 年 9 月 16 日 ( 火 ) はじめに 本 セミナーの 目 的 SkyVisualEditorの 機 能 および 設 定 方 法 の 紹 介 を 目 的 としています 本 日 のセミナーのご 対 象 者 Salesforceで 見 積 画

More information

スライド 1

スライド 1 新 機 能 マニュアル( 事 業 者 向 け) 平 成 22 年 7 月 新 機 能 概 要 携 帯 電 話 メールアドレス 入 力 項 目 追 加 ( 詳 細 2P) ページデザイン 選 択 (5パターン) ページレイアウトが 選 択 可 能 になります ( 詳 細 3P) Googleマップ 設 定 Googleマップを 自 動 表 示 します ( 詳 細 4P) QRコードの 表 示 / 非

More information

Ver2.2.0 新機能ガイド

Ver2.2.0 新機能ガイド アプリケーション 新 機 能 ガイド ~Version 2.9.0~ 1 目 次 1 はじめに... 3 2 新 機 能... 3 3 機 能 紹 介 フォトレポート... 4 3.1 売 場 ノート フォトレポート の PC 画 面 対 応 #902... 4 4 機 能 紹 介 お 知 らせ... 18 4.1 店 舗 スタッフ 回 答 の 店 長 閲 覧 不 可 オプション 追 加 #916...

More information

■ユーザ

■ユーザ Joruri CMS 2.0.0 基 本 マニュアル (2013.7.16) コンテンツ アンケート コンテンツ アンケート では 以 下 のような 機 能 特 徴 を 備 えたアンケートフォームペ ージの 作 成 を 行 うことが 出 来 ます TinyMCE の 使 用 で HTML 等 の 複 雑 な 知 識 を 必 要 とせず MS WORD のような 感 覚 でアンケ ートフォームのページを

More information