1
第
50 回 技能五輪全国大会
ウェブデザイン職種
競技課題
The 50th National Skills Competition
Web Design Competition
Test Project
(事前公表) 2012 年 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 について 城南大学では会議室の利用を事務局に用紙を提出することで管理している。これをオンライン化 し、学内ネットワークシステムで会議室の予約などの管理システムを構築することで電子的に管理し たいと考えている。 城南大学の学内ネットワークシステムにはウェブサイト(イントラシステム)があり、その中に この オンライン会議室予約システムを組み込むことを検討している。
3 1.2 要件 城南大学の会議室は合計５室ある。表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)の図（参考）
図2. 入力用ポップアップ(after)の図（参考） なお、認証システムについてはイントラシステム上で構築されており、そのシステムを使うことがで きる。認証後はセッション変数の user_id で ユーザ ID、user_name で ユーザ名を取得すること ができる。 イントラシステムで使われている HTML や CSS については提供される。つまり、構築しなければな らないのはそれに予約用のバックエンドシステムおよびフロントエンドのJavaScript となる。
5 2. MODULE 2 課題 モジュール課題 2 制限時間 4.5時間 (競技2日目) モジュール課題 2では、サイトテーマを元にスタティックなウェブサイトの設計、構築作業を行う。 必要となる写真素材やロゴなどについては提供されるので、適切に加工して使う必要がある。 ここで評価される技能は プランニング、(X)HTML/CSSコーディング、画像処理、そしてアニメーショ ンの作成および埋め込みである。 このモジュール課題 2は、制限時間4.5時間にて完成させなければならない。制限時間内に作業 が完了した場合でも、モジュール課題 1のデータ等は操作・変更することは出来ない。 2.1 モジュール課題 2:『松本市観光案内』ウェブサイトデザイン 2.1.1.概要 下記の 2.１.2. サイト概要 をみたし、2.1.3. 課題制作要件 に従い、制限時間内に『松本市観光 案内』のウェブサイトのデザインを行うこと。 指定時間までに課題を作成し指定されたウェブサーバの DocumentRoot にアップロードして 閲覧できる状態にしておくこと。指定したウェブサーバにアップロードした課題作品のみを採点するた め、競技用PC に完成した状態であっても、アップロードされない課題は入賞対象から除外される。 プレゼンテーション 競技終了後、作成したウェブサイトのデザインコンセプト(制作意図) などにつ いて、各自 3 分間のプレゼンテーションを実施する。 2.1.2.サイト概要 松本市の NPO 法人「おいでなして 松本」では松本市の観光案内用のウェブサイトを構築する予 定である。 これから松本市に観光に来る人だけではなく 松本市に観光に来ている人にも情報を提供できる モバイルサイトの構築も行う。そのため、HTML5/CSS3 を用いたコーディングが要求される。モバイ ルサイトについては、動作検証用端末はApple 社 iPhone4s で、競技の際に競技者各自に配布を 行う。この動作検証用端末に合わせて最適化をはかること。 ただし、モバイルサイト用のHTML5/CSS3 は まだ草案の段階であるが、W3C の標準ではなく最 新の草案(Latest Working Draft)に準拠する必要がある。
2.1.3 課題制作要件 課題は、提供された情報とメディアを利用して 松本市観光案内のウェブサイトを一から構築する ことである。この情報は、テキスト、画像、文書で構成されている。 設定された時間内に、選手は自分の課題を完成させるのにどの程度の情報が必要なのか決めな くてはならない。選手は必ずしも提供されるすべての情報とメディアを活用する必要はなく、各自のコ ンセプト・デザインを実現するために独自の情報の追加とメディアの作成を行うことができる。 ただし、作成するウェブサイトにはサイトの目的に応じたデザイン要素と機能性が含まれていなく てはならない。 サイトのナビゲーションには “HOME”、 “食べる”、“遊ぶ”、“泊まる”、“ランキング”、” お知ら せ” の 6 項目が必須となり、HOME とランキング以外に関しては空ファイルを含むダミーページへ のリンクで構わない。 モバイル端末とPC のブラウザにあわせて CSS を切り替える PHP スクリプトは提供される。これに より HTML のファイルは 1 つでモバイル端末/PC 両方のサイトを構築することが可能であるが、この スクリプトを使わずに複数のHTML ファイルを作成してもいい。ただし、両者で得られる情報に差がな いようにすること。
7 3 機材およびサーバ等仕様 3.1 大会競技用PC 競技に利用するPC はノートPC である。PC にはWindosw ７ がインストールされ、キーボード およびマウスが備えられている。またPC はLAN で競技用ネットワークおよびサーバに接続されて いるが、インターネットにアクセスすることは出来ない。競技者はUSB接続可能でドライバソフトの不 要なキーボードおよびマウスを持参して競技用PCに接続して使用することができる。 3.1.1 動作検証用端末 モジュール競技課題2 用に競技者各自に動作検証用の携帯端末を支給する。競技前日に動作検 証用端末の使用方法については、競技委員から説明を行う。携帯端末は競技用ネットワークに無線 ネットワークにより接続する事が可能である。使用する端末はApple社ｉＰｈｏｎｅ４ｓとなる。端末の使 用については、以下の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 などのアドインがインストールされており利用することができる。
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 の環 境はあくまでもテスト環境である。競技用サーバについては共用サーバとなるため、設定ファイルの 変更はできない。 選手は、それぞれのサーバサービスについて、利用することが可能である。特に競技委員からの 指示・説明がない場合、与えられた権限の範囲で各種サーバサービスを利用したウェブサイトを構 築することが可能である。なお、競技実施中、競技委員はサーバの使用に関わる一切の質問に対 する回答、操作補助は行わない。
9 4 採点における留意事項 • 課題の採点は、競技中に競技委員により採点されるものと、競技終了後に競技委員のモニター に表示して行なわれるものとがある。 • モジュール課題１は、競技 2 日目の午前 9 時で終了する。モジュール課題 1 データについては以 降選手は作業は行うことはできない。ただしロスタイム等のある選手については、ロスタイム分につ いて、前日もしくは2 日目のモジュール課題 1 の終了時間に引き続き、競技時間を追加する。 • 競技用に作成した文書には読みやすいように名前、座席番号必ず記述すること。 • 課題で求められているファイル類はサーバ上に適切に保存、アップロードすること。 • HTML5/CSS3 に関してはW3Cの最新の草稿に沿った実装になっているかを評価する。また、そ の他草案で規定されていない仕様等の使用は草案に沿ってないものとみなす。
