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

2019年8月

株式会社クリーク・アンド・リバー認定講師
高井 歩

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.

本日の内容試験の概要と勉強方法
1.5 APIの基礎知識 (知識問題・記述問題)
1.5.1 マルチメディア・グラフィックス系API概要
1.5.2 デバイスアクセス系API概要
1.5.3 オフライン・ストレージ系API概要
1.5.4 通信系API概要
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.

HTML5プロフェッショナル認定資格とは•次世代のWebプロフェッショナルのスキルの向上に貢献するために、 HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッショナルを中立的な立場で公平かつ厳正に認定する資格制度です。

•

Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、サーバーサイ
ドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプ
ロフェッショナルが対象です。

•

多くの企業が推進する次世代Web言語の認定資格として、HTML5のプロフェッ
ショナルのスキルの向上に役立ちます。また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できす。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!3© LPI-Japan / EDUCO all rights reserved.

二つのレベル
対象

Webデザイナー

グラフィックフロントエンド

デザイナー

プログラマー

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

HTMLコーダー

Webディレクター

スマートフォン

サーバーサイド

アプリ開発者

エンジニア

Webシステム
開発者

対象

フロントエンド

Webデザイナー

プログラマー

最新のAPIを駆使したWebアプリケーションを設計・開発できる。

HTMLコーダー

Webディレクター

スマートフォン

サーバーサイド

アプリ開発者

エンジニア

Webシステム
開発者

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.

レベル1とレベル2の資格体系
HTML/HTML5マークアップ

Javascriptプログラミング

HTML5に関するタグの用途、構造の組み立

Javascriptを使って、動的なWebコンテンて方に関する技術

ツを作成する技術

グラフィックスマルチメディア

JavascriptやCSSなどを用いて、動的にグラ

３D・動画・音声ファイルなどのマルチメ

フィックスを生成したりアニメーションを実現したりする技術

ディアコンテンツの表示・再生に関する技
術

レスポンシブWebデザイン

ユーザビリティ

一つのソースで、スマートフォンなどのJavaScriptやCSSなどを用いて、デザイン

様々なデバイスの画面サイズに対応させる
ための技術

仕様に沿った見やすい表示や操作しやすい
コンテンツを作成するための技術

通信・デバイスアクセス系API

パフォーマンス

JavaScriptからクラウドと通信をして情報の送受信を行ったり、センサーなどのデバ

ストレージや並列処理を使ってコンテンツを効率良く高速に動作させたり、オフライ

イスにアクセスしたりする技術

ンでも動作する仕組みを作るための技術

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.

レベル1とレベル2の資格体系
ベーシックレベルHTML5プロフェッショナル向け

認定名： HTML5 Level1 (Markup Professional)
試験名： HTML5 Level1 Exam

所要時間：90分

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。

試験問題数：約60問"HTML5を使ってWebコンテンツを作成することができる。

受験料：￥15,000 （税別）

"ユーザー体験を考慮したWEBコンテンツを設計・作成することができる。

認定条件： HTML5 レベル1試験に合格すること"スマートフォンや組み込み機器など、ブラウザが利用可能な様々なデバイスに対応したコンテンツを制作できる。

認定の有意性の期限：5年間"HTML5で何ができるか、どういった技術を使うべきかの広範囲の基礎知識を有する。

アドバンストレベル
HTML5プロフェッショナル向け

認定名： HTML5 Level2 (Application Development Professional)
試験名： HTML5 Level2 Exam

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明
所要時間：90分
試験問題数：40〜45問
受験料：￥15,000(税別)
認定条件：HTML5 レベル2試験に合格し、かつ有意なできます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイスアプリケーションを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することがでる。

HTML5レベル1認定を保有していること。

"スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションに 近い機能を組み込ん認定の有意性の期限：5年間だ先端のWebアプリケーションを開発することができる。
"APIのセキュリティモデルを理解したうえで開発することができる。
The 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.

レベル1の出題構成(1)

主題
Webの基礎知識

CSS

要素

項目

重要度

HTTP,HTTPSプロトコル
HTMLの書式
Web関連技術の概要
スタイルシートの基本
CSSデザイン89679

カスケード(優先順位)

2

要素と属性の意味(セマンティクス)
メディア要素106

インタラクティブ要素

7
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の出題構成(2)主題
レスポンシブWebデザイン項目

重要度

マルチデバイス対応ページの作成
メディアクエリスマートフォンサイト最適化
マルチメディア・グラフィックス系
API概要

APIの基礎知識

45
35

デバイスアクセス系API概要

4

オフライン・ストレージ系API概要

8

通信系API概要

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

学習方法

• 参考書
• サンプル問題• 出題範囲を確認
ᵒ 説明できない用語が無いようにする
ᵒ HTML5では、似た用途で複数の機能、規格があるので整理する• 自分でサンプルを作って確かめる。
ᵒ Webブラウザ毎に動作が異なることがあるので注意
ᵒ Webサーバの有無で動作が異なることがあるので注意
The 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.

1.5.1 マルチメディア・グラフィックス系API概要• メディア関連要素• ビットマップグラフィックス• video要素 , audio要素• Canvas• ストリーミング• ベクターグラフィックス• HLS , MPEG-Dash ,Media Source Extensions• DRM• Encrypted Media Extends• SVG

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.

メディア関連要素• HTML5になって、Flashなどを使わずに映像や音声を再生できるようになった。

• 再生/停止などをJavaScriptから操作できる• コントローラの表示の有無などを要素の属性で指定可能• Webブラウザによって対応フォーマットが異なる
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.

video要素
ソースファイルがひとつだけの場合<video controls="controls" src="video/video.m4v"></video>
controls属性 再生ボタンなどの表示形式を指定

src属性 再生する映像ファイルを指定

Webブラウザによって再生可能なファイルが異なる場合
source要素を使用して、複数のファイルを列挙する。
上から順番にチェックして再生できるファイルを再生する。

<video controls="controls"><source src="video/video.webm" type="video/webm"><source src="video/audio.m4v" type="video/mp4"></video>
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.

audio要素
ソースファイルがひとつだけの場合<audio controls="controls" src="audio/audio.mp3"></audio>
controls属性 再生ボタンなどの表示形式を指定

src属性 再生する映像ファイルを指定

Webブラウザによって再生可能なファイルが異なる場合
source要素を使用して、複数のファイルを列挙する。
上から順番にチェックして再生できるファイルを再生する。

<audio controls="controls"><source src="audio/audio.mp3" type="audio/mpeg"><source src="audio/audio.aac" type="audio/aac"></audio>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.

ストリーミング• ファイル全体をダウンロードしてからではなく、ダウンロードできた部分を順に再生していく方式をスト
リーミング再生と言う• これまでは全てダウンロードしてから再生するか、Flash,Silverlightなどの拡張機能を使ってストリーミ
ング再生を行なう必要があった
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.

HLS• HTTPでのストリーミング方法はいくつかの会社が独自に開発したが互換性が無い• Appleの作ったHLS (HTTP Live Streaming)• Microsoftの作ったSS (Smooth Streaming)• Adobeの作ったHDS (HTTP Dynamic Streaming)• HLSはAppleが開発し、IETFで仕様策定されている
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.

MPEG-DASH• 動画配信プロトコルの国際標準規格として策定された
DASH(Dynamic Adaptive Streaming over HTTP)• 対応ブラウザが少ないため現状で実用は難しい• Microsoft, Netﬂix, Google, Ericsson, Samsung,
Adobe などが参加し、ISOで仕様策定
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.

Media Source Extensions• videoやaudio要素のsrc属性に、URLの替わりにJavaScriptのMediaSourceオブジェクトを使用• MSEを使うと全部のファイルが届かなくても再生を開始可能(src属性にURLを使うとダウンロード完了してからの再生になる)• 動画ファイル(WebM,MP4)や音声ファイルをストリーミング再生できるように保存形式を設定(セグメント化)する
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.

DRM• DRM(Digital Rights Management)は映像や音声に関する著作権保護のしくみ• DRM付きのコンテンツを正規ユーザーになりすまして再生できないようにする• データを暗号化して正規の鍵が無いと復号できないようにする
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.

Encrypted Media Extensions• HTML5でDRM(著作権管理)付きのコンテンツを再生するためにメディア要素を拡張する機能• ライセンス管理などの仕組みは含まないため、ライセン
ス管理はサーバ側で行なう必要がある• Microsoftによるサンプル(IE,Edgeのみ対応)• https://testdrive-archive.azurewebsites.net/HTML5/eme/
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.

ビットマップグラフィックス• 色の点のあつまりとして画像を扱う形式をビットマップという• HTML5では、ビットマップ画像をimg要素などで表示するだけでは無く、作成や加工などもWebページ上で実現できる(HTML5より前は、Flashなどを使用して実現)
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.

Canvas• ビットマップ画像を編集するにはcanvas要素を
JavaScriptでコントロールする• ピクセル単位での編集、図形の描画、画像ファイルの読
み込み、画像ファイルの作成などができる• 2次元画像のほか、WebGLによる3D表現にも使用される
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!21© LPI-Japan / EDUCO all rights reserved.

参考: Canvasの使用例<canvas id="cv" width="300" height="300"></canvas><script>// canvas要素とコンテキストの取得
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');// 色指定ctx.fillStyle = 'rgb(128,100,162)';// 図形の描画(円)ctx.beginPath(); // パスの開始
ctx.arc(70, 70, 60, 0, Math.PI*2, false); // 円弧
ctx.fill(); // 塗り潰し</script>
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.

ベクターグラフィックス• 色の点で構成されるビットマップと違い、構成する図形の座標などで表わされる画像形式• 拡大してもピクセルのジャギが見えにくい。

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.

SVG• SVGという形式のベクターグラフィックスを使用できる• SVGはXMLの書式で記述し、HTML内に直接SVGを記述することも、img要素のsrcで読み込むこともできる• CSSのbackground-imageに指定することも可能• JavaScriptからSVG画像を構成する要素を操作できる
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.

参考:SVGの使用例<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" ><circle cx="95" cy="95" r="90" opacity="1"fill-opacity="0" stroke="#1017f1" stroke-width="3"/><rect x="50" y="50" width="20" height="50" fill="#1d24f2"/><rect x="120" y="50" width="20" height="50" fill="#1d24f2"/><path d="M140 130C130 180 60 180 50 130"
fill-opacity="0" stroke="#1017f1" stroke-width="7" /></svg>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.

問題1

以下の関連する用語の組合せとして正しいものを選択しなさい。
A. ビットマップ: Canvas 、ベクターグラフィックス:SVG
B. Apple: MPEG-DASH 、Microsoft:HLS
C. 著作権保護: MSE 、ストリーミング:DRM
D. 映像: video要素、音声: sound要素

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.

1.5.2 デバイスアクセス系API概要• 位置情報• Geolocation API• 加速度センサー / ジャイロ
• DeviceOrientation Event , DeviceMotionEvent• 入力デバイス• Touch Events , Pointer Events
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.

位置情報(Geolocation API)•GPS(Global Positioning System)やWi-Fiなどを使用して現在位置を取得することができる•

現在地の緯度、経度や移動速度を取得できる•

プライバシー保護の観点から位置情報の取得にはユーザの承認が必要。
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.

GeoLocation API• GeoLocation APIを使用すると、JavaScriptで以下の情報を取得できる• 緯度 (北緯 0 〜 90、南緯 0 〜 90 / 赤道 0° から北極、南極 90° まで)• 経度 (東経 0 〜 180、西経 0 〜 180 / 旧グリニッジ天文台 0°から太平洋まで)• 緯度/経度の精度 (GPS搭載の有無などで精度が異なるため)• 高度と高度の精度 ( m )
• 方角
• 速度
• 一度だけ取得することも、継続して取得しつづけることもできる
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.

加速度センサー / ジャイロ
y

gamma
-z

-x

alpha

x

beta

ブラウザによって座標系が異なるので

z

注意
-y

加速度センサースマートフォンを動かした速度を取得

ジャイロ
スマートフォンを回転させた角度を取得
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.

Device Orientation Event• 加速度センサーやジャイロを使って Device Orientation Event
で デバイスの傾きを取得できる•Alpha,Beta,Gamma,(iOSでは方角も)を取得できる• 端末の位置や向きが変化したときにイベント発生• 端末の動きを知るなら、Device Motion Eventsを使用する• 加速度や回転速度を取得!31

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.

入力デバイス• キーボードやマウスなどに対応するイベントはDOM3
Events(UI Events)で扱う• スマートフォン向けに、マウスクリックではなくタッチによる操作を受けつける必要性が出てきた• マウスイベントではピンチなどのマルチタッチに対応できない
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.

Touch Events• スマートフォンやタブレットなどではTouch Eventsを使う• マウスとタッチでイベントを使い分ける• マウスは onclick 、onmousemove など• タッチは touchstart , touchmove など• タッチ操作にはホバー動作が無いのでUI設計で注意する
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.

Pointer Events• マウス、タッチ、ペン操作を統合的に扱うPointer Events• DOM3 Events,Touch Eventsで扱える情報を含む上にペンの傾きを取得することもできる• 一部のWebブラウザ(Safari,iOS系)では対応していないので注意
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.

問題2

以下の選択肢のうち内容の正しいものを選択しなさい。
A.Geolocation APIではGPSの電波が届かない場所では位置が取得できないB.Pointer Eventsを使うとペンの傾き情報が取得できる
C.DeviceOrientation Eventsでは加速度を取得する
D.UI EventsとTouch Eventsはマルチタッチに対応する
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.

1.5.3 オフライン・ストレージ系API概要• データストレージの仕組み•WebStorage , Indexed Database API• オフラインアプリケーション•Application Cache , Service Workers• バックグラウンド処理•Web Workers , Service Workers
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.

データストレージの仕組み• HTML5より前は、ユーザーデータを保存するためにはサーバが必要(もしくはCookieに4KB程度までのデータ保存)• HTML5では、Webブラウザにデータを保存するデータストレ
ージ機能が追加され、クライアント毎に異なる設定などを保存できるようになった• 単機能な Web Strage と高機能なIndexed Database API

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

Web Strage•

KVS(キーワードとデータを紐付ける)形式で、Webブラウザにデータを保存する•

ドメインに紐付いているため、他のドメインのWeb Storageは操作できない•

ローカルストレージとセッションストレージの2種類がある
The 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.

Indexed Database API•

高機能なデータベースとして使用できるIndexed
Database•

トランザクションやインデックス機能が使えるため、一般的なデータベースとしての利用ができる•

オフライン状態でもデータにアクセスできる
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.

オフラインアプリケーション• ネットワークに接続していない場合には、Webブラウザに保存していたデータを使ってWebページを表示できるようにする技術• ネイティブなスマートフォンアプリのようなものをWeb
技術を使って作成するときにも使用できる• Application CacheからService Workersに移行中
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.

Application Cache• キャッシュするファイルのリストを記述するマニフェス
トファイルと、HTMLへの設定が必要になる• マニフェストファイルには以下の項目を記述• CACHE: … キャッシュするファイルを列挙• NETWORK: … 必ずネットワークから取得するファイル• FALLBACK: … 取得に失敗に際に使用されるファイル• HTML5.1で仕様から削除(Service Workersに移行)
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.

Service Workers

WebサーバWebブラウザHTML
ドキュメントオンライン時ServiceWorker

オフライン時ローカルキャッシュ

ネットワークに接続していない場合は、ローカルにキャッシュしたファイルにアクセスを行なう代理サーバのような役割をする
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!42© LPI-Japan / EDUCO all rights reserved.

バックグラウンド処理

表示更新• 通常、JavaScriptでは一度にひと表示更新

つの処理しか行えない(シングルタ
表示更新

表示更新

スク)ため時間の掛る処理をする
時間の掛る
処理

表示更新

時間の掛る
処理

表示更新
表示更新

表示更新

表示更新

表示更新

と、画面表示やユーザ操作への対応が止まってしまう• Worker(Web Worker,Service
Worker)で並行処理することで複数の処理を同時に実行できる

シングルタスク

マルチタスクThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!43© LPI-Japan / EDUCO all rights reserved.

Web Workers• Web WorkersはJavaScriptの含まれているページが表示されている間、バックグラウンドでJavaScriptを実行できる• Web Workersの中からはDOM(HTML要素)を操作できな
い

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

Service Workers• Service Workersは処理の登録を行ない、ページが表示されていない状態でもバックグラウンドで実行される• ページが表示されていない状態でもサーバからの通知を受け取ったり、更新されたコンテンツやデータをサーバから取得できる• Service WorkerはセキュリティのためHTTPS通信でのみ動作• Service Workersの中からはDOM(HTML要素)を操作できない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!45© LPI-Japan / EDUCO all rights reserved.

問題3

以下の選択肢のうち内容の正しいものを選択しなさい。
A. Service WorkersはローカルPCにあるHTMLファイルを開いても使用できる
B. Web StorageはIndexed Databaseより高機能である
C. Application Cacheでは、キャッシュするファイルをマニフェストファイルに記述する
D. Web Worker でHTML要素を操作すると表示を高速化できる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!46© LPI-Japan / EDUCO all rights reserved.

1.5.4 通信系API概要• AJAX•XmlHttpRequest• 双方向データ リアルタイム通信•WebSocket , WebRTC• サーバープッシュ•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/!47© LPI-Japan / EDUCO all rights reserved.

AJAX• Asynchronous JavaScript And XML• 通常はWebページのリロードのタイミングでしかWeb
サーバと通信は行なえない(同期通信)• JavaScriptを使うと任意のタイミングでWebサーバと通信を行なえる(非同期通信)。

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

XmlHttpRequest• JavaScriptでXMLHttpRequestというオブジェクトを操作することで、AJAXを実現できる。

• 名前はXMLとついているが、XML以外のデータ形式も送受信できる• クライアント(Webブラウザ)からのリクエストが無いとサーバからデータを送ることはできない
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!49© 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/!50© LPI-Japan / EDUCO all rights reserved.

WebSocket API• HTTPはリクエスト/レスポンスで接続を毎回切断する
が、WebSocketは接続したまま双方向通信を行なえる• HTTPと同じポート番号80を標準で使用するが、WebサーバではなくWebSocket用のサーバが必要• バイナリデータを送受信できる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!51© LPI-Japan / EDUCO all rights reserved.

WebRTC• 映像や音声のやりとりに特化した、WebRTC(RealTime Communication)• Webブラウザ同士で通信(P2P)を行なうが、最初に相手と接続するためにシグナリングサーバを介する• テキストデータやバイナリデータの送受信もできる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!52© LPI-Japan / EDUCO all rights reserved.

サーバープッシュ• クライアント(Webブラウザ)からサーバに接続したあと、サーバ側から任意のタイミングでデータを送信できる• Service Workerと組み合わせることでPush通知を実現できる• サーバからクライアントへの単一方向通信
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!53© LPI-Japan / EDUCO all rights reserved.

Server-Sent Events• WebSocketと異なり既存のHTTPの枠組みの中で実装されている• 接続を維持するためサーバの負荷が高くなる可能性がある• IE,Edgeでの実装が遅れている
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!54© LPI-Japan / EDUCO all rights reserved.

問題4

以下の選択肢のうち内容の正しいものを選択しなさい。
A. XmlHttpRequestではXML形式のデータしか送受信できない
B. Server-Sent Eventsでは双方向のデータ送信ができる
C. WebSocketは既存のWebサーバを使って通信が行なえる
D. WebRTCの主な目的はリアルタイムコミュニケーションである
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!55© LPI-Japan / EDUCO all rights reserved.

本日の内容試験の概要と勉強方法
1.5.1 マルチメディア・グラフィックス系API概要
1.5.2 デバイスアクセス系API概要
1.5.3 オフライン・ストレージ系API概要
1.5.4 通信系API概要
問題の答え: 1. A

2. B 3. C 4. D

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

Open the Future with HTML5.

ご清聴ありがとうございました。
■お問い合わせ■株式会社 クリーク・アンド・リバー社
プロフェッショナルエデュケーションセンター[PEC]
E-mail ： pec@pr.cri.co.jp
http://www.c-place.ne.jp/

https://tlp.edulio.com/pec/seminars/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/!57© LPI-Japan / EDUCO all rights reserved.