スマートフォン開発ガイドライン

Transcription

1 スマートフォン 開 発 ガイドライン Ver /4/5 第 4 版

2

3 << 変 更 履 歴 >> 変 更 年 月 日 変 更 内 容 2011/08/12 初 版 2011/11/01 第 1 版 IM-Mobile Framework 画 面 共 通 IMARTタグ 一 覧 において spdatepickerおよびspcalendarに 関 する 記 述 を 追 記 しました 日 付 と 時 刻 の 入 力 について において spdatepickerタグに 関 する 記 述 を 追 記 しました 4 各 工 程 におけるポイント を 追 加 しました 2012/10/31 第 2 版 バージョンを に 変 更 しました IM-Mobile Framework 共 通 画 面 一 覧 にユーザ 共 通 検 索 画 面 を 追 記 しました ユーザ 共 通 検 索 画 面 を 追 加 しました IM-Mobile Framework 画 面 共 通 IMARTタグ 一 覧 において spcollapsibleに 関 する 記 述 を 追 加 しました 3.5 IM-Mobile Framework 画 面 共 通 JavaEE タグの 使 い 方 を 追 加 しました data-rel= back 時 の 画 面 遷 移 エラーについて を 追 加 しました 2013/2/8 第 3 版 コピーライトを 修 正 しました 2013/4/5 第 4 版 初 期 状 態 検 索 の 絞 り 込 み 条 件 の 設 定 に 指 定 可 能 なプロパティを 追 記 しました 検 索 画 面 タブ Plugin 指 定 にプロパティの 使 用 方 法 を 追 記 しました 要 件 は 予 告 なく 変 更 される 場 合 があります

4 目 次 << 目 次 >> 1 はじめに 本 書 の 目 的 概 要 スマートフォン 向 けWebサイト 開 発 IM-Mobile Frameworkについて スマートフォン 向 けサイト 制 作 方 針 基 本 概 念 想 定 する 適 用 範 囲 コンテンツ 制 作 における 基 本 的 な 考 え 方 Webアプリケーションの 利 用 シーンについて 考 える 必 要 最 低 限 かつ 最 適 な 情 報 量 でページを 構 成 する ディスプレイのサイズ デバイスの 向 きについて タッチ 領 域 のサイズ 使 用 するフォント 一 貫 性 のあるユーザインタフェースにする コンテンツの 装 飾 必 須 項 目 の 明 示 トランザクション 処 理 を 行 うときはユーザに 確 認 を 求 める 画 面 設 計 方 針 ページの 構 成 スタイルシートの 利 用 HTML5 への 対 応 複 数 の 内 部 ページを 持 つHTMLについて スマートフォン 用 のコンテンツとして 相 応 しいデザインを 考 える ページ 切 り 替 えのエフェクト 一 覧 形 式 のコンテンツを 表 示 するページのデザイン 方 針 ボタンの 配 置 入 力 部 品 とラベル キー 入 力 の 頻 度 に 配 慮 する 画 面 のスクロール ページ 間 の 遷 移 は どこからどこにいくのかわかるようにする スマートフォン 用 コンテンツでは 相 応 しくないと 思 われる 表 現 表 示 する 情 報 の 優 先 度 を 考 える 戻 るキー について 応 答 時 間 と 画 面 の 設 計 サーチフィルターの 適 用 方 針 スライド 遷 移 とボタン 操 作 イメージ トグルスイッチの 適 用 方 針 IM-Mobile Frameworkプログラミングガイド 基 本 的 な 記 法 基 本 的 な 構 成 HEADタグ 内 部 の 記 述 BODYタグ 内 部 の 記 述 業 務 スケルトンの 使 い 方 業 務 スケルトンのインストール 一 覧 Page ii Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

5 目 次 参 照 登 録 編 集 IM-Mobile Framework 共 通 画 面 の 使 い 方 IM-Mobile Framework 共 通 画 面 一 覧 ポップアップメニューについて ユーザ 共 通 検 索 画 面 IM-Mobile Framework 画 面 共 通 IMARTタグの 使 い 方 IM-Mobile Framework 画 面 共 通 IMARTタグ 一 覧 チェックボックスとラジオボタンの 実 装 について ファイルのダウンロード 用 部 品 の 実 装 方 針 日 付 と 時 刻 の 入 力 について IM-Mobile Framework 画 面 共 通 JavaEEタグの 使 い 方 JSPタグディレクティブ IM-Mobile Framework 画 面 共 通 JavaEEタグ 一 覧 TIPS ページ 遷 移 について Debug.Browseについて data-rel= back 時 の 画 面 遷 移 エラーについて 各 工 程 におけるポイント 開 発 着 手 前 ( 要 件 定 義 まで) 端 末 の 選 定 画 面 イメージ 設 計 工 程 画 面 の 設 計 ビジネスロジックの 設 計 試 験 工 程 試 験 端 末 の 選 定 試 験 観 点 について...56 作 成 者 : 株 式 会 社 NTT データ イントラマート Page iii

6 intra-mart スマートフォン 開 発 ガイドライン 1 はじめに 1.1 本 書 の 目 的 本 書 では IM-Mobile Framework( 以 下 本 フレームワーク と 表 記 )を 使 用 したスマートフォン 向 け Web サイトの 制 作 にあたり 画 面 のデザインの 仕 方 部 品 の 効 果 的 な 利 用 についてのガイドラインについて 説 明 しています 本 書 に 記 載 されている 内 容 を 理 解 していただくことによって 統 一 的 なユーザインタフェースをもつスマートフォン 向 け Web サイトが 構 築 していただけることを 目 的 としています 本 フレームワークでは 本 書 で 説 明 するガイドラインに 沿 った Web サイトを 構 築 していただくための 一 助 として 業 務 スケルトンや 共 通 画 面 各 種 タグを 提 供 しています これらの 詳 細 な 使 用 方 法 については 各 種 ドキュメント を 参 照 してください Page 4 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

7 1 はじめに 1.2 概 要 スマートフォン 向 けWebサイト 開 発 スマートフォン 向 けの Web サイトでは PC 向 けやフィーチャーフォン 向 けの Web サイトとは 異 なる 表 現 が 必 要 と なります 例 えば テキストボックスの 端 に 虫 眼 鏡 のマークがついた 検 索 ボックスや 独 特 なトグルスイッチを 使 用 したコンテンツの 表 現 が 挙 げられます また 画 面 サイズに 応 じたレイアウトを 考 える 必 要 もありますし デバイスが 回 転 することによって 縦 長 表 示 から 横 長 表 示 に 切 り 替 わることも 念 頭 に 置 いておかなければなりません 本 フレームワークを 使 用 することで スマートフォン 向 けに 最 適 化 された Web サイトを 開 発 することができます ま た 本 書 に 示 すガイドラインに 沿 ってコンテンツを 制 作 することで 統 一 性 のあるサイトを 制 作 することができます 本 フレームワークにて 提 供 する 各 部 品 を 使 用 する 前 に まず 本 書 をご 一 読 ください IM-Mobile Frameworkについて 本 フレームワークでは 入 力 部 品 やページデザイン 等 に jquery Mobile を 導 入 し 統 一 的 なデザインでスマート フォン 向 け Web サイトを 構 築 することができるようになっています 本 フレームワークの 提 供 機 能 を 下 表 に 示 しま す また jquery Mobile で 提 供 されている 機 能 をそのまま 使 用 することもできるようになっていますので 本 書 と 併 せ て jquery Mobile のリファレンスもご 参 照 ください 項 番 機 能 概 要 1 業 務 スケルトン ウィザードによる 対 話 形 式 で スマートフォン 向 け Web コンテンツのスケルトンを 作 成 することができます 2 共 通 画 面 ログイン 等 の 定 型 的 な 画 面 をスマートフォン 向 けに 提 供 しています 3 タグライブラリ スマートフォン 向 け Web コンテンツを 制 作 するためのタグライブラリです jquery Mobile 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 5

8 intra-mart スマートフォン 開 発 ガイドライン 2 スマートフォン 向 けサイト 制 作 方 針 2.1 基 本 概 念 想 定 する 適 用 範 囲 本 フレームワーク および 本 書 では 生 産 性 操 作 性 を 重 視 した 業 務 システムに 対 して 適 用 することを 想 定 して います 統 一 的 なユーザインタフェース 画 面 構 成 サイト 構 成 によって ユーザがドキュメントを 見 なくとも 直 観 的 にコンテンツを 操 作 できることを 目 指 します グラフィック 装 飾 やフォント 装 飾 アニメーションやエフェクトは 過 度 に なりすぎず 適 度 なレベルでサイト 制 作 を 行 ってください このため 本 フレームワーク および 本 書 では ゲーム サイトや EC サイトの 構 築 については 想 定 していません コンテンツ 制 作 における 基 本 的 な 考 え 方 スマートフォン 向 けWeb コンテンツの 制 作 において どのようにすれば 利 便 性 や 生 産 性 が 高 まるのかは PC 向 けサイト 制 作 の 場 合 と 大 きな 違 いはありません 重 要 なのは スマートフォン 向 け Web コンテンツでは 表 現 上 の 制 約 が PC 向 けサイトよりも 多 いことであり コンテンツを 構 成 する 部 品 をどう 配 置 し どう 構 成 するか あるいは 分 割 組 み 合 わせるのかについて 考 慮 することです Webアプリケーションの 利 用 シーンについて 考 える コンテンツのデザインにあたっては その Web アプリケーションがどのようなシーンで 利 用 されるかについての 検 討 を 行 ってください 例 えば 太 陽 光 がディスプレイに 射 しこむ 外 出 先 で 利 用 されることや 暗 い 建 物 の 中 で 利 用 されることもあるかもしれません コンテンツのデザインを 行 う 上 では このような 利 用 シーンが Web アプリケーショ ンの 使 い 勝 手 にどのような 影 響 を 及 ぼすかを 念 頭 に 置 いてデザインを 検 討 してください 特 に 画 面 の 配 色 やコ ントラストについてはよく 検 討 を 行 ってください 必 要 最 低 限 かつ 最 適 な 情 報 量 でページを 構 成 する スマートフォンのユーザは 電 波 状 況 が 安 定 した 場 所 でスマートフォンを 操 作 するとは 限 りません 外 出 先 で 操 作 することも 多 く また 電 波 状 況 が 良 好 ではない 環 境 で 使 用 することも 考 えられます このため ページに 掲 載 する 情 報 は 必 要 最 低 限 に 留 め かつ 最 適 な 情 報 量 で 構 成 するようにします これにより ユーザは 最 適 なパフォーマ ンスと 応 答 時 間 を 得 ることができます また 画 面 遷 移 中 は 処 理 中 メッセージ 等 のフィードバックを 通 知 するように し システムとスマートフォンが 通 信 を 行 っていることをアピールするようにしてください Page 6 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

9 2 スマートフォン 向 けサイト 制 作 方 針 ディスプレイのサイズ デバイスの 向 きについて ページのサイズは 特 定 の 解 像 度 を 意 識 しないようにします jquery Mobile は 端 末 の 解 像 度 や 縦 横 の 向 きを 吸 収 して 部 品 の 配 置 を 行 うようになっています また 端 末 の 向 きを 変 えたときの 再 配 置 処 理 についても jquery Mobile が 行 います ただし スマートフォンは 縦 画 面 で 使 用 することが 多 いと 思 われるため 作 成 するページも 基 本 的 には 縦 表 示 で 最 適 化 するようにしてください スマートフォンのコンテン ツは 縦 横 どちらでも 表 示 可 能 スマートフォンのコンテンツは 縦 横 どちら でも 表 示 可 能 Cancel OK Cancel OK 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 7

10 intra-mart スマートフォン 開 発 ガイドライン タッチ 領 域 のサイズ ボタンやリンク 等 のタッチ 領 域 のサイズは 最 低 6mm 四 方 以 上 のタッチ 領 域 を 確 保 するようにしてください また 他 のボタンやリンクと 密 接 に 並 べすぎずに 適 度 な 間 隔 を 空 けて 配 置 するようにしてください 本 フレームワークを 使 用 していればユーザが 快 適 に 感 じるサイズの 入 力 部 品 でページを 構 成 することができます カスタマイズにより 独 自 の 部 品 を 使 用 する 場 合 には 注 意 してください 本 フレームワークを 使 用 することで ボタンのサイズはスマートフォン 用 に 最 適 な 大 きさに 自 動 で 調 整 が 行 われま す 小 さすぎるボタンはユーザの 指 でうまくタップできなくなるおそれがあります あまりよくないレイアウトの 例 4 つのリンクが 密 接 してしまっているので ページ 1 を 見 たいと 思 っても 他 のリンク をタップしてしまうかもしれません フォントサイズを 小 さくしてしまうとさらに 扱 いづらくなってしまいます 使 用 するフォント フォントのサイズは なるべく 12 ポイント 以 上 を 使 用 するようにしてください やむを 得 ず 小 さいフォントサイズを 使 用 する 場 合 は ユーザ 設 定 等 でサイズの 設 定 を 変 えられるようにする 等 の 検 討 を 行 ってください ただし 見 出 しと 補 足 情 報 を 持 つリスト 情 報 のような 場 合 は 見 出 しは 標 準 のサイズとし 補 足 情 報 についてはフォントサイズを 下 げてレイアウトを 整 え 次 画 面 ( 詳 細 画 面 等 )では 標 準 サイズのフォントで 表 示 して 読 みやすいようにする といっ た 柔 軟 な 対 応 を 行 ってもよいでしょう また 使 用 するフォントをローカルフォントにするかサーバフォントにするかについての 検 討 を 十 分 に 行 ってくだ さい 使 用 するフォントを 何 にするかの 検 討 も 必 要 ですが ターゲットとするスマートフォンの 機 種 をどれにするの かという 検 討 も 必 要 になります 本 フレームワークを 使 用 していれば 指 定 したフォントに 最 も 近 いフォントを 使 用 し てページを 構 成 するようになっています ローカルフォントを 使 用 する 場 合 は スマートフォンの 機 種 によってイン ストールされているフォントが 異 なります また 同 じフォント 名 でも 機 種 によっては 文 字 の 大 きさが 異 なることもあり ます サーバフォントを 使 用 する 場 合 は フォントによる 機 種 依 存 問 題 を 抑 えることができますが サーバからスマ ートフォンへフォントファイルの 転 送 が 発 生 するため レスポンスへの 影 響 があります Page 8 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

11 2 スマートフォン 向 けサイト 制 作 方 針 一 貫 性 のあるユーザインタフェースにする 作 成 するサイトは 画 面 のレイアウトやスタイル ボタン アイコンとそれらが 持 っている 意 味 や 配 置 場 所 を 統 一 す るようにしてください また 画 面 もパターン 化 に 留 意 して 作 成 するようにします このような 一 貫 性 のあるユーザイ ンタフェースで 構 築 されたサイトは ユーザが 少 ない 時 間 でシステムの 使 い 方 を 学 習 することができるため 他 の 機 能 を 使 用 する 際 もすぐに 使 いこなせるようになります なお 統 一 された 意 味 合 いを 持 つ よく 知 られているアイコンを 用 いることにより 必 ずしも 単 語 を 用 いる 必 要 性 もなくなります 例 えば 家 のアイコンのボタンをタップすると まず 間 違 いなくホーム 画 面 へページが 切 り 替 わるで しょう ヘッダ 戻 る ボタンは ここに 配 置 入 力 部 品 の 配 置 ファンクションボタンの 配 置 フッタ 文 章 や 入 力 部 品 は ここに 配 置 そのページ 固 有 の ボタン 機 能 は ここに 配 置 ログアウト ボタン はここに 配 置 画 面 レイアウトの 一 例 画 面 レイアウトのパターン 化 に 留 意 し(1 つではなくいくつかのパターンがあってもよい) 作 成 する 画 面 はなるべくそれらのパターンから 逸 脱 しないようにします ボタンアイコンの 例 テキストのないボタンの 例 ですが それらをタップすると 何 が 起 きるかは 予 想 がつきます コンテンツの 装 飾 スマートフォン 向 けのコンテンツは シンプルな 装 飾 をおすすめします スマートフォンのディスプレイが 表 示 で きる 領 域 は 限 られています 派 手 なデザインやアニメーションは 主 たる 情 報 からユーザの 意 識 がそれてしまうことも あるかもしれません 業 務 システムの 効 率 を 落 としてしまうため 結 果 的 にユーザは 使 い 勝 手 がよくない と 感 じて しまうかもしれません 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 9

12 intra-mart スマートフォン 開 発 ガイドライン 必 須 項 目 の 明 示 何 か 入 力 するための 部 品 を 設 計 する 際 ラベルには 必 須 入 力 であることがわかるような 単 語 または 記 号 を 用 い ユーザにアピールするようにしてください 本 フレームワークにはラベルに 必 須 かどうかの 情 報 を 付 加 するための 属 性 も 用 意 されています また HTML5 では placeholder 属 性 を 使 用 することができるようになりましたが 一 部 の 入 力 部 品 ではこの 属 性 がうまく 機 能 しない 場 合 がありますので placeholder 属 性 の 使 用 はあまりおすすめできません トランザクション 処 理 を 行 うときはユーザに 確 認 を 求 める いったん 登 録 すると 元 に 戻 せないような トランザクション 処 理 を 行 う 前 には 個 別 の 確 認 画 面 を 用 意 するほうが ユーザにその 重 要 度 が 伝 わるでしょう 後 からユーザが 編 集 や 削 除 ができるような 場 合 は 一 貫 性 の 観 点 や コ ーディング 量 の 観 点 から 個 別 に 確 認 画 面 を 用 意 するよりもダイアログを 使 用 してもよいでしょう Page 10 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

13 2 スマートフォン 向 けサイト 制 作 方 針 2.2 画 面 設 計 方 針 ページの 構 成 各 ページを 構 成 する HTML ファイルは 上 部 にヘッダ 下 部 にフッタを 備 えた 構 成 にします ヘッダ 部 にはその ページの 内 容 を 端 的 に 表 すタイトルを 表 示 するようにします フッタ 部 にはアプリケーションやシステムの 名 前 を 表 示 してもよいですが ログアウトボタンやメニューへ 復 帰 するためのボタン 等 共 通 的 な 処 理 を 起 動 するためのボ タンを 配 置 するほうがユーザは 利 便 性 が 高 いと 感 じるでしょう ただし ダイアログについては フッタを 省 略 場 合 によってはヘッダを 省 略 する 等 ユーザのニーズや 業 務 要 件 に 則 したデザインを 検 討 してください ヘッダ 部 コンテンツ 部 フッタ 部 スタイルシートの 利 用 コンテンツの 制 作 時 には すべてのページで 統 一 的 なデザインにするために スタイルシートを 利 用 することを 検 討 してください 本 フレームワークでは 既 定 のスタイルシートを 読 み 込 むようになっているため ある 程 度 統 一 的 なページデザインにすることが 可 能 になっています HTML5 への 対 応 スマートフォン 向 けコンテンツの 制 作 にあたっては HTML5 への 準 拠 を 念 頭 に 置 いて 開 発 を 行 ってください こ の 際 HTML5 で 非 推 奨 となっているタグを 使 用 しないように 配 慮 を 行 ってください frame や font 等 これまで 一 般 的 に 用 いられてきたタグも 非 推 奨 になっているため 注 意 が 必 要 です 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 11

14 intra-mart スマートフォン 開 発 ガイドライン 複 数 の 内 部 ページを 持 つHTMLについて jquery Mobile では ひとつの HTML ファイルの 中 に 複 数 の 内 部 ページを 定 義 することができます これを 活 用 することは 有 用 ですが データベースの 検 索 結 果 と HTML ファイルの 単 位 を 一 致 させて 設 計 を 行 っている 場 合 等 業 務 データの 持 ち 方 に 関 する 粒 度 が 煩 雑 になってしまうような 場 合 は HTML ファイルは 1 画 面 につき 1 つにし たほうがよいと 考 えられます スマートフォン 用 のコンテンツとして 相 応 しいデザインを 考 える スマートフォン 用 のコンテンツを 制 作 するときは PC 用 サイトやフィーチャーフォン 用 サイトで 用 いられている 入 力 部 品 は 用 いるべきではありません 例 えば 検 索 キーワードを 入 力 するためのテキストボックスはスマートフォン 用 サイトでは 専 用 のテキストボックスを 用 いることが 一 般 的 です 通 常 のテキストボックスを 使 用 した 場 合 ユーザ はそのテキストボックスが 検 索 キーワードを 入 力 するためのものと 気 付 かない 可 能 性 が 考 えられるからです 上 は 検 索 ボックスを 使 用 した 例 下 は 通 常 のテキストボックス 検 索 キーワード というラベルが 付 いていなかっ たとしても 上 の 例 は 検 索 キーワードを 入 力 するための 領 域 であることが 理 解 できます Page 12 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

15 2 スマートフォン 向 けサイト 制 作 方 針 ページ 切 り 替 えのエフェクト スマートフォン 用 サイトのページ 間 の 切 り 替 えは スライドのアニメーション 効 果 等 を 付 加 することができます ま た PC 用 サイトのようにページを 切 り 替 えることもできます これらのエフェクトは できるだけサイト 内 で 統 一 したも のを 使 用 するにします 例 えば 同 一 業 務 内 での 画 面 遷 移 をスライド 効 果 で 遷 移 させることにより 業 務 機 能 が 繋 がっていることをユーザに 示 唆 することができます また 同 一 業 務 内 でスライド 遷 移 を 行 い 最 後 に 登 録 処 理 を 行 うような 場 合 に 通 常 のページ 遷 移 を 使 用 すること で ユーザは 業 務 フローが 完 了 したと 感 じるでしょう 通 常 のページ 遷 移 は 他 の 業 務 へ 遷 移 する 場 合 にもユー ザへ 業 務 機 能 が 変 わったことを 伝 えることができます また ポップアップのエフェクトも 効 果 的 に 使 用 してください 簡 易 検 索 や 絞 り 込 み 検 索 等 メインタスクの 画 面 で 何 らかの 情 報 を 参 照 入 力 するような 子 画 面 へ 遷 移 させたい 場 合 子 画 面 への 遷 移 はポップアップ 効 果 を 使 用 す るとよいでしょう 子 画 面 で 入 力 する 情 報 量 を 必 要 最 低 限 に 絞 ることで ユーザの 意 識 がメインタスクからそれてし まうことのないような 配 慮 も 必 要 です キーワードによる 絞 り 込 みであれば 画 面 上 部 等 に 検 索 用 のテキストボック スを 配 置 するのも 効 果 的 です 一 覧 形 式 のコンテンツを 表 示 するページのデザイン 方 針 一 覧 形 式 のコンテンツにおいて 2 ページ 目 以 降 のデータをどのようにユーザに 見 せるかについては おおまか に 2 通 りの 方 法 が 考 えられます ひとつはページ 遷 移 によって HTML を 作 成 する 方 法 です この 方 法 は 従 来 の PC 用 サイト 等 で 一 般 的 に 用 いられてきた 方 法 です もうひとつは Ajax を 活 用 した 方 法 です 一 覧 の 最 下 部 に 配 置 された もっと 見 る ボタンをタップすることで 現 在 表 示 されている 一 覧 に 次 の 検 索 結 果 セットが 順 次 追 加 され ていく 表 示 方 法 です(Apple Store のアプリ 検 索 画 面 等 で 用 いられています) 本 フレームワークではどちらの 表 示 方 法 も 対 応 できるようになっていますので コンテンツをデザインするときにどちらの 方 法 が 最 適 かを 検 討 してくだ さい sppagingbutton の 例 < と > のボタンでページを 移 動 することができます 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 13

16 intra-mart スマートフォン 開 発 ガイドライン ボタンの 配 置 スマートフォンの 画 面 のサイズには 限 りがあります このため ボタンの 配 置 にも 工 夫 が 必 要 です 例 えば ひと つの 画 面 内 にたくさんのファンクションボタンを 配 置 することは スマートフォン 向 けコンテンツとしては 効 果 的 では ない 場 合 が 考 えられます 狭 い 画 面 の 中 にたくさんのボタンが 配 置 されることで ユーザは 困 惑 し それらの 機 能 を 理 解 するために 時 間 を 要 することになり メインタスクから 意 識 がそれてしまいます 直 観 的 に 使 い 方 がユーザ に 伝 わりにくくなるため 利 便 性 を 損 なうことになるかもしれません このため ひとつの 画 面 内 に 配 置 するボタン は 必 要 最 小 限 に 絞 ることを 常 に 検 討 してください どうしてもボタンの 数 を 絞 ることができない 場 合 は 開 閉 式 リスト を 活 用 して 優 先 順 位 の 低 いボタンをなるべく 表 示 しないような 検 討 を 行 ってください また ボタンの 並 び 方 についても 配 慮 が 必 要 です ある 画 面 では キャンセルボタンが 左 に 実 行 ボタンが 右 に 配 置 されていたとします 別 の 画 面 で 実 行 ボタンが 左 に キャンセルボタンが 右 に 配 置 されていたとしたら 誤 って 操 作 してしまう 原 因 になるでしょう さらに 実 行 ボタン 等 の そのページでの 操 作 を 確 定 させるボタン は 色 を 変 えて 強 調 表 示 にする といった 工 夫 を 加 えることで ユーザの 操 作 ミスを 少 なくすることに 貢 献 できます 確 定 を 強 調 表 示 している 例 重 要 なボタンは 色 分 けを 行 うことで ユーザの 注 意 をひきつけることができます Page 14 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

17 2 スマートフォン 向 けサイト 制 作 方 針 入 力 部 品 とラベル テキストボックス 等 の 入 力 部 品 は それが 何 のためのものであるかを 明 らかにするため 必 ずラベルをつけるよう にしてください 本 フレームワークでは 入 力 部 品 とラベルを 関 連 付 けるためのタグもありますので 積 極 的 に 活 用 してください ラベルと 入 力 部 品 の 表 示 位 置 も 自 動 で 調 整 されますので 機 種 依 存 を 抑 えることにもつながりま す また ラベルに 表 示 するタイトルは 複 数 の 画 面 で 統 一 されたタイトルを 使 用 してください 例 えば ホーム 画 面 に 戻 るためのボタンを 定 義 する 場 合 ある 画 面 では HOME ボタン で 別 の 画 面 で MENU ボタン としてしまうと ユーザはそれらのボタンが 同 一 の 機 能 であることに 気 づくことができません 3 つのテキストボックスは 適 切 にラベリングされているため その 役 割 がユーザにも 伝 わります キー 入 力 の 頻 度 に 配 慮 する スマートフォンでの 入 力 作 業 は 煩 雑 になりがちです ユーザがテキスト 入 力 する 頻 度 はできる 限 り 少 なくし セレ クトメニューや 参 照 入 力 系 の 入 力 部 品 を 活 用 するようにします 入 力 時 間 の 短 縮 や 生 産 性 の 向 上 のみでなく ユ ーザのストレスを 軽 減 することにも 貢 献 できます キー 入 力 に 依 存 しすぎる 画 面 の 場 合 ユーザがわずらわしいと 感 じるだけでなく 入 力 チェックの 手 間 も 発 生 し ます 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 15

18 intra-mart スマートフォン 開 発 ガイドライン 画 面 のスクロール 1 ページの 内 容 が スマートフォンの 画 面 に 表 示 しきれない 場 合 ユーザはフリック 操 作 によってページをスクロ ールします このとき スクロール 可 能 な 方 向 は 縦 方 向 のみとし 横 方 向 へのスクロールはしないようにします PC 版 サイトを 閲 覧 するような 場 合 は 例 外 ですが スマートフォン 用 コンテンツでは 横 方 向 へのフリックスクロールは 一 般 的 であるとは 言 えません また ユーザも 現 在 表 示 されているページの 横 に 情 報 が 隠 されているとは 思 ってい ないでしょう また 1 ページあたりの 情 報 量 が 膨 大 になってしまうような 場 合 は 開 閉 式 コンテンツを 導 入 し スクロールする 量 を 少 なくするような 検 討 も 行 ってください スマートフォンの 表 示 領 域 コンテンツ このような 場 合 に 横 スクロールの 必 要 性 が 発 生 してしまいます ユーザは 縦 方 向 にコンテンツをスクロールするこ とには 慣 れていますが 横 方 向 にコンテンツをスクロールすることには 慣 れていません Page 16 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

19 2 スマートフォン 向 けサイト 制 作 方 針 ページ 間 の 遷 移 は どこからどこにいくのかわかるようにする 一 般 的 なホームページの 制 作 でも 同 様 のことが 言 えますが サイト 内 の 構 成 がユーザにとってイメージしやすい ように 複 雑 になりすぎないように 配 慮 してください サイトを 構 成 するファイルをどのような 配 置 にするのか 配 慮 す るだけでなく ユーザを 誘 導 するボタンやリンクのテキストを 統 一 し わかりやすい 内 容 にしておくことも 大 切 です また フットパス(パンくず)はスマートフォン 用 サイトにおいては 必 要 とならないかもしれません 限 られた 表 示 領 域 をフットパスで 埋 めてしまうことと そもそもスマートフォン 用 サイトの 構 成 がシンプルであるならば 迷 子 になるこ とを 防 ぐためのフットパスは 必 要 となりません フットパスを 使 用 しない 場 合 は ユーザが 来 た 道 を 戻 れるように 戻 るボタン を 各 ページに 配 置 するようにしてください フットパスが 2 行 にわたって 表 示 されてしまっている 例 リンクテキストの 長 さによってはさらに 行 数 を 要 する 可 能 性 もあります スマートフォン 用 コンテンツでは 相 応 しくないと 思 われる 表 現 スマートフォンの 画 面 サイズは PC 向 けサイトよりも 限 られていますが フィーチャーフォン 向 けサイトよりも 表 現 力 豊 かに 見 せることができます このため スマートフォンに 最 適 化 されたコンテンツを 制 作 するには すでに 一 般 的 に 用 いられている 表 現 方 法 が 相 応 しくない 場 合 が 考 えられます 例 えば フットパス(パンくず)はスマートフォン 向 けサイトでは 効 果 的 な 表 現 方 法 とならないことが 考 えられます また ヘルプコンテンツについても 表 示 領 域 の 関 係 から 導 入 すべきではないかもしれません ぱっと 見 で 使 い 方 がすぐにわかるように 配 慮 されたサイトではこれら の 表 現 は 不 要 である 場 合 が 多 いからです 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 17

20 intra-mart スマートフォン 開 発 ガイドライン 表 示 する 情 報 の 優 先 度 を 考 える ページに 表 示 する 情 報 には 優 先 度 によって 開 閉 式 コンテンツが 適 用 できないか 検 討 を 行 ってください ユーザ が 見 るべき 情 報 は 表 示 領 域 を 割 いて 表 示 すべきですが 補 足 情 報 や 重 要 性 の 低 いものについて 開 閉 式 コンテ ンツによって 初 期 状 態 は 折 りたたんだ 状 態 にしておくと ユーザは 利 便 性 が 高 いと 感 じます 開 閉 式 コンテンツを 効 果 的 に 活 用 することによって ページが 縦 長 になってしまうのを 防 ぐ また 開 閉 式 コンテンツの 見 出 しをわかり やすく 工 夫 することによってユーザはそれが 何 なのかを 見 出 しを 見 ただけで 理 解 できるようになります 開 閉 式 メニューの 例 サブメニュー の 左 側 の - をタップすることで 並 べ 替 え と 最 新 情 報 のボタンを 折 り たたんで 非 表 示 にすることができます 戻 るキー について 本 フレームワークが 提 供 する 画 面 において ブラウザの[ 戻 る] 及 び[ 進 む]ボタンは 使 用 しないでください また スマートフォン 本 体 の[ 戻 る]ボタンも 使 用 しないでください 応 答 時 間 と 画 面 の 設 計 一 般 的 な PC 向 け Web サイトと 同 様 スマートフォン 向 け Web サイトでもできる 限 り 迅 速 にユーザへ 応 答 を 返 す ような 設 計 が 必 要 です ただし サイズの 大 きいデータを 取 り 扱 う 場 合 や 設 計 段 階 で 電 波 状 況 の 良 くない 場 所 で 使 用 することがわかっ ている 場 合 等 やむを 得 ないケースも 考 えられます このような 場 合 は Ajax を 効 果 的 に 活 用 し データ 部 分 の HTML は Ajax による 非 同 期 通 信 で 取 得 するように 設 計 し それ 以 外 の 部 分 の HTML は 即 座 にユーザに 応 答 で きるようにします Ajax による 通 信 中 はローディングメッセージを 出 力 し ユーザに 処 理 中 であることをアピールす ることで 固 まっているように 見 える ということがなくなります サーチフィルターの 適 用 方 針 サーチフィルターを 使 用 する 場 合 は 表 示 対 象 となるデータの 件 数 と データベース 上 に 存 在 するデータの 件 数 に 注 意 が 必 要 です ページ 上 にロードされているデータから 絞 り 込 むための 部 品 ですが ユーザによってはデ ータベース 上 に 存 在 するすべてのデータから 絞 り 込 んでいると 勘 違 いしてしまうかもしれません このため サー チフィルターは 検 索 結 果 一 覧 のデータが 決 まり 切 っている 場 合 や すべてのデータを 読 み 込 んでいる 場 合 に 使 用 するようにします Page 18 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

21 2 スマートフォン 向 けサイト 制 作 方 針 スライド 遷 移 とボタン 操 作 イメージ 通 常 のスライド 遷 移 では 次 ページに 遷 移 する 際 に 右 から 次 のページが 表 示 されるようにアニメーション 処 理 さ れます このとき ユーザは 右 へ 進 む ように 感 じます また 前 のページに 戻 る 場 合 は 左 へ 戻 る ように 感 じま す このため 戻 る ボタンは 画 面 の 左 上 に 配 置 し ボタンの 配 置 場 所 と 画 面 が 遷 移 する 方 向 を 一 致 させるように してください トグルスイッチの 適 用 方 針 トグルスイッチは 2 つの 相 反 する 選 択 肢 をユーザに 求 める 場 合 に 使 用 し ユーザに 迷 わせないようにします はい/いいえ ON/OFF 等 の 簡 潔 な 選 択 肢 にします( 長 い 文 言 はトグルスイッチが 見 づらくなります) 例 えば 業 務 連 携 機 能 という 項 目 に ON/OFF の 二 者 択 一 の 選 択 肢 であれば それぞれの 選 択 肢 が 何 を 意 味 す るのかがわかりやすいでしょう 一 方 業 務 という 項 目 に ON/OFF の 選 択 肢 とした 場 合 どちらを 選 ぶべき か 明 確 にユーザに 伝 えることはできません 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 19

22 intra-mart スマートフォン 開 発 ガイドライン 3 IM-Mobile Framework プログラミングガイド 3.1 基 本 的 な 記 法 基 本 的 な 構 成 スマートフォン 向 け Web サイトを 制 作 するために どのようなタグを 使 用 したらよいのかについては 本 フレーム ワークのタグリファレンスや jquery Mobile のリファレンスを 参 照 してください 本 書 では スマートフォン 向 け Web サイトの HTML をどのように 記 述 したらよいのか その 概 念 について 説 明 します まず おおまかに HEAD タグと BODY タグから 構 成 される 点 はこれまでの Web サイトと 変 わりありません HEAD タグおよび BODY タグの 中 にスマートフォン 向 けのタグを 正 しく 記 述 していくことによってスマートフォン 向 けコンテ ンツを 制 作 することができます 下 記 に 本 フレームワークをベースとした 最 もシンプルなスマートフォン 向 け HTML の 例 を 示 します <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <imart type= spincludejqm ></imart> </head> <body> <div data-role="page"> <imart type= spheaderwithback page= path/to/page ></imart> <div data-role="content"> <p>ここにコンテンツを 記 述 します</p> </div> <imart type= spfooterwithlogout ></imart> </div> </body> </html> 5 行 目 では HEAD タグの 中 にスマートフォン 用 のライブラリを 使 用 するための 宣 言 を 記 述 します 8~14 行 目 までがコンテンツです まず data-role 属 性 が page の div タグを 記 述 します その div タグの 内 部 に ヘッダ 部 (9 行 目 ) コンテンツ 部 (10~12 行 目 ) フッタ 部 (13 行 目 )を 記 述 してください 例 では ヘッダ 部 とフッタ 部 に 本 フレームワークから 提 供 しているタグを 記 述 していますが <div data-role= header > や <div data-role= footer >を 記 述 することにより 個 別 にヘッダとフッタを 定 義 することもできます ここでは HEAD タグの 中 にライブラリを 使 用 するための 宣 言 が 必 要 であることと コンテンツはヘッダとコンテン ツとフッタの 3 つから 構 成 されることを 理 解 してください Page 20 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

23 3 IM-Mobile Framework プログラミングガイド HEADタグ 内 部 の 記 述 HEAD タグでは スマートフォン 用 ライブラリを 使 用 するための 宣 言 を 記 述 します この 宣 言 を 簡 易 に 行 うために 本 フレームワークでは spincludejqm というタグを 提 供 しています 多 くの 場 合 はこのタグを 使 用 することで 十 分 な 機 能 を 実 現 することができるようになっていますが jquery Mobile の 記 法 に 従 って 個 別 にこの 宣 言 を 記 述 すること も 可 能 です ただしこの 場 合 には ソースコードの 共 通 化 という 観 点 で 複 数 の 記 述 法 でサイトが 構 成 されている 点 に 注 意 してください BODYタグ 内 部 の 記 述 BODY タグ 内 部 には ヘッダ コンテンツ フッタを 記 述 します さらにコンテンツ 部 にはテキストボックス 等 の 入 力 部 品 やデータベースからの 検 索 結 果 を 表 示 するためのリスト 等 スマートフォン 用 のタグを 使 用 してコンテンツ をマークアップしていきます コンテンツを 記 述 するためのタグは 多 種 に 渡 りますが それらの 説 明 については 本 フレームワークのリファレンスや jquery Mobile のリファレンスを 参 照 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 21

24 intra-mart スマートフォン 開 発 ガイドライン 3.2 業 務 スケルトンの 使 い 方 intra-mart e Builder の 業 務 スケルトンウィザードを 使 用 することで 対 話 形 式 でスマートフォン 用 の 画 面 を 作 成 す ることができます 作 成 した 後 はボタン 処 理 等 を 適 切 に 追 加 してください 本 項 では 業 務 スケルトンウィザードか ら 作 成 することができる 画 面 とその 概 要 を 示 します Page 22 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

25 3 IM-Mobile Framework プログラミングガイド 業 務 スケルトンのインストール 業 務 スケルトンは eclipse のソフトウェア 更 新 マネージャを 使 用 して intra-mart の 更 新 サイトから intra-mart e Builder へインストールします 業 務 スケルトンのインストールは 下 記 に 示 す URL からダウンロードしてください IM-Mobile Framework 業 務 スケルトンダウンロードサイト サイトの 追 加 画 面 で 業 務 スケル トンダウンロードサイトの URL を 設 定 し インストールしてください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 23

26 intra-mart スマートフォン 開 発 ガイドライン 一 覧 データベースから 検 索 したレコードセットを 一 覧 形 式 のリストで 表 示 するための 画 面 を 作 成 することができます オプションを 指 定 することで 一 覧 をソートするためのキーを 定 義 することもできます 下 記 は 業 務 スケルトンウィザードで 作 成 した 画 面 のイメージです 実 際 に 作 成 する 画 面 は 業 務 要 件 やウィザー ドの 入 力 内 容 によって 異 なります Page 24 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

27 3 IM-Mobile Framework プログラミングガイド 参 照 データベースから 検 索 したデータを 読 み 取 り 専 用 の 単 票 形 式 で 表 示 するための 画 面 を 作 成 することができます オプションを 指 定 することで 当 該 レコードの 削 除 機 能 を 付 加 することもできます 下 記 は 業 務 スケルトンウィザードで 作 成 した 画 面 のイメージです 実 際 に 作 成 する 画 面 は 業 務 要 件 やウィザー ドの 入 力 内 容 によって 異 なります 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 25

28 intra-mart スマートフォン 開 発 ガイドライン 登 録 新 規 にレコードを 登 録 するための 単 票 形 式 の 入 力 画 面 を 作 成 することができます 下 記 は 業 務 スケルトンウィザードで 作 成 した 画 面 のイメージです 実 際 に 作 成 する 画 面 は 業 務 要 件 やウィザー ドの 入 力 内 容 によって 異 なります Page 26 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

29 3 IM-Mobile Framework プログラミングガイド 編 集 データベースに 登 録 済 みの 詳 細 情 報 を 編 集 するための 単 票 形 式 の 入 力 画 面 を 作 成 することができます オプ ションを 指 定 することで 当 該 レコードの 削 除 機 能 を 付 加 することもできます 下 記 は 業 務 スケルトンウィザードで 作 成 した 画 面 のイメージです 実 際 に 作 成 する 画 面 は 業 務 要 件 やウィザー ドの 入 力 内 容 によって 異 なります 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 27

30 intra-mart スマートフォン 開 発 ガイドライン 3.3 IM-Mobile Framework 共 通 画 面 の 使 い 方 本 フレームワークをインストールすると 作 成 済 みの 共 通 画 面 を 使 用 することができるようになります 本 項 では 共 通 画 面 とその 概 要 を 示 します IM-Mobile Framework 共 通 画 面 一 覧 下 記 に 本 フレームワークにて 提 供 するスマートフォン 向 け 共 通 画 面 の 一 覧 を 示 します 項 番 画 面 名 概 要 1 ログイン スマートフォン 向 けログイン 画 面 です 2 メニュー スマートフォン 向 けメニュー 画 面 です グループ 管 理 者 画 面 で 設 定 したメニュー 項 目 を 表 示 します 3 ポップアップメニュー ポップアップ 形 式 で 表 示 するメニューです グループ 管 理 者 画 面 で 設 定 したメニュー 項 目 のうち pop 属 性 が 設 定 されている 項 目 を 表 示 します 4 パスワード 変 更 スマートフォン 向 けパスワード 変 更 画 面 です 当 画 面 は 初 回 ログイン 時 やパスワード 期 限 切 れの 時 に 表 示 します 5 メッセージ 画 面 (アクセス 拒 否 ) スマートフォン 向 けメッセージ 表 示 画 面 です 6 メッセージ 画 面 (セッション 無 効 ) スマートフォン 向 けメッセージ 表 示 画 面 です 7 メッセージ 画 面 ( 認 証 失 敗 ) スマートフォン 向 けメッセージ 表 示 画 面 です 8 メッセージ 画 面 (ログイングループ スマートフォン 向 けメッセージ 表 示 画 面 です なし) 9 メッセージ 画 面 (ログイン 許 可 な スマートフォン 向 けメッセージ 表 示 画 面 です し) 10 メッセージ 画 面 (アカウントロック) スマートフォン 向 けメッセージ 表 示 画 面 です 11 メッセージ 画 面 (ログイン 禁 止 ) スマートフォン 向 けメッセージ 表 示 画 面 です 12 メッセージ 画 面 (メンテナンス 中 ) スマートフォン 向 けメッセージ 表 示 画 面 です 13 メッセージ 画 面 (ページアクセス スマートフォン 向 けメッセージ 表 示 画 面 です 権 限 なし) 14 メッセージ 画 面 (ログインセッショ スマートフォン 向 けメッセージ 表 示 画 面 です ン 無 効 ) 15 メッセージ 画 面 (セッション 不 整 スマートフォン 向 けメッセージ 表 示 画 面 です 合 ) 16 メッセージ 画 面 (セッションタイム スマートフォン 向 けメッセージ 表 示 画 面 です アウト) 17 メッセージ 画 面 (システムエラー) スマートフォン 向 けメッセージ 表 示 画 面 です 18 メッセージ 画 面 ( 二 重 ログイン) スマートフォン 向 けメッセージ 表 示 画 面 です 19 メッセージ 画 面 ( 汎 用 ) スマートフォン 向 けメッセージ 表 示 画 面 です 汎 用 的 に 開 発 者 が 指 定 するメッセージを 表 示 することができます 20 ユーザ 検 索 画 面 スマートフォン 向 けユーザ 共 通 検 索 画 面 です IM- 共 通 マスタ 上 の ユーザを 検 索 することができます Page 28 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

31 3 IM-Mobile Framework プログラミングガイド 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 29

32 intra-mart スマートフォン 開 発 ガイドライン ポップアップメニューについて ポップアップメニューは スマートフォン 版 メニューを 任 意 の 画 面 からポップアップ 表 示 するための 画 面 です ポップアップメニューが 表 示 する 項 目 は グループ 管 理 者 画 面 で 設 定 したメニュー 項 目 のうち pop 属 性 が 設 定 さ れているものを 対 象 とします ポップアップメニューの 表 示 例 : 使 用 方 法 <%Server_Path%>/doc/imart/WEB-INF/classes フォルダに XML ファイル service-config-mobile_fw.xml を 作 成 し 内 容 を 下 記 のようにします <?xml version="1.0" encoding="utf-8" standalone="no"?> <service-config> <service> <service-id>topopupmenu</service-id> <next-page> <page-path>/system/security/user/mobile_fw/popup_menu.jssp</page-path> </next-page> </service> </service-config> ポップアップメニューの 表 示 対 象 とする 項 目 には pop 属 性 の 設 定 を 行 います ログイングループ 管 理 者 メニューのメニュー 設 定 より 任 意 のメニューに 対 し 引 数 を 与 えます 引 数 は キーが pop 値 を true とします Page 30 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

33 3 IM-Mobile Framework プログラミングガイド ポップアップメニューは 呼 び 出 し 元 となる 画 面 の HTML/JSP にポップアップメニューを 起 動 するためのリンクを 記 述 する 必 要 があります 下 記 にポップアップメニューの 記 述 例 を 示 します < 記 述 例 > <a href="/imart/mobile_fw-topopupmenu.service" data-rel="dialog" data-role="button">ポ ップアップメニュー</a> スクリプト 開 発 の 場 合 jquery Mobile の 問 題 によりポップアップメニューの 戻 るボタンが 動 作 しないことがあ ります data-rel= back 時 の 画 面 遷 移 エラーについて を 参 考 に 別 途 スクリプトを 配 置 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 31

34 intra-mart スマートフォン 開 発 ガイドライン ユーザ 共 通 検 索 画 面 IM-Mobile Framework Version7.2.1 より 共 通 画 面 にユーザ 共 通 検 索 画 面 が 加 わりました 下 記 に 使 用 方 法 について 示 します 本 機 能 を 利 用 するには IM- 共 通 マスタのインストールが 必 要 です アプリケーション 共 通 マスタには 対 応 しておりませんのでご 注 意 ください ユーザ 共 通 検 索 画 面 の 表 示 例 : 使 用 方 法 <%Server_Path%>/doc/imart/WEB-INF/classes フォルダに XML ファイル service-config-mobile_fw.xml を 作 成 し 配 置 します ( 既 にファイルがある 場 合 は<service> 要 素 内 を 追 記 します) <?xml version="1.0" encoding="utf-8" standalone="no"?> <service-config> <service> <service-id>toimacmsearchsp</service-id> <next-page> <page-path>/smartphone_search/search/search.jssp</page-path> </next-page> </service> </service-config> Page 32 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

35 3 IM-Mobile Framework プログラミングガイド スクリプト 開 発 の 場 合 : 使 用 する HTML ファイル 内 の<HEAD>タグ 内 で <IMART type= imacmsearchsp >タグを 定 義 します <head> <imart type="spincludejqm" /> <imart type="imacmsearchsp" /> </head> JavaEE 開 発 の 場 合 : 使 用 する JSP ファイル 内 の<HEAD>タグ 内 で <imsp:imacmsearchsp>タグを 定 義 します <head> <imsp:includejqm /> <imsp:imacmsearchsp /> </head> 画 面 を 表 示 する 際 は 任 意 のイベント 処 理 内 で 以 下 のようなクライアント JavaScript を 実 装 して 呼 び 出 します パラメータの target 属 性 は 固 定 で jp.co.intra_mart.im_master.search.user.smartphone"を 指 定 し callback 属 性 にはコールバック 関 数 名 を 指 定 します その 他 指 定 可 能 なパラメータについては 初 期 状 態 検 索 の 絞 り 込 み 条 件 の 設 定 を 参 照 してください // 検 索 画 面 に 渡 すパラメータ 定 義 var param = { target : "jp.co.intra_mart.im_master.search.user.smartphone", callback_function: "resultsearch" }; //パラメータをエンコード var parameter_json_string = escape(imjson.tojsonstring(param)); // 検 索 画 面 へ 遷 移 $.mobile.changepage("/imart/mobile_fw-toimacmsearchsp.service", { data : { parameter : parameter_json_string}, role :'dialog', method:"post" }); スクリプト 開 発 の 場 合 jquery Mobile の 問 題 によりポップアップ 画 面 の 戻 るボタンが 動 作 しないことがあり ます data-rel= back 時 の 画 面 遷 移 エラーについて を 参 考 に 別 途 スクリプトを 配 置 してください 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 33

36 intra-mart スマートフォン 開 発 ガイドライン 初 期 状 態 検 索 の 絞 り 込 み 条 件 の 設 定 ユーザ 選 択 画 面 の 初 期 状 態 及 び 検 索 条 件 を 設 定 する 場 合 引 数 parameter に 対 し Object を JSON 文 字 列 に 変 換 した 値 を 渡 して 設 定 します Object に 設 定 可 能 なプロパティを 以 下 一 覧 に 示 します プロパティ 名 型 必 須 初 期 値 備 考 target String - 使 用 するプラグイン 名 を 指 定 します 値 は 固 定 で jp.co.intra_mart.im_master.search.user.smartphone" を 指 定 してください basic_area String none 基 本 情 報 描 画 領 域 の 表 示 / 非 表 示 を 切 り 替 えます true : 表 示 する false : 表 示 しない tabs Array - target に 検 索 対 象 を 設 定 せず 実 行 時 に 使 用 する 検 索 画 面 タブを 設 定 したい 場 合 にこの 項 目 を 使 用 しま す 詳 細 については 検 索 画 面 タブ Plugin 指 定 を 参 照 してください wnd_title String ユーザ 検 索 ページタイトルを 設 定 します message String - ダイアログのヘッダタイトルを 設 定 します callback_function String - コールバック 関 数 名 を 設 定 します default_tab_id String - 画 面 を 初 期 表 示 したときに 表 示 するタブを 選 択 しま す 設 定 可 能 なタブについては 検 索 画 面 タ ブ Plugin 指 定 を 参 照 してください type String multiple 検 索 結 果 を 単 一 選 択 とするか 複 数 選 択 とするかを 設 定 します single : 単 一 選 択 multiple : 複 数 選 択 default_selected Array - 選 択 一 覧 で 選 択 済 のオブジェクトを 設 定 します 戻 り 値 の 形 式 については コールバック 返 却 値 を 参 考 にしてください department_main_only Boolean - 検 索 対 象 を 主 所 属 組 織 が 設 定 されたユーザのみと するかを 設 定 します target_date Date システム 日 付 期 間 化 された 情 報 を 取 得 する 際 基 準 にする 日 付 を 指 定 します deleted_data Boolean false 論 理 削 除 状 態 のデータを 検 索 対 象 にするかどうかを 設 定 します true : 論 理 削 除 データを 取 得 false: 論 理 削 除 データを 取 得 しない target_locale String 現 在 のログイ ン ユ ー ザ 表 示 ロケールを 設 定 します 検 索 結 果 もこのロケール 表 示 で 返 します のロケール criteria Object - 検 索 時 の 暗 黙 的 な 絞 り 込 み 条 件 を 設 定 します 詳 細 については 暗 黙 条 件 を 参 照 してくださ い prop Array - 検 索 画 面 タブ 毎 に 取 得 するテーブルのカラム 名 を 設 Page 34 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

37 3 IM-Mobile Framework プログラミングガイド 定 します 詳 しくは 検 索 画 面 タブ Plugin 指 定 を 参 照 してください keyword_search_target Array - キーワードの 検 索 対 象 を 指 定 します 複 数 指 定 するこ とができます code :コード name : 名 称 search_name : 検 索 名 キーワード 検 索 のみ 有 効 な 属 性 です keyword_search_type String - キーワード 検 索 の 検 索 方 法 を 指 定 します prefix : 前 方 一 致 full : 完 全 一 致 part : 部 分 一 致 キーワード 検 索 のみ 有 効 な 属 性 です 検 索 画 面 タブPlugin 指 定 指 定 可 能 な 検 索 画 面 タブ Plugin は 以 下 のとおりです 検 索 画 面 タブ ユーザ 検 索 (キーワード) ユーザ 検 索 ( 組 織 ) ユーザ 検 索 (パブリックグループ) ユーザ 検 索 (プライベートグルー プ) ユーザ 検 索 (ロール) プラグイン ID jp.co.intra_mart.im_master.app.search.tabs.user.user.keyword.smartphone jp.co.intra_mart.im_master.app.search.tabs.user.department.tree_with_list.smartphone jp.co.intra_mart.im_master.app.search.tabs.user.public_group.tree_with_list.smartphone jp.co.intra_mart.im_master.app.search.tabs.user.private_group.tree.smartphone jp.co.intra_mart.im_master.app.search.tabs.user.role.tree_with_list.smartphone タブセットの 指 定 方 法 実 行 時 に 使 用 する 検 索 画 面 タブを 設 定 したい 場 合 検 索 画 面 に 渡 すパラメータの tabs 属 性 を 指 定 します tabs 属 性 の 指 定 方 法 は 以 下 の 通 りです プロパティ 名 型 必 須 初 期 値 備 考 tabs Array - 配 列 インデックス Object - id String - 検 索 画 面 タブ Plugin ID title String - タブの 表 示 tabs : [{ id: jp.co.intra_mart.im_master.app.search.tabs.user.user.keyword.smartphone, name: キーワード }] 各 タブのユーザ 情 報 返 却 値 の 指 定 方 法 コールバック 時 に 取 得 するユーザ 情 報 に IM 共 通 マスタのユーザテーブルの 任 意 のカラムを 追 加 したい 場 合 検 索 画 面 に 渡 すパラメータの prop 属 性 にタブのプラグイン ID とカラム 名 を 指 定 します 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 35

38 intra-mart スマートフォン 開 発 ガイドライン prop 属 性 の 指 定 方 法 は 以 下 の 通 りです ユーザテーブルの 詳 細 については IM- 共 通 マスタ テーブル 定 義 書 を 参 照 してください プロパティ 名 型 必 須 初 期 値 備 考 prop Object - 検 索 タブ Plugin ID Array - 配 列 インデックス String - 取 得 したいカラム 名 prop:{ "jp.co.intra_mart.im_master.app.search.tabs.user.user.keyword.smartphone":[" _address1"] } 暗 黙 条 件 ユーザ 検 索 (キーワード)タブで 検 索 を 行 う 際 に ユーザ 操 作 とは 別 に 指 定 する 条 件 です 検 索 結 果 はこの 暗 黙 条 件 の 範 囲 で 自 動 的 に 絞 り 込 まれます 会 社 ユーザ 検 索 時 に 指 定 の 会 社 で 絞 り 込 みます ただし 組 織 リストまたは 組 織 を 設 定 している 場 合 会 社 は 利 用 されません プロパティ 名 型 必 須 初 期 値 備 考 company Array - 配 列 インデックス Object - company_cd String - "criteria" : { company" : [ { "company_cd" : 会 社 コード }, { "company_cd" : 会 社 コード },... ] } 組 織 セット 表 示 設 定 会 社 毎 に 表 示 する 組 織 セットを 設 定 します 表 示 する 組 織 セットは 会 社 毎 にデフォルト 組 織 セットリストで 指 定 することができ 組 織 セット 名 の 表 示 / 非 表 示 を 選 択 できます プロパティ 名 型 必 須 初 期 値 備 考 department_set_disp Object - type String hide hide display allのいずれか list Array - 配 列 インデックス Object - company_cd String - department_cd String - "criteria" : { "department_set_disp" : { "type" : "hide", "list" : [ { "company_cd" : 会 社 コード, "depatrment_set_cd" : 組 織 セットコード},...] } } Page 36 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

39 3 IM-Mobile Framework プログラミングガイド 組 織 ユーザ 検 索 時 に 指 定 の 組 織 で 絞 り 込 みます ただし 組 織 リストが 指 定 されている 場 合 は 組 織 リスト 指 定 が 優 先 されます プロパティ 名 型 必 須 初 期 値 備 考 department_set Object - company_d String - department_set_cd String - department Object - department_cd String - compare String le gt ge lt le のいずれか "criteria" : { "department_set" : { "company_cd" : 会 社 コード, "department_set_cd" : 組 織 セットコード, "department" : { "department_cd" : 組 織 コード, "compare" : "le" } } } 組 織 役 職 ユーザ 検 索 時 に 指 定 の 役 職 で 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 department_set Object - company_cd String - department_set_cd String - post Object - post_cd String - compare String le gt ge lt le のいずれか "criteria" : { "department_set" : { "company_cd" : 会 社 コード, "department_set_cd" : 組 織 セットコード, "post" : { "post_cd" : 役 職 コード, "compare" : "le" } } } 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 37

40 intra-mart スマートフォン 開 発 ガイドライン 組 織 分 類 項 目 ユーザ 検 索 時 に 指 定 の 組 織 分 類 項 目 を 持 つ 組 織 で 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 dept_ctg_item Array - 配 列 インデックス Object - company_cd String - category_cd String - category_item_cd Array - 配 列 インデックス String le gt ge lt le のいずれか "criteria" : { "dept_ctg_item" : [ {"company_cd" : 会 社 コード, "category_cd" : 組 織 分 類 コード, "category_item_cd" : [ 組 織 分 類 項 目 コード,...]},...] } パブリックグループ ユーザ 検 索 時 に 指 定 のパブリックグループで 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 public_group_set Object - public_group_set_cd Sring - public_group Object - public_group_cd String - compare String le gt ge lt le のいずれか "criteria" : { "public_group_set" : { "public_group_set_cd" : パブリックグループセットコード, "public_group" : { "public_group_cd" : パブリックグループコード, "compare" : "le" } } } パブリックグループ 役 割 ユーザ 検 索 時 に 指 定 の 役 割 で 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 public_group_set Object - public_group_set_cd Sring - public_group_role Object - role_cd String - compare String le gt ge lt le のいずれか Page 38 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

41 3 IM-Mobile Framework プログラミングガイド "criteria" : { "public_group_set" : { "public_group_set_cd" : パブリックグループセットコード, "public_group_role" : { "role_cd" : パブリックグループコード, "compare" : "le" } } } パブリックグループ 分 類 項 目 ユーザ 検 索 時 に 指 定 のパブリック 分 類 項 目 を 持 つパブリックグループで 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 public_group_ctg_item Array - 配 列 インデックス Object - category_cd String - category_item_cd Array - 配 列 インデックス String - "criteria" : { "public_group_ctg_item" : [{ "category_cd" : パブリックグループ 分 類 コード, "category_item_cd" : [ パブリックグループ 分 類 項 目 コード,...]},... ] } ユーザ 分 類 項 目 ユーザ 検 索 時 に 指 定 のユーザ 分 類 項 目 で 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 user_ctg_item Array - 配 列 インデックス Object - category_cd String - category_item_cd Array - 配 列 インデックス String "criteria" : { "user_ctg_item" : [{"category_cd": ユーザ 分 類 コード, "category_item_cd" : [ユーザ 分 類 項 目 コード,...]},..,] } ロール ユーザ 検 索 時 に 指 定 のロールで 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 role String - "criteria" : { 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 39

42 intra-mart スマートフォン 開 発 ガイドライン } "role" : ロール ID プライベートグループ プライベートグループ 検 索 時 に 指 定 のプライベートグループオーナーで 絞 り 込 みます プロパティ 名 型 必 須 初 期 値 備 考 private_group_owner String ログイン ユーザ ID "criteria" : { "private_group_owner" : ユーザ ID } コールバック 返 却 値 ユーザ 選 択 画 面 で 選 択 したユーザ 情 報 は コールバック 関 数 名 で 指 定 した 関 数 の 引 数 として 返 却 されます 戻 り 値 は 以 下 形 式 オブジェクトの 配 列 になります プロパティ 名 型 説 明 type String このオブジェクトの 型 を 表 す 主 にアプリケーション 側 で 型 の 判 別 がで きるように 提 示 するもの アプリケーション 共 通 マスタが 標 準 で 提 供 する 機 能 の 範 囲 では 取 得 した 情 報 元 のテーブル 名 を 設 定 する keyfields Array 文 字 列 の 配 列 data 内 で 一 意 性 を 表 すキーとなるプロパティのプロパティ 名 を 配 列 とし て 保 持 する 検 索 画 面 の 選 択 内 容 一 覧 において 重 複 選 択 を 避 ける 為 のガイドとして 使 用 する 具 体 的 には data から keyfields に 設 定 されたの 名 前 のプロパティを 取 得 し 同 一 type を 含 めて 比 較 して 重 複 をチェックする displayname String オブジェクトを 画 面 に 表 示 する 際 に 使 用 する 表 示 文 字 列 data Objcet 実 際 にデータベースから 取 得 したレコードの 内 容 がオブジェクトとして 設 定 される 引 数 の 取 得 する 情 報 (prop) に 指 定 された 項 目 をデータ ベースから 取 得 し その 名 称 のプロパティを 設 定 する 大 量 データモード 大 量 データモードとは 全 件 検 索 やあいまい 検 索 などレスポンス 悪 化 を 招 く 検 索 を 制 限 するためのものです 具 体 的 には 大 量 データモードを 使 用 すると 以 下 の 制 約 が 発 生 します ユーザ 検 索 (キーワード) キーワードの 入 力 が 必 須 になります つまり 全 件 検 索 はできなくなります ユーザ 検 索 時 に 表 示 数 制 限 (ユーザ)を 超 えたデータの 取 得 ができなくなります ユーザ 検 索 ( 組 織 ) 組 織 階 層 の 移 動 ごとの 検 索 になります ユーザ 検 索 時 に 表 示 数 制 限 (ユーザ)を 超 えたデータの 取 得 ができなくなります Page 40 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

43 3 IM-Mobile Framework プログラミングガイド ユーザ 検 索 (パブリックグループ) パブリックグループ 階 層 ごとの 検 索 になります ユーザ 検 索 時 に 表 示 数 制 限 (ユーザ)を 超 えたデータの 取 得 ができなくなります ユーザ 検 索 (ロール) ユーザ 検 索 時 に 表 示 数 制 限 (ユーザ)を 超 えたデータの 取 得 ができなくなります 設 定 方 法 <%Server_Path%>/conf/parameter.xml の 以 下 の 箇 所 で 設 定 します 大 量 データモードを 使 用 する 場 合 <param-value>を true に 設 定 します 設 定 は PC 版 ユーザ 共 通 検 索 と 共 用 のパラメータとなりますので 十 分 注 意 して 設 定 してください <param> <param-name>appcom.search.large_data_mode.user.enabled</param-name> <param-value>true</param-value> </param> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 41

44 intra-mart スマートフォン 開 発 ガイドライン 3.4 IM-Mobile Framework 画 面 共 通 IMARTタグの 使 い 方 本 フレームワークをインストールすると 3.4.1に 示 すスマートフォン 用 タグライブラリを 使 用 できるようになります APIドキュメント 示 す 書 式 に 従 ってHTMLファイルにタグを 埋 め 込 むことで スマートフォン 用 の 入 力 部 品 等 を 使 用 することができます IM-Mobile Framework 画 面 共 通 IMARTタグ 一 覧 下 記 に 本 フレームワークにて 提 供 するスマートフォン 向 けタグの 一 覧 を 示 します 各 タグの 詳 細 な 書 式 や 属 性 の 使 い 方 については API ドキュメントを 参 照 してください 項 番 タグ 名 機 能 概 要 1 spincludejqm HTML ファイル 内 でスマートフォン 向 け 入 力 部 品 を 使 用 するための ライブラリの 取 り 込 みを 行 います 2 spheaderwithback 戻 る ボタンを 持 つ 共 通 ヘッダを 表 示 します 3 spheaderwithmenu MENU ボタンを 持 つ 共 通 ヘッダを 表 示 します 4 spcommonfooter MENU ボタン ログアウト ボタンを 持 つ 共 通 フッタを 表 示 しま す 5 spfooterwithlogout ログアウト ボタンを 持 つ 共 通 フッタを 表 示 します 6 spfieldcontain 入 力 部 品 にラベルを 生 成 し 入 力 部 品 とラベルの 関 連 付 けを 行 い ます 7 spcontrolgroup 複 数 の 入 力 部 品 をグループ 化 します 8 spradiobutton ラジオボタンを 表 示 します 9 spcheckbox チェックボックスを 表 示 します 10 sptoggleswitch トグルスイッチを 表 示 します 11 spslider つまみを 左 右 に 動 かすことで 数 値 を 入 力 するための 入 力 部 品 を 表 示 します 12 spsearchbox 検 索 用 のテキストボックスを 表 示 します 13 sppagingbutton 複 数 のページを 持 つリスト 形 式 の 一 覧 のページ 移 動 を 行 うためのツ ールバーを 表 示 します 14 spcollapsiblelist 見 出 しと 詳 細 情 報 を 持 つ 開 閉 式 のリストを 表 示 します 15 spdownload ストレージサービスからファイルダウンロードの 行 うための 部 品 で す 16 spdatepicker 日 付 文 字 列 を 参 照 入 力 するためのインタフェースを 提 供 します 17 spcalendar ユーザーが 拡 張 可 能 なカレンダーレイアウトを 表 示 します 18 spcollapsbile 開 閉 型 のブロック 形 式 で 見 出 しと 詳 細 情 報 を 取 り 扱 うインターフェ ースを 提 供 します Page 42 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

45 3 IM-Mobile Framework プログラミングガイド チェックボックスとラジオボタンの 実 装 について チェックボックス ラジオボタンは 従 来 の IMART タグで 提 供 されている<imart type= input style= checkbox radio >で 記 述 することができます この 方 法 で 記 述 する 場 合 は さらに<label>タグの 記 述 が 必 要 になり マークアップ 作 業 が 煩 雑 になりがちになります このため 本 フレームワークから 提 供 している spcheckbox および spradiobutton の 使 用 をおすすめします これらのタグはスマートフォン 向 けに 最 適 化 されており また HTML の 行 数 を 減 らすことにも 貢 献 できます spcheckbox および spradiobutton の 使 い 方 については API ドキ ュメントを 参 照 してください ファイルのダウンロード 用 部 品 の 実 装 方 針 スマートフォン 端 末 では ファイルダウンロードの 仕 組 みが OS ごと( 機 種 ごと)に 仕 様 が 異 なります このため フ ァイルをダウンロードするための 実 装 方 式 を 考 える 場 合 なるべく 端 末 依 存 を 吸 収 するような 実 装 方 法 がないか 検 討 を 行 う 必 要 があります ここでは 実 装 例 として ファイルの 存 在 チェックのコードを 示 します 下 記 の 例 のように 実 装 することで ファイル 存 在 チェック 処 理 に 関 しての 端 末 依 存 を 吸 収 することができるようになります <sample_file_exists.html> <!doctype html> <html> <head> <imart type= spincludejqm ></imart> <script src="csjs/im_ajax_request.js"></script> <script src="csjs/im_json.js"></script> </head> <body> <div data-role="page"> <imart type="spheaderwithback" page="" headertext=$messages.headertitle/> <div data-role="content"> <a id="downloadbutton" data-role="button" data-icon="refresh" data-inline= "true">ファイルダウンロード</a> <script type="text/javascript"> jquery(document).ready(function($){ $('#downloadbutton').tap(function(){ $.mobile.showpageloadingmsg(); var ajaxurl = "<imart type="string" value=$url.checkfile/>"; ImAjax.requestAsyncSend( ajaxurl, { "path":$('input[name=path]:hidden').val(), "filename":$('input[name=filename]:hidden').val()}, action); 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 43

46 intra-mart スマートフォン 開 発 ガイドライン }); function action(res){ if(res.data.isexist){ $('form[name=downloadform]').submit(); }else{ alert("ファイルが 存 在 しません"); } $.mobile.hidepageloadingmsg(); } }); </script> </div> <imart type="spdownload" style="form" name="downloadform" path="sample/download/" filename="sample_file.txt" downloadname="サンプルファイル"/> <imart type="spcommonfooter" /> </div> </body> </html> <sample_file_exists.js> var $url = new Object(); function init(){ $url.checkfile = new URL("sample/check_file_exists_ajax").location(); } <check_file_exists_ajax.js> function init(request){ // JSON 形 式 の 文 字 列 から JavaScript オブジェクトに 変 換 var messagebody = request.getmessagebody("utf-8"); var receivedata = ImJson.parseJSON(messageBody); // ファイルパス 名 var path = receivedata.path; // パスの 最 後 が 区 切 り 文 字 ("/")ではない 場 合 "/"を 追 加 // パスが 空 文 字 列 の 場 合 は 何 もしない path = path.lastindexof("/") == path.length -1? path : path + "/"; // ファイル 名 var filename = receivedata.filename; // ファイルの 取 得 処 理 var ofile = new VirtualFile(path + filename); // ファイルの 存 在 結 果 (true : false) var isexist = ofile.exist(); Page 44 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

47 3 IM-Mobile Framework プログラミングガイド } // レスポンスデータを 作 成 var responsedata = new Object(); responsedata.isexist = isexist; // クライアントにファイルの 存 在 結 果 を 返 却 var jsonstring = ImJson.toJSONString(responseData); var response = Web.getHTTPResponse(); response.setcontenttype("application/json; charset=utf-8"); response.sendmessagebodystring(jsonstring); <sample_file_exists.html>12 行 目 にマークアップされている ファイルダウンロード ボタンをタップすることによ って Ajax によるファイル 存 在 チェックを 起 動 します(15 行 目 ~) チェックの 結 果 は 25 行 目 の action 関 数 によって 判 定 を 行 います ファイルが 存 在 していた 場 合 は form として 定 義 されている spdownload タグ(36 行 目 )を submit し(27 行 目 ) ファイルが 存 在 していない 場 合 は alert を 表 示 します(29 行 目 ) なお 例 ではファイルが 存 在 していな い 場 合 のハンドリングとして alert の 表 示 を 行 っていますが 必 要 に 応 じて 環 境 別 のハンドリングを 行 ってください sample_file_exists.js sample_file_exists.html check_file_exists_ajax.js init() ボタンをタップ $('#download Button').tap() requestasyncsend() init() ファイルの 存 在 チェック 処 理 action() ファイルが 存 在 すれ ばダウンロード 処 理 を 起 動 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 45

48 intra-mart スマートフォン 開 発 ガイドライン 日 付 と 時 刻 の 入 力 について 時 刻 の 入 力 を 行 うには DateBox タグを 使 用 してください 下 記 にリファレンスサイトを 示 します 日 付 の 入 力 に 関 しては spdatepicker タグを 使 用 することができます(DateBox タグでも 日 付 入 力 を 行 うことができます) spdatepicker を 使 用 する 場 合 は 業 務 カレンダーとの 連 携 も 可 能 です spdatepicker タグについては API ドキュメン トを 参 照 してください jquery Mobile datebox plugin なお intra-mart の 業 務 カレンダーとの 連 携 はしていません ここでは DateBox タグの 概 要 について 説 明 します (1) HEAD タグ 内 の 記 述 DateBox タグの 実 行 ファイルは 本 フレームワークをインストールすることで 同 時 にインストールされます DateBox タグを 利 用 するには 各 HTML ファイルの HEAD タグ 内 で DateBox タグ 実 行 ファイルおよび jquery Mobile へのリンクを 記 述 してください 下 記 に 記 述 例 を 示 します < 記 述 例 1(sample.html)> <head> <link rel="stylesheet" type="text/css" href="<imart type="string" value=contextpath> </IMART>/css/mobile_fw/jquery.mobile-1.0b1.min.css" /> <link rel="stylesheet" type="text/css" href="<imart type="string" value=contextpath> </IMART>/css/mobile_fw/jquery.mobile.datebox.css" /> <script type="text/javascript" src="<imart type="string" value=contextpath> </IMART>/csjs/mobile_fw/jquery min.js"></script> <script type="text/javascript" src="<imart type="string" value=contextpath> </IMART>/csjs/mobile_fw/jquery.mobile-1.0b1.min.js"></script> <script type="text/javascript" src="<imart type="string" value=contextpath> </IMART>/csjs/mobile_fw/jquery.mobile.datebox.js"></script> </head> HTML 中 で 使 用 している contextpath を 取 得 するために JavaScript を 記 述 してください < 記 述 例 (sample.js)> var contextpath = ""; function init(request){ contextpath = Web.getContextPath(); } Page 46 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

49 3 IM-Mobile Framework プログラミングガイド sample.html の 4 行 目 と 7 行 目 が DateBox タグを 使 用 するための 宣 言 です 3 行 目 5 行 目 6 行 目 は jquery Mobile を 使 用 するための 宣 言 です カスタムスタイルシートやカスタムスクリプトを 使 用 する 場 合 は 適 宜 記 述 の 追 加 を 行 ってください あとは DateBox タグを BODY タグ 内 に 記 述 することで DateBox タグを 使 用 すること ができます 下 記 リンクもご 参 照 ください jquery Mobile datebox plugin Download and use sample.html は 下 記 のように 記 述 することもできます < 記 述 例 2(sample.html)> <head> <imart type="spincludejqm" /> <link rel="stylesheet" type="text/css" href="<imart type="string" value=contextpath> </IMART>/css/mobile_fw/jquery.mobile.datebox.css" /> <script type="text/javascript" src="<imart type="string" value=contextpath> </IMART>/csjs/mobile_fw/jquery.mobile.datebox.js"></script> </head> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 47

50 intra-mart スマートフォン 開 発 ガイドライン (2) DateBox タグのイメージ ここでは DateBox タグでできることについて 簡 単 に 説 明 します 属 性 値 を 指 定 することにより 様 々な 見 た 目 や 振 る 舞 いを 持 ちます 属 性 値 の 詳 細 についてはリファレンスサイトをご 参 照 ください 日 付 入 力 の 例 DateBox タグを Calendar Mode で 動 作 させているところです いずれかの 日 付 をタップす ると 呼 び 出 し 元 のテキストボックスにその 日 付 が 入 力 されます 2011 年 8 月 と 表 記 されている 部 分 や 曜 日 ヘッダの 部 分 日 付 ボタンの 色 等 はカスタマイズすることができます 日 付 入 力 の 例 DateBox タグを Android Mode で 動 作 させているところです + や - で 日 付 を 調 整 し 設 定 ボタンをタップすると 呼 び 出 し 元 のテキストボックスにその 日 付 が 入 力 されます 他 のモードと 同 様 属 性 値 の 設 定 によってさらにカスタマイズすることができます Page 48 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

51 3 IM-Mobile Framework プログラミングガイド 日 付 入 力 の 例 DateBox タグを Slide Mode で 動 作 させているところです 年 月 日 別 に 3 段 にスライド 可 能 なポップアップになっていますので 各 項 目 をスライドして 日 付 を 調 整 し 設 定 ボタンをタップすると 呼 び 出 し 元 のテキストボックスにその 日 付 が 入 力 されます 他 のモードと 同 様 属 性 値 の 設 定 によってさらにカスタマ イズすることができます 日 付 入 力 の 例 DateBox タグを Flip Mode で 動 作 させているところです 年 月 日 別 に 3 列 にフリップ 可 能 な ポップアップになっていますので 各 項 目 をフリップして 日 付 を 調 整 し 設 定 ボタンをタップすると 呼 び 出 し 元 のテキストボックスにその 日 付 が 入 力 されます 他 のモードと 同 様 属 性 値 の 設 定 によってさらにカスタマイ ズすることができます 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 49

52 intra-mart スマートフォン 開 発 ガイドライン 時 刻 入 力 の 例 DateBox タグを Flip Time Mode で 動 作 させているところです 時 分 別 に 2 列 にフリップ 可 能 なポップアップになっていますので 各 項 目 をフリップして 時 刻 を 調 整 し 設 定 ボタンをタップすると 呼 び 出 し 元 のテキストボックスにその 時 刻 が 入 力 されます 他 のモードと 同 様 属 性 値 の 設 定 によってさらにカスタ マイズすることができます 時 刻 入 力 の 例 DateBox タグを Time Mode で 動 作 させているところです + や - で 時 刻 を 調 整 し 設 定 ボタンをタップすると 呼 び 出 し 元 のテキストボックスにその 日 付 が 入 力 されます 他 のモードと 同 様 属 性 値 の 設 定 によってさらにカスタマイズすることができます Page 50 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

53 3 IM-Mobile Framework プログラミングガイド 3.5 IM-Mobile Framework 画 面 共 通 JavaEEタグの 使 い 方 IM-Mobile Framework Ver7.2.1 から に 示 すスマートフォン 用 タグライブラリを 使 用 できるようになりました API ドキュメント 示 す 書 式 に 従 って JSP ファイルにタグを 埋 め 込 むことで スマートフォン 用 の 入 力 部 品 等 を 使 用 す ることができます JSPタグディレクティブ 本 フレームワーク JavaEE タグを 使 用 する 場 合 タグライブラリを 使 用 する JSP のページで 以 下 のような taglib ディレクティブを 指 定 する 必 要 があります taglib prefix="imsp" uri=" %> 詳 しくは API リスト 画 面 共 通 JavaEE タグライブラリ を 参 照 してください IM-Mobile Framework 画 面 共 通 JavaEEタグ 一 覧 下 記 に 本 フレームワークにて 提 供 するスマートフォン 向 けタグの 一 覧 を 示 します 各 タグの 詳 細 な 書 式 や 属 性 の 使 い 方 については API ドキュメントを 参 照 してください 項 番 タグ 名 機 能 概 要 1 includejqm HTML ファイル 内 でスマートフォン 向 け 入 力 部 品 を 使 用 するためのライブラリの 取 り 込 みを 行 います 2 headerwithlink ヘッダ 部 左 端 に 任 意 のページに 遷 移 のボタンを 備 えたヘッダを 表 示 します 3 commonfooter MENU ボタン ログアウト ボタンを 持 つ 共 通 フッタを 表 示 します 4 footerwithlogout ログアウト ボタンを 持 つ 共 通 フッタを 表 示 します 5 fieldcontain 入 力 部 品 にラベルを 生 成 し 入 力 部 品 とラベルの 関 連 付 けを 行 います 6 controlgroup 複 数 の 入 力 部 品 をグループ 化 します 7 radiobutton ラジオボタンを 表 示 します 8 checkbox チェックボックスを 表 示 します 9 toggleswitch トグルスイッチを 表 示 します 10 slider つまみを 左 右 に 動 かすことで 数 値 を 入 力 するための 入 力 部 品 を 表 示 します 11 searchbox 検 索 用 のテキストボックスを 表 示 します 12 pagingbutton 複 数 のページを 持 つリスト 形 式 の 一 覧 のページ 移 動 を 行 うためのツールバーを 表 示 します 13 collapsiblelist 見 出 しと 詳 細 情 報 を 持 つ 開 閉 式 のリストを 表 示 します 14 download ストレージサービスからファイルダウンロードの 行 うための 部 品 です 15 datepicker 日 付 文 字 列 を 参 照 入 力 するためのインターフェースを 提 供 します 16 calendar ユーザが 拡 張 可 能 なカレンダーレイアウトを 表 示 します 17 collapsible 開 閉 型 のブロック 形 式 で 見 出 しと 詳 細 情 報 を 取 り 扱 うインターフェースを 提 供 し ます 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 51

54 intra-mart スマートフォン 開 発 ガイドライン 3.6 TIPS ページ 遷 移 について 通 常 のページ 遷 移 を 行 う 場 合 は<IMART type= link >を 使 用 しますが ファンクションコンテナ 内 のページへ 遷 移 する 場 合 (PC 用 サイトやフィーチャーフォン 用 サイトのページ)は 注 意 が 必 要 です この 場 合 は Ajax を OFF に する 必 要 があります 下 記 にサンプルコードを 示 します なお スマートフォン 用 サイト 内 でのページ 遷 移 における<IMART type= link >を 使 用 する 場 合 は Ajax を OFF にする 必 要 はありません <サンプルコード> <!-- page_pc は PC 用 のページです --> <!-- この 例 はページ 遷 移 が 動 作 しません --> <imart type="link" page="path/to/page_pc">pc サイトへのリンク</imart> <!-- このように 記 述 してください --> <imart type="link" page="path/to/page_pc" data-ajax="false">pc サイトへのリンク</imart> <!-- このように 記 述 することもできます --> <imart type="link" page="path/to/page_pc" rel="external">pc サイトへのリンク</imart> jquery Mobile の mobileinit() 内 で Ajax 処 理 を OFF にしている 場 合 は さらに 注 意 が 必 要 です この 場 合 のペ ージ 遷 移 の 挙 動 について 下 表 に 示 します 項 番 3 の 場 合 は Ajax によるページ 遷 移 は 行 われない 点 に 注 意 してく ださい 項 番 mobileinit()の 設 定 各 HTML での 記 述 Ajax の 状 態 ページ 遷 移 の 挙 動 1 ajaxenabled= true ( 既 定 値 ) data-ajax= true ( 既 定 値 ) 有 効 Ajax によるページ 遷 移 が 行 われる 2 ajaxenabled= true ( 既 定 値 ) data-ajax= false 無 効 通 常 のページ 遷 移 が 行 われる 3 ajaxenabled= false data-ajax= true ( 既 定 値 ) 無 効 (ajaxenabled の 値 通 常 のページ 遷 移 が 行 われる が 優 先 される) 4 ajaxenabled= false data-ajax= false 無 効 通 常 のページ 遷 移 が 行 われる Page 52 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.

55 3 IM-Mobile Framework プログラミングガイド Debug.Browseについて 3.6.1と 関 連 しますが Debug.browseで 表 示 される 画 面 はAjaxがONになっている 場 合 は 表 示 されないため Debug.browseを 使 用 したい 場 合 は 一 時 的 にAjaxをOFFにしてください data-rel= back 時 の 画 面 遷 移 エラーについて スクリプト 開 発 モデルの 場 合 異 なるプレゼンテーションページ 間 で Ajax 画 面 遷 移 を 行 い 遷 移 先 の 画 面 から 初 期 表 示 時 の 画 面 へ 戻 る 際 jquery Mobile 内 部 の URL 自 動 変 換 エラーによる スクリプトエラーが 発 生 し 処 理 が 中 止 される 事 象 が 確 認 されています 上 記 が 原 因 の 問 題 に 遭 遇 した 場 合 以 下 のスクリプトを 配 置 することで 事 象 を 回 避 できます <script> (function($) { var firstpage = null; $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) { if (typeof data.topage ==="string" && data.topage.indexof("#") === -1 && window.location.href.indexof(data.topage)!== -1) { data.topage = $(document.body).children("[data-role='page']:first"); } }); })(jquery); </script> 作 成 者 : 株 式 会 社 NTT データ イントラマート Page 53

56 intra-mart スマートフォン 開 発 ガイドライン 4 各 工 程 におけるポイント 4.1 開 発 着 手 前 ( 要 件 定 義 まで) 端 末 の 選 定 システムに 接 続 するスマートフォン 端 末 の 選 定 作 業 は 非 常 に 重 要 です 搭 載 されている OS が 同 じ Android だか らといっても 機 種 が 異 なれば 機 種 依 存 の 問 題 が 発 生 する 可 能 性 があるからです 端 末 選 定 の 方 針 としては で きるだけ 絞 り 込 む 方 向 性 とすることをおすすめします Android 2.x 系 であればどんな 端 末 を 使 用 してもよい とい う 具 合 に 許 容 範 囲 を 広 げてしまうと 設 計 側 が 想 定 していない 端 末 で 利 用 者 側 がシステムに 接 続 しようとすること も 考 えられるからです このときにシステムが 正 常 に 動 作 するかは 設 計 者 側 では 保 証 できません 機 種 を 限 定 できることがベスト OS の 種 類 (ios/android/blackberry/windows Phone )はできるだけ 絞 り 込 むようにする OS のバージョン(Android 1.x 系 /2.x 系 /3.x 系 )はできるだけ 絞 り 込 むようにする さらに OS のバージョンだけでなく リビジョン(Android 2.2/2.3 )でも 絞 り 込 むようにする 端 末 の 絞 り 込 みができない 場 合 は 以 下 の 方 針 で 検 討 を 進 めるようにします そのシステムが 準 拠 する 規 格 を 明 確 にする(HTML5 でコンテンツ 制 作 する) 試 験 工 程 で 動 作 確 認 した 機 種 を 利 用 者 に 開 示 し それらの 機 種 でのシステム 利 用 を 推 奨 する クライアントリソースへのアクセスを 伴 う 業 務 処 理 等 機 種 によって 実 現 が 難 しい 業 務 がないかあらかじめ 把 握 しておく システム 側 で 制 御 可 能 な 機 種 依 存 の 現 象 であれば 回 避 コードを 実 装 できないか 検 討 しておく 画 面 イメージ 顧 客 から 業 務 要 件 をヒアリングし システム 化 範 囲 を 検 討 する 際 画 面 イメージを 使 用 したすり 合 わせが 行 われ ることもあります このとき できるだけ 画 面 モックアップ 等 を 作 成 してすり 合 わせを 行 うことをおすすめします シス テム 動 作 イメージに 近 いすり 合 わせを 行 うことで 顧 客 との 意 識 のギャップを 埋 めることができるだけでなく 設 計 時 のギャップを 埋 めることもできるからです また この 段 階 で 実 機 を 利 用 すると さらに 有 効 性 を 高 めることができ ます なお 画 面 モックアップは 業 務 スケルトンを 活 用 することで 簡 単 に 作 成 することができます Page 54 Copyright 株 式 会 社 NTT データ イントラマート All rights Reserved.