HTML5プロフェッショナル認定試験
レベル2 無料技術セミナー

2017年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.

講師プロフィール
会社概要
株式会社ケイ・シー・シー
http://www.kcc.co.jp/
カスタマイズIT研修専用サイト
http://www.kcc-itlearning.com/

講師紹介
西日本センターユニット ITラーニングセンター所属
Linux、ネットワーク、セキュリティ関連、HTML5、JavaScriptなどのWeb技術、Java、Android、iPhoneコースなど幅広い分野のセミナーを担当。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

1

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

アウトライン• HTML5プロフェッショナル認定資格 レベル2
試験概要
• 技術解説項目
1.ストレージ・WebStorage
2.通信・Messaging
・WebSocket・Server-Sent Events

3.セキュリティモデル・クロスオリジン制約とCORS
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5プロフェッショナル認定
資格 レベル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.

HTML5プロフェッショナル認定資格の種類

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

レベル１とレベル２の資格体系
HTML5プロフェッショナル認定試験レベル１
所要時間：90分（アンケート等の時間を含む）
出題数：約60問
受験料：¥15,000 （税別）
認定条件： HTML5 レベル1試験の合格
認定の有意性の期限：5年間

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

試験実施形式
コンピュータベーストテスト（CBT）で実施します。
マウスによる選択方式がほとんどですが、キーボード入力問題も多少出題されます。

所要時間：90分（アンケート等の時間を含む）
試験問題数：40～45問
受験料：¥15,000 （税別）
認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間※ 試験は「ピアソンVUE」より配信されています。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported 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.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5 レベル2

傾向と対策

• CBT（Computer Based Testing）試験ᵒ コンピュータを操作して問題に解答
ᵒ 試験中、問題は何度も繰り返し参照可能
ᵒ 試験終了と同時に結果が判明• 試験時間の有効活用

ᵒ 90分（機密保持契約とアンケートの時間を含む）で40～45問の問題
ᵒ 四者択一または五者択一、複数選択
ᵒ 問題はしっかり読む• あやふやな問題はチェックをつけて、後から解答する• 全体的に見直す時間を確保する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

技術解説項目
1.ストレージ・WebStorage

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.

ストレージ• Web Storageᵒ クライアントアプリケーションから利用可能な、ユーザエージェントがもつ永続的なデータ格納領域• Indexed Database APIᵒ 高度なデータ管理（検索、トランザクション、カーソル etc)が可能なインデックス付きのデータベースを扱うAPI• File API

ᵒ HTML文章からローカルファイルに直接アクセスするための機能を提供

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• Web Storage 【2013/7/30 勧告】

http://www.w3.org/TR/webstorage/ᵒ クライアントアプリケーションから利用可能な、ユーザエージェントがもつ永続的なデータ格納領域• ローカルストレージ（local storage)- データは永続的に保存- ファイルで保持するcookieに類似• セッションストレージ（session storage）- データは一時的に保存- メモリで保持するcookieに類似

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storageᵒ オリジンごとに5Mバイト（推奨）の容量をもつ

WebStorage

5M

https://tech-testsv1.com

5M
http://testsv1.com

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• オリジンとは『URLの「スキーム」「ホスト」「ポート」の3つの組み合わせ』http://testsv1.com : 80
スキーム

ホスト

ポート番号

http://testsv1.com/dira/test.html

同一オリジンとして認識

http://testsv1.com/dirb/appliance.html
ᵒ キー、バリュー型のシンプルなデータベース

5Mキー
nametel1

バリュー

セマン
0612345678{ “name”:“セマン" , "tel" : "0612345678" }The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• WindowオブジェクトのStorage属性を参照
ᵒ ローカルストレージ• StorageオブジェクトはWindowオブジェクトのlocalStorage属性を用いて参照

window.localStrageᵒ セッションストレージ• StorageオブジェクトはWindowオブジェクトのsessionStorage属性を用いて参照

window.sessionStrage※ localStorageとsessionStorageはデータの参照や操作方法は同じです。
※windowオブジェクトは省略可能です。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• Webストレージへのデータの保存
sessionStorage.setItem(key,value)
setItem(key,value)
Webストレージにデータを保存
key ：キーとなる値（文字列）value：バリューとなる値（文字列）• Webストレージに格納したデータの参照
sessionStorage.getItem(key)getItem(key)
指定したキーのバリューを参照
戻り値：キーに対応する値
引数に指定したキーがWebStorageになければnullを戻す
key：キーとなる値（文字列）The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage
その他の記述方法• データの保存
sessionStorage.key = value
sessionStorage[ key ] = value• データの参照
sessionStorage.key
sessionStorage[ key ]The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• バリューの削除
sessionStorage.removeItem(key)removeItem(key)
指定したキーのバリューを削除
key ：キーとなる値（文字列）• ストレージ内のデータをすべて削除
sessionStorage.clear()clear()
Webストレージ内のすべてのデータを削除

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• Webストレージに保存したデータの個数を参照
sessionStorage.length
lengthWebストレージに格納したデータの個数を参照• キーを参照sessionStorage.key（index）
key（index）
指定したindexのキーの値を参照
戻り値：指定したキー（文字列）index ：順序番号

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• storageイベント

ᵒ WebStorageが更新されるとWindowオブジェクトに発生するイベント

window.addEventListener(“storage”,StorageChange,false);
StorageEventオブジェクト

function StroageChange( e ){/* WebStorageが更新された際に行う処理 */}The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage• JavaScriptオブジェクトとJSONᵒ JavaScriptオブジェクトは、JSONに変換して保存できる
JavaScriptオブジェクト"date":"2017-03-20","title":“HTML5",“memo”:“試験対策セミナー"

JSONJSON.stringify

JSON.parseᵒ JavaScriptオブジェクト → JSON

JSON.stringify(JavaScriptオブジェクト）ᵒ JSON → JavaScriptオブジェクト{"date":"2017-03-20","title":"HTML5","memo":"試験対策セミナー"}

JSON（JavaScript ObjectNotation）
数値・文字列・配列・オブジェクトなどのデータを、文字列で表現できる軽量データ交換フォーマット

JSON.parse(JSON)The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Web Storage
練習問題
WebStorageの説明として誤っているものをすべて選びなさい。
A. sessionStorageで保存したデータはブラウザを閉じると消える
B. キー、バリュー型のデータ形式で保存され、インデックスを活用し高速に検索が可能
C. http://www.testsv1.com:80とhttp://www.testsv1.com:1では異なる領域にデータが保存される

D. ローカルホスト上のファイルをBlobオブジェクトとして扱うことができる
E. localStorageで保存したデータはブラウザを閉じると消える

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

技術解説項目
2.通信・Messaging
・WebSocket・Server-Sent Events

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.

Messaging• Messaging 【2015/5/19 勧告】
http://www.w3.org/TR/webmessaging/ᵒ ブラウザー上のブラウジングコンテキスト間で通信する仕組み• ブラウジングコンテキスト…ウィンドウやタブ等• Messagingを利用する処理
ᵒ クロスドキュメントメッセージング• 異なるオリジンと安全に通信をする仕組み• メインページとiframe間のデータのドキュメントメッセージング

ᵒ チャネルメッセージング• チャネルを介したデータのやり取りを行う仕組み

ᵒ サーバープッシュイベント
• サーバーからのプッシュ通信を行う仕組み

ᵒ WebSocket• リモートホストとの双方向通信を行う仕組み
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• WebSocket（W3C）
http://www.w3.org/TR/websockets/ᵒ WebSocketプロトコルを使用し、クライアント、サーバーアプリケーション間で双方向の非同期通信を行う
ᵒ WebSoekctプロトコル（IETF）
http://tools.ietf.org/html/rfc6455

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• HTTPの通信

ᵒ リクエストとレスポンスが1：1

リクエストレスポンス• WebSocketの通信

ᵒ セッション確立後は任意のタイミングで双方向通信が可能

セッション確立

セッション確立

書き込み
配信

配信

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• WebSoket通信の流れ
クライアント（ブラウザ）

サーバーAP

TCPコネクション接続WebSoket
オブジェクト生成
openイベント発生
sendメソッドによりデータの送信
message
イベント発生close
イベント発生サーバーへのデータ送信
サーバーからクライアントへのデータ送信
TCPコネクション切断

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• WebSocketセッションの確立

ᵒ WebSocketオブジェクトの生成により、サーバーアプリケーションとのセッションを確立

var websocket = new WebSocket(“ws://www.testsv1.com:3000");
WebSocket("url",[protocols]);

WebSocketオブジェクトのコンストラクタ
url：サーバーアプリケーションのURL
一般的なスキームは、「ws」または「wss（セキュア通信）」

protocol：サブプロトコルの配列※省略可• openイベント

ᵒ 接続が完了した場合、WebSocketオブジェクトにopenイベントが発生soketobj.onopen = function(){/* 接続が完了した際に行う処理 */}The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• メッセージ送信
websocket.send(data)
send.(data)
メッセージを送信
data ：送信データ（文字列、Blob、ArrayBuffer、ArrayBufferView）
戻り値：true ‥‥ 成功
false‥‥失敗The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• メッセージ受信ᵒ メッセージ受信時、WebSocketオブジェクトにmessageがイベント発生
ᵒ 受信データの参照

websocket.onmessage = function( e ) {alert(e.data);
MessageEventオブジェクト(略)};
HTML5 ★ chat

HTML5 ★ chat書き込み

message
イベント発生配信

配信

message
イベント発生The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• サーバーアプリケーションとのセッション切断
websocket.close()close([code],[reason])
サーバーアプリケーションとの接続を閉塞：切断コード（数値）※省略可

reason ：切断理由（文字列）※省略可code•closeイベント

ᵒ サーバーアプリケーションとのセッション切断が完了したときに発生

websocket.onclose=function(e){/* 接続を切断したときに行う処理 */}The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

WebSocket• サーバーアプリケーション
ᵒ 言語はPerl など• サーバーの起動（Perl）
コマンドプロンプトから
perl サーバーアプリケーション名 daemon

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents• ServerSentEventsᵒ クライアントアプリケーションがサーバーアプリケーションからリアルタイムにメッセージを受信する仕組み
ᵒ プッシュ型のメッセージ（イベントストリーム）を受信サーバー

クライアントHTTP Responseヘッダ

messageイベント発生

messageイベント発生
messageイベント発生
messageイベント発生

HTTP Request
HTTP Response
event streams

Content-Type:text/event-stream
Transfer-Encoding:chunked

通知イベント発生

event streams

通知イベント発生

event streams

通知イベント発生

event streams

通知イベント発生

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents• イベントストリーム

ᵒ サーバーアプリケーションがプッシュするメッセージ（文字列）ᵒ シンプルなテキストデータ
ᵒ 文字符号化方式はUTF－８、MIMEタイプはtext/event-streamᵒ イベントストリーム形式
ᵒ 改行文字で区切られ、先頭のフィールドでテキストデータの意味を表現する

フィールド名：テキストデータフィールド名意味event

イベントのタイプを指定

data

メッセージデータidイベントID（lastEventId）

retry

イベントストリーム再試行時間（ミリ秒）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents• イベントストリーム例
data: seman

id:name空行
data: Osaka

id:address

・１つのイベントストリーム
・idは１つのイベントストリームの最後に付加

空行

data: seman@test.com
id:mail
空行

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents• ServerSentEventsの利用

ᵒ ServerSentEventsを利用するためにはEventSourceオブジェクトの生成を行う

var es = new EventSource(“http://www.testsv1.com/event.cgi”)

EventSource(url)EventSourceオブジェクトのコンストラクタ
url ： サーバーアプリケーションのURL• openイベント

ᵒ サーバーアプリケーションとの接続が完了した場合EventSourceオブジェ
クトにOpenイベントが発生
es.onopen = function(e){/* 接続が完了した際に行う処理 */}The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents• messageイベント

ᵒ イベントストリーム受信時、EventSourceオブジェクトにmessageイベントが発生
ᵒ 受信データの参照

es.onmessage = function( e ){alert(e.data);
MessageEventオブジェクト(略)}The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ServerSentEvents
練習問題
ServerSentEventsを利用し、プッシュ型の通信を実現したい。
サーバーからクライアントに送信するHTTPResponseのヘッダー情報として正しい組み合わせはどれか。
A. Content-Type:text/event-stream
Transfer-Encoding:chunked
B. Content-Type:text/event-stream
Transfer-Encoding:compress
C. Content-Type:text/event-source
Transfer-Encoding:chunked
D. Content-Type:text/event-source
Transfer-Encoding:compress

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

技術解説項目
３.セキュリティモデル・クロスオリジン制約とCORS

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.

クロスオリジン制約とCORS• クロスオリジン制約

ᵒ セキュリティ上の理由で、そのHTMLファイルが保存されているオリジンとしかデータのやり取りが出来ない制約
ᵒ 別のオリジンでドキュメント間の通信を禁止し、クロスサイトスクリプティングを防ぐ
www.testsv1.com
www.testsv1.com

ブラウザ

HTMLファイル

ブラウザ

HTMLファイル

www.testsv2.com

WebAPWebAPThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

クロスオリジン制約とCORS• 代表的なクロスオリジン制約
ᵒ XMLHttpRequestᵒ Canvasᵒ スクリプトによる別のoriginであるiframeやwindowに対する操作• クロスオリジン制約の回避策
ᵒ CORSᵒ Messagingᵒ JSONP

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

クロスオリジン制約とCORS• CORS 【2014/1/16 勧告】
https://www.w3.org/TR/cors/
ᵒ サーバーがオリジンをまたぐアクセスを制御する方法を規定
ᵒ オリジン間の安全な通信を保証• Access-Control-Allow-Credentials : true | false- クロスオリジン通信を行い認証情報、HTTPCookieを含むリクエストを許可（trueの場合）- falseの場合、認証情報、HTTPCookieを含むクロスオリジン通信は禁止（デフォルト）• Access-Control-Allow-Origin : origin | *- リソースにアクセスしてよいオリジンを指定- ＊を指定した場合、すべてのオリジンにリソースへのアクセスを許可

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

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.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.