PowerPoint プレゼンテーション

2015年10月25日

株式会社カサレアル

王子 東

HTML5レベル1ポイント解説セミナー

業務Webアプリ開発

スタートアップナビゲーション

HTML5 はじめの2～3歩

-HTML5プロフェッショナル認定試験 レベル１

マルチデバイスに対応した静的なWebコンテ

ンツをHTML5を使ってデザイン・作成できる。

対象

Webシステム

開発者

グラフィック

デザイナー

サーバーサイド

エンジニア

出題範囲

重要度

重要度

　HTTP, HTTPSプロトコル

7

　HTML4.01以前の要素および属性

7

　HTMLの書式

8

　HTML5で新しく加わった要素および属性

10

　ネットワーク・サーバ関連技術の概要

6

　HTML5で廃止されたタグおよび属性

5

　Web関連技術の概要

6

　マルチデバイス対応ページの作成

4

　スタイルシートの基本

6

　メディアクエリ

4

　CSSデザイン

9

　スマートフォンサイト最適化

3

　カスケード（優先順位）

2

レスポンシブWebデザイン

Webの基礎知識

オフラインWebアプリケーション（概要とマニフェスト）

CSS3

要素

HTML5プロフェッショナル認定試験 レベル２

システム間連携や最新のマルチメディア技術

に対応したWebアプリケーションや動的Web

コンテンツの開発・設計ができる。

対象

Webシステム

開発者

Webディレクタ

ー

サーバーサイド

エンジニア

出題範囲

重要度

　JavaScript文法　　　　　　　

10

　イベント　　　　　　

8

　ドキュメントオブジェクト／DOM　　　　　

6

　ウィンドウオブジェクト　　　　　　　　　

8

　Selectors API　　　　　　　

4

　テスト・デバッグ　　　　　　

2

　Canvas(2D)　　　　　　　

6

　SVG　　　　　　

1

　video要素,audio要素　　　　　　

2

JavaScript　　　　　　　

グラフィックス

WebブラウザにおけるJavaScript API

マルチメディア

オフラインアプリケーションAPI

重要度

　Page Visibility　　　　　　

2

　Timing control for script-based animations

2

　Web Storage　　　　　　

4

　Indexed Database API　　　　　　

2

　File API　　　　　　

2

　WebSocket　　　　　　　

2

　XMLHttpRequest　　　　　　　

4

　Geolocation APIの基本と位置情報の取得　

2

　並列処理の記述　　　　　　　

4

表示制御

ストレージ

通信

Geolocation API

Web Workers

紹介するHTML5 技術要素

NO

技術要件

HTML5 テクノロジー

範囲

1

マルチデバイス

メディアクエリ

CSS

2

位置情報

_{Geolocation API}

デバイス操作API

3

ネットワーク状況

_{Network Information API}

4

バッテリー状況

_{Battery Status API}

5

カメラ

_{Media Capture API}

6

データ保存

IndexedDB API

各デバイスWebアプリ利用シーン

デバイス

シーン

主目的

弱点

オフィス内

資料作成

持ち運び

移動中

情報参照

画面サイズ

バッテリー

ネットワーク状況

移動中

営業先

打ち合わせ

画面共有

バッテリー

ネットワーク状況

マルチデバイス HTML5 技術要素

NO

技術要件

HTML5 テクノロジー

1

画面サイズ

_{- レスポンシブデザイン}

メディアクエリ

viewport

@media

<meta name=”viewport” ～ >

2

スマートフォン対応

_{- 最適化}

ノンブロッキング

_{(非同期 / 遅延)}

<script src=“JSファイル” ～ >

メディアクエリCSS(スクリーンサイズ毎に定義)

レスポンシブデザイン

@media screen and (max-width: 768px) {

#幅が768px以下のスクリーンのスタイル定義

}

@media screen and (min-width: 768px) {

#幅が768pxより大きいスクリーンのスタイル定義

}

デバイスの画面幅に合せて表示領域を指定する場合に設定する

viewport

の

content属性を選択してください。

A. content="device-width"

B. content="width=device-portrait"

C. content="width=device-horizontal"

D. content="width"

E. content="width=device-width"

HTML5 レベル１試験例

「マルチデバイス対応ページ」

JavaScriptファイルを読み込む際に、

非同期で読み込み

をおこないWebページの

レンダリングをブロックさせない属性を選択してください。

A. non-block

B. defer

C. async

D. sync

E. lazy

HTML5 レベル１試験例

「スマートフォンサイト最適化」

移動中 HTML5 JavaScript API

NO

技術要件

HTML5 テクノロジー

API

1

位置情報

_{- 現在座標取得}

Geolocation API

navigator.geolocation.getCurrentPosit

ion()

2

ネットワーク状況

_{- 帯域幅取得}

Network Information

API

navigator.connection.bandwidth

3

カメラ

_{- 画像、音声入力}

Media Capture API

navigator.getUserMedeia()

Geolocation APIを用いて必ず取得できる、

緯度と経度以外

の位置情報はどれ

か一つ選択しなさい。

A. 高度

B. 誤差

C. 方角

D. 速度

HTML5 レベル２試験例

「Geolocation API」

オフライン＆マルチスレッド HTML5 JavaScript API

NO

技術要件

HTML5 テクノロジー

API

1

データ保存

_{− Key-Value方式}

WebStorage API

sessionStorage.setItem()

localStorage.setItem()

2

データ保存/検索

− DB作成

− ストアオブジェクト作成

− レコード挿入

− トランザクション制御

− Index作成

IndexedDB API

indexedDB.open()

db

.

createObjectStore()

db

.

transaction

()

store

.

createIndex()

3

マルチスレッド

− Worker定義

− メッセージ送信

WebWorker API

new Woker(“Woker定義ファイル.js”)

worker.postMessage(“メッセージ”)

リアルタイム通信

NO

技術要件

HTML5 テクノロジー

API

1

HTTPデータ通信

− 非同期通信

− リクエストメソッドタイプ

− 通信状態

XMLHttpRequest

new

XMLHttpRequest

()

xhr.open()

xhr.onreadystatechange

xhr.readyState

2

リアルタイムデータ通信

− メッセージ送信

− Push通知

WebSocket API

new WebSocket(ws://接続URI)

webSocket.

send(メッセージ)

WebSocket APIで使用できる

プロトコル

を選択しなさい。

A. wss

B. ws

C. http

D. https

HTML5 レベル２試験例

「WebSocket API」

HTML5アプリ開発に、

チャレンジしてみましょう！

HTML5プロフェッショナル認定試験 レベル１

マルチデバイスに対応した静的なWebコンテ

ンツをHTML5を使ってデザイン・作成できる。

対象

Webシステム

開発者

グラフィック

デザイナー

サーバーサイド

エンジニア

出題範囲

重要度

重要度

　HTTP, HTTPSプロトコル

7

　HTML4.01以前の要素および属性

7

　HTMLの書式

8

　HTML5で新しく加わった要素および属性

10

　ネットワーク・サーバ関連技術の概要

6

　HTML5で廃止されたタグおよび属性

5

　Web関連技術の概要

6

　マルチデバイス対応ページの作成

4

　スタイルシートの基本

6

　メディアクエリ

4

　CSSデザイン

9

　スマートフォンサイト最適化

3

　カスケード（優先順位）

2

レスポンシブWebデザイン

Webの基礎知識

オフラインWebアプリケーション（概要とマニフェスト）

CSS3

要素

HTML5プロフェッショナル認定試験 レベル２

システム間連携や最新のマルチメディア技術

に対応したWebアプリケーションや動的Web

コンテンツの開発・設計ができる。

対象

Webシステム

開発者

Webディレクタ

ー

サーバーサイド

エンジニア

出題範囲

重要度

　JavaScript文法　　　　　　　

10

　イベント　　　　　　

8

　ドキュメントオブジェクト／DOM　　　　　

6

　ウィンドウオブジェクト　　　　　　　　　

8

　Selectors API　　　　　　　

4

　テスト・デバッグ　　　　　　

2

　Canvas(2D)　　　　　　　

6

　SVG　　　　　　

1

　video要素,audio要素　　　　　　

2

JavaScript　　　　　　　

グラフィックス

WebブラウザにおけるJavaScript API

マルチメディア

オフラインアプリケーションAPI

重要度

　Page Visibility　　　　　　

2

　Timing control for script-based animations

2

　Web Storage　　　　　　

4

　Indexed Database API　　　　　　

2

　File API　　　　　　

2

　WebSocket　　　　　　　

2

　XMLHttpRequest　　　　　　　

4

　Geolocation APIの基本と位置情報の取得　

2

　並列処理の記述　　　　　　　

4

表示制御

ストレージ

通信

Geolocation API

Web Workers

HTML5プロフェッショナル認定試験に、

チャレンジしてみましょう！