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

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: [' 管 理 者 にお 問 い 合 わせください', ' 連 絡 先 : admin@xxx.xxx.xxx'] ) ); // 処 理 が 成 功 した 場 合 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

PowerPoint プレゼンテーション

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

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

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

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

More information

入 札 参 加 資 格 申 請 システム 操 作 マニュアル 入 札 参 加 資 格 の 資 格 有 効 ( 変 更 ) 日 を 迎 えると 追 加 届 の 登 録 ができるようになります ( 入 札 参 加 資 格 申 請 の 定 時 受 付 では いずれかの 申 請 先 団 体 から 入 札 参

入 札 参 加 資 格 申 請 システム 操 作 マニュアル 入 札 参 加 資 格 の 資 格 有 効 ( 変 更 ) 日 を 迎 えると 追 加 届 の 登 録 ができるようになります ( 入 札 参 加 資 格 申 請 の 定 時 受 付 では いずれかの 申 請 先 団 体 から 入 札 参 あいち 電 子 調 達 共 同 システム( 物 品 等 ) 入 札 参 加 資 格 申 請 システム 操 作 マニュアル - 業 者 - 目 次... 8-1 8-1 本 店 ID( 業 者 用 ID)の 確 認 ~ 初 期 パスワード 変 更... 8-3 8-1-1 入 札 参 加 資 格 申 請 システム メニュー... 8-3 8-1-2 契 約 営 業 所 等 ID 確 認 (パスワード

More information

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63>

<4D6963726F736F667420576F7264202D20819C486F70658F6F93588ED297708AC7979D89E696CA837D836A83858341838B8169342E33566572816A2E646F63> 商 品 管 理 商 品 管 理 を 行 うためのメニューです 4.1 商 品 管 理 のサイドメニュー 商 品 管 理 には 以 下 のサイドメニューがあります 商 品 一 覧 登 録 済 みの 商 品 の 一 覧 を 表 示 します 既 に 登 録 済 みの 商 品 の 検 索 検 索 した 商 品 を 編 集 する 際 に 使 用 します 新 規 作 成 商 品 を 新 規 登 録 する 画 面

More information

研究者情報データベース

研究者情報データベース 研 究 者 情 報 管 理 システム 研 究 者 向 けデータ 一 括 登 録 機 能 操 作 マニュアル 2013 年 6 月 4 日 目 次 1. はじめに... 1 1.1 本 マニュアルの 注 意 事 項... 1 2. 操 作 手 順... 2 2.1 データ 登 録 手 順... 2 2.2 データ 読 み 込 みエラー 時 の 対 応 手 順... 13 3. 登 録 データ 一 覧...

More information

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2

KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 目 次 動 作 環 境 特 長 方 法 方 法 起 動 終 了 方 法 方 法 操 作 方 法 使 方 使 方 使 方 詳 細 設 定 使 方 KINGSOFT Office 2016 動 作 環 境 対 応 日 本 語 版 版 共 通 利 用 上 記 動 作 以 上 以 上 空 容 量 以 上 他 接 続 環 境 推 奨 必 要 2 KINGSOFT Office 2016 特 長 主 特 長 以

More information

スライド 1

スライド 1 Android 版 目 視 録 運 用 操 作 マニュアル 作 成 2012/03/22 更 新 2014/09/26 目 視 録 とは 携 帯 またはパソコンで 施 工 写 真 を 登 録 確 認 できるシステムです ご 利 用 の 為 にはIDとパスワードが 必 要 です TEG ログインID ( ) パスワード ( ) https://teg.mokusiroku.com/

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

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

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

SchITコモンズ【活用編】

SchITコモンズ【活用編】 2016 SchIT コモンズ 活 用 編 株 式 会 社 スキット 1. 画 像 のサイズ 変 更 (リサイズ) 1. 画 像 の 大 き さ( 幅 )を 変 更 (ア) 画 像 を 挿 入 する 場 合 は[ 画 像 の 挿 入 ]のマークをクリックします [ 参 照 ]をクリックし 任 意 の 場 所 から 挿 入 したい 画 像 を 選 択 し [ 画 像 の 挿 入 ]をクリックします (イ)

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 履 修 履 歴 データベースの 仕 組 み 学 生 が 履 修 履 歴 を 登 録 して 企 業 へデータを 送 信 すると 企 業 担 当 者 が 履 修 履 歴 データを 見 られるようになります 不 特 定 の 企 業 に 履 修 履 歴 データが 閲 覧 されるわけではありません < 基 本 的 な 流 れ> A 社 データ ベース 応 募 企 業 へ データを 送 信 学 生 A 専

More information

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合

TIPS - 棚 割 りを 開 始 するまで Liteを 起 動 し 企 業 情 報 の 追 加 を 行 い 棚 割 を 行 う 企 業 の 追 加 をして 下 さい 企 業 情 報 の 追 加 時 に エラーメッセージが 表 示 された 場 合 別 途 TIPS トラブルが 発 生 した 場 合 TIPS 目 次 TIPS 項 目 棚 割 りを 開 始 するまで 商 品 画 像 の 追 加 方 法 商 品 情 報 の 一 括 更 新 登 録 方 法 棚 割 情 報 の 連 携 方 法 小 売 様 棚 割 ソフトとの 棚 割 情 報 連 携 について 他 棚 割 ソフトとの 棚 割 情 報 連 携 について 棚 割 情 報 のExcel 取 込 について 棚 板 設 定 の 詳 細 商 品 設

More information

■デザイン

■デザイン Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) デザイン デザインでは 各 ページ 内 に 構 成 されるパーツである ピース と それをページ 内 に 配 置 し 構 成 する レイアウト を 作 成 できます また スタイルシート でピース レイ アウトの HTML を 制 御 し 装 飾 する CSS を 設 定 できます ピース デザイン>ピース ピース をクリックすると

More information

(Microsoft PowerPoint - Ver12\203o\201[\203W\203\207\203\223\203A\203b\203v\216\221\227\277.ppt)

(Microsoft PowerPoint - Ver12\203o\201[\203W\203\207\203\223\203A\203b\203v\216\221\227\277.ppt) ACAD-DENKI DENKI Ver.12 新 機 能 / 改 善 機 能 アルファテック 株 式 会 社 1 新 機 能 改 善 機 能 一 覧 ACAD-DENKI/EL Ver.12 新 機 能 と 改 善 機 能 新 メニュー/ 新 機 能 拡 張 プロジェクト 管 理 外 部 端 子 コネクタ 端 子 ネット 分 割 化 リアルタイム 線 番 挿 入 改 善 項 目 図 題 情 報 編

More information

01_07_01 データのインポート_エクスポート_1

01_07_01 データのインポート_エクスポート_1 データのインポート/エクスポートについて 概 要 スタッフエクスプレスでは 他 のソフトウェアで 作 成 されたスタッフデータ 得 意 先 データなどを 取 り 込 む(インポートする)ことができます また スタッフエクスプレスに 登 録 済 みのデータを Excel 形 式 CSV 形 式 で 出 力 (エクスポート)す ることができます 注 意 インポートできるデータは 次 の 条 件 を 満

More information

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン

治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.3 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバン 2014 年 1 月 7 日 治 験 依 頼 者 各 位 新 潟 市 民 病 院 治 験 管 理 室 Excel 形 式 の 電 子 プロトコール 提 出 の 御 依 頼 当 院 では 効 率 的 で 正 確 な 治 験 の 実 施 のため 電 子 カルテ 内 に 専 用 の Excel 形 式 による 電 子 プロトコールを 導 入 しております つきましては 治 験 依 頼 の 際 に 下 記

More information

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

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

More information

返還同意書作成支援 操作説明書

返還同意書作成支援 操作説明書 返 還 金 同 意 書 等 作 成 支 援 操 作 説 明 書 当 EXCELを 使 用 することにより 以 下 のものを 作 成 できます 返 還 同 意 書 保 険 者 別 返 還 金 額 一 覧 表 返 還 内 訳 表 返 還 集 計 表 1 返 還 金 同 意 書 等 作 成 支 援 (EXCEL 形 式 )を 開 きます 2 タイトル 画 面 が 数 秒 間 表 示 されますので 注 意

More information

研究者総覧システム

研究者総覧システム 関 西 大 学 学 術 情 報 システム 操 作 マニュアル 検 索 用 第 1.5 版 2010/4/1 関 西 大 学 更 新 履 歴 版 数 作 成 日 内 容 1.0 2008/11/28 新 規 作 成 1.1 2009/04/08 画 像 の 変 更 ログイン 画 面 への 遷 移 を 追 加 キーワード 検 索 の 対 象 を 変 更 概 要 の 変 更 対 象 ブラウザの 追 加 1.2

More information

改 定 履 歴 改 訂 日 改 訂 理 由 及 び 内 容 承 認 者 確 認 者 改 訂 者 05/8/7 新 版 発 行 05/0/5 推 奨 動 作 環 境 を 追 記

改 定 履 歴 改 訂 日 改 訂 理 由 及 び 内 容 承 認 者 確 認 者 改 訂 者 05/8/7 新 版 発 行 05/0/5 推 奨 動 作 環 境 を 追 記 代 理 店 様 向 け 業 務 支 援 システム Ke-web オペレーションマニュアル 05/0 ケニス 株 式 会 社 改 定 履 歴 改 訂 日 改 訂 理 由 及 び 内 容 承 認 者 確 認 者 改 訂 者 05/8/7 新 版 発 行 05/0/5 推 奨 動 作 環 境 を 追 記 総 則 本 文 書 の 位 置 付 け 本 文 書 は 代 理 店 向 け 営 業 支 援 システム

More information

1/2

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

More information

目 次 遺 失 物 管 理 プログラム 利 用 者 マニュアル 1. 動 作 条 件... 2 2. 遺 失 物 管 理 プログラムのインストール... 2 3. 運 用 の 流 れ... 3 3.1. 起 動 方 法... 3 4. 操 作 方 法 について... 4 4.1. 基 本 的 な 操

目 次 遺 失 物 管 理 プログラム 利 用 者 マニュアル 1. 動 作 条 件... 2 2. 遺 失 物 管 理 プログラムのインストール... 2 3. 運 用 の 流 れ... 3 3.1. 起 動 方 法... 3 4. 操 作 方 法 について... 4 4.1. 基 本 的 な 操 平 成 19 年 11 月 9 日 目 次 遺 失 物 管 理 プログラム 利 用 者 マニュアル 1. 動 作 条 件... 2 2. 遺 失 物 管 理 プログラムのインストール... 2 3. 運 用 の 流 れ... 3 3.1. 起 動 方 法... 3 4. 操 作 方 法 について... 4 4.1. 基 本 的 な 操 作 方 法... 4 4.2. 項 目 の 入 力 値 制 限

More information

スライド 1

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

More information

■ユーザ

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

More information

スライド 1

スライド 1 アリババ ワールドパスポート 製 品 詳 細 ご 利 用 ガイド 2010/03/11 Ver1.00 2012/10/09 Ver1.50 お 問 い 合 わせ 先 アリババ 株 式 会 社 メール:infoggs@alibaba-inc.jp 103-0007 東 京 都 中 央 区 日 本 橋 浜 町 2-12-4 エスエス 製 薬 本 社 ビル4F 目 次 文 字 装 飾 の 追 加 変 更

More information

タイトル位置

タイトル位置 シンプルモード(Biz) 利 用 者 マニュアル 目 次 1. アプリ 概 要 2 1. 機 能 概 要 4 2. 各 画 面 の 名 称 と 機 能 5 2. ご 利 用 までの 流 れ 6 3. 画 面 説 明 8 1. 中 央 画 面 11 1. 中 央 画 面 共 通 機 能 12 2. 中 央 画 面 (6ボタン) 13 3. 中 央 画 面 (3ボタンとアイコン) 14 2. サイドスクリーン

More information

医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情

医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート - 目 次 - < 第 1 章 > 共 通 事 項 説 明 医 療 費 自 己 負 担 額 支 払 明 細 書 入 力 シート 目 次 1.1 本 システムの 注 意 点 1 1.2 入 力 項 目 について 1.2.1 基 本 情 報 入 力 項 目 2 1.2.2 子 ども 医 療 費 明 細 入 力 項 目 3 1.2.3 ひとり

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 問 い 合 せフォームを 作 成 する Copyright Diverta inc. All right reserved. 1 目 次 1. 管 理 画 面 の 説 明 1-1 問 い 合 わせモジュールとは 1-2 機 能 概 要 1-3 基 本 設 定 1-3-1 基 本 設 定 - 管 理 画 面 のアクセス 制 限 - 1-3-2 基 本 設 定 -メール 設 定 - 2. 問 い 合 わせフォームを

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

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード]

Microsoft PowerPoint - webサイト更新マニュアル20150306.ppt [互換モード] 目 次 目 次 2 全 体 概 要 3 管 理 画 面 へのログイン 4 ページの 種 類 5 新 規 投 稿 の 流 れ 7 記 事 を 投 稿 する( 各 要 素 のパターン) 8 記 事 を 投 稿 する( 要 素 の 順 番 入 れ 替 え 削 除 の 方 法 ) 10 画 像 追 加 11 投 稿 の 編 集 14 サイドエリアの 編 集 16 投 稿 の 削 除 17 新 規 カテゴリの

More information

目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3. 表 紙... 4 4.スケジュール... 5 5. 組 入 れ 基 準... 9 6. 併 用 禁 止 薬... 10 7. 併 用 注 意 薬... 10 8. 同 種 同 効 薬... 10 9. 医 師 モニタリング..

目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3. 表 紙... 4 4.スケジュール... 5 5. 組 入 れ 基 準... 9 6. 併 用 禁 止 薬... 10 7. 併 用 注 意 薬... 10 8. 同 種 同 効 薬... 10 9. 医 師 モニタリング.. 治 験 実 施 管 理 システム NMGCP 向 け Excel 形 式 プロトコール 作 成 手 順 書 V4.0.4 対 応 版 第 1 版 株 式 会 社 富 士 通 アドバンストエンジニアリング All Rights Reserved,Copyright 株 式 会 社 富 士 通 アドバンストエンジニアリング 2010 目 次 1.はじめに... 3 2. 書 式 の 説 明... 3 3.

More information

購買ポータルサイトyOASIS簡易説明書 b

購買ポータルサイトyOASIS簡易説明書 b 購 買 ポータルサイト yoasis 簡 易 説 明 書 横 河 電 機 株 式 会 社 本 書 は 購 買 ポータルサイト yoasis の 簡 易 的 な 基 本 操 作 について 記 載 してあります 詳 細 な 操 作 方 法 については 別 冊 の 購 買 ポータルサイト yoasis 操 作 説 明 書 をご 覧 下 さい 本 書 の 内 容 は 性 能 / 機 能 の 向 上 などにより

More information

<4D6963726F736F667420576F7264202D203193FA8AD45F95CA8E86325F89898F4B315F94F093EF8AA98D90939994AD97DF914F82CC8FEE95F182CC8EFB8F57814589C28E8B89BB2E646F63>

<4D6963726F736F667420576F7264202D203193FA8AD45F95CA8E86325F89898F4B315F94F093EF8AA98D90939994AD97DF914F82CC8FEE95F182CC8EFB8F57814589C28E8B89BB2E646F63> 1.ログイン 方 法 1-1: 県 域 統 合 型 GIS 総 合 ポータルから 研 修 用 のユーザID 及 びパスワードを 入 力 後 ログインする 1-2:ログイン 後 マップ 編 集 を 選 択 します 1-3:マップ 一 覧 から 編 集 したいマップを 選 ぶ 今 回 の 場 合 1. 避 難 勧 告 等 発 令 までの 情 報 収 集 可 視 化 ( 班 ) を 選 択 する 1 2.

More information

■コンテンツ

■コンテンツ Joruri CMS 2.0.0 基 本 マニュアル (2013.7.23) 2012.2.14 データ データでは 複 数 の 場 所 で 共 通 して 利 用 できる 情 報 (テキスト 形 式 ファイル 形 式 )を 作 成 登 録 管 理 できます テキスト データ>テキスト 作 成 されたテキストが 一 覧 表 示 されます 複 数 の 場 所 で 利 用 するテキスト( 住 所 TEL

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

4. 発 注 者 コード 及 び 成 績 評 定 8 (Q4-1) 該 当 の 発 注 者 コードが 付 与 されていないので 追 加 してください... 8 (Q4-2) 発 注 者 コードが 不 正 確 空 白 のものがあり 点 数 を 入 力 できません 成 績 評 定 の 入 力 ができませ

4. 発 注 者 コード 及 び 成 績 評 定 8 (Q4-1) 該 当 の 発 注 者 コードが 付 与 されていないので 追 加 してください... 8 (Q4-2) 発 注 者 コードが 不 正 確 空 白 のものがあり 点 数 を 入 力 できません 成 績 評 定 の 入 力 ができませ 2012.06.26 検 索 システムFAQ( 目 次 ) 1.PUBDIS 登 録 ( 対 象 等 ) 3 (Q1-1)PFI のテクニカルアドバイザリー 業 務 のような 調 査 業 務 は 登 録 できますか... 3 (Q1-2) 業 務 カルテは 受 注 金 額 によって 受 付 けているのですか また 業 務 受 注 時 に PUBDIS センターから 何 か 書 類 を 出 していますか...

More information

SPARQL Finder設置方法

SPARQL Finder設置方法 簡 易 LOD 検 索 サイト 作 成 ツール (SPARQL Finder) 設 定 方 法 2013/12/25 大 阪 大 学 産 業 科 学 研 究 所 加 藤 敦 丈, 古 崎 晃 司 概 要 目 次 概 要 本 ドキュメントは, 簡 易 LOD 検 索 サイト 作 成 ツール の 利 用 方 法 を 解 説 したものです. ツールの 詳 細,ダウンロードは 公 開 サイト https://sourceforge.jp/projects/easylod/wiki/easylodsite

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 楽 天 市 場 Yahooショッピング! 商 品 複 製 マニュアル 1 在 庫 連 携 を 行 うためには 事 前 に 各 モールのコード 合 わせの 作 業 が 必 要 です 詳 しくは 各 モールとの 在 庫 連 携 に 必 要 なコード 連 携 マニュアルをご 覧 ください 2 楽 天 Yahooショッピング!の 仕 様 は 変 更 になっている 場 合 があります 各 モールの 仕 様 も

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション インターネット 出 願 手 引 き (システムWAKABA 継 続 入 学 申 請 手 引 き) 目 次 1.システムWAKABAトップ 画 面 2 2. 学 生 種 選 択 画 面 3 3. 出 願 申 請 画 面 (1) 全 科 履 修 生 の 場 合 4 (2) 全 科 履 修 生 以 外 の 場 合 6 4.オンライン 授 業 8 5. 科 目 登 録 申 請 画 面 (1) 授 業 種 別

More information

Ver 改 訂 日 付 改 訂 内 容 1

Ver 改 訂 日 付 改 訂 内 容 1 大 学 評 価 データベースシステム 一 括 登 録 マニュアル ( 第 1.00 版 ) SRA 東 北 Ver 改 訂 日 付 改 訂 内 容 1 目 次 1. 大 学 評 価 データベースの 使 用 方 法 について...3 1.1.データ 一 括 登 録...3 1.1.1. 一 括 登 録 の 目 的...3 1.1.2. 一 括 登 録 の 利 用 上 での 注 意 点...3 1.1.3.

More information

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378>

<4D F736F F D2090C389AA8CA72D92F18F6F2D D F ED28CFC82AF91808DEC837D836A B E838B A815B816A2E646F6378> 1. 基 本 事 項 1.1. システムで 行 えること デジタルライブラリー では データベース 上 に 登 録 されている 様 々なカテゴリのデータを 検 索 閲 覧 できます データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 簡 易 検 索 データの 共 通 項 目 に 条 件 を 指 定 し 全 データを 横 断 して 検 索 できます 詳 細 検 索

More information

<4D6963726F736F667420576F7264202D20819C8140928692B78AFA95DB91538C7689E68DEC90AC289

<4D6963726F736F667420576F7264202D20819C8140928692B78AFA95DB91538C7689E68DEC90AC289 官 庁 施 設 情 報 管 理 システム (BIMMS-N) 操 作 説 明 書 9 施 設 維 持 管 理 9.4 中 長 期 保 全 計 画 作 成 ( 東 北 版 ) 平 成 26 年 10 月 国 土 交 通 省 東 北 地 方 整 備 局 営 繕 部 目 次 9 施 設 維 持 管 理 9.4 中 長 期 保 全 計 画 作 成 ( 東 北 版 ) 9.4.0 中 長 期 保 全 計 画

More information

第 1 章 共 通 操 作 1.1 ログイン PIN 番 号 入 力 (1) 大 阪 府 電 子 入 札 システム トップ 画 面 より 1 電 子 入 札 システム ボタンをクリックし ます 1 1-2

第 1 章 共 通 操 作 1.1 ログイン PIN 番 号 入 力 (1) 大 阪 府 電 子 入 札 システム トップ 画 面 より 1 電 子 入 札 システム ボタンをクリックし ます 1 1-2 第 1 章 共 通 操 作 第 1 章 共 通 操 作...2 1.1 ログイン PIN 番 号 入 力... 2 1.2 調 達 案 件 一 覧 表 示... 6 1.3 連 絡 事 項 の 確 認... 14 1.4 企 業 プロパティの 変 更... 18 1-1 第 1 章 共 通 操 作 1.1 ログイン PIN 番 号 入 力 (1) 大 阪 府 電 子 入 札 システム トップ 画 面

More information

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3.

目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5. 操 作 方 法 (ワークシート 取 込 ) 3. カシオグリーン 調 達 調 査 (ProChemist) カシオ 調 査 票 回 答 マニュアル Ver.20131116 カシオ 計 算 機 株 式 会 社 目 次 1.はじめに 1-1. はじめに 2. 操 作 2-1. 概 要 2-2. 操 作 方 法 ( 調 査 依 頼 の 確 認 ) 2-3. 操 作 方 法 ( 回 答 登 録 ) 2-4. 操 作 方 法 (ワークシート 出 力 ) 2-5.

More information

Office 10 パッケージ版「リンク集」

Office 10 パッケージ版「リンク集」 Office 10 パッケージ 版 リンク 集 バージョン 10.3 Copyright (C) 2013-2015 Cybozu リンク 集 リンク 集 は よく 利 用 するWebサイトのURLを 登 録 するアプリケーションです リンク 集 には 次 の2 種 類 のリンクを 管 理 できます 共 有 リンク: すべてのユーザーが 共 有 して 使 用 できるリンクです システム 管 理 者

More information

以 下 に 手 順 の 流 れを 記 載 します 3ページ 以 降 で 各 項 目 の 手 順 を 説 明 します ( をクリックすると 該 当 ページにジャンプします ) また 4ページに 汎 用 データ 受 入 に 関 するよくあるお 問 い 合 わせをご 紹 介 しています Step (3ペー

以 下 に 手 順 の 流 れを 記 載 します 3ページ 以 降 で 各 項 目 の 手 順 を 説 明 します ( をクリックすると 該 当 ページにジャンプします ) また 4ページに 汎 用 データ 受 入 に 関 するよくあるお 問 い 合 わせをご 紹 介 しています Step (3ペー 人 事 奉 行 iシリーズ 汎 用 データ 受 入 の 手 順 書 汎 用 データの 作 成 方 法 を 知 りたい 汎 用 データのフォーマットがわからない 汎 用 データ 受 入 をしたら 受 入 エラーが 発 生 した について 社 員 情 報 データの 受 入 を 例 に 説 明 します 本 手 順 書 では OBC 受 入 形 式 ( ) の 汎 用 データの 受 入 を 受 入 フォーマットに

More information

スライド 1

スライド 1 2014.10 版 Ver.5.04 遠 藤 照 明 設 計 支 援 ツール:Jobサポート 2 次 元 照 度 計 算 ソフト Luxsheet マニュアル ルクスシート 1 P 3 型 番 入 力 による 検 索 P 4 P 5 P 7 P 9 P10 P11 P12 P13 P14 P16 P17 P18 P19 P21 2 平 均 照 度 計 算 を 一 覧 表 で 簡 単 に 作 成 できます

More information

< 入 力 にあたっての 注 意 事 項 > 応 募 基 本 情 報 の 申 請 は 代 表 申 請 方 式 の 場 合 は 代 表 申 請 を 行 う 応 募 者 が 連 名 申 請 方 式 の 場 合 は 連 名 申 請 する 応 募 者 のうちのいずれかの1 者 が 研 究 体 を 代 表 し

< 入 力 にあたっての 注 意 事 項 > 応 募 基 本 情 報 の 申 請 は 代 表 申 請 方 式 の 場 合 は 代 表 申 請 を 行 う 応 募 者 が 連 名 申 請 方 式 の 場 合 は 連 名 申 請 する 応 募 者 のうちのいずれかの1 者 が 研 究 体 を 代 表 し 平 成 24 年 度 地 域 イノベーション 創 出 実 証 研 究 補 助 事 業 e-rad 応 募 基 本 情 報 申 請 マニュアル 本 事 業 への 応 募 にあたっては 事 前 に e-rad( 府 省 共 通 研 究 開 発 管 理 システム) へ 研 究 機 関 の 登 録 研 究 者 の 登 録 を 行 ったう えで 応 募 基 本 情 報 を 申 請 することが 必 要 となります

More information

2. 研 究 者 / 評 価 者 情 報 修 正 この 画 面 では 研 究 者 が 自 分 自 身 の 情 報 の 修 正 を 行 います (A) 研 究 者 / 評 価 者 情 報 の 修 正 () 研 究 者 / 評 価 者 情 報 修 正 画 面 を 開 く HOME 画 面 メニューの 研

2. 研 究 者 / 評 価 者 情 報 修 正 この 画 面 では 研 究 者 が 自 分 自 身 の 情 報 の 修 正 を 行 います (A) 研 究 者 / 評 価 者 情 報 の 修 正 () 研 究 者 / 評 価 者 情 報 修 正 画 面 を 開 く HOME 画 面 メニューの 研 2. 研 究 者 / 評 価 者 情 報 修 正 ⅰ. 概 要 研 究 者 / 評 価 者 情 報 修 正 メニューでは ご 自 身 の 情 報 管 理 を 行 います 研 究 者 / 評 価 者 情 報 修 正 ご 自 身 の 情 報 が 表 示 されますので 確 認 を 行 います 必 要 に 応 じて 情 報 修 正 を 行 います 操 作 方 法 は 2. 研 究 者 / 評 価 者 情 報

More information

WebMail ユーザーズガイド

WebMail ユーザーズガイド ニフティクラウド ビジネスメール メール 共 有 サービス ユーザーズガイド 第 1.1 版 平 成 26 年 5 月 19 日 ニフティ 株 式 会 社 目 次 はじめに... 3 1. 共 有 メールボックスとは... 4 2. 共 有 メールボックスを 表 示 する... 5 3. 閲 覧 履 歴 操 作 履 歴 を 表 示 する... 8 4. 共 有 メールボックスからメールを 送 信 する...

More information

「1 所得税及び復興特別所得税の確定申告書データをお持ちの方」からの更正の請求書・修正申告書作成編

「1  所得税及び復興特別所得税の確定申告書データをお持ちの方」からの更正の請求書・修正申告書作成編 既 に 提 出 した 所 得 税 及 び 復 興 特 別 所 得 税 の 確 定 申 告 の 申 告 額 に 誤 り があった 場 合 で 納 める 税 金 が 多 すぎた 場 合 や 還 付 される 税 金 が 少 なす ぎた 場 合 に 提 出 する 更 正 の 請 求 書 や 申 告 をした 税 額 等 が 実 際 より 少 な すぎた 場 合 や 還 付 される 税 金 が 多 すぎた 場

More information

目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あ

目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あ 大 学 情 報 データベースシステム EXCEL 一 括 登 録 マニュアル 目 次 1. 大 学 情 報 データベースシステムの 使 用 方 法 について... 1 1.1.EXCEL 一 括 登 録... 1 1.2.EXCEL ダウンロード... 2 1.2.1. 検 索 条 件 の 指 定 プレビュー... 3 1.2.2.EXCEL ダウンロード(データ 抽 出 あり)... 5 1.2.3.EXCEL

More information

2 課 題 管 理 ( 科 学 研 究 費 補 助 金 ) 画 面 が 表 示 されます 補 助 事 業 期 間 終 了 後 欄 の[ 入 力 ] をクリックします [ 入 力 ]ボタンが 表 示 されていない 場 合 には 所 属 する 研 究 機 関 の 事 務 局 等 へお 問 い 合 わせく

2 課 題 管 理 ( 科 学 研 究 費 補 助 金 ) 画 面 が 表 示 されます 補 助 事 業 期 間 終 了 後 欄 の[ 入 力 ] をクリックします [ 入 力 ]ボタンが 表 示 されていない 場 合 には 所 属 する 研 究 機 関 の 事 務 局 等 へお 問 い 合 わせく 2.6. 研 究 成 果 報 告 書 の 作 成 2.6.1 研 究 成 果 報 告 内 容 ファイルを 作 成 1 科 学 研 究 費 助 成 事 業 の Web ページ 等 から 研 究 成 果 報 告 内 容 ファイル 様 式 をダウンロードし ます 2 ダウンロードした 研 究 成 果 報 告 内 容 ファイル 様 式 に 報 告 内 容 を 記 入 し 保 存 します 所 定 の 様 式

More information

決 算 時 の 流 れ-1 1 年 間 の 仕 訳 入 力 が 終 了 したら 以 下 の 手 順 で 決 算 書 を 作 成 します Step1 精 算 表 を 印 刷 する 1.[F2 入 力 ]タブより 合 計 表 を 選 択 し 月 度 の 指 定 で 期 首 ~12ヶ 月 目 を 指 定

決 算 時 の 流 れ-1 1 年 間 の 仕 訳 入 力 が 終 了 したら 以 下 の 手 順 で 決 算 書 を 作 成 します Step1 精 算 表 を 印 刷 する 1.[F2 入 力 ]タブより 合 計 表 を 選 択 し 月 度 の 指 定 で 期 首 ~12ヶ 月 目 を 指 定 財 務 応 援 決 算 時 の 処 理 財 務 応 援 の 決 算 時 の 処 理 について 説 明 します (C) EPSON SALES JAPAN CORPORATION, All rights reserved.2012 1 決 算 時 の 流 れ-1 1 年 間 の 仕 訳 入 力 が 終 了 したら 以 下 の 手 順 で 決 算 書 を 作 成 します Step1 精 算 表 を 印

More information

Microsoft Word - Jimdo基礎編(8版)

Microsoft Word - Jimdo基礎編(8版) 目 次 第 1 章 本 書 について... 1 1-1 JIMDO とは... 1 1-2 自 分 でホームページを 作 るメリット... 1 1-3 JIMDO の 料 金 プラン... 2 1-4 本 書 で 制 作 するサンプルのホームページ... 3 1-5 サンプルのデータについて... 4 第 2 章 ホームページを 開 設 する... 7 2-1 ホームページを 開 設 する... 7

More information

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可

GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの 方 のみ 操 作 可 GRIDY SFA カスタム 項 目 操 作 ガイド 2016 年 1 月 20 日 ナレッジスイート 株 式 会 社 1 GRIDY SFA カスタム 項 目 操 作 ガイド 用 本 書 はに 必 要 な 操 作 を 解 説 しております は GRIDY SFA ののことです GRIDY SFA へ 申 し 込 み 最 初 に 登 録 を 行 った 方 がそのままとなります カスタム 項 目 はの

More information

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378>

<4D F736F F D F B B838082F090DD927582B782E995FB96405F E646F6378> アンケートフォームを 設 置 する 方 法 < 目 次 > 1 アンケートフォームを 利 用 するための 設 定 をする 2 1-1 アンケートフォームの 詳 細 設 定 をする 1-2 アンケートフォームの 入 力 画 面 を 作 成 する 1-3 お 客 さんが 入 力 内 容 を 確 認 するためのページを 作 成 する 1-4 アンケート 完 了 後 に 表 示 するお 礼 画 面 を 作

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

目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保 存 する 20 step4 登 録 する 21 step5 管 理 者 による 承

目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保 存 する 20 step4 登 録 する 21 step5 管 理 者 による 承 京 都 市 社 会 福 祉 研 修 情 報 システム 京 福 祉 の 研 修 情 報 ネット 操 作 マニュアル - 主 催 者 編 - 第 1.3 版 2016 年 5 月 16 日 目 次 1 ログインする 1 2 研 修 情 報 を 登 録 する 2 step1 登 録 フォームに 入 力 する 2 step2 プレビューで 入 力 内 容 を 確 認 する 18 step3 下 書 き 保

More information

HTG-35U ブルーバック表示の手順書 (2014年12月改定)

HTG-35U ブルーバック表示の手順書 (2014年12月改定) HTG-35U ブルーバック 表 示 の 手 順 書 概 要 本 書 は HTG-35U にてブルーバックの 画 面 を 出 力 するための 手 順 書 です HTG-35U のビットマップ 出 力 機 能 及 び 固 定 文 字 表 示 機 能 を 使 用 してブルーバックの 表 示 を 設 定 します また ブルーバックの 表 示 / 非 表 示 をタイマーで 自 動 に 切 り 替 えを 行

More information

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索

2. データを 検 索 する なごやコレクションのデータを 検 索 するための 方 法 として キーワード 検 索 詳 細 検 索 の 二 通 りの 検 索 方 法 が あります 2.1. キーワードから 探 す キーワードを 入 力 する トップページの 入 力 ボックスに 検 索 1. なごやコレクション 基 本 事 項 1.1. なごやコレクションで 行 えること なごやコレクション では 登 録 されているカテゴリの 画 像 データ 資 料 データを 検 索 閲 覧 できます 資 料 データを 検 索 する キーワード 検 索 全 データをフリーワードで 検 索 できます 詳 細 検 索 カテゴリ 別 にデータをタイトル/ 作 者 / 刊 行 年 等 で 絞 り 込 んで

More information

目 次 JAVIS Appli の 基 本 機 能... 3 JAVIS Appli について... 3 音 声 確 認 機 能 JAVIS Appli( 有 償 版 )の 機 能... 4 音 声 で 読 みの 確 認 をする... 4 辞 書 機 能... 5 単 語 を 登 録 する... 5

目 次 JAVIS Appli の 基 本 機 能... 3 JAVIS Appli について... 3 音 声 確 認 機 能 JAVIS Appli( 有 償 版 )の 機 能... 4 音 声 で 読 みの 確 認 をする... 4 辞 書 機 能... 5 単 語 を 登 録 する... 5 アドイン 版 ********************************************* 操 作 説 明 書 ********************************************* 目 次 JAVIS Appli の 基 本 機 能... 3 JAVIS Appli について... 3 音 声 確 認 機 能 JAVIS Appli( 有 償 版 )の 機 能...

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

検 索 文 字 列 が 住 所 にマッチするならば 地 図 画 面 を 表 示 します 検 索 文 字 列 が 住 所 の 一 部 ならば キーワードを 含 む 検 索 結 果 画 面 を 表 示 します

検 索 文 字 列 が 住 所 にマッチするならば 地 図 画 面 を 表 示 します 検 索 文 字 列 が 住 所 の 一 部 ならば キーワードを 含 む 検 索 結 果 画 面 を 表 示 します 名 古 屋 市 都 市 計 画 情 報 提 供 システム 操 作 方 法 検 索 方 法 キーワードから 探 す 住 所 または 住 所 の 一 部 から 地 図 を 検 索 する 事 が 出 来 ます [ 名 古 屋 市 ] 以 降 の 住 所 施 設 名 またはその 一 部 を 入 力 し 検 索 をクリックします 検 索 文 字 列 が 住 所 にマッチするならば 地 図 画 面 を 表 示

More information

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

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

More information

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高

< 目 次 > 8. 雇 用 保 険 高 年 齢 雇 用 継 続 給 付 27 ( 育 児 休 業 給 付 介 護 休 業 給 付 ) 8.1 高 年 齢 雇 用 継 続 給 付 画 面 のマイナンバー 設 定 27 8.2 高 年 齢 雇 用 継 続 給 付 の 電 子 申 請 28 8.3 高 雇 用 保 険 マイナンバー 改 定 向 け 操 作 説 明 書 < 目 次 > 1.マイナンバー 等 の 法 令 改 定 対 応 について 3 1.1 法 令 改 定 の 変 更 点 3 1.2 その 他 主 要 な 変 更 点 4 2.マイナンバー 管 理 システムとの 連 携 設 定 5 2.1 マイナ de 社 労 夢 の 運 用 設 定 5 2.2 マイナ de 社 労 夢 CL の 運

More information

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

intra-mart Accel Platform — UIデザインガイドライン(PC版)   第5版   Copyright 0 NTT DATA INTRAMART CORPORATION Top UI デザインガイドライン ( PC 版 ). 改訂情報. 禁止事項. はじめに.. 本書の目的.. 対象読者.. 本書の構成. UI 基本方針. 対応環境条件.. クライアント要件.. 画面解像度.. Webブラウザ設定 6. UIデザイン 6.. UIデザインの流れ 6.. 画面レイアウト 6.. body

More information

確 定 申 告 書 作 成 システム 操 作 手 順 書 ~ 個 人 利 用 者 向 け 操 作 説 明 書 ~ 平 成 27 年 1 月 JA 長 野 県 営 農 センター ( 株 ) 長 野 県 協 同 電 算 目 次 1.システムの 起 動... 1 ... 1 ... 2 2.ログインとログアウト... 2 ... 3 ...

More information

WEB保守パック申込

WEB保守パック申込 保 守 パックWeb 受 付 システム 操 作 ガイド はじめに 1. 本 サイトについて 2. 本 操 作 ガイドについて 3. 動 作 環 境 4. 注 意 事 項 5. 登 録 の 流 れ 仮 IDでのログインから 登 録 まで 6. 登 録 書 について 7. 登 録 書 記 載 の 仮 IDおよびパスワードでのログイン 8. 登 録 情 報 の 確 認 変 更 9. 機 器 情 報 の 確

More information

目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホ

目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホ 296Cloud マニュアル 1/15 目 次 ログイン 方 法... 3 基 本 画 面 構 成... 4 メールサービス... 5 メールサービス 画 面 構 成... 5 アカウント 詳 細 / 設 定... 6 高 機 能 フィルター... 7 ユーザーフィルター 設 定... 8 新 規 フィルターの 追 加... 8 My ホームページ... 11 My ホームページ 画 面 構 成...

More information

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e

2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e 2.2.1 科 研 費 電 子 申 請 システム( 交 付 申 請 手 続 き)へログイン 1 Web ブラウザを 起 動 し 日 本 学 術 振 興 会 の 電 子 申 請 のご 案 内 サイト (http://www-shinsei.jsps.go.jp/)を 表 示 し 科 学 研 究 費 助 成 事 業 をクリックします 8 2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が

More information

V-CUBE One

V-CUBE One V-CUBE One Office 365 連 携 マニュアル ブイキューブ 2016/06/03 この 文 書 は V-CUBE One の Office 365 連 携 用 ご 利 用 マニュアルです 更 新 履 歴 更 新 日 内 容 2016/02/09 新 規 作 成 2016/03/11 Office 365 ID を 既 存 の One 利 用 者 と 紐 付 ける 機 能 に 関 する

More information

1. 概 要 Webで 申 込 みした 手 続 きの 内 容 とNEXIでの 手 続 状 況 を Web 申 込 状 況 一 覧 で 確 認 することができます また 各 種 手 続 きにおいて 申 込 みを 完 了 せずに 保 存 状 態 にした 手 続 きを この 一 覧 から 再 開 すること

1. 概 要 Webで 申 込 みした 手 続 きの 内 容 とNEXIでの 手 続 状 況 を Web 申 込 状 況 一 覧 で 確 認 することができます また 各 種 手 続 きにおいて 申 込 みを 完 了 せずに 保 存 状 態 にした 手 続 きを この 一 覧 から 再 開 すること 日 本 貿 易 保 険 Webサービス 操 作 マニュアル 4. Web 申 込 状 況 一 覧 照 会 (C) Copyright Nippon Export and Investment Insurance. All rights reserved. 1. 概 要 Webで 申 込 みした 手 続 きの 内 容 とNEXIでの 手 続 状 況 を Web 申 込 状 況 一 覧 で 確 認 することができます

More information

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ

5-2 一 般 ユーザー 用 :メール 2 送 信 者 のリンクをクリックすると 受 信 メールの 内 容 を 見 ることができます 受 信 メール 内 容 画 面 項 目 送 信 者 宛 先 CC 本 文 (テキスト) 本 文 (HTML) メールアドレスのリンクをクリックするとアドレス 帳 へ 5-1 一 般 ユーザー 用 :メール お 使 いのブラウザ 上 でメールの 送 受 信 ができます メールはJobMagicのサーバーにて 管 理 されており いつでもどこでも 別 のマシーンでログインしても 同 じ 環 境 でご 利 用 いただけます 受 信 したメールを 読 む 1 受 信 したメールを 読 むには3 種 類 の 方 法 があります メニューからメールメニューをクリック 新 着

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

Gmail 利用者ガイド

Gmail 利用者ガイド Gmail 利 用 者 ガイド 目 次 1. はじめに... 1 2. Gmail を 利 用 する 前 に... 2 3. 初 めてのログイン... 4 3.1. ログイン... 4 3.2. CAPTCHA の 入 力... 5 4. メールボックスの 説 明... 8 5. メールの 受 信... 9 6. メールの 送 信 返 信... 10 6.1. メールの 新 規 作 成... 10

More information

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 5. エディタの 使 い 方 5.1. エディタとは? NetCommons の 全 モジュールで 共 通 する 編 集 画 面 です 5.2. 通 常 のエディタの 使 い 方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19)(20)(21) (22) (23) (24) (25)

More information

目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 ) 13

目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 ) 13 積 算 内 訳 書 の 作 成 マニュアル 平 成 26 年 1 形 県 県 整 備 部 建 設 企 画 課 目 次 1. 積 算 内 訳 書 に 関 する 留 意 事 項 1 ページ 2. 積 算 内 訳 書 のダウンロード 3 ページ 3. 積 算 内 訳 書 の 作 成 (Excel 2003の 場 合 ) 6 ページ 4. 積 算 内 訳 書 の 作 成 (Excel 2007の 場 合 )

More information

DN6(R04).vin

DN6(R04).vin page 1 / 2 DataNature6(R04)リリースノート 新 機 能 機 能 改 良 (1) 期 間 項 目 への 締 め 日 の 反 映 年 度 上 期 / 下 期 四 半 期 において 設 定 した 締 め 日 を 反 映 させるかどうかの 設 定 を 追 加 (2) 週 の 設 定 方 法 の 追 加 日 付 から 期 間 の 設 定 で 週 を 追 加 する 場 合 に 週 の"

More information

<4D6963726F736F667420576F7264202D20817982B382F182AC82F18A4F88D75765628354815B83728358817A82B297989770837D836A83858341838B5F8F898AFA90DD92E85F2057696E646F7773389770566572312E302E646F6378>

<4D6963726F736F667420576F7264202D20817982B382F182AC82F18A4F88D75765628354815B83728358817A82B297989770837D836A83858341838B5F8F898AFA90DD92E85F2057696E646F7773389770566572312E302E646F6378> さんぎん 外 為 Web サービス ご 利 用 マニュアル 初 期 設 定 編 Ver.1.0 ( ) 2015 年 5 月 21 日 - 1 - 目 次 1.1 本 マニュアルで 記 載 する 内 容... 4 1.2 システム 要 件... 4 1.2.1 対 応 OS(オペレーティングシステム) 要 件... 4 1.2.2 対 応 Web ブラウザ 要 件... 6 1.2.3 ディスプレイ

More information

PowerPoint プレゼンテーション

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

More information

R4財務対応障害一覧

R4財務対応障害一覧 1 仕 訳 入 力 仕 訳 入 力 時 摘 要 欄 で. + Enter を 押 すと アプリケーションでエラーが 発 生 しまインデックスが 配 列 の 境 界 外 です が 出 る 場 合 がある 問 題 に 対 応 しま 2 仕 訳 入 力 仕 訳 入 力 主 科 目 と 補 助 科 目 を 固 定 にすると2 行 目 以 降 の 補 助 科 目 コピーが 動 作 しない 問 題 に 対 応

More information

目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 -------------------- 5 画 面 説 明 ログイン -------------------- 6 直 送 先 選 択 1 -----

目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 -------------------- 5 画 面 説 明 ログイン -------------------- 6 直 送 先 選 択 1 ----- DONKEL order system 御 利 用 ガイド お 得 意 様 : 様 電 話 : ご 担 当 者 様 : お 得 意 様 ID: パスワード: * 変 更 希 望 の 方 はP4をご 覧 ください ドンケル 株 式 会 社 目 次 機 能 -------------------- 3 運 用 上 の 注 意 -------------------- 4 処 理 手 順 --------------------

More information

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

Microsoft PowerPoint - J_AuthorManual_JPSJ.ppt [互換モード] ScholarOne Manuscripts オンライン 投 稿 マニュアル 1 語 表 の 切 替 え 2 ログイン 34 アカウント 作 成 5 メインメニュー 6 ダッシュボード 7 Step 1: 種 別 タイトル 抄 録 8 Step 2: キーワード 9 Step 3: 著 者 10 Step 4: 希 望 査 読 者 11 Step 5: 設 問 1213 Step 6: ファイルアップロード

More information

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影

機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連 携 機 能 院 内 で 撮 影 厚 生 労 働 省 シームレスな 健 康 情 報 活 用 基 盤 実 証 事 業 地 域 連 携 システム システム 仕 様 書 1 機 能 概 要 概 要 平 成 24 年 度 シームレスな 地 域 連 携 医 療 の 実 現 実 証 事 業 に 対 応 するため 地 域 連 携 システム( 能 登 北 部 版 )を 構 築 する 機 能 < 機 能 追 加 変 更 一 覧 > 1. 画 像 連

More information

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を

SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 文 言 変 更 p.12(1. 基 本 事 項 ) (5)SXF 入 出 力 バージョン Ver.2 形 式 と Ver.3.0 形 式 および Ver.3.1 形 式 の 入 出 力 機 能 を SXF 仕 様 実 装 規 約 版 ( 幾 何 検 定 編 ) 新 旧 対 照 表 2013/3/26 改 訂 の 要 因 旧 新 (2013 年 4 月 版 ) 文 言 削 除 p.11(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 p.5(1. 基 本 事 項 ) (2) 保 証 すべき 実 数 の 精 度 1. 用 紙 系 ( 線 種 ピッチ 等 用 紙 上 の 大 きさで

More information

1. 目 次 1 目 次 7 会 員 検 索 申 込 2 ログイン 方 法 ( 初 回 ) 8 活 動 状 況 ( 申 込 申 受 お 見 合 い 管 理 ) 3 ログイン 方 法 (2 回 目 以 降 ) 9 活 動 状 況 ( 不 成 立 履 歴 削 除 ) 4 パスワードを 忘 れた 時 は

1. 目 次 1 目 次 7 会 員 検 索 申 込 2 ログイン 方 法 ( 初 回 ) 8 活 動 状 況 ( 申 込 申 受 お 見 合 い 管 理 ) 3 ログイン 方 法 (2 回 目 以 降 ) 9 活 動 状 況 ( 不 成 立 履 歴 削 除 ) 4 パスワードを 忘 れた 時 は IBJシステム 会 員 様 PC 画 面 概 要 書 2015.7 1. 目 次 1 目 次 7 会 員 検 索 申 込 2 ログイン 方 法 ( 初 回 ) 8 活 動 状 況 ( 申 込 申 受 お 見 合 い 管 理 ) 3 ログイン 方 法 (2 回 目 以 降 ) 9 活 動 状 況 ( 不 成 立 履 歴 削 除 ) 4 パスワードを 忘 れた 時 は 10 連 絡 ボックス 5 ログイン

More information

4 応 募 者 向 けメニュー 画 面 が 表 示 されます 応 募 者 向 けメニュー 画 面 で [ 交 付 内 定 時 の 手 続 を 行 う] [ 交 付 決 定 後 の 手 続 を 行 う]をクリックします 10

4 応 募 者 向 けメニュー 画 面 が 表 示 されます 応 募 者 向 けメニュー 画 面 で [ 交 付 内 定 時 の 手 続 を 行 う] [ 交 付 決 定 後 の 手 続 を 行 う]をクリックします 10 2 科 学 研 究 費 助 成 事 業 のトップページ 画 面 が 表 示 されます [ 研 究 者 ログイン]をクリック します 掲 載 している 画 面 は 例 示 です 随 時 変 更 されます 3 科 研 費 電 子 申 請 システムの 応 募 者 ログイン 画 面 が 表 示 されます e-rad の ID パ ス ワード を 入 力 し [ログイン]をクリックします 9 4 応 募 者

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 創 薬 基 盤 推 進 研 究 事 業 (4 次 公 募 ) H27 年 度 公 募 に 係 る 府 省 共 通 研 究 開 発 管 理 システム (e-rad)への 入 力 方 法 について 1 目 次 1.はじめに 2. 実 際 の 応 募 手 続 き 3. 応 募 手 続 き 完 了 の 確 認 2 1-a. はじめに1 注 意 事 項 1. 平 成 27 年 度 の 創 薬 基 盤 推 進

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

スライド 1

スライド 1 e 研 修 PDCA 運 用 チェック Simple e-learning Management System Plus 操 作 説 明 書 管 理 者 機 能 ( 運 用 チェックテーマ 資 材 作 成 管 理 編 ) 05 年 月 Ver..7 アーチ 株 式 会 社 機 能 e 研 修 管 理 機 能 LOGIN 画 面 (PC 環 境 用 ) 説 明 e 研 修 管 理 機 能 LOGIN

More information

■コンテンツ

■コンテンツ Joruri CMS 1.3.2 基 本 マニュアル (2013.6.28) 2012.2.15 コンテンツ 記 事 コンテンツ 記 事 では 以 下 のような 機 能 特 徴 を 備 えた 記 事 ページの 作 成 を 行 うこと が 出 来 ます TinyMCE の 使 用 で HTML 等 の 複 雑 な 知 識 を 必 要 とせず WORD のような 感 覚 でページを 作 成 ページの 公

More information

目 次 必 ずお 読 みください...2 1. 接 続 方 法...2 1-1 WEB ブラウザ 操 作 方 法... 3 1-2 閲 覧 用 PC で 直 接 ZERO 本 体 と 接 続 する 場 合... 3 2. 各 ページについて...3 2-1 発 電 状 況 画 面 表 示... 3

目 次 必 ずお 読 みください...2 1. 接 続 方 法...2 1-1 WEB ブラウザ 操 作 方 法... 3 1-2 閲 覧 用 PC で 直 接 ZERO 本 体 と 接 続 する 場 合... 3 2. 各 ページについて...3 2-1 発 電 状 況 画 面 表 示... 3 Solar Link ZERO WEB アプリケーション 取 扱 説 明 書 Ver1.2 株 式 会 社 ラプラス システム 2010 年 10 月 4 日 目 次 必 ずお 読 みください...2 1. 接 続 方 法...2 1-1 WEB ブラウザ 操 作 方 法... 3 1-2 閲 覧 用 PC で 直 接 ZERO 本 体 と 接 続 する 場 合... 3 2. 各 ページについて...3

More information

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc)

(Microsoft Word - \215u\213`\203m\201[\203g20090703.doc) 2009/07/03 前 回 のおさらい 関 数 確 認 問 題 水 尾 作 成 の Excel 基 本 動 作 練 習 用 ファイルの 表 タイトルなし を 用 いて 次 の 指 示 を 実 際 に 完 成 させよ 1 セル M50 に セル L50:L54 の 合 計 数 値 をセル K50 の 数 値 で 割 った 結 果 を 表 示 できるよう に 関 数 を 設 定 せよ 2 M50 に

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 書 誌 作 成 機 能 (NACSIS-CAT)の 軽 量 化 合 理 化 電 子 情 報 資 源 への 適 切 な 対 応 のための 資 源 ( 人 的 資 源,システム 資 源, 経 費 を 含 む) の 確 保 のために, 書 誌 作 成 と 書 誌 管 理 作 業 の 軽 量 化 を 図

1 書 誌 作 成 機 能 (NACSIS-CAT)の 軽 量 化 合 理 化 電 子 情 報 資 源 への 適 切 な 対 応 のための 資 源 ( 人 的 資 源,システム 資 源, 経 費 を 含 む) の 確 保 のために, 書 誌 作 成 と 書 誌 管 理 作 業 の 軽 量 化 を 図 平 成 2 8 年 3 月 25 日 NACSIS-CAT 検 討 作 業 部 会 NACSIS-CAT/ILL の 軽 量 化 合 理 化 について( 基 本 方 針 )( 案 ) これからの 学 術 情 報 システム 構 築 検 討 委 員 会 ( 以 下, これから 委 員 会 ) は これか らの 学 術 情 報 システムの 在 り 方 について ( 平 成 27 年 5 月 29 日 )

More information

Ⅰ 校 外 における 研 修 の 留 意 点 1 校 外 における 研 修 のコマ 数 の 考 え ア) 午 前 午 後 の 講 座 は 0.5 日 (0.5 コマ) イ) 全 日 の 講 座 は 1.0 日 (1.0 コマ) 2 校 外 における 研 修 として 選 択 できない 講 座 研 修

Ⅰ 校 外 における 研 修 の 留 意 点 1 校 外 における 研 修 のコマ 数 の 考 え ア) 午 前 午 後 の 講 座 は 0.5 日 (0.5 コマ) イ) 全 日 の 講 座 は 1.0 日 (1.0 コマ) 2 校 外 における 研 修 として 選 択 できない 講 座 研 修 平 成 25 年 度 札 幌 市 10 年 経 験 者 研 修 校 外 における 研 修 ( 共 通 研 修 教 科 指 導 等 研 修 等 )の 入 力 の 手 引 ( 校 外 における 研 修 の 留 意 点 及 び 別 紙 様 式 3 別 紙 様 式 4の 入 力 について) Ⅰ Ⅱ Ⅲ Ⅳ 校 外 における 研 修 の 留 意 点 (p1) 校 外 における 研 修 ( 別 紙 様 式 3)の

More information

OpenCity2説明

OpenCity2説明 和 光 市 市 民 活 動 支 援 サイト 新 掲 示 板 (FCKエディタ)について 通 常 ホームページを 作 成 するには HTML という 専 門 言 語 の 知 識 が 必 要 ですが FCK エディ タを 使 えば ワードやエクセルと 同 じ 感 覚 で タイトル 文 字 を 太 字 にしたり 表 を 作 成 したり 画 像 を 挿 入 したり 更 にはワードで 作 成 した 文 章 スタイルそのままにコピー&ペースト

More information