<4D F736F F D E834F838B815B B A DD8C76834B E646F6378>

Transcription

1 e コミグループウェア ユーザビリティ 設 計 ガイドライン 平 成 25 年 8 月 防 災 科 学 技 術 研 究 所

2 改 訂 履 歴 訂 番 頁 変 更 内 容 承 認 審 査 作 成 2011 年 11 月 新 規 作 成 渡 辺 渡 辺 大 久 保 A 年 8 月 全 面 改 修 渡 辺 渡 辺 大 久 保

3 目 次 1. はじめに ガイドライン 概 要 ガイドライン 策 定 の 背 景 ガイドラインの 策 定 方 針 ユーザビリティの 重 視... 1 適 用 ガイドラインの 使 い 方... 1 ユースケース 現 状 の 構 成 開 発 フローに 関 するガイドライン 開 発 モデル モデル 成 果 物 開 発 フロー ユーザーに 関 するガイドライン グループの 定 義 管 理 者 及 びユーザーの 呼 称 操 作 一 覧 画 面 に 関 するガイドライン ページの 定 義 呼 称 の 統 一 ページ 呼 称... 8 ページ 構 成 の 呼 称... 9 ページ 内 項 目 の 呼 称 設 定 ウィンドウ 項 目 の 呼 称 システム 管 理 設 定 の 呼 称 ボタン 呼 称 表 記 の 統 一 編 集 メニュー テキストリンク 項 目 日 付 時 刻 項 目 表 示 位 置 画 面 遷 移 の 基 本 的 な 考 え 方 投 稿 系 パーツの 画 面 遷 移 I

4 設 定 ウィンドウの 画 面 遷 移 デフォルト 項 目 設 定 共 通 使 用 ファイル 操 作 手 順 に 関 するガイドライン 利 用 者 にわかりやすい 操 作 手 順 フェイルセーフを 意 識 した 設 計 利 用 者 に 理 解 しやすいメッセージ メッセージ 入 力 フォーム 文 字 色 入 力 エラーチェック ヘルプ 機 能 セキュリティに 関 するガイドライン セキュリティ 対 策 を 意 識 した 設 計 セッションの 整 理 埋 込 みコーディングの 制 限 権 限 に 対 する 考 え システム 脆 弱 性 について 脆 弱 性 チェックツールの 使 用 アップデートに 関 するガイドライン アップデートに 対 応 する 設 計 実 装 に 関 するガイドライン モジュール 名 コーディング 規 則 テストに 関 するガイドライン テストについて テスト 環 境 テスト 項 目 適 用 範 囲 および 対 象 II

5 添 付 書 類 は 以 下 の 通 り e コミグループウェア 基 本 動 作 概 要 基 本 設 計 書 詳 細 設 計 書 テスト 項 目 書 e コミグループウェアコーディング 規 約 安 全 なウェブサイトの 作 り 方 ( 独 立 行 政 法 人 情 報 処 理 推 進 機 構 セキュリティセンター) 安 全 な SQL の 呼 び 出 し 方 ( 独 立 行 政 法 人 情 報 処 理 推 進 機 構 セキュリティセンター) ウェブサイトセキュリティチェックリスト ( 独 立 行 政 法 人 情 報 処 理 推 進 機 構 セキュリティセンター) III

6 1. はじめに 1.1. ガイドライン 概 要 このガイドラインは e コミグループウェア 開 発 におけるユーザビリティの 向 上 を 目 的 として 作 成 されたものである 1.2. ガイドライン 策 定 の 背 景 従 来 の 地 域 コミュニティを 支 援 する 参 加 型 コミュニティ Web システムは CMS や SNS Web-GIS 等 が 単 体 で 構 築 され 運 用 されていた そのため 多 様 な 地 域 の 主 体 が 情 報 を 共 有 し 専 門 的 な 知 識 や 地 域 固 有 の 知 恵 を 組 み 合 わせ 編 集 することが 困 難 と なり 市 民 活 動 の 相 互 の 乗 り 入 れや 新 たな 市 民 協 働 の 促 進 につながりにくいといっ た 課 題 があった そこで 防 災 科 研 では 従 来 の 参 加 型 コミュニティ Web システムを 住 民 や 市 民 グ ループ 等 利 用 者 の 視 点 から 見 直 し さまざまな 利 用 シーンを 想 定 して 地 域 の 運 営 経 営 ( 地 域 の 問 題 解 決 方 法 を 考 える)の 支 援 ツールとして e コミグループウェア を 開 発 してきた 結 果 ニーズに 応 じたモジュール( 機 能 )は 充 実 してきた しかし 開 発 が 進 むに つれ 統 一 したユーザーインターフェイスの 基 準 がないため モジュール 毎 に 違 う 操 作 方 法 になってしまう 問 題 が 発 生 した このため 個 々に 開 発 するモジュールのユーザーインターフェイスに 基 準 を 設 け 様 々な 利 用 者 が 迷 うことなく 統 一 性 のあるユーザビリティを 目 指 す 1.3. ガイドラインの 策 定 方 針 ユーザビリティの 重 視 e コミグループウェア 利 用 者 の 意 見 を 元 に 統 一 した 操 作 性 とアシスタンス 機 能 の 充 実 を 目 指 す 適 用 このガイドラインは e コミグループウェアサイトに 適 用 する 1.4. ガイドラインの 使 い 方 e コミグループウェアの 設 計 制 作 において ガイドラインを 遵 守 し ユーザビ リティの 向 上 を 図 る 1

7 1.5. ユースケース 以 下 のユースケースを 考 慮 した 設 計 を 行 う 現 状 の 構 成 現 状 は 図 1-1 の 通 りグループ 毎 に 単 体 及 び 階 層 を 作 れる 構 造 となっており 個 人 とグループとのつながりが 可 能 である 図 1-1 現 状 の 構 成 図 1-2 の 通 り 矛 盾 点 ( 操 作 性 の 不 一 致 名 称 不 一 致 等 )が 存 在 しないように し 初 めて e コミグループウェアを 使 用 する 場 合 でも 分 かりやすい 操 作 方 法 でなければならない 図 1-2 矛 盾 点 2

8 2. 開 発 フローに 関 するガイドライン 2.1. 開 発 モデル web アプリ 開 発 時 には 業 務 アプリ 開 発 時 の 概 念 である V カーブモデルの 流 れを 取 らない 場 合 が 多 々ある しかし この 流 れに 沿 わない 開 発 を 行 うと 開 発 工 期 の 延 長 やバグの 発 生 更 に ドキュメントが 存 在 しない 場 合 も 発 生 する また 仕 様 変 更 によるデグレードを 起 こしやすくなる 以 上 の 事 から 開 発 は 図 2-1 の V カーブモデルの 流 れを 原 則 とする 図 2-1 V カーブモデル (1) 仕 様 書 受 取 防 災 科 研 から 仕 様 書 を 受 取 る (2) 基 本 設 計 書 作 成 開 発 者 は 送 付 された 仕 様 書 を 元 に 基 本 設 計 書 を 作 成 し 防 災 科 研 に 送 付 する その 後 防 災 科 研 でレビューを 実 施 し 開 発 者 に 対 しフィードバックを 行 う (3) 詳 細 設 計 書 作 成 開 発 者 は 基 本 設 計 書 を 元 に 詳 細 設 計 書 とテスト 項 目 書 を 作 成 し 防 災 科 研 に 送 付 する その 後 防 災 科 研 でレビューを 実 施 し 開 発 者 に 対 しフィードバック を 行 う (4) コーディング 開 発 者 は 作 成 した 詳 細 設 計 書 を 元 にコーディングを 行 う (5) 単 体 テスト 開 発 者 は 作 成 したパーツ 単 体 でのテストを 行 う (6) 総 合 テスト 開 発 者 はテスト 項 目 書 に 沿 い 総 合 的 なテストを 行 う (7) 検 収 防 災 科 研 は 検 収 を 行 う 3

9 2.2. モデル 成 果 物 重 要 な 役 割 を 果 たすモデル 成 果 物 ( 基 本 設 計 書 作 成 詳 細 設 計 書 作 成 )の 設 計 内 容 を 以 下 に 示 す 基 本 設 計 書 : 画 面 配 置 画 面 遷 移 等 をハードコピー イラスト( 図 ) 文 章 で 記 述 する 基 本 設 計 書 がデモ 版 の 役 割 を 果 たす 詳 細 設 計 書 :コーディングの 下 書 き(フローチャート 関 数 仕 様 等 )を 記 述 する 可 能 な 限 り 詳 細 な 内 容 を 書 くことにより バグの 減 少 やコーディング 時 間 の 短 縮 につながる (テスト 項 目 書 ):あらゆる( 基 本 操 作 イレギュラー 操 作 )パターンを 想 定 し テス ト 画 面 と 確 認 方 法 と 確 認 項 目 を 記 述 する 基 本 設 計 書 詳 細 設 計 書 テスト 項 目 書 のサンプルは 別 紙 記 載 4

10 2.3. 開 発 フロー 図 2-2 は 2.1 開 発 モデルの V カーブの 流 れをタイムラインとしたものである 図 2-2 V カーブタイムライン 作 業 の 順 番 は 上 図 タイムラインの 通 りに 行 うものとする 仕 様 書 を 受 取 後 即 コーディング(B 項 目 ) 作 業 は 禁 止 とする 前 述 2.1 開 発 モデルの 流 れを 基 本 とするが 根 本 的 な 設 計 ミスや 地 域 の 意 見 を 聞 きながらの 開 発 もある その 場 合 は 基 本 設 計 書 詳 細 設 計 書 を 改 訂 し 図 2-3 の 通 り 改 修 内 容 を 確 認 出 来 る 改 訂 履 歴 を 作 成 する 図 2-3 V カーブタイムライン 改 修 時 5

11 3. ユーザーに 関 するガイドライン 3.1. グループの 定 義 町 内 会 自 治 会 コミュニティなどの 地 域 の 団 体 企 業 NPO などがある 3.2. 管 理 者 及 びユーザーの 呼 称 現 在 ユーザーの 表 記 がページ( 後 述 4.1.ページの 定 義 参 照 )により 異 なり ユー ザーが 混 乱 する 元 となるため 表 記 を 表 3.1 の 通 り 統 一 する 表 3.1 ユーザーの 呼 称 呼 称 定 義 システム 管 理 者 システムすべての 設 定 管 理 ができるユーザー グループ 管 理 者 グループページすべての 操 作 が 可 能 なユーザー グループ 副 管 理 者 グループ 管 理 者 の 選 任 罷 免 以 外 の 操 作 可 能 なユーザー グループ 編 集 者 各 パーツへの 記 事 の 投 稿 編 集 削 除 可 能 なユーザー グループメンバー グループに 参 加 しているユーザー 一 般 利 用 者 (ID あり) ユーザー 登 録 をしてありグループに 未 参 加 のユーザー 一 般 利 用 者 (ID なし) ユーザー 登 録 していないユーザー 3.3. 操 作 一 覧 各 操 作 に 対 する 概 要 は 表 3.2 の 通 り 表 3.2 操 作 一 覧 操 作 名 概 要 管 理 設 定 システム 全 体 の 設 定 ユーザー 管 理 ユーザーの 登 録 や 権 限 の 管 理 グループメンバー 管 理 グループメンバーの 権 限 の 管 理 グループページスキン 変 更 グループページのスキンの 変 更 パーツの 配 置 パーツの 配 置 パーツの 移 動 パーツの 移 動 パーツの 削 除 編 集 メニューの パーツの 削 除 パーツ 表 示 設 定 編 集 メニューの 表 示 設 定 パーツタイトルの 変 更 や 公 開 範 囲 の 設 定 パーツ 個 別 の 設 定 編 集 メニューの 設 定 記 事 の 投 稿 データの 登 録 グループ 専 用 パーツの 閲 覧 公 開 範 囲 が グループのみ に 設 定 されたパーツの 閲 覧 6

12 4. 画 面 に 関 するガイドライン 4.1. ページの 定 義 システム 上 グループページは 複 数 作 成 でき 一 般 的 なホームページの 1 サイトの 扱 いになる グループページは 1 つをポータルページとして 指 定 可 能 で 指 定 され たページは 全 体 の TOP ページとしての 役 割 となる 各 ユーザー 専 用 ページのダッシュボードと システム 全 体 を 管 理 するシステム 管 理 ページも 存 在 する 図 4-1 ページ 構 成 7

13 4.2. 呼 称 の 統 一 開 発 者 により 各 パーツの 中 で 呼 称 に 相 違 が 発 生 している これによりユーザーの 混 乱 を 招 く 可 能 性 が 有 るため 各 パーツでの 呼 称 を 統 一 する ページ 呼 称 ページの 呼 称 を 表 4.1 の 通 り 統 一 する 表 4.1 ページの 呼 称 参 照 ページ 名 用 途 図 4-2 ポータルページ ページ 構 成 全 体 の 根 幹 となるページ TOP ページとしての 役 割 を 持 つ 図 4-2 グループページ 各 グループで 維 持 運 営 するページ 図 4-3 ページ 設 定 画 面 各 グループページの 設 定 を 行 うページ 図 4-4 ダッシュボード ユーザーのページ 図 4-5 システム 管 理 設 定 システムの 設 定 を 行 うページ 図 4-2 ポータルページ/グループページ 図 4-3 ページ 設 定 画 面 図 4-4 ダッシュボード 図 4-5 システム 管 理 設 定 8

14 ページ 構 成 の 呼 称 ページ 構 成 呼 称 定 義 は 表 4.2 図 4-6 ページの 通 り 表 4.2 ページレイアウト 項 目 参 照 呼 称 定 義 図 4-6 a メニューバー 画 面 一 番 上 の 画 像 とページメニューが 表 示 される 部 分 図 4-6 b パンくずリスト ページへのリンクを 表 示 する 図 4-6 c カラム パーツが 配 置 出 来 る 列 項 目 図 4-6 d メインカラム 主 となるカラム 通 常 は 一 番 幅 広 なカラム 図 4-6 e パーツ 個 々で 各 処 理 を 行 う 拡 張 部 品 図 4-7 f 設 定 ウィンドウ パーツの 基 本 設 定 を 行 うウィンドウ a c b d e 図 4-6 ページ 構 成 1 9

15 f 図 4-7 ページ 構 成 2( 例 :FCK エディタ YouTube 動 画 追 加 プラグイン) 10

16 ページ 内 項 目 の 呼 称 (1) ページメニュー 項 目 呼 称 メニューバーの 呼 称 を 表 4.3 メニューバーの 呼 称 の 通 りとする 表 4.3 メニューバーの 呼 称 参 照 呼 称 内 容 図 ダッシュボード ダッシュボードを 表 示 する 図 参 加 中 のページ 参 加 中 ページを 表 示 する 図 ページ 設 定 各 ページの 設 定 を 行 う 図 システム 管 理 設 定 システムの 設 定 を 行 う (システム 管 理 者 のみ 表 示 ) 図 ログアウト ログアウトする 図 4-8 メニューバー 11

17 (2) パーツ 項 目 パーツの 呼 称 を 表 4.4 の 通 りとする 表 4.4 パーツ 項 目 参 照 呼 称 定 義 図 4-9 a パーツタイトル パーツのタイトル 図 4-9 b 編 集 メニューボタン 編 集 メニューを 表 示 させるためのボタン 図 4-9 c 編 集 メニュー 編 集 メニューボタンにマウスを 乗 せた 時 に 表 示 するパーツのメニュー 図 4-9 d ページング ページを 切 替 え 過 去 のデータを 参 照 するリンク ( 掲 示 板 等 リスト 表 示 時 には 必 ずページングを 使 用 する) b a c d 図 4-9 パーツ 項 目 ( 例 : 掲 示 板 パーツ) 12

18 設 定 ウィンドウ 項 目 の 呼 称 設 定 ウィンドウの 呼 称 を 表 4.5 の 通 りとする 表 4.5 設 定 ウィンドウ 項 目 呼 称 参 照 呼 称 定 義 設 定 項 目 の 表 題 を 表 示 パーツ 名 + 動 作 と する 図 4-10 a 設 定 タイトル 例 ) 設 定 を 行 う 場 合 は の 設 定 削 除 を 行 う 場 合 は の 削 除 図 4-10 b 項 目 タイトル 項 目 名 を 表 示 する 図 4-10 c 設 定 項 目 ユーザー 入 力 が 必 要 な 項 目 を 表 示 する a b c 図 4-10 設 定 ウィンドウ 項 目 画 面 ( 例 : FCK エディタ YouTube 動 画 追 加 プラグイン) 13

19 システム 管 理 設 定 の 呼 称 システム 管 理 設 定 の 呼 称 を 表 4.6 の 通 り 統 一 する システム 管 理 設 定 は 前 述 図 のリンクから 表 示 される 表 4.6 システム 管 理 者 画 面 の 呼 称 参 照 呼 称 定 義 図 4-11 a システム 管 理 メニュー 各 ページの 操 作 メニュー 図 4-11 b 設 定 項 目 各 項 目 の 設 定 を 行 う a b 図 4-11 システム 管 理 者 画 面 14

20 ボタン 呼 称 統 一 感 を 持 たせるために ボタン 表 記 は 表 4.7 の 通 り 統 一 する 表 4.7 ボタン 呼 称 画 面 分 類 呼 称 処 理 内 容 新 規 投 稿 記 事 投 稿 画 面 へのリンク 確 認 する 記 事 を 書 き 込 む 前 の 確 認 書 き 込 む 記 事 を 書 き 込 む アップロードする ファイルをアップロードする 投 稿 系 画 面 回 答 する アンケートに 回 答 する 送 信 する メールを 送 信 する 登 録 する カレンダーに 登 録 する 記 事 を 表 示 する 記 事 内 容 を 表 示 削 除 する 記 事 の 削 除 保 存 する 設 定 内 容 を 保 存 する キャンセル 操 作 の 取 り 消 し 次 へ 次 画 面 へ 遷 移 設 定 画 面 戻 る 前 画 面 へ 戻 る 閉 じる ダイアログ 等 を 閉 じる ページを 表 示 する 各 グループページを 表 示 追 加 項 目 の 追 加 削 除 項 目 の 削 除 15

21 4.3. 表 記 の 統 一 統 一 感 を 持 たせるためにパーツ 内 で 使 用 する 表 記 は 以 下 の 通 りとする 編 集 メニュー 防 災 科 研 から 指 示 がない 限 り 編 集 メニューにパーツ 側 から 追 加 するのは 図 4-12 の 通 り 基 本 設 定 のみとする 図 4-12 編 集 メニュー( 例 : 掲 示 板 パーツ) 基 本 設 定 :パーツを 動 作 させるための 機 能 や 内 容 を 設 定 表 示 設 定 :パーツタイトル 公 開 範 囲 を 設 定 テキストリンク 項 目 テキストリンク 時 は 図 4-13 図 4-14 の 通 り リンク 元 とリンク 先 の 呼 称 を 統 一 し ユーザーが 理 解 しやすいようにする 図 4-13 リンク 元 ( 例 : 一 覧 表 パーツ) 図 4-14 リンク 先 タイトル ( 例 : 一 覧 表 パーツ) 日 付 時 刻 項 目 防 災 科 研 からの 指 示 がない 場 合 は 以 下 のフォーマットを 使 用 する 日 付 項 目 に 関 しては フォーマットを 日 本 語 YYYY 年 MM 月 DD 日 に 統 一 する 時 刻 項 目 に 関 しては フォーマットを HH 時 MM 分 に 統 一 する 図 4-15 日 付 時 刻 フォーマット( 例 : 掲 示 板 パーツ) 16

22 4.4. 表 示 位 置 異 なるパーツでも 表 示 位 置 が 同 じならば ユーザーにとっても 理 解 しやすくなる ため 共 通 で 使 用 する 項 目 の 表 示 位 置 を 統 一 させる 表 4.8 表 示 位 置 項 目 表 示 位 置 設 置 例 新 規 投 稿 パーツ 最 上 部 / 右 寄 せ ページング パーツ 下 部 / 中 央 揃 え 項 目 追 加 削 除 ボタ ン 一 覧 左 部 設 定 投 稿 保 存 ボタン パーツ( 設 定 ウィンド ウ) 下 部 / 中 央 揃 え 17

23 4.5. 画 面 遷 移 の 基 本 的 な 考 え 方 画 面 遷 移 はユーザーの 使 いやすさに 直 結 するため 分 かりやすく 無 駄 なく 遷 移 さ せる 画 面 遷 移 の 流 れは 図 4-16 を 参 照 する システム 管 理 設 定 ページ 設 定 グループページ ログイン ブロック 画 面 メイン 画 面 ログアウト パーツ 設 定 パーツ 設 定 凡 例 :ウィンドウ パーツ 設 定 :ページ 図 4-16 画 面 遷 移 図 18

24 (1) 確 認 が 必 要 なページ 誤 操 作 を 防 止 するために 以 下 の 処 理 を 行 う 際 には 確 認 画 面 は 必 ず 表 示 させる 投 稿 系 パーツの 投 稿 時 ( 記 事 入 力 後 確 認 する ボタンクリック 時 ) 図 4-17 プレビュー 画 面 ( 例 : 掲 示 板 パーツ) 記 事 削 除 時 ( 記 事 の 削 除 をクリック 時 ) 図 4-18 確 認 画 面 ( 例 : 掲 示 板 パーツ) 19

25 投 稿 系 パーツの 画 面 遷 移 投 稿 系 パーツは 表 4.9 の 画 面 遷 移 を 基 本 として 開 発 を 行 う 操 作 表 4.9 投 稿 系 パーツの 画 面 遷 移 ( 例 : 掲 示 板 パーツ) 内 容 設 定 の 基 本 的 な 画 面 遷 移 1 編 集 メニューの 基 本 設 定 をクリックする 1 2 基 本 設 定 画 面 が 表 示 するので 項 目 を 入 力 する 3 保 存 する ボタンをクリックする 投 稿 系 パ ー ツ 設 定 画 面 2 4 設 定 が 保 存 され パーツが 配 置 されているページへ 遷 移 する 3 20

26 投 稿 時 の 基 本 的 な 画 面 遷 移 1 1 パーツの 最 上 段 右 上 にある 投 稿 ボタンをクリックする 1 2 メインページ へ 移 動 し 必 要 箇 所 を 入 力 する 3 確 認 する ボタンをクリックする 2 投 稿 系 パ ー ツ 投 稿 画 面 3 4 確 認 画 面 が 表 示 する 5 投 稿 する ボタンをクリックする 5 21

27 投 稿 系 パ ー ツ 投 稿 画 面 投 稿 時 の 基 本 的 な 画 面 遷 移 2 6 記 事 が 投 稿 され グループページへ 遷 移 する 記 事 編 集 時 の 基 本 的 な 画 面 遷 移 1 1 一 覧 から 対 象 スレッドのタイトルをクリックする 1 投 稿 系 パ ー ツ 編 集 画 面 2 記 事 ページへ 移 動 し 修 正 をクリックする 2 22

28 記 事 編 集 時 の 基 本 的 な 画 面 遷 移 2 3 メインページ の 編 集 画 面 へ 移 動 し 内 容 を 変 更 する 4 確 認 する ボタンをクリックする 3 投 稿 系 パ ー ツ 編 集 画 面 5 確 認 画 面 が 表 示 する 6 投 稿 する ボタンをクリックする

29 24 投 稿 系 パ ー ツ 編 集 画 面 記 事 編 集 時 の 基 本 的 な 画 面 遷 移 3 7 記 事 が 修 正 され グループページへ 遷 移 する 投 稿 系 パ ー ツ 画 像 ア ッ プ ロ ー ド 画 面 投 稿 時 画 像 アップロードの 基 本 的 な 画 面 遷 移 1 1 本 文 の FCK エディタの をクリックする 2 イメージプロパティウィンドウが 表 示 され ファイル 倉 庫 ボタンをクリック 2 1

30 25 投 稿 系 パ ー ツ 画 像 ア ッ プ ロ ー ド 画 面 投 稿 時 画 像 アップロードの 基 本 的 な 画 面 遷 移 2 3 ファイル 倉 庫 ウィンドウが 表 示 され ファイルアップロードをクリック 4 参 照 ボタンよりファイルを 選 択 する 5 アップロードボタンをクリック 3 4 5

31 投 稿 時 画 像 アップロードの 基 本 的 な 画 面 遷 移 3 6 ファイル 倉 庫 ウィンドウのデータ 一 覧 へ 遷 移 する 7 貼 り 付 ける 画 像 のサイズをクリック 8 ウィンドウを 閉 じる をクリック 8 投 稿 系 パ ー ツ 画 像 ア ッ プ ロ ー ド 画 面 9 本 文 に 画 像 が 挿 入 される 7 26

32 記 事 削 除 時 の 基 本 的 な 画 面 遷 移 1 記 事 一 覧 から 対 象 のタイトルをクリックする 1 2 記 事 ページへ 移 動 し 削 除 ボタンをクリックする 2 投 稿 系 パ ー ツ 削 除 画 面 3 確 認 ウィンドウが 表 示 する 4 削 除 する ボタンをクリックする 4 5 記 事 が 削 除 され パーツが 配 置 されているページへ 遷 移 する 27

33 設 定 ウィンドウの 画 面 遷 移 基 本 設 定 で 設 定 ウィンドウを 使 用 するパーツは 表 4.10 を 基 本 とし 開 発 を 行 う 事 操 作 表 4.10 パーツ 設 定 画 面 の 画 面 遷 移 ( 例 :グループ 参 加 者 リストパーツ) 遷 移 基 本 設 定 の 基 本 的 な 画 面 遷 移 1 編 集 メニューの 基 本 設 定 をクリックする 1 2 設 定 ウィンドウが 表 示 するので 項 目 を 入 力 する 3 保 存 する ボタンをクリックする 他 パ ー ツ 系 設 定 画 面 3 4 設 定 が 保 存 され パーツが 配 置 されているページへ 遷 移 する 28

34 4.6. デフォルト 項 目 設 定 編 集 メニュー 等 で 設 定 を 登 録 しないと 正 常 に 動 作 しないパーツが 存 在 する この 状 態 だとユーザーは 使 えない 分 からない 面 倒 という 印 象 を 与 えてし まう そのために 図 4-19 の 通 り ページにパーツを 追 加 する 時 にデフォルト 設 定 をし 設 定 を 行 わなくても 動 作 するように 設 計 する 尚 パーツの 設 定 項 目 以 外 においても 同 様 の 設 計 を 行 う 図 4-19 デフォルト 項 目 設 定 4.7. 共 通 使 用 ファイル 各 パーツから 共 通 仕 様 するファイルは 表 4.11 の 通 り 表 4.11 共 通 使 用 ファイル 一 覧 アイコン 内 容 収 納 場 所 リスト 表 示 の 項 目./image/arw.png 記 事 単 位 に 表 示 するアイコン./image/icon/icon_txt.gif 新 規 作 成 編 集 リンクに 表 示 する アイコン./image/icon/write.png 印 刷 リンクに 表 示 するアイコン./image/icon/print.png アイコンは 必 要 に 応 じて 追 加 する 29

35 5. 操 作 手 順 に 関 するガイドライン 5.1. 利 用 者 にわかりやすい 操 作 手 順 操 作 メニューが 複 数 個 所 にあるとユーザーの 混 乱 を 招 くため 各 操 作 は1 箇 所 のメ ニューのみから 行 うようにし 関 連 操 作 は メニューの 大 項 目 から 小 項 目 へと 進 めら れるようにまとめる 操 作 の 流 れは 画 面 の 上 から 下 左 から 右 へと 行 うようにする 説 明 文 は 専 門 用 語 を 避 け 分 かりやすい 表 現 で 短 くまとめるようにし e コミ 内 で 既 存 または 類 似 する 文 言 があれば 参 照 する 図 5-1 わかりやすい 操 作 手 順 5.2. フェイルセーフを 意 識 した 設 計 図 5-2 の 通 り 誤 操 作 でデータが 削 除 されるなどが 起 きないように 重 要 な 箇 所 には 確 認 画 面 を 設 ける 図 5-2 フェイルセーフの 意 識 30

36 5.3. 利 用 者 に 理 解 しやすいメッセージ 専 門 的 な 用 語 を 使 用 すると ユーザーにとっては 理 解 しがたい 内 容 となってしまう ので 図 5-3 図 5-4 の 通 り 誰 にでも 理 解 ができる 言 葉 を 使 う 図 5-3 理 解 しやすいメッセージ 図 5-4 理 解 しやすい 表 記 31

37 メッセージ メッセージは データベースに 登 録 し 表 5.1 のメッセージ 使 用 し 開 発 者 が 共 有 して 呼 び 出 すようにする 尚 この 機 能 はまだ 実 装 されておらず 追 加 予 定 となっています 表 5.1 メッセージ 一 覧 種 類 文 法 タイミング 内 容 *XXXX/YYYY は 内 容 により 文 字 が 変 わる XXXX 内 文 字 列 YYYY 内 文 字 列 ZZZZ 内 文 字 列 権 限 のない 操 作 を 実 行 時 権 限 不 足 XXXX の 権 限 がありません 操 作 / 閲 覧 等 未 入 力 時 入 力 項 目 名 実 数 字 項 目 の 不 正 入 力 XXXX を 入 力 してください 半 角 数 字 行 年 齢 の 不 適 合 適 切 な 年 齢 防 止 入 力 エラーチェック 時 メールアドレス 不 正 入 力 メールアドレス 型 表 5.2 参 照 URL 不 正 入 力 XXXX を 正 しく 入 力 してください URL エ ラ ー データ 操 作 の 失 敗 後 型 開 始 日 終 了 日 が 不 整 合 期 間 入 力 文 字 数 オーバー 文 字 数 数 値 文 字 入 力 できる XXXX は YYYYZZZZ です 桁 数 の 範 囲 外 桁 数 数 値 桁 データ 操 作 時 エラー XXXX に 失 敗 しました システム 管 理 者 (メールアドレスのリン ク)に 連 絡 してください 投 稿 / 保 存 / 削 除 等 項 目 追 加 時 項 目 追 加 前 の 確 認 項 目 追 加 確 XXXX を YYYY します 認 項 目 削 除 時 削 除 前 の 確 認 項 目 削 除 型 よろしいですか 記 事 削 除 時 削 除 前 の 確 認 記 事 削 除 処 理 選 択 時 選 択 前 の 確 認 XXXX を 選 択 してください 選 択 項 目 メッセージは 必 要 に 応 じて 追 加 する 32

38 入 力 フォーム 文 字 色 各 パーツの 入 力 フォームにおいて 補 足 用 文 章 の 文 字 色 が 統 一 されていないた め ユーザーが 重 要 な 操 作 を 見 逃 す 可 能 性 がある よって 図 5-5 の 通 り 補 足 文 章 はスキン 指 定 の 文 字 色 ( 色 指 定 をしない)とし 図 5-6 警 告 エラー 図 5-7 必 須 項 目 の 文 字 は 赤 色 で 表 示 する 図 5-5 補 足 文 章 ( 例 : 防 災 Web パーツ) 図 5-6 警 告 エラー( 例 :アンケートパーツ) 図 5-7 必 須 項 目 ( 例 : 問 い 合 わせパーツ) 33

39 5.4. 入 力 エラーチェック 入 力 チェックは ボタンクリック 時 に JavaScript で 行 い 安 全 性 向 上 のため サ ーバー 側 でもチェックを 行 う 内 容 は 表 5.2 の 通 りとする エラーチェックはまだ 実 装 されておらず 追 加 予 定 となっています 実 装 される まで 各 パーツでエラーチェックを 行 うこと 表 5.2 入 力 エラーチェック チェック 項 目 内 容 ドットで 始 まらない ドットが 連 続 しない 前 がドット 以 1 つのみ 存 在 する URL RFC 2396 準 拠 年 齢 0 歳 ~ 文 字 数 各 仕 様 の 範 囲 内 数 字 数 字 桁 数 期 間 必 須 項 目 その 他 項 目 各 仕 様 の 範 囲 内 開 始 日 と 終 了 日 の 整 合 性 未 入 力 チェック 各 仕 様 の 範 囲 内 5.5. ヘルプ 機 能 パーツ 単 位 でヘルプが 表 示 出 来 る 機 能 が 実 装 されているので ヘルプ 内 容 を 登 録 し 操 作 性 の 向 上 を 図 る 34

40 6. セキュリティに 関 するガイドライン 6.1. セキュリティ 対 策 を 意 識 した 設 計 クロスサイトスクリプティング SQL インジェクション 等 の 対 策 をし テスト 内 容 に 反 映 実 施 を 行 う 6.2. セッションの 整 理 セッション 変 数 利 用 については 以 下 の 通 り 統 一 する $_SESSION[ドメインルートからのパス][モジュール 名 ][ブロック ID][ 項 目 ] ブロック ID が 不 要 な 場 合 は $_SESSION[ドメインルートからのパス] [モジュール 名 ][ 項 目 ]とする 6.3. 埋 込 みコーディングの 制 限 外 部 API(YouTube Facebook 等 )を 用 いる 事 は パーツ 開 発 にとって 有 用 だが 個 々 のパーツで 独 自 に 実 装 すると 外 部 API の 仕 様 変 更 が 発 生 した 際 に パーツの 見 直 しが 必 要 となる また セキュリティホールの 可 能 性 があるため 外 部 API の 独 自 実 装 を 禁 止 し 新 たに 作 成 する 外 部 API インターフェースを 利 用 する 図 6-1 外 部 API 用 インターフェース 35

41 6.4. 権 限 に 対 する 考 え 各 ブロックに 対 して 公 開 設 定 の 指 定 ができる 更 に 投 稿 記 事 に 対 して 公 開 設 定 が 可 能 であるため ユーザーが 混 乱 する 恐 れがあり バグの 温 床 となってしまう 可 能 性 が ある 図 6-2 権 限 に 対 する 考 え この 状 況 を 解 消 するために 公 開 設 定 はブロックのみとする 6.5. システム 脆 弱 性 について サイト 内 に 脆 弱 性 があることで 悪 意 の 有 るスクリプトにより 別 ページに 誘 導 され たり アカウントを 乗 っ 取 られたり ユーザーにとって 不 利 益 な 事 態 が 想 定 される この 様 な 事 態 を 防 ぐために 脆 弱 性 チェックツールの 使 用 ( 後 述 6.6)の 通 り チェッ クを 実 施 する なお コーディングレベルでの 脆 弱 性 のチェックは 別 紙 ウェブサイトセキュリテ ィチェックリストを 利 用 しチェックを 実 施 する 脆 弱 性 対 策 の 詳 細 については 別 紙 安 全 なウェブサイトの 作 り 方 安 全 な SQL の 呼 び 出 し 方 を 参 照 する 36

42 6.6. 脆 弱 性 チェックツールの 使 用 脆 弱 性 を 手 動 でチェックする 事 は 多 大 な 労 力 が 必 要 であるし チェックし 忘 れる 事 もある このような 事 を 無 くすために 防 災 科 研 の 指 定 する 脆 弱 性 チェックツール (ratproxy 等 )を 実 施 し その 結 果 を 提 出 する 脆 弱 性 項 目 表 6.1 脆 弱 性 診 断 ( 参 考 ) 危 険 性 診 断 項 目 対 策 方 法 フ ォ ー ジ ェ リ (C S R F ク ロ ス サ イ ト ス ク リ プ テ ィ ン グ (X S S )* ク ロ ス サ イ ト リ ク エ ス ト 悪 意 のあるスク リプトが 実 行 さ れる ユーザーのなり すまし 等 の 発 生 ユーザーが 外 部 に 設 置 された 悪 意 のある Web ペ ージにアクセス することで Web アプリケーショ ンの 何 らかの 機 能 が 実 行 される Bad or no charset declared for renderable file (Content-Type や Charset 指 定 の 誤 り) Risky Javascript code (write()などの JavaScript 関 数 の 使 用 ) XSS candidates (XSS の 可 能 性 がある) Dynamic Javascript for direct inclusion (JavaScript ファイルや JSON データ 内 に 含 まれる 情 報 を 盗 まれる 可 能 性 があ る) POST query with no XSRF protection GET query with no XSRF protection ( 他 サイトから 投 稿 される 可 能 性 があ る) 文 字 コード 正 しい 箇 所 に 明 示 する 認 められたパラメータ 以 外 が 送 られてきた 場 合 はドキュメントを 返 さない 入 力 値 のチェック 出 力 エンコーディング 形 式 の 指 定 をする ユーザーデータ 重 要 な キーは 出 力 しない ランダムトークンをフ ォームや URL に 埋 め 込 む リクエスト 後 整 合 性 を 確 認 する )* *XSS : 悪 意 を 持 ったユーザーがフォームなどを 通 して JavaScript などのスクリプト コードを 入 力 した 際 に そのスクリプト 内 容 がそのまま HTML に 埋 め 込 まれ ページを 閲 覧 したコンピュータでスクリプトが 実 行 されてしまうこと *CSRF: Web サイトにスクリプトや 自 動 転 送 (HTTP リダイレクト)を 仕 込 むことによっ て 閲 覧 者 に 意 図 せず 別 の Web サイト 上 で 何 らかの 操 作 ( 掲 示 板 への 書 き 込 み など)を 行 わせる 攻 撃 手 法 37

43 7. アップデートに 関 するガイドライン 7.1. アップデートに 対 応 する 設 計 防 災 科 研 で 定 めるバージョン 以 上 に 対 して 正 常 に 動 作 する 設 計 を 行 う 各 パーツの アップデートを 実 行 した 場 合 でも 図 7-1 の 通 り パーツを 継 続 使 用 出 来 るようにする とともに 今 までのデータが 見 られなくなった 等 ユーザビリティの 低 下 にならない 様 な 設 計 を 行 う 更 に 新 機 能 に 対 応 した 設 計 をする 事 により ユーザビリティの 向 上 を 図 る 図 7-1 アップデート 対 応 38

44 8. 実 装 に 関 するガイドライン 8.1. モジュール 名 モジュール 名 は 仕 様 書 により 開 発 者 が 防 災 科 研 に 提 示 協 議 し 決 定 する 決 定 し たモジュール 名 は 表 8.1 の 箇 所 に 使 用 する 詳 細 は 別 紙 (e コミグループウェア コーディング 規 約 )を 参 照 する 表 8.1 モジュール 名 ( : モジュール 名 ) 項 目 規 則 php クラス 名 cls_mod_ php 関 数 名 mod_ _ 処 理 MySQL テーブル 名 mod_ _ 項 目 名 css ID _ブロック ID_ 名 称 css class _ 名 称 javascript クラス mod_ javascript 関 数 mod_ _ 処 理 8.2. コーディング 規 則 詳 細 コーディング 規 約 については 別 紙 (e コミグループウェアコーディング 規 約 ) を 参 照 する 39

45 9. テストに 関 するガイドライン 9.1. テストについて 品 質 信 頼 性 安 全 性 を 確 保 するために 必 要 なのが テスト 工 程 である テスト 工 程 の 目 標 は テストを 重 ねることによりプログラム 中 の 欠 陥 をできる 限 り 多 く 発 見 し 正 しく 動 作 するという 信 頼 性 を 高 めることである これを 確 実 に 実 施 する 事 により ユーザーが 使 いやすく 安 全 なシステムが 成 り 立 つ 事 となる 9.2. テスト 環 境 テスト 環 境 は 防 災 科 研 が 定 める OS サーバー 言 語 データベースを 開 発 者 が 用 意 するものとする 9.3. テスト 項 目 ユーザーの 閲 覧 環 境 (OS ブラウザ バージョン)により 表 示 動 作 が 異 なる また イレギュラーな 操 作 を 行 う 可 能 性 もある よって 防 災 科 研 が 定 める OS ブラウザ バージョン 全 てに 対 し あらゆる( 基 本 操 作 イレギュラー 操 作 )パターンを 想 定 し テスト 項 目 書 を 作 成 し テストを 実 施 する 事 とする 10. 適 用 範 囲 および 対 象 本 ガイドラインは e コミグループウェアのパーツ 開 発 及 び システム 開 発 に 適 用 される また 既 存 のパーツの 改 修 時 に 於 いても 本 ガイドラインを 適 用 する 40