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

(1)

HTML5

認定試験

2 無料技術セ

ー

2017

年

3 月

株式会社

・ー・ー

(2)

会社概要

株式会社

シ

http://www.kcc.co.jp/

カ

タ

IT

研修専用サ

ト

http://www.kcc-itlearning.com/

講師紹介

西日本

ンタ

ット

IT

ン

ンタ

所属

Linux

ネットワ

キ

テ

HTML5 JavaScript

の

Web

技術

(3)

ン

• HTML5

認定資格

2 試験概要

• _{技術解説項目}

1. ー

・

WebStorage

2. 通信

・

Messaging

・

WebSocket

・

Server-Sent Events

3. セキ

(4)

HTML5

認定

資格

2

(5)

HTML5

認定資格種類

バ

対応た静的

Web

コンンを

HTML5

を使

ン・作成

間連携や最新

術対応た

(6)

資格体系

HTML5

ッョ

認定試験

HTML5

ッョ

認定試験

所要時間：

90 分

ンケー等時間含

試験問題数：

40 ～

45 問

受験料：む

15,000

税別

認定条件：

HTML5

2 試験合格し

所要時間：

90 分

ンケー等時間含

出題数：約

60 問

受験料：む

15,000

税別

認定条件：

HTML5

1 試験合格

認定有意性期限：

5 年間

(7)

認定証明

認定カード

認定証

認定者ロゴ

名刺用

認定証・認定ー

認定

2 週間程度

登録

住所

届

しいす

認定者

認定後す

(8)

HTML5

2 傾向対策

• CBT

Computer Based Testing

試験

ᵒ

コン

ーを操作

問題解答

ᵒ

試験中問題何度繰返参照可能

ᵒ

試験終了同時結果判明

• 試験時間有効活用

ᵒ

90 分機密保持契約

ンー

時間を含

40 ～

45 問問題

ᵒ

四者択一た五者択一複数選択

ᵒ

問題

読

• あやふや問題

を

後

解答

(9)

技術解説項目

1. ー

(10)

ー

• Web Storage

ᵒ

ン

ー

ン

利用可能

ー

ン

永続的

ー格納領域

• Indexed Database API

ᵒ

高度

ー管理検索

ン

ーソ

etc)

可能

ン

付

ー

ーを扱う

API

• File API

(11)

• Web Storage

2013/7/30

勧告

http://www.w3.org/TR/webstorage/

ᵒ

ン

ー

ン

利用可能

ー

ン

永続的

ー格納領域

• ー

ー

local storage)

-

ータ永続的に保存

-

ファイで保持する

cookie

に類似

• セ

ン

ー

session storage

-

ータ一時的に保存

-

で保持する

cookie

に類似

(12)

ᵒ

ン

5M

バ

推奨

容量を

Web Storage

5M

http://testsv1.com

https://tech-testsv1.com

(13)

• ン

URL

キー

ー

3 組合わせ

http://testsv1.com : 80

キー

ー番号

Web Storage

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

http://testsv1.com/dirb/appliance.html

同一

ン

認識

ᵒ

キーバ

ー型

ン

ー

5M

キー

バ

ー

name

セン

tel

0612345678

(14)

• Window

Storage

属性を参照

ᵒ

ー

• Storage

Window

localStorage

属性を

用い参照

ᵒ

セ

ン

ー

• Storage

Window

sessionStorage

属性を

用い参照

Web Storage

window.localStrage

(15)

• Web

ー

保存

• Web

ー

格納たー

参照

Web Storage

sessionStorage.setItem(key,value)

setItem(key,value)

Web

ー

保存

key

：キー

値文字列

value

：バュー

値文字列

sessionStorage.getItem(key)

getItem(key)

指定しキーバュー参照

戻値：キー対応す値

(16)

そ他記述方法

• _ー

_保存

• _ー

_参照

Web Storage

sessionStorage.key = value

sessionStorage[ key ] = value

(17)

• _バ

_{ー削除}

• _{ー内}

_{ーを}

_削除

Web Storage

sessionStorage.removeItem(key)

removeItem(key)

指定しキーバュー削除

key

：キー

値文字列

sessionStorage.clear()

clear()

(18)

• Web

ー

保存たー

個数を参照

• _{キーを参照}

Web Storage

sessionStorage.length

length

Web

ー

格納し

ー

個数参照

sessionStorage.key

index

key

index

(19)

• storage

ン

ᵒ

WebStorage

更新

Window

発生

ン

Web Storage

window.addEventListener

(“storage”,

StorageChange,false);

function StroageChange( e ){

**/* WebStorage**

更新

た際行う処理

*/

}

(20)

• JavaScript

JSON

ᵒ

JavaScript

JSON

変換

保存

ᵒ

JavaScript

→

JSON

Web Storage

"date":"2017-03-20",

"title

":“HTML5",

“memo”:“

試験対策

セ

ー

"

{

"date":"2017-03-20",

"title":"HTML5",

"memo":"

試験対策セ

ー

"

}

JavaScript

ク

JSON

JSON.stringify(JavaScript

ク

JSON.stringify

JSON.parse

JSON

JavaScript ObjectNotation

(21)

練習問題

WebStorage

説明

誤

い

を

選び

い

A. sessionStorage

保存たー

を閉

消え

B. キーバ

ー型

ー形式保存

ン

を活用高速

検索可能

C. http://www.testsv1.com:80

http://www.testsv1.com:1

異

領域

ー

保存

D. ー

上

を

Blob

扱う

E. localStorage

保存たー

を閉

消え

(22)

技術解説項目

2. 通信

・

Messaging

・

WebSocket

(23)

Messaging

• Messaging

2015/5/19

勧告

http://www.w3.org/TR/webmessaging/

ᵒ

ー上

ンコンキ

間通信

仕組

• ンコンキ

…

ン

や

等

• Messaging

を利用

処理

ᵒ

キ

ン

セーン

• 異

ン安全通信を

仕組

• ンー

iframe

間

ー

キ

ン

セーン

ᵒ

ネ

セーン

• ネを介たー

や取を行う仕組

ᵒ

ーバー

ン

• ーバー

通信を行う仕組

ᵒ

WebSocket

(24)

WebSocket

• WebSocket

W3C

http://www.w3.org/TR/websockets/

ᵒ

WebSocket

コを使用

ン

ーバー

ー

ン間双方向非同期通信を行う

ᵒ

WebSoekct

コ

IETF

(25)

WebSocket

• HTTP

通信

ᵒ

ン

1 ：

1

• WebSocket

通信

ᵒ

セ

ン確立後任意

ン

双方向通信可能

ク

ン

セッョン確立

書込

(26)

• WebSoket

通信流

WebSocket

ク

ン

ーバー

AP

WebSoket

ク生成

ーバー

ー送信

TCP

コネ

ン接続

open

ン発生

send

ソッ

(27)

WebSocket

• WebSocket

セ

ン確立

ᵒ

WebSocket

生成

ーバー

ー

ン

セ

ンを確立

• open

ン

ᵒ

接続完了た場合

WebSocket

open

ン

発生

var websocket = new WebSocket

(“

ws://www.testsv1.com:3000");

WebSocket("url",[protocols]);

WebSocket

ク

ン

ク

url

：ーバー

ケーョン

URL

一般的

キー

ws

wss

セキュ通信

protocol

：

配列

※

省略可

soketobj.onopen = function(){

/*

接続完了た際行う処理

*/

(28)

WebSocket

• _{セー送信}

websocket.send(data)

send.(data)

ッセー

送信

data

：送信ー

文字列

Blob

ArrayBuffer

ArrayBufferView

戻値：

true

‥‥

成功

(29)

• _{セー受信}

ᵒ

セー受信時

WebSocket

message

ン発生

ᵒ

受信ー

参照

websocket.onmessage = function( e ) {

alert(e.data);

(

略

)

};

WebSocket

MessageEvent

ク

書込

配信

message

_{ン発生}

message

ン発生

(30)

WebSocket

• _ーバー

_ー

_ン

_セ

_ン切断

• close

ン

ᵒ

ーバー

ー

ン

セ

ン切断完了た

発生

websocket.close()

close([code],[reason])

ーバー

ケーョン

接続閉塞

code

：切断ー

数値

※

省略可

reason

：切断理由文字列

※

省略可

(31)

WebSocket

• _ーバー

_ー

_ン

ᵒ

言語

Perl

• ーバー起動

Perl

ン

(32)

• ServerSentEvents

ᵒ

ン

ー

ン

ーバー

ー

ン

セーを受信

仕組

ᵒ

型

セー

ン

ー

を受信

ServerSentEvents

HTTP Request

HTTP Response

通知

ン発生

message

ン発生

ク

ン

ーバー

message

ン発生

event streams

通知

ン発生

event streams

Content-Type:text/event-stream

Transfer-Encoding:chunked

(33)

• _ン

_ー

ᵒ

ーバー

ー

ン

セー

文字列

ᵒ

ン

キ

ー

ᵒ

文字符号化方式

UTF

－８

MIME

text/event-stream

ᵒ

ン

ー形式

ᵒ

改行文字区切

先頭

ー

キ

ー

意味を表現

ServerSentEvents

ー

名

意味

event

ン

指定

data

ッセー

ー

id

ン

ID

lastEventId

retry

ン

ー再試行時間

秒

(34)

• _ン

_{ー例}

ServerSentEvents

data:

seman

id:name

空行

data: Osaka

id:address

空行

data: [email protected]

id:mail

・つ

ン

ー

・

id

つ

ン

ー

(35)

• ServerSentEvents

利用

ᵒ

ServerSentEvents

を利用

た

EventSource

生成を行う

• open

ン

ᵒ

ーバー

ー

ン

接続完了た場合

EventSource

Open

ン

発生

ServerSentEvents

var es = new EventSource

(“http://www.testsv1.com/

event.cgi

”)

EventSource(url)

EventSource

ク

ン

ク

url

：

ーバー

ケーョン

URL

es.onopen = function(e){

/*

接続完了た際行う処理

*/

(36)

• message

ン

ᵒ

ン

ー受信時

EventSource

message

ン

発生

ᵒ

受信ー

参照

ServerSentEvents

es.onmessage = function( e ){

alert(e.data);

(

略

)

}

(37)

練習問題

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

(38)

技術解説項目

.

セキ

(39)

ン制約

CORS

• _ン制約

ᵒ

セキ

上理由

そ

HTML

保存

い

ン

ー

や取

出来い制約

ᵒ

別

ン

キ

ン間通信を禁止

ンを防

HTML

Web

AP

HTML

Web

AP

www.testsv1.com

(40)

• _代表的

_ン制約

ᵒ

XMLHttpRequest

ᵒ

Canvas

ᵒ

別

origin

あ

iframe

や

window

対

操作

• ン制約回避策

ᵒ

CORS

ᵒ

Messaging

ᵒ

JSONP

(41)

• 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 | *

-

ソー

セ

い

ンを指定

-

＊を指定た場合

ン

ソー

セを許可

(42)

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

HTML5

認定試験

2

無料技術セ

ー

2017

年

3

月

株式会社

・ ー・ ー

会社概要

株式会社

シ

シ

http://www.kcc.co.jp/

カ

タ

IT

研修専用サ

ト

http://www.kcc-itlearning.com/

講師紹介

西日本

ンタ

ット

IT

ン

ンタ

所属

Linux

ネットワ

キ

テ

関連

HTML5 JavaScript

の

Web

技術

ン

•

HTML5

認定資格

2

試験概要

•

技術解説項目

1.

ー

・

WebStorage

2.

通信

・

Messaging

・

WebSocket

・

Server-Sent Events

3.

セキ

HTML5

認定

資格

2

HTML5

認定資格 種類

バ

対応 た静的

Web

コン ン を

HTML5

を使

ン・作成

間連携や最新

術 対応 た

資格体系

HTML5

ッ ョ

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

・ー・ー

_{技術解説項目}

認定資格種類

対応た静的

コンンを

術対応た

ッョ

ッョ

ンケー等時間含

試験合格し

ンケー等時間含

試験合格

認定有意性期限：

認定証明

認定証・認定ー

しいす

傾向対策