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

2018年3月25日

株式会社富士通ラーニングメディア
抜山雄一 結城陽平

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

富士通ラーニングメディアのご紹介
1. 会社概要

設立

1977年6月30日

資本金3億円（全額 富士通株式会社）

売上高92億円（2016年度）

従業員432名（2017年3月末現在）

事業内容

人材育成・研修サービス（公開コース1,520コース、年間90,000名受講）
個人のお客様向けパソコン教室（富士通オープンカレッジ）

関係会社

株式会社富士通ラーニングメディア沖縄（研修サービス・研修サービスサポート）株式会社富士通ラーニングメディア・スタッフ（人材派遣）

出資会社

株式会社アクト・ブレーン・ベトナム（ソフトウェア開発など）

事業所
関連施設

東京・名古屋・大阪・沖縄に5拠点（約40教室、900名以上の定員数）

品川本社品川LC

名古屋事業所/LC 関西事業所/LC 沖縄事業所/LC

2. 富士通ラーニングメディアが目指すこと

ICT人材を支える人材育成のパートナーでありつづける 最高水準の『知』のサービスを提供することにより、お客様の真のパートナーを目指します。
 お客様の「成長のスパイラル」をサポートします。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

HTML5プロフェッショナル認定資格 レベル1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

目次 学習環境・各種ツールの紹介
・Visual Studio Code・ブラウザの開発者ツール
・推奨サイト 通信・グラフィックス系APIの紹介
・マルチメディア・グラフィックス系API概要
・通信系API概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

学習環境・各種ツールの紹介

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Visual Studio CodeVisual Studio Code<<https://code.visualstudio.com/>>
軽量で高機能なテキストエディタ。
拡張機能を追加すれば自分の好みにカスタマイズできるよ。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Visual Studio Codeの機能 インテリセンスによるタイプミス撲滅
入力補完機能によって、打ち間違いを防止。
表示される候補を選択するだけです。

 定形コードを簡単に挿入可能

長いソースコードも簡単に書けます。
同じタブを何度も書かずに済みます。
※細かい使い方はチートシート(https://docs.emmet.io/cheat-sheet/)で!

 拡張機能でより使いやすく機能が足りないなら、追加しましょう。
Windows、Linux、Mac OS Xで動作するよ。
複数言語に対応しているので、HTML/CSS/JavaScriptに学習に使えるよ！
上記以外にも便利な機能がたくさん使えるんだ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

オススメの拡張機能
 Beautify

ソースコードを自動で整形してくれる HTML Hint

HTMLの静的解析ツール

 Can I use

ブラウザごとの対応状況を調査してくれる Preview on Web Server

Webサーバを用いたライブプレビュー

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

ブラウザの開発者ツールFirefox<<https://www.mozilla.org/ja/firefox/>>最近のアップデートで高速化したよ。
開発者向けの機能が日本語で使えるのが便利！
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

開発者ツールの機能 インスペクター

閲覧しているWebページの文書構造（HTML）、デザイン(CSS)の確認・編集ができます。

 コンソール

エラー等のメッセージが表示されます。
メッセージの詳細へのリンクも用意されている。

 ネットワーク

HTTPステータスコードやリクエスト・レスポンスヘッダ等、ブラウザ/サーバ間の通信情報を調査できます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Mozilla Developer Network

Mozilla Developer Network<<https://developer.mozilla.org/ja/>>
Web標準技術に関する情報が充実しているよ。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Can I use

Can I use<<http://caniuse.com/>>
ブラウザごとの対応状況を公開しているサイトだよ。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

HTML教科書 HTML5プロフェッショナル認定試験
レベル1 スピードマスター問題集 Ver2.0対応

特別出張販売中です！！

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

通信・グラフィックス系APIの紹介

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

サンプルコード

サンプルコードは以下のリポジトリに格納しています。
クロスブラウザ対策などを行っていないため、環境によっては動作しません。ご了承ください。
<<goo.gl/E4Gf38 >>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

1.5.1 マルチメディア・グラフィックス系API概要

1.5.1 マルチメディア・グラフィックス系API概要
重要度★★★★★ 5出題種別• 知識問題• 記述問題説明（望まれるスキル）• ビデオやオーディオを適切にWebコンテンツとして活用するための基礎知識を有し、具体的に何ができるのかを理解している。
• 静的・動的を問わず、適切なグラフィックスを扱うための基礎知識を有し、適切な技術を選択できる。
• ビデオとグラフィックスを組み合わせて何ができるのかを理解している。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

CanvasとSVGの特徴
Canvasの特徴



SVGの特徴JavaScriptを使ってブラウザ上に図を描画する機能です。ビットマップ形式で描画を行うためDOMツリーは構成しませんが、JavaScriptからCanvas上のピクセル情報を操作できます。アニメーション描画のメソッドは存在しませんが、静止画の描画を繰り返すことでアニメーションを実現できます。また、ブラウザに対応した画像ファイルをCanvasに読み込み、加工し、画像ファイルとして書き出すことも可能です。

Webで利用できるベクター形式の画像データであり、実態はXMLに基づいたマークアップ言語です。SVGの画像は計算式で表現されるため、画像を拡大しても画像の劣化が発生しにくいという特徴があります。また、SVGで描画された図形はDOMツリーを構成するため、一度描画した図形をJavaScriptから操作することが可能です。

※ SVG生成ツールとして、vectr <<https://vectr.com/>>などがあります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

CanvasとSVGのソースコード（部分） Canvas

1. this.context = canvas.getContext('2d');
2. this.context.beginPath();
3.
4. this.context.lineTo(x, y);
5. this.context.stroke(); SVG

1. <?xml version="1.0" encoding="UTF-8"
standalone="no"?>2. <!DOCTYPE svg PUBLIC …>
3. <svg version="1.1" …>
4. <defs>
5. …
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

MPEG-DASHの特徴
Media Source Extensions(MSE)による動画配信Encrypted Media Extensions（EME）

MSEとは、HLSやMPEG-DASHをサポートする技術であり、Video要素などをプラグインなしでストリーミング再生可能にします。MSEは、あらかじめ短い時間に区切られたメディアデータを扱うため、動画の合間に広告やその他のコンテンツを挿入したり、コンテンツの途中から再生を開始したりできます。また、ネットワーク帯域幅やCPU使用率に基づいてストリーミングのビットレートを変更することもできます。

なお、MSEには著作権管理の技術（DRM）の仕組みがないため、不正にコンテンツをコピー・再配布される危険性があります。これらの危険性を低減するには、暗号化の機能を用いてコンテンツを保護できるEncrypted Media Extensions（EME）を使用します。

※ クライアントサイドの実装だけではなく、動画配信のサーバが必要になります。
クラウドサービスなどを利用すれば、比較的手軽に動画配信サーバを構築できます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

MPEG-DASHを使用したソースコード
 HTML

1. <main class="col-sm-12">
2. <video width="600px" autoplay controls
id="videoplayer"></video>
3. </main> JavaScript

1. var url = "url";
2. var player = dashjs.MediaPlayer().create();3. player.initialize(document.querySelector("#videoplayer"), url);※ Dash.jsライブラリを使用しているため、W3C標準のJavaScriptのコードではありません。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

1.5.4 通信系API概要

1.5.4 通信系API概要
重要度★★★★ 4出題種別• 知識問題• 記述問題説明（望まれるスキル）• JavaScriptからさまざまな通信プロトコルを使ってクラウドと通信する仕組みと特性を理解し、利用シーンに応じて適切なAPI選択ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

通信系APIの比較

Server-Sent Events

WebSocket

XMLHttpRequest

通信プロトコルHTTP

WebSocket Protocol

HTTP

SDPなど

非同期通信

○○○

○

常時接続

△○

△

○
○

オーディオ/ビデオなどを送受信できるP2P通信。オンライン会議システムなどの実装に向いている。

双方向通信

×○△（リクエストやレスポンス時にサーバ間とデータを送受信する）

特徴

Webサーバから一方的にデータを送信する。データ送信が不要ならば
XMLHttpRequestによるロングポーリングよりも通信効率が高い。

双方向の常時接続が可能。
複数クライアントとの通信も可能。そのため、チャット機能などの実装に向いている。

最も古くから実装されている通信系API。そのため、多くのブラウザに実装されており、互換性が高い。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

WebRTC

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

WebSocketの特徴
双方向通信を実装できる



WebSocketサーバを使用するクライアントとWebSocketサーバ間で接続を維持した双方向通信を実装できます。
XMLHttpRequestやServer-Sent Eventsなど、一回の通信ごとにリクエストとレスポンスを行うHTTPベースの通信と比較して、常時接続して双方向通信を行うWebSocketは、送受信処理の効率が高いです。

通信方式としてHTTPではなくWebSocket Protocolを使用します。そのため、サーバ側はWebSocket Protocolに対応したWebSocketサーバを使用する必要があり、WebSocketに対応していない従来のWebサーバは使用できません。
WebSocket による双方向通信
サーバサイドのプログラム
ビジネスロジックWebSocketブラウザ

データ受信時にイベント処理
でデータ取得

データアクセスDB

プレゼンテーション

WebSocket サーバ/Web サーバ
WebSocket サーバ、またはWebSocket に対応した Web サーバ

クライアントサイドサーバサイド

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

WebSocketのソースコード
1. // WebSocketの生成
2. var ws = new WebSocket("ws://localhost:8000/broadcast");3.
4. // WebSocket接続イベント
5. ws.onopen = function () {6. console.log("接続が開きました");
7. };8.
9. // WebSocketメッセージイベント
10.ws.onmessage = function (e) {11. var data = JSON.parse(e.data);
12.};
13.
14.// WebSocket切断イベント
15.ws.onclose = function () {16. console.log("切断しました");
17.};
18.
19.// メッセージ送信
20.ws.send(data);
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Server-Sent Eventsの特徴


プッシュ通知に特化している

効率的なデータ送信ができる

Webサーバを使用できる

JavaScriptを使用してプッシュ通知を実装できます（text/event-stream）。
XMLHttpRequestを使用と比べて、簡単にプッシュ通知を実装できます。ただし、クライアントからWebサーバにデータを送信できません。

Server-Sent Eventsのプッシュ通知はヘッダーに含まれる送信情報が少ないです。そのため、Long Pollingによるプッシュ通知よりも効率的なデータ送信ができます。

プッシュ通知はWebサーバを使用して実装できます。そのため、サーバサイドでは従来のWebアプリケーションと同じ技術で実装できます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Server-Sent Eventsのソースコード

1. // EventSourceの生成
2. var source = new EventSource('/events');
3. // EventSourceのメッセージイベント
4. source.onmessage = function (e) {5.
var p = document.createElement("p");6.
p.innerText = e.data;
7.
document.getElementById("messageBody").appendChild(p);8. };The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

XMLHttpRequestの特徴
非同期通信

通信系APIで最もブラウザ実装が進んでいる

Ajaxを実装できます。Ajaxでは、非同期で通信し、リクエスト後、Webサーバからレスポンスでデータが渡されるまでの間、他の処理を実行できます。Webサーバからのレスポンス後に、コールバック関数を呼び出すことで、Web ページの一部を更新できます。

XMLHttpRequestは、JavaScriptの通信系APIの中では、最も古いものの1つです。そのため、最もブラウザ実装が進んでいます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

XMLHttpRequestのソースコード

1. var client = new XMLHttpRequest();2. client.onload = function () {3.
if (this.readyState === 4) {4.
if (this.status === 200) {5.
document.getElementById("result").innerText =this.responseText;
6.
}
7.
}
8. };
9. // メッセージ送信
10. client.open("GET", "http://localhost:8000/factorial/"+ number);
11. client.send();

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

WebRTCの特徴
P2P通信

動画やオーディオを用いた通信ができる

WebSocketやXMLHttpRequestなどを用いた通信は、クライアント/サーバ間で通信が行われます。一方、WebRTCではクライアント同士（P2P）での通信を実現できます。
なお、NAT内のクライアントと通信するには、ICEサーバなどが必要になります。

WebRTCでは動画やオーディオをもいいた通信を実現できます。そのため、オンライン会議システムなどを作成できます。

クライアントサイド

クライアントサイド
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

WebRTCのソースコード

1. var webrtc = new SimpleWebRTC({
2.
localVideoEl: 'localVideo',
3. remoteVideosEl: 'remotesVideos',4.
autoRequestMedia: true,5.
debug: true6. });
7.
8. webrtc.on('readyToCall', function () {9.
webrtc.joinRoom('myroom');10.});※ SimpleWebRTCライブラリを使用しているため、W3C標準のJavaScriptのコードではありません。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.

32

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2018. All rights reserved.