HTML5プロフェッショナル認定試験
レベル２ ポイント解説無料セミナー
2015年2月

東京アプリ・ワークショップ
中島俊治
http://www.faceboo.com/tokyoAppWorkShop
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

自己紹介• HTML5アカデミック認定校「東京アプリ・ワークショップ」運営• 放送大学「HTML5入門」他で非常勤講師• マイクロソフトMVP(2014,2015)アワード受賞• 97年上京ソフトバンク、GeoCities、Yahoo!を始めベンチャ企業を経て独立。
• イベント登壇多数、schoo出演中。

‹#›The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

1.試験・出題範囲について‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

試験のこと• HTML5プロフェッショナル認定試験

レベル２• 所要時間：90分• 問題数：40〜45問程度• 受験料：¥15,000円• 認定条件：有意なレベル1認定を保有＋レベル2に合格• 有意性は５年間‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

試験に合格すると・・・
履歴書資格認定証
‹#›

認定カード

認定ロゴ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

出題範囲の概要• HTML/HTML5マークアップ：HTML5に関するタグの用途、構造の組み立て方に関する技術• ビジビリティ：JavascriptやCSS3などを用いて、デザイン仕様に沿った見やすい表示を行うための技術• レスポンシブWebデザイン：一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術• オフラインWebアプリケーション：通信が常時接続状態ではない環境
でも、効率的にWebコンテンツを動作させるための技術• Javascriptプログラミング：Javascriptを使って、動的なWebコンテンツを作成する技術• マルチメディア：３D・動画・音声ファイルなどのマルチメディアコンテンツの表示・再生に関する技術• ユーザビリティ：ナビゲーション、地図表示など操作しやすいコンテンツを作成するための技術• パフォーマンス：データベースや、並列処理を使ってコンテンツを効率良く高速に動作させるための技術

http://html5exam.jp/outline/lv2.html‹#›The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

出題の重要度• 重要度10JavaScript文法• 重要度8以上

イベント

ウインドウオブジェクト• 重要度6以上 ドキュメントオブジェクト/DOM• 重要度4以上

Selectors API WebStorage

Canvas(2D)XMLHttpRequest

WebWorkers Navigation Timing• 3以下

テスト・デバッグSVG Video・Audio アプリケーションキャッシュの制御

Page Visibility Timing control for script-based animation
GeolocationHigh Resolution Time

History API

Indexed DB API WebSocket

http://html5exam.jp/outline/objectives_lv2.html‹#›The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

出題の種別• 出題範囲それぞれには出題種別がある• 知識問題• コードリーディング問題• 記述問題暗記だけではダメ、実際にコードを書いて覚えましょう‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2.重要ポイント‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

重要ポイント１つめ• 重要度10JavaScriptの文法• 設置方法は３つ（インライン。ページ内。外部ファイル読込）• 変数（作り方。数字や文字の代入。四則演算。文字列の連結）• 関数（関数の役割、独自関数、無名関数、オブジェクト、ローカルorグローバル）• オブジェクト（配列、時間、数学的）
実際にサンプルを作りながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

今後学習を進めるときに便利な「デベロッパツール」• ブラウザには開発者用ツールが付属しています。その扱いに慣れておきましょう。
• Elements• Resources• Console

実際に動作しながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

重要ポイント２つめ• 重要度8イベント• イベントとはきっかけのこと。なにかをきっかけにJavaScriptを起動させることができます。以下に紹介するのはイベントハンドラ• onclick ondblclick• onmousedown onmouseup
onmousemove• onloadonmoouseover

onmouseout

実際にサンプルを作りながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

重要ポイント３つめ• 重要度8ウインドウオブジェクト• documentを表示する「window」に関するメソッドやプロパティです。
• メソッド：.print().open().confirm() .prompt• プロパティ：defaultStatus.close() .onload()
statusname.alert()

openerlengthclosed
実際にサンプルを作りながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

重要ポイント４つめ• 重要度8DOM• javaScriptで表示されるコンテンツやデザインをコントロールすることができます。
• document.getElementById("id1").innerHTML="<h1>ok</h1>"• document.getElementById("id1").style.color="#f00"• document.getElementById("id1").value="赤色"

実際にサンプルを作りながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

重要ポイント５つめ• 重要度8Canvas(2d)• javaScriptでcanvas要素に描画します。以下は重要なコード• var mycanvas1=document.getElementById("mycanvas1");• var ctx1=mycanvas1.getContext("2d");• 矩形、多角形、直線、曲線、グラデーション、円弧の図形描画、文字、画像の表示。（画像表示には注意！）

実際にサンプルを作りながら説明します‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3.勉強の進め方※勉強方法は各人異なります。私の場合をお話します‹#›The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

学習の進め方1. レベル１のHTML5要素とCSS3はマスターしておく
2. JavaScriptの基礎を軽く開始する
3. 「HTML5でWebアプリケーション」といった書籍を購入して実際にソースを書いてアプリを作ってみる（GPS、canvas、File、DOM、WebStorage）
4. 出題の重要度の高いものから認定テキスト又はググりながら掲載されているソースを書いて覚えていく。
5. うまくいかないところは、デベロッパツールでデバッグする。
‹#›The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

学習の進め方
6. 東京アプリ・ワークショップの講座を受ける
1. 一日まるごとどっぷり「HTML5入門」
2. 一日まるごとどっぷり「HTML5要素マークアップ
3. 一日まるごとどっぷり「CSS3」
4. 一日まるごとどっぷり「JavaScript & Canvas」
5. その他の開催実績あり、気軽にご相談を
詳細は http://bit.ly/html5-course‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

学習の進め方
7. 認定教科書で勉強する教科書を覚えるだけではだめ。
試験は暗記だけではありません。実際に手を動かして体験しながら理解しましょう。

‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ご清聴ありがとうございました。
ぜひHTML5試験レベル2に合格され、引き続きHTML5でご活躍になることを願っています。

‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Open the Future with HTML5.

‹#›

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.