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 / EDUCO 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/

1© LPI-Japan / EDUCO all rights reserved.

• gk•CaiO eRH.232c2

3 3.2

1522

222ETWLSMWHb
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

2© LPI-Japan / EDUCO all rights reserved.

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

MHTML5HMb5Le

W

THMT5b

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

4© LPI-Japan / EDUCO all rights reserved.

 ,44414L

¥5L,

LVL4,


55CTH

2 5BU
M9054
¥54 6414,E,
CT HLL
4LVVC2BU
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

5© LPI-Japan / EDUCO all rights reserved.






22The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

6© LPI-Japan / EDUCO all rights reserved.

HTML5•04tCeg

ᵒᵒᵒ•ᵒᵒᵒ t••gis oa9mC2dtt

prCagio0T4ungi

B5tt

9

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7© LPI-Japan / EDUCO 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 / EDUCO all rights reserved.

e•ᵒbMLgni•ᵒ•ᵒs)

Mg

Lctx

HTag HolsbgS Tag

PdMdDrL WSPgdIAFsThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9© LPI-Japan / EDUCO all rights reserved.

/41• /416ᵒoge: 0 4: 0 4d42:93 3:Rpn.

T d:941 : 0 4
hl()
SiEd

• cab:20: 0 4-   -   • W T db4-   -  :9: 0 4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10© LPI-Japan / EDUCO all rights reserved.

ᵒ5WebStorage
5M

https://tech-testsv1.com

5M
http://testsv1.com

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

11© LPI-Japan / EDUCO all rights reserved.

.
•

/.

W:L0 3L.

UU:SL:

1SLb

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

Wa

http://testsv1.com/dirb/appliance.html
ᵒ8WRLW

5M
    The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

12© LPI-Japan / EDUCO all rights reserved.

•ᵒ•window.localStrageᵒ•window.sessionStrage
SW

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13© LPI-Japan / EDUCO all rights reserved.

•sessionStorage.setItem(key,value)
setItem(key,value)Webkey )($'+($'+value

•sessionStorage.getItem(key)getItem(key)# %,*(!"key

&#

(WebStoragenull*($'+The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

14© LPI-Japan / EDUCO all rights reserved.

•sessionStorage.key = value
sessionStorage[ key ] = value•
sessionStorage.key
sessionStorage[ key ]The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

15© LPI-Japan / EDUCO all rights reserved.

•sessionStorage.removeItem(key)removeItem(key)!

key 

"•sessionStorage.clear()clear()
Web

!

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

16© LPI-Japan / EDUCO all rights reserved.

•sessionStorage.length
lengthWeb

"•sessionStorage.key index
keyindexindex" !

index #The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

17© LPI-Japan / EDUCO all rights reserved.

•ᵒwindow.addEventListener(“storage”,StorageChange,false);function StroageChange( e ){/* WebStorageStorageEvent
*/}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

18© LPI-Japan / EDUCO all rights reserved.

•ᵒJavaScript"date":"2017-03-20","title":“HTML5",“memo”:“#%
"JSONJSON.stringify
JSON.parseᵒJSON.stringify(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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

19© LPI-Japan / EDUCO all rights reserved.

//: 8 0/: 8 0//mhnl

1::.

S

: 8 0/ v
Cptv:/ :ocgr: 8 0/ v

Cvi.

WoaB

W

e

1::cw

:/ :bm ags.
AE CD

B

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

20© LPI-Japan / EDUCO all rights reserved.

2.

-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 / EDUCO all rights reserved.

/:: 13 1/:: 13 12•ᵒ hS• hS91

WhS/ 5/:: 13 1WbbSeSh/:: 13 1

•tᵒe

•

Tr• mRkma
309 5/

ofsmaᵒofs•gᵒg/• rnWceMpmmaWWcia•ᵒpmw

pRia pw. /w
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

22© LPI-Japan / EDUCO all rights reserved.

/.4//.4/ᵒ/.4/Tᵒ//4.

T
5: 3/•C/ : .4/ :WSESFE65

FRI.

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

•ᵒ•



1ᵒ

H

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

• ! 
 APTCP$
WebSoketopen 
send
!
message
close

  

 #
TCP



#"The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/25© LPI-Japan / EDUCO all rights reserved.

•ᵒvar websocket = new WebSocket(“ws://www.testsv1.com:3000");
WebSocket("url",[protocols]);
WebSocketurl#!& URL'.(protocol%$•&"wswss)*-/ +0,ᵒ S
soketobj.onopen = function(){/* S*/}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/26© LPI-Japan / EDUCO all rights reserved.

•websocket.send(data)
send.(data) data  BlobArrayBufferArrayBufferViewtrue  falseThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

27© LPI-Japan / EDUCO all rights reserved.

 • $#ᵒ $#"ᵒ $#%'  



!

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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/28© LPI-Japan / EDUCO all rights reserved.

•

!



"

"(*websocket.close()close([code],[reason]) code"#

reason 

• "ᵒ 

!





"

websocket.onclose=function(e){/* +'(*#}

!
!

"(*,-$%)& */The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/29© LPI-Japan / EDUCO all rights reserved.

 •• 





perl ᵒ   daemon

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

•ᵒEᵒ



HTTP Response message

message

message

message

HTTP Request
HTTP Response
event streams
event streams
event streams
event streams

Content-Type:text/event-stream
Transfer-Encoding:chunked













The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

31© LPI-Japan / EDUCO all rights reserved.

/•ᵒᵒᵒᵒᵒUTTU/nFTMEeventdataMIT

"S-/SE





eamam





!

id

IDlastEventId

retry

#$%
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

32© LPI-Japan / EDUCO all rights reserved.

•

data: seman

id:name
data: Osakaid:address
id


data: seman@test.com
id:mail

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

•OᵒOvar es = new EventSource(“http://www.testsv1.com/event.cgi”)
EventSource(url)EventSource
url •ᵒ  

URLEEes.onopen = function(e){/*S*/}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

34© LPI-Japan / EDUCO all rights reserved.

•ᵒᵒes.onmessage = function( e ){alert(e.data);
MessageEvent
(E)}

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

35© LPI-Japan / EDUCO all rights reserved.

SREP

T

H

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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

36© LPI-Japan / EDUCO 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 / EDUCO all rights reserved.

O•

Oᵒ CᵒM
M

LMM

HL

R

M
S TO

M
www.testsv1.com

www.testsv1.com

HTML

HTML
www.testsv2.com

WebAPWebAPThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/38© LPI-Japan / EDUCO all rights reserved.

JRN•

LSPJLSPᵒᵒᵒ•

JHCJLSPCMCXOᵒᵒᵒ

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

ad-/0AA•
ᵒᵒick

CCC C

1/ 3ickwuTraedhickp• *33
A*- a d ickr
An H-   • *33- if-S -/0dAOtCl* C aedORnP R4A211.

PA
11.
:

ickick ifos62
:

|iadg

daed

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

40© LPI-Japan / EDUCO 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/

41© LPI-Japan / EDUCO all rights reserved.