第48回 技能五輪全国大会

第 50 回 技 能 五 輪 全 国 大 会 ウェブデザイン 職 種 競 技 課 題 The 50th National Skills Competition Web Design Competition Test Project ( 事 前 公 表 ) 2012 年 10 月 9 日 1

1. MODULE 1 課 題 モジュール 1 制 限 時 間 6.5 時 間 ( 競 技 1 2 日 目 ) モジュール 課 題 1 では ダイナミックなウェブサイトの 機 能 追 加 作 業 を 行 う 具 体 的 にはMySQLとPHPを 用 いたデータの 入 出 力 およびAjaxを 用 いたインタラクティブな 機 能 の 追 加 になる 既 存 サイトの(X)HTML/CSSコーディングをベースにするため (X)HTML/CSSコーディングについ ては 競 技 者 がフルスクラッチでコーディングする 必 要 はない DBについてもテーブルの 設 計 および 初 期 データのインサートはできているため 作 業 する 必 要 はない このモジュールで 評 価 される 技 能 は 適 切 な(X)HTML/CSSコーディング SQLを 用 いたDB 操 作 PHPプログラミング そして 非 同 期 通 信 を 含 むJavaScriptプログラミングである このモジュール 課 題 1は 制 限 時 間 6.5 時 間 にて 完 成 させなければならない 制 限 時 間 内 に 作 業 が 完 了 した 場 合 は 次 のモジュール 課 題 2の 制 作 に 進 むことができる また 次 のモジュール 課 題 2に 進 んだ 場 合 は モジュール 課 題 1のデータ 等 は 変 更 操 作 することは 出 来 ない 1.1 モジュール 課 題 1 について 城 南 大 学 では 会 議 室 の 利 用 を 事 務 局 に 用 紙 を 提 出 することで 管 理 している これをオンライン 化 し 学 内 ネットワークシステムで 会 議 室 の 予 約 などの 管 理 システムを 構 築 することで 電 子 的 に 管 理 し たいと 考 えている 城 南 大 学 の 学 内 ネットワークシステムにはウェブサイト(イントラシステム)があり その 中 に この オンライン 会 議 室 予 約 システムを 組 み 込 むことを 検 討 している 2

1.2 要 件 城 南 大 学 の 会 議 室 は 合 計 5 室 ある 表 1. 城 南 大 学 会 議 室 一 覧 参 照 表 1. 城 南 大 学 会 議 室 一 覧 室 名 場 所 座 席 数 1-101 1 号 館 1F 30 1-102 1 号 館 1F 50 2-101 2 号 館 1F 30 3-101 3 号 館 1F 30 5-901 5 号 館 9F 120 予 約 は 30 分 単 位 とし 会 議 室 を 使 える 時 間 帯 は 9:00~22:00 とする また 予 約 は 排 他 的 にな るようにすること 例 えば 会 議 室 1-101 を 10:00-12:00 で 予 約 しているユーザがいたら 別 のユ ーザが 同 日 の 11:00-13:00 などでは 予 約 をとることができないようにすること また 刻 一 刻 と 変 わる 予 約 状 況 に 対 応 しビューに 反 映 する 必 要 がある 予 約 のクリックをした 場 合 にも 予 約 状 況 を 確 認 してから 予 約 をいれる もしもすでに 予 約 済 みの 場 合 はユーザにメッセージを 返 し ページ 遷 移 を 行 わないようにすること 図 1. クリック 時 (before)の 図 ( 参 考 ) 図 2. 入 力 用 ポップアップ(after)の 図 ( 参 考 ) 図 1. クリック 時 (before)の 図 ( 参 考 ) 3

図 2. 入 力 用 ポップアップ(after)の 図 ( 参 考 ) なお 認 証 システムについてはイントラシステム 上 で 構 築 されており そのシステムを 使 うことがで きる 認 証 後 はセッション 変 数 の user_id で ユーザ ID user_name で ユーザ 名 を 取 得 すること ができる イントラシステムで 使 われている HTML や CSS については 提 供 される つまり 構 築 しなければな らないのはそれに 予 約 用 のバックエンドシステムおよびフロントエンドの JavaScript となる 4

2. MODULE 2 課 題 モジュール 課 題 2 制 限 時 間 4.5 時 間 ( 競 技 2 日 目 ) モジュール 課 題 2では サイトテーマを 元 にスタティックなウェブサイトの 設 計 構 築 作 業 を 行 う 必 要 となる 写 真 素 材 やロゴなどについては 提 供 されるので 適 切 に 加 工 して 使 う 必 要 がある ここで 評 価 される 技 能 は プランニング (X)HTML/CSSコーディング 画 像 処 理 そしてアニメーショ ンの 作 成 および 埋 め 込 みである このモジュール 課 題 2は 制 限 時 間 4.5 時 間 にて 完 成 させなければならない 制 限 時 間 内 に 作 業 が 完 了 した 場 合 でも モジュール 課 題 1のデータ 等 は 操 作 変 更 することは 出 来 ない 2.1 モジュール 課 題 2: 松 本 市 観 光 案 内 ウェブサイトデザイン 2.1.1. 概 要 下 記 の 2.1.2. サイト 概 要 をみたし 2.1.3. 課 題 制 作 要 件 に 従 い 制 限 時 間 内 に 松 本 市 観 光 案 内 のウェブサイトのデザインを 行 うこと 指 定 時 間 までに 課 題 を 作 成 し 指 定 されたウェブサーバの DocumentRoot にアップロードして 閲 覧 できる 状 態 にしておくこと 指 定 したウェブサーバにアップロードした 課 題 作 品 のみを 採 点 するた め 競 技 用 PC に 完 成 した 状 態 であっても アップロードされない 課 題 は 入 賞 対 象 から 除 外 される プレゼンテーション 競 技 終 了 後 作 成 したウェブサイトのデザインコンセプト( 制 作 意 図 ) などにつ いて 各 自 3 分 間 のプレゼンテーションを 実 施 する 2.1.2.サイト 概 要 松 本 市 の NPO 法 人 おいでなして 松 本 では 松 本 市 の 観 光 案 内 用 のウェブサイトを 構 築 する 予 定 である これから 松 本 市 に 観 光 に 来 る 人 だけではなく 松 本 市 に 観 光 に 来 ている 人 にも 情 報 を 提 供 できる モバイルサイトの 構 築 も 行 う そのため HTML5/CSS3 を 用 いたコーディングが 要 求 される モバイ ルサイトについては 動 作 検 証 用 端 末 は Apple 社 iphone4s で 競 技 の 際 に 競 技 者 各 自 に 配 布 を 行 う この 動 作 検 証 用 端 末 に 合 わせて 最 適 化 をはかること ただし モバイルサイト 用 の HTML5/CSS3 は まだ 草 案 の 段 階 であるが W3C の 標 準 ではなく 最 新 の 草 案 (Latest Working Draft)に 準 拠 する 必 要 がある 5

2.1.3 課 題 制 作 要 件 課 題 は 提 供 された 情 報 とメディアを 利 用 して 松 本 市 観 光 案 内 のウェブサイトを 一 から 構 築 する ことである この 情 報 は テキスト 画 像 文 書 で 構 成 されている 設 定 された 時 間 内 に 選 手 は 自 分 の 課 題 を 完 成 させるのにどの 程 度 の 情 報 が 必 要 なのか 決 めな くてはならない 選 手 は 必 ずしも 提 供 されるすべての 情 報 とメディアを 活 用 する 必 要 はなく 各 自 のコ ンセプト デザインを 実 現 するために 独 自 の 情 報 の 追 加 とメディアの 作 成 を 行 うことができる ただし 作 成 するウェブサイトにはサイトの 目 的 に 応 じたデザイン 要 素 と 機 能 性 が 含 まれていなく てはならない サイトのナビゲーションには HOME 食 べる 遊 ぶ 泊 まる ランキング お 知 ら せ の 6 項 目 が 必 須 となり HOME とランキング 以 外 に 関 しては 空 ファイルを 含 むダミーページへ のリンクで 構 わない モバイル 端 末 と PC のブラウザにあわせて CSS を 切 り 替 える PHP スクリプトは 提 供 される これに より HTML のファイルは 1 つでモバイル 端 末 /PC 両 方 のサイトを 構 築 することが 可 能 であるが この スクリプトを 使 わずに 複 数 の HTML ファイルを 作 成 してもいい ただし 両 者 で 得 られる 情 報 に 差 がな いようにすること 6

3 機 材 およびサーバ 等 仕 様 3.1 大 会 競 技 用 PC 競 技 に 利 用 するPC はノートPC である PC にはWindosw 7 がインストールされ キーボード およびマウスが 備 えられている またPC はLAN で 競 技 用 ネットワークおよびサーバに 接 続 されて いるが インターネットにアクセスすることは 出 来 ない 競 技 者 はUSB 接 続 可 能 でドライバソフトの 不 要 なキーボードおよびマウスを 持 参 して 競 技 用 PCに 接 続 して 使 用 することができる 3.1.1 動 作 検 証 用 端 末 モジュール 競 技 課 題 2 用 に 競 技 者 各 自 に 動 作 検 証 用 の 携 帯 端 末 を 支 給 する 競 技 前 日 に 動 作 検 証 用 端 末 の 使 用 方 法 については 競 技 委 員 から 説 明 を 行 う 携 帯 端 末 は 競 技 用 ネットワークに 無 線 ネットワークにより 接 続 する 事 が 可 能 である 使 用 する 端 末 はApple 社 iphone4sとなる 端 末 の 使 用 については 以 下 のURLの 技 術 仕 様 を 参 照 すること http://www.apple.com/jp/iphone/iphone-4s/specs.html 3.1.2 ウェブブラウザ 本 競 技 では 以 下 を 大 会 指 定 ウェブブラウザとする Mozilla Firefox 1x 以 降 Microsoft Internet Explorer 9 以 降 Google Chrome v2x 以 降 上 記 ウェブブラウザの 安 定 版 がAdobe Flash Player MicroSoft Silverlight などとともに 競 技 用 PC にインストールされ 利 用 できる 状 態 になっている また Firefox および Chrome には Web Developer Firebug などのアドインがインストールされており 利 用 することができる 7

3.2 競 技 用 サーバ 競 技 に 利 用 するサーバおよびネットワークは 下 記 の 仕 様 となる 選 手 は 各 自 与 えられたID パス ワード 権 限 に 基 づいて 以 下 のサービスを 利 用 することが 可 能 である 表 2 競 技 用 サーバ 上 のサービス 一 覧 ウェブサーバ Apache 2.x ウェブプログラミング PHP 5.x データベース MySQL 5.x DB 支 援 phpmyadmin 通 信 SSH ネットワーク DNS Validator HTML Validator 競 技 用 サーバは ウェブサーバ ウェブプログラミング 環 境 ネットワークにより 利 用 することができ る また 各 種 サーバ 開 発 環 境 は 競 技 の 規 定 に 従 い 利 用 することが 出 来 る Apache PHP MySQL については 競 技 用 PC にもインストールされているが 競 技 用 PC の 環 境 はあくまでもテスト 環 境 である 競 技 用 サーバについては 共 用 サーバとなるため 設 定 ファイルの 変 更 はできない 選 手 は それぞれのサーバサービスについて 利 用 することが 可 能 である 特 に 競 技 委 員 からの 指 示 説 明 がない 場 合 与 えられた 権 限 の 範 囲 で 各 種 サーバサービスを 利 用 したウェブサイトを 構 築 することが 可 能 である なお 競 技 実 施 中 競 技 委 員 はサーバの 使 用 に 関 わる 一 切 の 質 問 に 対 する 回 答 操 作 補 助 は 行 わない 8

4 採 点 における 留 意 事 項 課 題 の 採 点 は 競 技 中 に 競 技 委 員 により 採 点 されるものと 競 技 終 了 後 に 競 技 委 員 のモニター に 表 示 して 行 なわれるものとがある モジュール 課 題 1は 競 技 2 日 目 の 午 前 9 時 で 終 了 する モジュール 課 題 1 データについては 以 降 選 手 は 作 業 は 行 うことはできない ただしロスタイム 等 のある 選 手 については ロスタイム 分 につ いて 前 日 もしくは 2 日 目 のモジュール 課 題 1 の 終 了 時 間 に 引 き 続 き 競 技 時 間 を 追 加 する 競 技 用 に 作 成 した 文 書 には 読 みやすいように 名 前 座 席 番 号 必 ず 記 述 すること 課 題 で 求 められているファイル 類 はサーバ 上 に 適 切 に 保 存 アップロードすること HTML5/CSS3 に 関 してはW3Cの 最 新 の 草 稿 に 沿 った 実 装 になっているかを 評 価 する また そ の 他 草 案 で 規 定 されていない 仕 様 等 の 使 用 は 草 案 に 沿 ってないものとみなす 9