Comments
Description
Transcript
e コミグループウェア ユーザビリティ設計ガイドライン
e コミグループウェア ユーザビリティ設計ガイドライン 平成 25 年 8 月 防災科学技術研究所 改訂履歴 訂番 頁 変更内容 2011 年 11 月 A-01 2013 年 8 月 新規作成 全面改修 承認 審査 作成 渡辺 渡辺 大久保 渡辺 渡辺 大久保 目次 1. はじめに..................................................................................................................... 1 1.1. ガイドライン概要 .............................................................................................. 1 1.2. ガイドライン策定の背景.................................................................................... 1 1.3. ガイドラインの策定方針.................................................................................... 1 1.3.1. ユーザビリティの重視 ................................................................................ 1 1.3.2. 適用 ............................................................................................................. 1 1.4. ガイドラインの使い方 ....................................................................................... 1 1.5. ユースケース...................................................................................................... 2 1.5.1. 現状の構成 .................................................................................................. 2 2. 開発フローに関するガイドライン ............................................................................. 3 2.1. 開発モデル ......................................................................................................... 3 2.2. モデル成果物...................................................................................................... 4 2.3. 開発フロー ......................................................................................................... 5 3. ユーザーに関するガイドライン................................................................................. 6 3.1. グループの定義 .................................................................................................. 6 3.2. 管理者及びユーザーの呼称 ................................................................................ 6 3.3. 操作一覧 ............................................................................................................. 6 4. 画面に関するガイドライン ........................................................................................ 7 4.1. ページの定義...................................................................................................... 7 4.2. 呼称の統一 ......................................................................................................... 8 4.2.1. ページ呼称 .................................................................................................. 8 4.2.2. ページ構成の呼称 ....................................................................................... 9 4.2.3. ページ内項目の呼称.................................................................................. 11 4.2.4. 設定ウィンドウ項目の呼称 ....................................................................... 13 4.2.5. システム管理設定の呼称 .......................................................................... 14 4.2.6. ボタン呼称 ................................................................................................ 15 4.3. 表記の統一 ....................................................................................................... 16 4.3.1. 編集メニュー ............................................................................................ 16 4.3.2. テキストリンク項目.................................................................................. 16 4.3.3. 日付・時刻項目 ......................................................................................... 16 4.4. 表示位置 ........................................................................................................... 17 4.5. 画面遷移の基本的な考え方 .............................................................................. 18 4.5.2. 投稿系パーツの画面遷移 .......................................................................... 20 I 4.5.3. 設定ウィンドウの画面遷移 ....................................................................... 28 4.6. デフォルト項目設定 ......................................................................................... 29 4.7. 共通使用ファイル ............................................................................................ 29 5. 操作手順に関するガイドライン............................................................................... 30 5.1. 利用者にわかりやすい操作手順 ....................................................................... 30 5.2. フェイルセーフを意識した設計 ....................................................................... 30 5.3. 利用者に理解しやすいメッセージ ................................................................... 31 5.3.1. メッセージ ................................................................................................ 32 5.3.2. 入力フォーム文字色.................................................................................. 33 5.4. 入力エラーチェック ......................................................................................... 34 5.5. ヘルプ機能 ....................................................................................................... 34 6. セキュリティに関するガイドライン ....................................................................... 35 6.1. セキュリティ対策を意識した設計 ................................................................... 35 6.2. セッションの整理 ............................................................................................ 35 6.3. 埋込みコーディングの制限 .............................................................................. 35 6.4. 権限に対する考え ............................................................................................ 36 6.5. システム脆弱性について.................................................................................. 36 6.6. 脆弱性チェックツールの使用 .......................................................................... 37 7. アップデートに関するガイドライン ....................................................................... 38 7.1. アップデートに対応する設計 .......................................................................... 38 8. 実装に関するガイドライン ...................................................................................... 39 8.1. モジュール名.................................................................................................... 39 8.2. コーディング規則 ............................................................................................ 39 9. テストに関するガイドライン .................................................................................. 40 9.1. テストについて ................................................................................................ 40 9.2. テスト環境 ....................................................................................................... 40 9.3. テスト項目 ....................................................................................................... 40 10. 適用範囲および対象............................................................................................... 40 II 添付書類は以下の通り。 ・e コミグループウェア基本動作概要 ・基本設計書 ・詳細設計書 ・テスト項目書 ・e コミグループウェアコーディング規約 ・安全なウェブサイトの作り方 (独立行政法人 情報処理推進機構 セキュリティセンター) ・安全な SQL の呼び出し方 (独立行政法人 情報処理推進機構 セキュリティセンター) ・ウェブサイトセキュリティチェックリスト (独立行政法人 情報処理推進機構 セキュリティセンター) III 1. はじめに 1.1. ガイドライン概要 このガイドラインは、e コミグループウェア開発におけるユーザビリティの向上 を目的として作成されたものである。 1.2. ガイドライン策定の背景 従来の地域コミュニティを支援する参加型コミュニティ Web システムは、CMS や SNS、Web-GIS 等が単体で構築され運用されていた。そのため、多様な地域の主体が 情報を共有し、専門的な知識や地域固有の知恵を組み合わせ編集することが困難と なり、市民活動の相互の乗り入れや新たな市民協働の促進につながりにくいといっ た課題があった。 そこで、防災科研では、従来の参加型コミュニティ Web システムを住民や市民グ ループ等利用者の視点から見直し、さまざまな利用シーンを想定して、地域の運 営・経営(地域の問題解決方法を考える)の支援ツールとして e コミグループウェア を開発してきた。 結果、ニーズに応じたモジュール(機能)は充実してきた。しかし、開発が進むに つれ統一したユーザーインターフェイスの基準がないため、モジュール毎に違う操 作方法になってしまう問題が発生した。 このため、個々に開発するモジュールのユーザーインターフェイスに基準を設け、 様々な利用者が迷うことなく、統一性のあるユーザビリティを目指す。 1.3. ガイドラインの策定方針 1.3.1. ユーザビリティの重視 e コミグループウェア利用者の意見を元に、統一した操作性とアシスタンス機能 の充実を目指す。 1.3.2. 適用 このガイドラインは、e コミグループウェアサイトに適用する。 1.4. ガイドラインの使い方 e コミグループウェアの設計・制作において、ガイドラインを遵守し、ユーザビ リティの向上を図る。 1 1.5. ユースケース 以下のユースケースを考慮した設計を行う。 1.5.1. 現状の構成 現状は、図 1-1 の通りグループ毎に単体及び階層を作れる構造となっており、 個人とグループとのつながりが可能である。 図 1-1 現状の構成 図 1-2 の通り、矛盾点(操作性の不一致・名称不一致等)が存在しないように し、初めて e コミグループウェアを使用する場合でも、 “分かりやすい”操作方 法でなければならない。 図 1-2 矛盾点 2 2. 開発フローに関するガイドライン 2.1. 開発モデル web アプリ開発時には、業務アプリ開発時の概念である V カーブモデルの流れを 取らない場合が多々ある。 しかし、この流れに沿わない開発を行うと、開発工期の延長やバグの発生、更に ドキュメントが存在しない場合も発生する。また、仕様変更によるデグレードを起 こしやすくなる。 以上の事から、開発は図 2-1 の V カーブモデルの流れを原則とする。 図 2-1 V カーブモデル (1) 仕様書受取 防災科研から仕様書を受取る。 (2) 基本設計書作成 開発者は送付された仕様書を元に基本設計書を作成し、防災科研に送付する。 その後、防災科研でレビューを実施し、開発者に対しフィードバックを行う。 (3) 詳細設計書作成 開発者は基本設計書を元に詳細設計書とテスト項目書を作成し、防災科研に送 付する。その後、防災科研でレビューを実施し、開発者に対しフィードバック を行う。 (4) コーディング 開発者は作成した詳細設計書を元にコーディングを行う。 (5) 単体テスト 開発者は作成したパーツ単体でのテストを行う。 (6) 総合テスト 開発者はテスト項目書に沿い、総合的なテストを行う。 (7)検収 防災科研は検収を行う。 3 2.2. モデル成果物 重要な役割を果たすモデル成果物（基本設計書作成・詳細設計書作成）の設計内 容を以下に示す。 基本設計書：画面配置・画面遷移等をハードコピー・イラスト（図）・文章で記述 する。基本設計書がデモ版の役割を果たす。 詳細設計書：コーディングの下書き（フローチャート・関数仕様等）を記述する。 可能な限り詳細な内容を書くことにより、バグの減少やコーディング 時間の短縮につながる。 (テスト項目書)：あらゆる(基本操作・イレギュラー操作)パターンを想定し、テス ト画面と確認方法と確認項目を記述する。 【基本設計書、詳細設計書、テスト項目書のサンプルは別紙記載】 4 2.3. 開発フロー 図 2-2 は 2.1 開発モデルの V カーブの流れをタイムラインとしたものである。 図 2-2 V カーブタイムライン 作業の順番は、上図タイムラインの通りに行うものとする。 ※仕様書を受取後、即コーディング（B 項目）作業は禁止とする。 前述 2.1 開発モデルの流れを基本とするが、根本的な設計ミスや地域の意見を聞 きながらの開発もある。その場合は、基本設計書・詳細設計書を改訂し、図 2-3 の通り改修内容を確認出来る改訂履歴を作成する。 図 2-3 V カーブタイムライン改修時 5 3. ユーザーに関するガイドライン 3.1. グループの定義 町内会・自治会・コミュニティなどの地域の団体、企業・NPO などがある。 3.2. 管理者及びユーザーの呼称 現在、ユーザーの表記がページ(後述 4.1.ページの定義参照)により異なり、ユー ザーが混乱する元となるため、表記を表 3.1 の通り統一する。 表 3.1 ユーザーの呼称 呼称 システム管理者 グループ管理者 グループ副管理者 グループ編集者 グループメンバー 一般利用者(ID あり） 一般利用者(ID なし) 定義 システムすべての設定・管理ができるユーザー グループページすべての操作が可能なユーザー グループ管理者の選任・罷免以外の操作可能なユーザー 各パーツへの記事の投稿・編集・削除可能なユーザー グループに参加しているユーザー ユーザー登録をしてありグループに未参加のユーザー ユーザー登録していないユーザー 3.3. 操作一覧 各操作に対する概要は、表 3.2 の通り。 表 3.2 操作一覧 操作名 概要 管理設定 システム全体の設定 ユーザー管理 ユーザーの登録や権限の管理 グループメンバー管理 グループメンバーの権限の管理 グループページスキン変更 グループページのスキンの変更 パーツの配置 パーツの配置 パーツの移動 パーツの移動 パーツの削除 編集メニューの「パーツの削除」 パーツ表示設定 編集メニューの「表示設定」 パーツタイトルの変更や公開範囲の設定 パーツ個別の設定 編集メニューの「設定」 記事の投稿 データの登録 グループ専用パーツの閲覧 公開範囲が「グループのみ」に設定されたパーツの閲覧 6 4. 画面に関するガイドライン 4.1. ページの定義 システム上グループページは、複数作成でき、一般的なホームページの 1 サイトの 扱いになる。グループページは、1 つをポータルページとして指定可能で、指定され たページは、全体の TOP ページとしての役割となる。 各ユーザー専用ページのダッシュボードと、システム全体を管理するシステム管理 ページも存在する。 図 4-1 ページ構成 7 4.2. 呼称の統一 開発者により各パーツの中で呼称に相違が発生している。これによりユーザーの 混乱を招く可能性が有るため、各パーツでの呼称を統一する。 4.2.1. ページ呼称 ページの呼称を表 4.1 の通り統一する。 表 4.1 ページの呼称 参照 ページ名 用途 ページ構成全体の根幹となるページ 図 4-2 ポータルページ 図 4-2 グループページ 各グループで維持・運営するページ 図 4-3 ページ設定画面 各グループページの設定を行うページ 図 4-4 ダッシュボード ユーザーのページ 図 4-5 システム管理設定 システムの設定を行うページ TOP ページとしての役割を持つ 図 4-2 ポータルページ/グループページ 図 4-3 ページ設定画面 図 4-4 ダッシュボード 図 4-5 システム管理設定 8 4.2.2. ページ構成の呼称 ページ構成・呼称・定義は表 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 b c d e 図 4-6 ページ構成１ 9 f 図 4-7 ページ構成 2(例:FCK エディタ YouTube 動画追加プラグイン) 10 4.2.3. ページ内項目の呼称 (1) ページメニュー項目呼称 メニューバーの呼称を表 4.3 メニューバーの呼称の通りとする。 表 4.3 メニューバーの呼称 参照 呼称 内容 図 4-8 1 ダッシュボード ダッシュボードを表示する。 図 4-8 2 参加中のページ 参加中ページを表示する。 図 4-8 3 ページ設定 各ページの設定を行う。 図 4-8 4 システム管理設定 図 4-8 5 ログアウト 1 システムの設定を行う。 (システム管理者のみ表示) ログアウトする。 2 3 図 4-8 メニューバー 11 4 5 (2) パーツ項目 パーツの呼称を表 4.4 の通りとする。 表 4.4 パーツ項目 参照 呼称 定義 図 4-9 a パーツタイトル パーツのタイトル 図 4-9 b 編集メニューボタン 編集メニューを表示させるためのボタン 図 4-9 c 編集メニュー 図 4-9 d ページング 編集メニューボタンにマウスを乗せた時に 表示するパーツのメニュー ページを切替え過去のデータを参照するリンク (掲示板等、リスト表示時には必ずページングを使用する) b c a d 図 4-9 パーツ項目(例:掲示板パーツ) 12 4.2.4. 設定ウィンドウ項目の呼称 設定ウィンドウの呼称を表 4.5 の通りとする。 表 4.5 設定ウィンドウ項目呼称 参照 呼称 定義 設定項目の表題を表示「パーツ名＋動作」と する 図 4-10 a 設定タイトル 例) 設定を行う場合は、○○の設定 削除を行う場合は、○○の削除 図 4-10 b 項目タイトル 項目名を表示する 図 4-10 c 設定項目 ユーザー入力が必要な項目を表示する a b c 図 4-10 設定ウィンドウ項目画面(例: FCK エディタ YouTube 動画追加プラグイン) 13 4.2.5. システム管理設定の呼称 システム管理設定の呼称を表 4.6 の通り統一する。 システム管理設定は、前述図 4-8 4 のリンクから表示される。 表 4.6 システム管理者画面の呼称 参照 呼称 定義 図 4-11 a システム管理メニュー 各ページの操作メニュー 図 4-11 b 設定項目 各項目の設定を行う b a 図 4-11 システム管理者画面 14 4.2.6. ボタン呼称 統一感を持たせるために、ボタン表記は表 4.7 の通り統一する。 表 4.7 ボタン呼称 画面分類 投稿系画面 設定画面 呼称 処理内容 新規投稿 記事投稿画面へのリンク 確認する 記事を書き込む前の確認 書き込む 記事を書き込む アップロードする ファイルをアップロードする 回答する アンケートに回答する 送信する メールを送信する 登録する カレンダーに登録する 記事を表示する 記事内容を表示 削除する 記事の削除 保存する 設定内容を保存する キャンセル 操作の取り消し 次へ 次画面へ遷移 戻る 前画面へ戻る 閉じる ダイアログ等を閉じる ページを表示する 各グループページを表示 追加 項目の追加 削除 項目の削除 15 4.3. 表記の統一 統一感を持たせるためにパーツ内で使用する表記は、以下の通りとする。 4.3.1. 編集メニュー 防災科研から指示がない限り、編集メニューにパーツ側から追加するのは、図 4-12 の通り「基本設定」のみとする。 図 4-12 編集メニュー(例:掲示板パーツ) 基本設定：パーツを動作させるための機能や内容を設定 表示設定：パーツタイトル・公開範囲を設定 4.3.2. テキストリンク項目 テキストリンク時は、図 4-13 図 4-14 の通り、リンク元とリンク先の呼称を統 一し、ユーザーが理解しやすいようにする。 図 4-13 リンク元 (例:一覧表パーツ) 図 4-14 リンク先タイトル (例:一覧表パーツ) 4.3.3. 日付・時刻項目 防災科研からの指示がない場合は、以下のフォーマットを使用する。 日付項目に関しては、フォーマットを日本語 YYYY 年 MM 月 DD 日に統一する。 時刻項目に関しては、フォーマットを HH 時 MM 分に統一する。 図 4-15 日付・時刻フォーマット(例:掲示板パーツ) 16 4.4. 表示位置 異なるパーツでも表示位置が同じならば、ユーザーにとっても理解しやすくなる ため、共通で使用する項目の表示位置を統一させる。 表 4.8 表示位置 項目 表示位置 新規投稿 パーツ最上部/右寄せ ページング パーツ下部/中央揃え 項目追加・削除ボタ ン 設置例 一覧左部 設定・投稿・保存 パーツ(設定ウィンド ボタン ウ)下部/中央揃え 17 4.5. 画面遷移の基本的な考え方 画面遷移はユーザーの使いやすさに直結するため、分かりやすく・無駄なく遷移さ せる。画面遷移の流れは図 4-16 を参照する。 システム管理設定 ページ設定 グループページ ログイン ブロック画面 メイン画面 ログアウト パーツ設定 パーツ設定 凡例 ：ウィンドウ パーツ設定 ：ページ 図 4-16 画面遷移図 18 (1) 確認が必要なページ 誤操作を防止するために、以下の処理を行う際には確認画面は必ず表示させる。 ・投稿系パーツの投稿時(記事入力後、「確認する」ボタンクリック時) 図 4-17 プレビュー画面(例:掲示板パーツ) ・記事削除時(記事の「削除」をクリック時) 図 4-18 確認画面(例:掲示板パーツ) 19 4.5.2. 投稿系パーツの画面遷移 投稿系パーツは、表 4.9 の画面遷移を基本として開発を行う。 表 4.9 投稿系パーツの画面遷移(例:掲示板パーツ) 操作 内容 設定の基本的な画面遷移 ① 編集メニューの「基本設定」をクリックする。 1 ② 基本設定画面が表示するので、項目を入力する。 ③ 「保存する」ボタンをクリックする。 投 稿 系 パ ー ツ 「 設 定 」 画面 2 3 ④ 設定が保存され、パーツが配置されているページへ遷移する。 20 投稿時の基本的な画面遷移① ① パーツの最上段右上にある投稿ボタンをクリックする。 1 ② 「メインページ」へ移動し、必要箇所を入力する。 ③ 「確認する」ボタンをクリックする。 2 投 稿 系 パ ー ツ 「 投 稿 」 画面 3 ④ 確認画面が表示する。 ⑤ 「投稿する」ボタンをクリックする。 5 21 投稿時の基本的な画面遷移② ⑥ 記事が投稿され、グループページへ遷移する。 投 稿 系 パ ー ツ 「 投 稿 」 画面 記事編集時の基本的な画面遷移① ① 一覧から、対象スレッドのタイトルをクリックする。 1 投稿系パー ツ「編集 」 画面 ② 記事ページへ移動し、修正をクリックする。 2 22 記事編集時の基本的な画面遷移② ③ 「メインページ」の編集画面へ移動し、内容を変更する。 ④ 「確認する」ボタンをクリックする。 3 投稿系パー ツ「編集 」 画面 4 ⑤ 確認画面が表示する。 ⑥ 「投稿する」ボタンをクリックする。 6 23 記事編集時の基本的な画面遷移③ ⑦ 記事が修正され、グループページへ遷移する。 投稿系パー ツ「編集 」 画面 投稿時画像アップロードの基本的な画面遷移① ① 本文の FCK エディタの をクリックする。 1 投 稿 系 パ ー ツ 「 画 像 ア ップ ロ ー ド 」 画 面 ② イメージプロパティウィンドウが表示され、 「ファイル倉庫」ボタンをクリック。 2 24 投稿時画像アップロードの基本的な画面遷移② ③ ファイル倉庫ウィンドウが表示され、ファイルアップロードをクリック。 3 投稿系パーツ「画像アップロード」画面 ④ 参照ボタンよりファイルを選択する。 ⑤ アップロードボタンをクリック。 4 5 25 投稿時画像アップロードの基本的な画面遷移③ ⑥ ファイル倉庫ウィンドウのデータ一覧へ遷移する。 ⑦ 貼り付ける画像のサイズをクリック。 ⑧ 「ウィンドウを閉じる」をクリック。 8 投 稿 系 パ ー ツ 「 画 像 ア ップ ロ ー ド 」 画 面 7 ⑨ 本文に画像が挿入される。 26 記事削除時の基本的な画面遷移 ① 記事一覧から、対象のタイトルをクリックする。 1 ② 記事ページへ移動し、削除ボタンをクリックする。 2 投稿系パー ツ「削除 」 画面 ③ 確認ウィンドウが表示する。 ④ 「削除する」ボタンをクリックする。 4 ⑤ 記事が削除され、パーツが配置されているページへ遷移する。 27 4.5.3. 設定ウィンドウの画面遷移 基本設定で設定ウィンドウを使用するパーツは、表 4.10 を基本とし、開発を行う 事。 表 4.10 パーツ設定画面の画面遷移(例:グループ参加者リストパーツ) 操作 遷移 基本設定の基本的な画面遷移 ① 編集メニューの基本設定をクリックする。 1 ② 設定ウィンドウが表示するので、項目を入力する。 ③ 「保存する」ボタンをクリックする。 他パーツ系「設定」画面 3 ④ 設定が保存され、パーツが配置されているページへ遷移する。 28 4.6. デフォルト項目設定 編集メニュー等で、設定を登録しないと正常に動作しないパーツが存在する。 この状態だとユーザーは“使えない” ・ “分からない” ・ “面倒”という印象を与えてし まう。 そのために、図 4-19 の通り、ページにパーツを追加する時にデフォルト設定をし、 設定を行わなくても動作するように設計する。尚、パーツの設定項目以外においても 同様の設計を行う。 図 4-19 デフォルト項目設定 4.7. 共通使用ファイル 各パーツから共通仕様するファイルは、表 4.11 の通り。 表 4.11 共通使用ファイル一覧 アイコン 内容 収納場所 リスト表示の項目 ./image/arw.png 記事単位に表示するアイコン ./image/icon/icon_txt.gif 新規作成・編集リンクに表示する アイコン 印刷リンクに表示するアイコン ※アイコンは必要に応じて追加する 29 ./image/icon/write.png ./image/icon/print.png 5. 操作手順に関するガイドライン 5.1. 利用者にわかりやすい操作手順 操作メニューが複数個所にあるとユーザーの混乱を招くため、各操作は１箇所のメ ニューのみから行うようにし、関連操作は、メニューの大項目から小項目へと進めら れるようにまとめる。 ・ 操作の流れは、画面の上から下、左から右へと行うようにする。 ・ 説明文は、専門用語を避け、分かりやすい表現で短くまとめるようにし、e コミ 内で既存または類似する文言があれば参照する。 図 5-1 わかりやすい操作手順 5.2. フェイルセーフを意識した設計 図 5-2 の通り誤操作でデータが削除されるなどが起きないように、重要な箇所には 確認画面を設ける。 図 5-2 フェイルセーフの意識 30 5.3. 利用者に理解しやすいメッセージ 専門的な用語を使用すると、ユーザーにとっては理解しがたい内容となってしまう ので、図 5-3・図 5-4 の通り、誰にでも理解ができる言葉を使う。 図 5-3 理解しやすいメッセージ 図 5-4 理解しやすい表記 31 5.3.1. メッセージ メッセージは、データベースに登録し、表 5.1 のメッセージ使用し、開発者が共有して呼び出すようにする。 ※ 尚、この機能はまだ実装されておらず、追加予定となっています。 表 5.1 メッセージ一覧 種類 タイミング 権限のない操作を実行時 内容 権限不足 文法 *XXXX/YYYY は内容により文字が変わる XXXX の権限がありません 未入力時 実行防止型 数字項目の不正入力 XXXX 内文字列 入力項目名 XXXX を入力してください 半角数字 適切な年齢 入力エラーチェック時 メールアドレス不正入力 メールアドレス ※表 5.2 参照 URL 不正入力 XXXX を正しく入力してください 開始日終了日が不整合 桁数の範囲外 エラー型 データ操作の失敗後 データ操作時エラー URL 期間 入力できる XXXX は YYYYZZZZ です 文字数 数値 文字 桁数 数値 桁 XXXX に失敗しました。 投稿/保存/削除 システム管理者(メールアドレスのリン 等 ク)に連絡してください 確認型 項目追加時 項目追加前の確認 項目削除時 削除前の確認 記事削除時 削除前の確認 処理選択時 選択前の確認 ZZZZ 内文字列 操作/閲覧等 年齢の不適合 入力文字数オーバー YYYY 内文字列 XXXX を YYYY します よろしいですか XXXX を選択してください ※メッセージは必要に応じて追加する 32 項目 追加 項目 削除 記事 削除 選択項目 5.3.2. 入力フォーム文字色 各パーツの入力フォームにおいて、補足用文章の文字色が統一されていないた め、ユーザーが重要な操作を見逃す可能性がある。よって、図 5-5 の通り、補足 文章はスキン指定の文字色(色指定をしない)とし、図 5-6 警告・エラー、図 5-7 必須項目の文字は、赤色で表示する。 図 5-5 補足文章(例:防災 Web パーツ) 図 5-6 警告・エラー(例:アンケートパーツ) 図 5-7 必須項目(例:問い合わせパーツ) 33 5.4. 入力エラーチェック 入力チェックは、ボタンクリック時に JavaScript で行い、安全性向上のため、サ ーバー側でもチェックを行う。内容は、表 5.2 の通りとする。 ※ エラーチェックはまだ実装されておらず、追加予定となっています。実装される まで各パーツでエラーチェックを行うこと。 表 5.2 入力エラーチェック チェック項目 内容 ドットで始まらない メールアドレス ドットが連続しない @の前がドット以外 @が 1 つのみ存在する URL RFC 2396 準拠 年齢 0 歳～ 文字数 各仕様の範囲内 数字 数字 桁数 各仕様の範囲内 期間 開始日と終了日の整合性 必須項目 未入力チェック その他項目 各仕様の範囲内 5.5. ヘルプ機能 パーツ単位でヘルプが表示出来る機能が実装されているので、ヘルプ内容を登録し、 操作性の向上を図る。 34 6. セキュリティに関するガイドライン 6.1. セキュリティ対策を意識した設計 クロスサイトスクリプティング・SQL インジェクション等の対策をし、テスト内容 に反映・実施を行う。 6.2. セッションの整理 セッション変数利用については、以下の通り統一する。 $_SESSION[ドメインルートからのパス][モジュール名][ブロック ID][項目] ブロック ID が不要な場合は、 $_SESSION[ドメインルートからのパス] [モジュール名][項目]とする。 6.3. 埋込みコーディングの制限 外部 API(YouTube・Facebook 等)を用いる事は、パーツ開発にとって有用だが、個々 のパーツで独自に実装すると外部 API の仕様変更が発生した際に、パーツの見直しが 必要となる。また、セキュリティホールの可能性があるため、外部 API の独自実装を 禁止し、新たに作成する外部 API インターフェースを利用する。 図 6-1 外部 API 用インターフェース 35 6.4. 権限に対する考え 各ブロックに対して公開設定の指定ができる。更に投稿記事に対して公開設定が可 能であるため、ユーザーが混乱する恐れがあり、バグの温床となってしまう可能性が ある。 図 6-2 権限に対する考え この状況を解消するために、公開設定はブロックのみとする。 6.5. システム脆弱性について サイト内に脆弱性があることで、悪意の有るスクリプトにより別ページに誘導され たり、アカウントを乗っ取られたり、ユーザーにとって不利益な事態が想定される。 この様な事態を防ぐために、脆弱性チェックツールの使用(後述 6.6)の通り、チェッ クを実施する。 なお、コーディングレベルでの脆弱性のチェックは、別紙ウェブサイトセキュリテ ィチェックリストを利用しチェックを実施する。 脆弱性対策の詳細については、別紙安全なウェブサイトの作り方・安全な SQL の呼び 出し方を参照する。 36 6.6. 脆弱性チェックツールの使用 脆弱性を手動でチェックする事は、多大な労力が必要であるし、チェックし忘れる 事もある。このような事を無くすために、防災科研の指定する脆弱性チェックツール (ratproxy 等)を実施し、その結果を提出する。 脆弱性項目 表 6.1 脆弱性診断(参考) クロスサイトスクリプティング ＸＳＳ 危険性 診断項目 悪意のあるスク リプトが実行さ れる Bad or no charset declared for renderable file (Content-Type や Charset 指定の誤り) 文字コード正しい箇所 に明示する Risky Javascript code (write()などの JavaScript 関数の使 用) 認められたパラメータ 以外が送られてきた場 合はドキュメントを返 さない 入力値のチェック、出力 エンコーディング形式 の指定をする ユーザーデータ・重要な キーは出力しない XSS candidates (XSS の可能性がある) ユーザーのなり すまし等の発生 ( * ) クロスサイトリクエスト フォージェリ ＣＳＲＦ ユーザーが外部 に設置された悪 意のある Web ペ ージにアクセス することで、Web アプリケーショ ンの何らかの機 能が実行される 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 7. アップデートに関するガイドライン 7.1. アップデートに対応する設計 防災科研で定めるバージョン以上に対して正常に動作する設計を行う。各パーツの アップデートを実行した場合でも図 7-1 の通り、パーツを継続使用出来るようにする とともに、今までのデータが見られなくなった等、ユーザビリティの低下にならない 様な設計を行う。 更に、新機能に対応した設計をする事により、ユーザビリティの向上を図る。 図 7-1 アップデート対応 38 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 9. テストに関するガイドライン 9.1. テストについて 品質・信頼性・安全性を確保するために必要なのが、テスト工程である。 テスト工程の目標は、テストを重ねることによりプログラム中の欠陥をできる限り多 く発見し、正しく動作するという信頼性を高めることである。 これを確実に実施する事により、ユーザーが使いやすく安全なシステムが成り立つ 事となる。 9.2. テスト環境 テスト環境は、防災科研が定める OS・サーバー・言語・データベースを、開発者が 用意するものとする。 9.3. テスト項目 ユーザーの閲覧環境(OS・ブラウザ・バージョン)により、表示・動作が異なる。 また、イレギュラーな操作を行う可能性もある。 よって、防災科研が定める OS・ブラウザ・バージョン全てに対し、あらゆる(基本 操作・イレギュラー操作)パターンを想定し、テスト項目書を作成し、テストを実施 する事とする。 10. 適用範囲および対象 本ガイドラインは、e コミグループウェアのパーツ開発及び、システム開発に適用 される。また、既存のパーツの改修時に於いても本ガイドラインを適用する。 40