競技概要ウェブデザインとは インターネット上でドキュメントを発行することを目的に 計画 設計およびデザイン またウェブサイトの維持管理を行うこと と定義する ウェブデザイン職種競技では 競技課題に基づきウェブサイトの設計 構築の技能について競技を行う 評価は 1. プランニングとデザイン 2. 画像

Similar documents
採点項目及び配点

第 12 回若年者ものづくり競技大会ウェブデザイン職種 第 12 回若年者ものづくり競技大会 ウェブデザイン職種 競技概要 1/10

事前公表 第 53 回技能五輪全国大会 ウェブデザイン職種競技概要 Ver.1.0 技能五輪全国大会ウェブデザイン職種競技委員会

採点項目及び配点

ウェブデザイン技能検定 1 級実技 平成 28 年度 第 4 回 ウェブデザイン技能検定 1 級 実技試験概要 試験にあたっての注意事項 試験者は本試験の留意事項 注意事項に留意して作業を行うこと ペーパー実技試験は 課題 1 から 5 までの 5 課題を 60 分間で行うこと 作業実技試験は 課題

採点項目及び配点

競技概要 ウェブデザインとは インターネット上でドキュメントを発行することを目的に 計画 設計およびデザイン またウェブサ イトの維持管理を行うこと と定義する ウェブデザイン職種競技では 競技課題に基づきウェブサイトの設計 構築の技能について競技を行う 評価は 1. プランニ ングとデザイン 2.

第 12 回若年者ものづくり競技大会ウェブデザイン職種 第 12 回若年者ものづくり競技大会 ウェブデザイン職種 競技概要 1/10

競技概要 ウェブデザインとは インターネット上でドキュメントを発行することを目的に 計画 設計およびデザイン またウェ ブサイトの維持管理を行うこと と定義する ウェブデザイン職種競技では 競技課題に基づきウェブサイトの設計 構築の技能について競技を行う 評価は 1. プラン ニングとデザイン 2.

1. 受検にあたっての注意事項注意 : 受検者は本試験の注意事項を事前に熟読して作業を行うこと < 注意事項 > 1. 受検者が用意する PC は 事前に公開した利用可能なソフトウェア 開発環境などがインストールされており 動作することを確認すること 事前に公開された利用可能なソフトウェアおよび開発

A.< 課題制作要件 > スライド作成以下の指示に従って リアルタイム デザインビューア DesignCentral Imager の特徴を説明するためのプレゼンテーションスライドを作成しなさい パワーポイントを使用して 次の2 種類のプレゼンテーション用スライドを作成する 1. ロゴとフッターが入

競 技 概 要 ウェブデザインとは インターネット 上 でドキュメントを 発 行 することを 目 的 に 計 画 設 計 およびデザイン またウェブサイト の 維 持 管 理 を 行 うこと と 定 義 する ウェブデザイン 職 種 競 技 では 競 技 課 題 に 基 づきウェブサイトの 設 計

採点項目及び配点

採点項目及び配点

平成25年度第4回1級実技問題

第39回全国アビリンピック 111-ホームページ 競技課題A

ウェブデザイン技能検定 1 級実技試験 < 留意事項 > 実技試験は 検定用 PCまたは受検者が持参したPCを利用して実施される 受検者は 180 分間で作業を完了させること 本検定試験では Mozilla Firefox 最新安定版 Google Chrome 最新安定版 Microsoft Ed

第48回 技能五輪全国大会

ウェブデザイン技能検定 1 級実技試験 < 留意事項 > 実技試験は 検定用 PCまたは受検者が持参したPCを利用して実施される 受検者は 180 分間で作業を完了させること 本検定試験では Windows Internet Explorer 11 以降 Mozilla Firefox 最新安定板

スライド 1

Microsoft Word - XOOPS インストールマニュアルv12.doc

160226【日本語_39-50P】manaba+R.xdw

技能五輪全国大会

2 ログイン ( パソコン版画面 ) Web サイトのログイン画面が表示されます 通知メールに記載されている ID と仮パスワードを入力して ログイン ボタンをクリックしてください ID パスワードを連続して 5 回間違うと 当 I D はロックアウト ( 一時的に使用不可 ) されるので ご注意く

chapter1 Web デザインへのアプローチ chapter1 Web デザインへのアプローチ 1-1 本書の構成 Web サイト制作の流れ 本書の構成と内容 1-2 Web サイト制作業界の人材像 Web サイト制作に必要な職掌と役割 各職掌の役

SAMBA Stunnel(Windows) 編 1. インストール 1 セキュア SAMBA の URL にアクセスし ログインを行います xxx 部分は会社様によって異なります xxxxx 2 Windows 版ダウンロード ボ

FAX配信サービス 利用マニュアル

FTP 共有を有効にする あらかじめ作成済みの共有フォルダーを FTP 共有可能にする設定を説明します 共有フォルダーの作成方法は 画面で見るマニュアル をご覧ください ファイル数の多い共有フォルダーを変更すると 変更が完了するまでに時間がかかる場合があります また 変更が完了するまで共有フォルダー

< ダッシュボード画面 > 現在開催中の研修 に ご覧いただけるセミナーがすべて表示されます 視聴したいセミナーをクリックします ( セミナーへのお申し込み方法はこちらをご参照ください ) マウスをセミナー名の上に移動すると色が変わります 色の変わる範囲はどこでもクリックすることができます < 講座

( 目次 ) 1. はじめに 開発環境の準備 仮想ディレクトリーの作成 ASP.NET のWeb アプリケーション開発環境準備 データベースの作成 データベースの追加 テーブルの作成

SAMBA Stunnel(Mac) 編 1. インストール 1 セキュア SAMBA の URL にアクセスし ログインを行います xxxxx 部分は会社様によって異なります xxxxx 2 Mac OS 版ダウンロー

オブジェクトの挿入 スライド切り替えの設定 スライドマスター, テンプレートの作成 (2) プレゼンテーション 言語表現 内容の論理展開 内容の具体性 資料の完成度 全体的評価 2. 下見開会式後に競技全体の説明と データベース課題 を行うので, 次の期間に必ず下見を完了させておくこと. 期間 :7

Ver.60 改版履歴 版数 日付 内容 担当 V /7/8 初版発行 STS V..0 04// Windows 8. の追加 STS V..0 05//5 Windows XP の削除 STS V.30 05/8/3 体裁の調整 STS V.40 05//9 Windows0 の追加

Proselfの利用方法

XAMPP で CMS のお手軽 テスト環境を手に入れよう 2011/5/21 上村崇 1

<4D F736F F D D815B A982E782CC E E646F6378>

国保京丹波町病院ホームページ構築業務仕様書

消費生活アドバイザー 有資格者サイト マニュアル

の手引き Chapter 1 manaba へようこそ Chapter 2 ログイン方法 マイページについて Chapter 3 リマインダ設定 Chapter 4 コース登録 ( 自己登録 ) Chapter 5 manaba の機能紹介 Chapter 6 respon アプリ Chapter

本仕様はプロダクトバージョン Ver 以降に準じています

目次. ご利用上の注意. アプリをインストールする. アプリを起動する. アプリの初期設定を行う. アプリのログインパスワードを変更する 6. アプリのメニューを操作する 7. ステータスを送信する 8. 定期位置通知間隔を変更する 9. 随時検索をする 0. メッセージ連絡をする. メッセージの連

1. 無線 LAN 設定情報の取得 接続に必要な SSID と暗号化キーの情報を取得します キャンパス内では開放教室の PC などを活用して取得してください 1-1 TMUNER Web サイト のトップページ ( の [ 利用者メニュー ] を選

Ver.70 改版履歴 版数 日付 内容 担当 V /09/5 初版発行 STS V /0/8 証明書バックアップ作成とインストール手順追加 STS V /0/7 文言と画面修正 STS V..0 0//6 Firefox バージョンの変更 STS V..40

“nice to meet you”

Microsoft Word - NEWSマニュアル docx

本仕様はプロダクトバージョン Ver 以降に準じています

サイボウズモバイル KUNAI Lite for Android マニュアル

Microsoft Word - WebClass Ver 9.08f 主な追加機能・修正点.docx

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

ご利用のブラウザのバージョンによっては 若干項目名が異なる場合があります 予めご了承ください Windows をお使いの場合 [ 表示 ] [ エンコード ] [ 日本語 ( 自動選択 )] を選択 [ 表示 ] [ エンコード ] [Unicode(UTF-8)] を選択 Firefox をご利用

a.net LePo 利用の手引き

PowerPoint プレゼンテーション

CONTENTS Copyright 2017 NEC Solution Innovators, Ltd All rights reserved 0. 通訳案内士登録情報検索サービスを利用するまえに 1 利用環境 2 ブラウザの設定 3 プラグイン 4 操作上の制限 5 ウェブ操作マニ

TDB電子証明書ダウンロード手順書(Microsoft Internet Explorer 版)

事前準備マニュアル

履歴 作成日 バージョン番号 変更点 2016 年 9 月 19 日 新システム稼働本マニュアル ( 初版 ) 2016 年 10 月 6 日 システム公開に伴う 初版最終調整 2016 年 11 月 7 日 添付ファイルの公開設定について 追加 2

1.はじめに

サイト名

情報連携用語彙データベースと連携するデータ設計 作成支援ツール群の試作及び試用並びに概念モデルの構築 ( 神戸市こども家庭局こども企画育成部 千葉市総務局情報経営部業務改革推進課 川口市企画財政部情報政策課 ) データ構造設計支援ツール設計書 2014 年 9 月 30 日 実施企業 : 株式会社ア

WEBシステムのセキュリティ技術

消費生活アドバイザー 有資格者サイト マニュアル

改版履歴 版数 日付 内容 担当 V /5/26 初版発行 STS V /7/28 動作条件の変更 STS メール通知文の修正 V /2/7 Windows8 の追加 STS V /2/2 Windows8. の追加 STS V

ESET Smart Security 7 リリースノート

1. はじめに このマニュアルは 日本歯科衛生学会が提供する オンラインでの論文を投稿するためのシステム ( 論文投稿システム ) について書かれています 日本歯科衛生学会の会員は いつでもこの論文投稿システムを利用し 学会雑誌に掲載するための論文をオンライン上で投稿することができます 論文投稿シス

PowerPoint プレゼンテーション

SOBA ミエルカ クラウドセミナーモード 配信者マニュアル 目次 はじめに 配信者のユーザー登録について ライブ配信の作成 ライブ配信への招待 ライブ配信への参加方法... 4 (1) ライブ配信を選んで参加する方法 ( 管理者 配信

ポリシーマネージャ       Linux版                                 集中管理環境の新規構築

Microsoft Word - online-manual.doc

変更履歴 日付 ver 変更箇所 変更内容 2016/8/ 新規作成 2017/1/ 全体 参照 以下 等に係る記載揺れの統一 2017/2/ 全体 参照先の記載を修正 2017/5/ ASM に情報登録 リンクの URL を修正 参考リンク集

Writing Test ウェブブラウザ受験ガイド ver. 1 本ガイドをよくお読みいただいてから 受験を開始してください 1. テストを受ける前に 準備するもの コンピュータ タブレット端末には対応しておりません ヘッドフォン ディクテーションの設問があります クリアな音声を確保するために ヘッ

ホームページ公開方法

DBMSリポジトリへの移行マニュアル

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

<4D F736F F D208E8E8CB189C896DA8B7982D182BB82CC94CD88CD2E646F63>

manaba course 出席機能 操作マニュアル

ごあいさつ このたびは 日本テレネット株式会社の AUTO 帳票 Custom をお使いいただき まことにありがとう ございます お使いになる前に 本書をよくお読みのうえ 正しくお使いください 本書の読み方 本マニュアルは AUTO 帳票 Custom * を利用して FAX 送信管理を行う方のため

< お客さま完結タイプ > ストレスチェックシステム操作マニュアル ストレスチェック受検者向け 2017 年 5 月 cc_ver Sompo Risk Management & Health Care Inc.

設定 作成可能数 5 個 般 投票に対応 投票は 1 個作成可能 投票 投票は1 個作成可能投票は 投票項 (1つのにつき1 問 選択肢は10 個 ) といくつかの 項 ( 設置可能な数はプランごとに異なります ) を設置できます 投票結果は円または横棒グラフでグラフィカルに表 されます スマートフ

共有フォルダ接続手順 1 共有フォルダ接続ツールのダウンロード 展開 CSVEX のトップページから共有フォルダ接続ツールの zip ファイルをダウンロードします ダウンロードした zip ファイルを右クリックして すべて展開 を選択します (Windows 環境では zip ファイルを解凍しなくて

WebARENA SuiteX V2 EC-CUBE 2.13 インストールマニュアル ( 標準 MySQL+ 非 SSL ) 作成 :2014 年 2 月 Ver.1.1

目次 1 はじめに アンインストール前の注意点 Sophos アンインストール手順 アンインストーラの場所を確認する アンインストーラの実行 F-Secure Client Security for Mac インストー

Microsoft Word 基_シラバス.doc

簡単バックアップの使いかた

ファクス送信用変換ソフト 操作説明書_UA

改版履歴 版数 改訂日 該当頁 / 該当項目 改訂の要点 /03/31 6 対応 OSの変更に伴う修正 動作環境 の OS に以下を追加 Windows 8.1 Update (64Bit) Windows 8.1 Update Pro (64Bit) 動作環境 の OS から以

Microsoft PowerPoint - Userguide-keitai-douga-v1.1.ppt

CommonMP Ver1.5 インストール手順書 目 次 1. 概要 目的 必要動作環境 ハードウェア構成 ソフトウェア構成 CommonMP のインストール手順 利用フロー

PowerPoint プレゼンテーション

目次 1. はじめに... 1 動作環境... 1 その他 他の人が利用する ID を発行したい... 2 ユーザー ID 作成を作成しましょう パソコンのデータを自動でアップロードしたい... 4 PC 自動保管機能を使用してみましょう 不特定多数の

競技課題|ホームページ

PowerPoint Presentation

『テクノス』V2プログラムインストール説明書

本マニュアルについて 本マニュアルは OS に Windows XP ウェブブラウザに Internet Explorer 8 を使用した状態で作成しています ご使用の際に留意してください

第 章 システムの概要 WebBase とは 利用環境 ブラウザ操作時の留意事項... 3 第 章 基本操作 ログインとログアウト ポータル画面の構成... 5 第 3 章 メッセージ メッセージを受信する... 6 第

V-CUBE One

Fujitsu Standard Tool

目次 1. はじめに ご利用条件 証明書配付システムの停止時間 実施手順 電子証明書の取得手順 Windows 証明書ストアへの電子証明書インポート手順 電子証明書インポート完了確認.

指定立替納付を使った場合の 国内提出書類の提出方法 1 出願書類や 納付書などを 指定立替納付で支払う場合の手順をご案内します ここでは ひな型を Word で編集する場合の手順を案内します 他を利用する場合は ユーザガイドをご覧ください (1) 指定立替納付を使うための事前準備 a. クレジットカ

(8) [ 全般 ] タブをクリックします (9) [ インターネット一時ファイル ] の [ 設定 ] ボタンをクリックします (10) [ 保存しているページの新しいバージョンの確認 ] から [ ページを表示するごとに確認する ] をクリックします (11) [OK] ボタンをクリックしていき

次 Ⅰ WEB シラバスシステムへのアクセス... 1 Ⅱ 教員 WEB サービス へのログイン... 2 Ⅲ パスワードの変更... 3 Ⅳ 受持講義の確認... 4 Ⅴ シラバスの... 5 Ⅵ シラバス 完了処理... 8 Ⅶ 作業中のデータの 時保存... 9 Ⅷ 既作成シラバスの引...

Transcription:

事前公表 第 54 回技能五輪全国大会 ウェブデザイン職種競技課題 Ver.1 公開日 8 月 23 日版 技能五輪全国大会ウェブデザイン職種競技委員会

競技概要ウェブデザインとは インターネット上でドキュメントを発行することを目的に 計画 設計およびデザイン またウェブサイトの維持管理を行うこと と定義する ウェブデザイン職種競技では 競技課題に基づきウェブサイトの設計 構築の技能について競技を行う 評価は 1. プランニングとデザイン 2. 画像作成 修正 最適化 3. レイアウト ナビゲーション ユーザインタフェースデザイン ユーザビリティ アクセシビリティ 4. サーバサイドプログラミング 5. クライアントサイドの実装 (HTML/XHTML およびCSS のコーディング JavaScript の実装 ) 6. マルチメディア表現とクリエイティビティ 7. プレゼンテーションの各項目について行う 本競技に求められる技能について インターネットおよびウェブデザインに関わる一般的な技術について理解していること ウェブサイトの目的やウェブサイトの企画 設計が適切に行え 設計企画書の作成ができること ウェブコンテンツおよびウェブサイトを構築するための技術について理解していること ウェブコンテンツおよびウェブサイトを構築するために必要なソフトウェアを利用できること インターネットを利用してコンテンツを公開するための仕組み ウェブサーバの設定について理解していること コンピュータに関わるハードウェア ソフトウェア オペレーティングシステム ネットワークに関して理解し 適切に利用できること HTML/XHTML およびCSS についてW3C に準拠したコーディングが行えること (HTML5/CSS3 を含む ) 各種画像フォーマットを理解し特性を生かしたイメージデータやアニメーションを作成することができること ウェブデザインに関わる ユーザビリティ アクセシビリティ インタフェースデザインについて理解していること クライアントサイドに用いるスクリプト(JavaScript) のプログラミング技能を備えていること ウェブデザインに関わる技術 技能および基本的なサーバサイドのプログラミングの技能を備えていること PHP DB 等を利用してダイナミックなサイトを作成できること 各種端末等に応じたウェブコンテンツの作成ができること 設計したウェブサイトについて そのデザイン意図 仕様や機能等の説明が行えること 2

1. 競技時間および競技日程 競技時間 11 時間 競技は 制限時間 11 時間以内で行う 競技は 2 日間に分けて実施し 1 日目については競技時間を 6 時間とする 2 日目は競技時間 5 時間とし 2 日間合計 11 時間で実施する 競技は下記のスケジュールで行う 競技会場下見の際にに 10 時 30 分より会場確認と座席およびプレゼンテーションに関わる順番の抽選を行う また 競技課題詳細発表 競技説明および各自競技用 PC 等設定を行う なお 競技スケジュールについては変更する場合もあるので留意すること 競技開始より 9 時間を経過し 課題を完成した場合 適宜作業完了を競技委員に宣言し 作業を終了することができる また 競技時間内に課題を完成できなかった場合は 入賞対象としない 競技終了後 各自 3 分間以内の持ち時間でプレゼンテーションを実施する プレゼンテーションは採点に含まれる < 競技日程 > 10 月 21 日説明会 ( 開会式 競技会場下見 抽選 ) 開会式 会場下見 ( 職種 競技説明会 ) ~10:30 集合 受付 抽選 10:40~11:15 11:15~12:00 競技説明 課題発表等 競技用 PC 等設定等 10 月 22 日競技 1 日目 (6 時間 ) ~ 8:45 選手集合および受付 課題説明 課題等配布 注意事項等 9:00 ~ 10:30 競技 1.5 時間 10:30 ~ 10:45 休憩 15 分 10:45 ~ 12:15 競技 1.5 時間 12:15 ~ 13:15 昼食 1 時間 13:15 ~ 14:45 競技 1.5 時間 14:45 ~ 15:15 休憩 30 分 15:15 ~ 16:45 競技 1.5 時間 16:45 ~ 当日ロスタイム消化 第 1 日目計 6 時間 10 月 23 日競技 2 日目 (5 時間 ) ~ 7:50 選手集合および受付 8:00 ~ 10:00 競技 2 時間 10:00 ~ 10:15 休憩 15 分 10:15 ~ 12:15 競技 2 時間 12:15 ~ 13:00 昼食 45 分 13:00 ~ 14:00 競技 1 時間 14:10 ~ 15:20 プレゼンテーション 15:20 ~ 15:50 講評 片付け 第 2 日目計 5 時間 合計競技時間 11 時間 競技時間中 VDT 作業におけるガイドラインに基づき 競技選手が各自休憩すること 以下の URL を参照すること http://www.mhlw.go.jp/houdou/2002/04/h0405-4.html 3

2. 仕様機材等 < 大会競技用 PC> 競技に利用するPCのOSは Windows 10 である また使用するPCはノートPCである 競技 PC には キーボードおよびマウスが備えられている PC はLAN で競技用ネットワークおよびサーバに接続されているが インターネットにアクセスすることはできない 選手はUSBで接続可能なキーボードマウス等を持参して使用することができる ただし競技委員は持ち込み等機材のサポートは行わないので留意すること <アプリケーション> 競技用 PC には 以下のウェブサーバ ウェブプログラミング環境およびウェブコンテンツ作成用ソフトウェアがインストール可能な状態にあるか インストールされているか ネットワークより利用することができる 以下のソフト以外 競技では 利用することはできない また 各種サーバ 開発環境は競技の規定に従い利用することができる なお 競技に利用するアプリケーションのバージョンなどは変更する場合もある ウェブサーバソフトウェア Apache-2.x 以上 ウェブプログラミング データベースソフトウェア o PHP7 http://www.php.net/docs.php の日本語版マニュアル会場内では http://skilljapan.info/php/ にてアクセス可能 o MariaDB o phpmyadmin 会場内では http://skilljapan.info/phpmyadmin/ にてアクセス o PHPフレームワーク Lalavel 5.2 CakePHP 3.2 PC 上では vagrant/virtualbox で仮想環境上に LAMP 環境を用意する 画像処理ソフトウェア o Adobe PhotoshopCC o Adobe IlustratorCC ウェブエディタおよびウェブコンテンツ作成ソフトウェア o Adobe DreamweaverCC o Adobe AnimateCC テキストエディタなどのソフトウェア o Sublime Text 日本語化対応されている また SublimeText には Emmet LiveStyle がインストールされている 4

ファイル転送ソフトウェア o Filezilla( http://filezilla-project.org/ ) JavaScript ライブラリ o jquery 3.10 ( http://jquery.com/ ) それぞれのソフトウェアについては 標準設定でインストールを行っている また Windows 10 標準のアクセサリ ワードパッド メモ帳等が利用可能である 特に競技委員からの指示 説明がない場合 競技用 PC に既にインストールしてあるソフトウェアを利用することができる またテキストエディタについては 選手は上記ソフトウェアより選択して競技用 PC にインストールして利用することができる なお 競技委員は以上のソフトウェア使用法に関わる一切の質問に対する回答 操作補助は行わない また サーバおよびウェブプログラミングおよびデータベースの環境に関しては競技会場下見の際に説明を実施する ( 事前に競技用サーバ等の仕様詳細を公開する場合がある ) <ブラウザ> 本競技では以下を大会指定ブラウザとする o Mozilla Firefox 最新版 FireBug Web Developer o Google Chrome 最新版 LiveStyle 5

3. 競技課題および概要 競技課題は本事前公表課題内容より 10 から 15 パーセント程度変更する 1. 競技は 以下の二つのモジュール課題を指定された競技時間内に行う 2. 選手は 1. で出題された課題 つまりモジュール課題 1 および 2 の必要要件 制作要件 仕様 留意事項などを考慮してウェブデザインにかかわる作業を行う また ウェブサイト構築に関わる技術仕様などを文章および図などを用いたウェブサイト設計書として作成し 提出することが必要である 設計書は各モジュールや工程で実行される作業について概説していること 提出データはデジタルデータで作成し指示された場所に保存すること 3. 課題の完成と提出については 課題要件にもとづいて また規定や仕様が指示されたページの場合はその仕様に従い作成するこ と 課題は競技時間以内に構築し 指定された競技用ウェブサーバへディレクトリ構成も含めて必要なデータがアップロードされ 大会 指定のブラウザ双方で正しく機能し 閲覧できる状態とする 4.PHP 等サーバサイドの設定が必要なものも利用してウェブサイトを構築することができる 競技課題モジュールの詳細 制作要件 仕様 サーバ環境 設定の規定に基づいて設計 デザインし作業を行う必要がある 課題モジュールは指示に従い スタティックなものまたはPHP データベースなどを利用して仕様に応じた動的なサイトとして構築すること コンテンツ作成用アプリケーションの他に 事前に公表されたブラウザ用のプラグインなども使用することが可能である 5. 使用可能な素材として提供される画像ファイル等は競技前日にサムネール画像とともに確認可能である 選手は提供された素材す べてを利用する必要はなく ふさわしいものを選択し 適切な状態に加工して使用することができる また選手は画像処理ソフトウェア 等を使用して素材となる画像データを自由に作成することができる 6. 必ず使用することを義務付けられたデータが配布されるので 選手は適切な状態に加工し使用する 7.HTML/XHTML については W3C による HTML4.01 以降とし CSS2.1 以降を外部スタイルシートで使用し スタイルシートを使用し たウェブサイトが構築すること ただし CSS3 の各モジュールは競技の時点で W3C において勧告されているものを推奨する また 作 成する HTML ファイルの文字コードは UTF-8 にすること 8. その他 Flash GIF アニメーション JavaScript 等を利用したムービーやアニメーション インタフェース等 選手は課題の目的 内 容に応じて作成し 利用することができる 9. 選手は JIS ISO W3C 等の国際標準規格に準拠し ウェブ標準 アクセシビリティ ユーザビリティに配慮してウェブサイトを設計 デザインすること 6

4 モジュール課題 1 競技 1 日目 (6 時間 ) モジュール課題 1 では RESTful な API の作成を行う 具体的には PHP/MySQL を用いたデータの入出力用 API の作成である RESTful ウェブサービスになるので DB に対して CRUD に相当する機能をウェブ上に構築する必要がある ウェブブラウザなどのユーザエージェントとのやりとりは JSON で行う 例えば http://www.skilljapan.info/data/1 に GET でアクセスした場合には {"id": 1, "name": "xxxxx"} のような JSON データがレスポンスとして返る 作成にあたって Laravel などのフレームワークを利用してもよい このモジュールで評価される技能は サーバサイドプログラミングである PHP などのコーディングの他に DB の操作 テーブル設計なども含まれる また PHP のコードの MVC 化なども評価対象になる クライアントサイドの JavaScript や HTML および CSS などは本モジュールでは評価対象ではない 作成した API をテストするツールは 競技委員が用意するので特に開発する必要はない モジュール課題 1 は 第一日目に完成させなければならない 制限時間内に作業が完了した場合は 次のモジュール課題 2 の制作に進むことができる また 次のモジュール課題 2 に進んだ場合は モジュール課題 1 のデータ等は操作 変更はできない 5 モジュール課題 2 課題競技 2 日目 (5 時間 ) モジュール課題 2 では サイトテーマを元にウェブサイトのフロントエンド部分の設計 構築作業を行う 必要となる写真素材やロゴなどについては提供されるので 適切に加工して使う必要がある ここで評価される技能はプランニング (X)HTML/CSS コーディング 画像処理 アニメーションの作成および埋め込み そして API サーバとの連携である このモジュール課題 2 は 競技 2 日目の競技時間内で完成させなければならない 制限時間内に作業が完了した場合でも モジュール課題 1 のデータ等は操作 変更することはできない 7

6 競技課題詳細内容 夏休みキッズプログラミングコンテスト イベントサイトの構築 6.1 背景近年 子供に習わせたいこと のアンケートでプログラミングが上位に入っている そのためプログラミングの腕に覚えのある子供たちも増えてきている 10 年以上子供たちにプログラミングを教えてきている NPO 法人プログラミングチャイルドではプログラミングを学ぶ子供たちが輝ける場所を作りたいという思いをこめてキッズプログラミングコンテストを開催することにした 周りの大人たちが手伝える可能性のあるオンラインでのイベントではなく 大会会場に集まってそこで制限時間内に子供たち自らが考え課題のプログラムを作成する形式になっている 本大会と予選に分けて 予選を勝ち抜いた子供だけが本大会に出られるようになっている このイベントの告知サイトの構築が課題になる 日本全国をエリアごとに分けて予選は行われる 各会場の地図もサイトには必要になる またサイトの一つのコーナーに プログラマよもやま話 を設けている ここでは審査をする委員たちの仕事などからのこぼれ話などが掲載される 彼等はすでに slack で連絡を取り合っているが そこから bot が これは という話を DB に登録する予定である この DB にアクセスしてサイト上に表示する機能 bot から投稿を受け付ける機能など CRUD に対応したものが必要になっている ターゲットは子供たちであるが その子供たちが出場したいと思った時にその保護者たちを説得する必要があり 保護者が見て納得するようなサイトであることも望まれる 6.2 Module 1 この Module では CRUD 機能を実装する テーブルはコメント用 委員用の 2 つが必要である それぞれ関連づけを行いプログラムに紐付けて予約を行えるように設計する必要がある RESTful な URI でアクセスできること 6.3 RESTful な URI 委員に関する API URI は以下のようになる これについては基本的に取得に関する API だけ作成すればよい メソッド URL 一覧取得 GET http://api.user0xx.skilljapan.info/committees 特定のデータ取得 GET http://api.user0xx.skilljapan.info/committees/tsu 特定データ取得では tsu という値の例である テーブル committees にて nickname が tsu であるデータを返すことになる 16

コメントに関する API コメントに関する基本的な URI は以下の通りである メソッド URL 一覧取得 ( 最新 20 件 ) GET http://api.user0xx.skilljapan.info/comments 一覧取得 ( ページ 2 を指定 ) GET http://api.user0xx.skilljapan.info/comments/page/2 特定のデータ取得 GET http://api.user0xx.skilljapan.info/comments/3 新規データの追加 POST http://api.user0xx.skilljapan.info/committees/tsu/comments/ 特定のデータ更新 PUT http://api.user0xx.skilljapan.info/comments/3 特定のデータ削除 DELETE http://api.user0xx.skilljapan.info/comments/3 一覧取得ではデータは最新の 20 件を返す これより古いものを取得する場合は page で指定する 20 件ずつ page を作り 上記の例では 21 件目から 40 件目までのデータを返すことになる 特定コメントの一覧取得では ID が 3 のプログラムの一覧を取得する 新規データを追加する場合にはどの委員のコメントかを指定してからコメントを追加するため URI で委員を指定する必要がある POST パラメータ内にプログラムの ID が含まれる必要はない データの取得 前述の通り 各 API にアクセスがあった場合には JSON を返す 委員 API における特定データの取得では以下のパラメータを持つ JSON が返る 一覧ではその配列が JSON で返る パラメータ 内容 型 備考 id ID 整数 name 名前 文字列 日本語での名前 nickname 名前 文字列 slack で使用する英数字の名前 コメントにおける特定データの取得では以下のパラメータを持つ JSON が返る 一覧ではその配列が JSON で返す パラメータ 内容 型 備考 id ID 整数 committee_nickname 委員の名前 文字列 comment コメント text created_at コメントの作成日時 datetime 17

例として予約に関する特定データの取得を行った際に返す JSON のサンプルを以下に示す { } "status": "success", "id": 1, "committeee_nicknae": "tsu", "comment": "Keep it simple, stupid. ってシンプルにしておけはわかるけど stupid って必要?", "created_at": "2016/07/21 11:27:25" 6.4 登録および更新 データは以下のリクエストパラメータで送信されてくる パラメータ名 committee_nickname comment 内容 委員の名前 コメント コメントの指定および更新時の id は URI に含まれるのでそちらを利用する 新規作成時の手順としては以下のようになる 1. データ受信後認証が通らなかった場合は HTTP で 401 とダイジェスト認証のヘッダを送信して終了 2. 認証後プログラムの最大人数と該当プログラムの登録済み人数を調べる 3. プログラムの人数に空きがある場合は DB に保存し当該データを取得した時と同じ JSON データを返す 空きがない場合は登録失敗ということで status : failure を返す 6.5 データ削除 削除用 URI にアクセスがあった場合 該当データの削除を行う 成功した場合は当該データを取得した時と同じ JSON データを返す 失敗 した場合には status : failure を返す 6.6 認証機能 予約時における新規データの追加 特定データの更新および削除には認証機能が必要である 以下の ID/ パスワードでダイジェスト認証 を行うこと ID パスワード realm gorin yamagata2016 webapi ユーザが増えることも考慮して この情報は DB の中にいれること パスワードなどは平文ではなく 暗号化しておくことが望ましい 18

6.7 リターンコード JSON 内の status はリターンコードとして API 動作の結果を示す status success failure 内容 成功 失敗 6.8 Module 2 この Module では 夏休みキッズプログラミングコンテスト イベントサイトのフロントエンド部を構築する 必要なページは以下の通り トップページ 予選ページ プログラマよもやま話また近年では PC のブラウザよりもモバイルデバイスのアクセスの方が増えてきていることもあり スマートフォンでも閲覧できるようにすることが求められる また ウェブサイト構築における技術的な仕様は以下のとおりである HTML/CSS o W3C の勧告する XHTML1.1 もしくは HTML5 o W3C の勧告する CSS2(.1) もしくは CSS3 アクセシビリティと操作性の基準 o img 要素における alt 属性 HTML5 の場合必須ではないが このサイトでは必須とする 6.9 トップページ 以下の項目が含まれていなければならない イベント紹介用アニメーション o o プラグインなしでも動作するもの スライドアニメーションなど視覚効果を使ったものが望ましい キッズプログラミングコンテストのロゴ プログラマよもやま話 6.10 予選ページ 予選となる各地方大会のページ 地域ごとに複数のページにしても全てまとめた 1 ページでも構わない データの表示件数や表示方法など を熟慮して PC 用ブラウザ, スマートフォンなどのデバイスにそれぞれあわせたものを作成すること 19

6.11 プログラマよもやま話 API にアクセスして よもやま話 を取得し 表示を行う 生データでは委員の名前が英数字になっているので委員用 API から日本語での名前を取得して表示にはそちらを使うようにする JavaScript のコードはオブジェクト指向の使用が望ましい ここでいうオブジェクト指向とは jquery などのオブジェクトを使うこと出はなく 自らオブジェクトを定義してコードの再利用などを行いやすくすることである API API は RESTful な形で提供される Module 1 と仕様は同じである URI 委員一覧取得 コメント一覧取得 特定コメント取得 http://gorinapi.user0xx.skilljapan.info/committees http://gorinapi.user0xx.skilljapan.info/comments http://gorinapi.user0xx.skilljapan.info/comments/3 6.12 グローバルメニュー必要な情報として以下のものがある HOME 地方大会 委員紹介 アクセス上記のものはメニューとして必須のものであって これ以外の項目があってもよい 20

< 留意事項 > 下記の項目について留意し 課題を作成すること 1. プランニングとデザイン ウェブサイトは要求仕様に応じて制作され 適切に計画されているか 課題制作にあたって適切な作業計画がなされているか モジュールが目的に応じた要求を満たし 情報を漏れなく含み 完成された状態になっているか モジュールに求められるサイトの構成が適切であり タイトルやページ名称は適切か サーバにアップロードされブラウザで閲覧できる状態になっているか 2. 画像作成 修正 最適化 画質 階調 圧縮技術等の Web 用画像ファイルについての知識があり最適化が行われているか モジュールの目的やコンテンツに見合ったデザイン処理が行われているか 3. レイアウト ナビゲーション ユーザインタフェースデザイン ユーザビリティ アクセシビリティ 必要な情報が正しく伝達されるためのデザインがなされ 文章 画像についてその構成が適切にレイアウトされているか ページは 読みやすく見やすくデザインされているか 適切なナビゲーションがデザインされているか 各モジュールにおいて利用されている色彩は適切で一貫しているか 配色 ボタンなど各要素のサイズなどが適切か 使いやすさに配慮した GUI( グラフィカルユーザインタフェース ) の設計がなされ フィードバックは適切か ユーザビリティに配慮してデザインされているか アクセシビリティに配慮された制作 デザインがなされているか JIS X8341-3 WCAG のガイドラインを特に意識したデザインがなされているか 4. サーバサイドプログラミング PHP を用いたダイナミックなウェブサイトが構築されているか PHP からの DB 操作が行なえるか Ajax 用 API が構築されているか 21

5. クライアントサイドの実装 JIS ISO W3C などの標準規格に準拠し適切な構造化 (structured markup/semantic markup) が行われているか CSS2.1 以降を外部スタイルシートで使用し スタイルシートを有効に利用しているか 指定された Web ブラウザに準拠してデザインされているか ECMAScript(Java Script) 等の Web プログラミングが適切に利用されているか 最新の業界動向 さまざまな端末等に応じたウェブコンテンツの実装ができるか 6. マルチメディア表現とクリエイティビティ モジュール全体のデザイン また使用されている画像等の表現方法が適切で かつ独創性 創造性 審美性があるか モジュール コンテンツを特徴づける為の努力がされ 魅力に富んだサイトになっているか 情報伝達やサイトの目的を達成するために留意され 訴求力のある制作が行われているか モジュールの目的やデザインに合わせたアニメーションが作成されており 魅力的か 7. プレゼンテーション プレゼンテーションが適切に行われ 作業および制作課題作品の要旨が明確に伝達されたか 8. 評価について 本競技では 3. 留意事項の項目について評価を行う また 配点については表 1. 配点のとおりである 表 1. 配点 項目 内容 配点 1 プランニングとデザイン 5 2 画像作成 修正 最適化 5 3 レイアウト ナビゲーション ユーザインタフェースデザイン ユーザビリティ アクセシビリティ 10 4 サーバサイドプログラミング 38 5 クライアントサイドの実装 32 6 マルチメディア表現とクリエイティビティ 5 7 プレゼンテーション 5 合計 100 22

< 注意事項 > 1. 筆記用具は 競技委員会より 提供を行う また 和英 英和辞書については持込を許可する 手荷物等については 持込を許 可するが 競技に関係のないもの ( 携帯電話等 ) などについては 競技中に利用することはできない 机上に置けるものは 配布さ れた筆記用具 時計 ( 必要であれば目薬 ) 等とする 携帯電話を時計として利用することはできない 2. 選手は競技実施日において 本人確認のため 学生証 社員証 公的に自己を証明する写真貼付の身分証明書などの提示を 求められることがある 3. 競技中 水分補給の必要がある場合は 閉栓可能なペットボトルなどの飲料を持参することはできる 但し その飲料などが原 因で機材等にトラブルが発生した場合は自己責任となる 4. 競技は 見物者などにより 騒音等が発生する可能性がある 騒音防止のために音楽 CD およびヘッドフォン イヤフォン等の 持込を認める 音楽 CD については 競技用 PC を用いて再生すること ただし MP3 プレイヤーや携帯電話等は使用不可とする 音楽 CD については不要なデータが含まれていないか競技委員がチェックすることがある 5. 計時については 競技用 PC の時計で確認するのではなく 競技委員に説明された計時機器等を利用すること また 競技の際 には 適宜 競技委員から経過時間のアナウンスを行う 6. 競技の際 服装等は 競技にふさわしいものを着用すること 選手は寒暖の変動に対処できるように留意すること また 騒音や 見学者 取材などが予想されるため 必要であれば耳栓などを 競技委員に申し出て使用することができる ゼッケン等が配布され た場合は競技委員の指示に従い 必ず着用すること 7. 競技用 PC については 事前にその動作を確認しておくこと また 競技実施前日の説明会の際に競技用サーバの接続設定等について説明を行うので 接続方法 操作方法について必ず確認を行うこと また その際 各自環境設定の為に持ち時間 30 分程度を与えるので PC の環境設定等を行うこと また 競技に必要な機器等や検証用機材等を競技委員より支給される場合は 使用上の注意等に必ず従うこと 8. 競技用 PC および検証用機材から インターネット ( 競技用ネットワーク外 ) へアクセスすることはできない また 選手が競技委 員の指示なくネットワークの設定を変更することはできない 競技用ネットワーク外へ故意にアクセスした場合は失格とする場合が ある 9. 事前に作成した独自のプログラム ソース テンプレートや素材を利用することはできない ただし競技課題で規定された場合は 競技委員の許可を得て利用することができる 23

10. 競技用 PC に 各ソフトウェア標準の状態でインストールされている 素材データやテンプレートについては 各自の判断で利用 することは許可する 11. 競技中に他の選手と用具の貸し借り PC 競技用機器およびデータの交換は禁止する 12.USB 方式のキーボードおよびマウスについては ドライバを新規で組み込む必要のないものに限っては持込を許可する その 他の入力デバイス ( タブレット等 ) については 持ち込みは不可とする また 持込する入力機器については選手各自の責任とし 競 技用 PC で動作しない 不安定になる等もあるため選手各自で判断すること 競技委員は一切のサポートを行わない 13. 他の選手の競技を妨害する行為をしないこと 14. 競技機材 機器等のトラブルが発生した場合は 挙手をして競技委員または関係者に作業の待ち時間の記録をしてもらうこと なお この際に作業をしてはならない また 競技用 PC が障害などにより 競技中に停止 ( フリーズ クラッシュ ) した場合 その停止時間も競技委員が測定を行う 作業が上記理由等で継続できない場合 その繰越分は 競技終了時に連続して行う事とする プレゼンテーションの順番および割当て時間を越える場合には別途 協議し変更する場合がある 15. 競技用 PC のトラブルにより作成中のデータが失われる場合もあるため 各自データの保存やバックアップについて十分に留意し作業を行うこと 作業データは ハードディスクに保存することを推奨する 作成中のデータに関しては 競技用 PC のハードディスクおよび競技用サーバ データ保存用のメディアとして USB メモリ (2GB を各競技用 PC に設置 ) が利用できるので 以上のデータ保存可能な場所にデータを適宜バックアップすることを推奨する 16. 競技開始後 9 時間を越え 制限時間内に作業を完了した場合 作業完了 と挙手をし 競技委員に意思表示を行うこと 競 技委員の確認後 指示に従い 控室等で待機すること 17. 競技中に不正があった場合 また 競技委員に不正を指摘された場合 選手は失格となりすべての作業を中止して退場するこ と 18. 競技中のトイレは各自適宜行うこと その際は必ず競技委員に申し出ること なお 所要時間については作業時間に含まれる 19. 安全衛生上の観点から各自 作業中に適当な休憩を取ること その際に競技会場からの退出は禁止する また他の選手の妨 害にならないように注意すること 20. 選手はトイレまたは 休憩 昼食時には 適宜データを保存し PC からログオフするか アプリケーション等の操作画面 ブラウ ザなどに制作途中の課題が表示されないよう配慮すること 24

21. 競技実施後に規定されたデータが正しく提出されていない場合や 提出された課題データの状態により プレゼンテーションを 行なえないと事前に予想される場合は その旨個別に通知され プレゼンテーションを行えない場合もある 22. 競技実施中各自の作業および操作中の PC の画面等が会場の見学者にむけて提示されることがある 23. プレゼンテーションはモジュール課題 2 を対象として行うこと プレゼンテーションについて事前に印刷等したメモや競技時間中 に作成した原稿を利用することは禁止する 24. 制作した課題の著作権は大会主催者である中央職業能力開発協会に帰属する しかし制作した著作物の引用の責任につい ては競技 ( 制作 ) 者側にあるものとする 25