LPI-Japan主催

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

2017年8月

NTTテクノクロス株式会社
鈴木雅貴

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

自己紹介• 鈴木雅貴（すずきまさたか）
ᵒ NTTテクノクロス株式会社
ᵒ レベル1認定取得• レベル1試験対策本執筆• 弊社技術ブログでVR記事連載

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Ver2.0対応版の対策本が出ました

HTML5プロフェッショナル認定試験 レベル1
対策テキスト&問題集

著者の1人です

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation本日お話すること• 試験範囲の確認• JavaScript API概要• 各種APIを試してみよう
ᵒ マルチメディアグラフィックスAPI（Video, Canvas）
ᵒ デバイスアクセスAPI（Geolocaiton）

ᵒ オフラインストレージAPI（Web Storage）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

試験範囲の確認

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation試験範囲

• JavaScript APIは対象だが、JavaScriptのプログラミングは対象外• APIで何ができるかが問われる• 今回はプログラミングの解説なので対象外
だが、中身がある程度わかると、APIでできることがイメージしやすくなる（と思っていますので、その助けになるような内容としています）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

JavaScript API概要
何をするものかを理解しよう

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

JavaScriptとは• Webページの構成物（要素やスタイル）を操作できるプログラミング言語
ᵒ 主にWebブラウザ上で動作する• ECMAScriptとして仕様化されている実装の総称をJavaScriptと呼ぶ• ES5やES6などはECMAScriptの略+バージ
ョン番号

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross CorporationよくあるJavaScriptの用途• フォーム入力内容チェック• グラフ表示• ボタンクリックで新しい要素追加・削除• 再読込なしでページ内容更新• アニメーション表示

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

ページ内でのJavaScript使用方法（1）• script要素の内容として記述する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

ページ内でのJavaScript使用方法（2）• script要素のsrc属性で外部スクリプトファイルを指定して読み込む

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

APIとは• Application Programming Interfaceの略• アプリケーションを作るにあたり、対象のさまざまな機能を利用するが、それらを楽に利用できるように用意されたもの

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

JavaScript APIとは• Webブラウザの要素やスタイルの操作をJa
vaScriptから簡潔に利用できるよう、Webブラウザ上に用意されたもの• 現在は、要素やスタイルの操作にとどまらず、マルチメディアコンテンツの操作、デバイスへのアクセス、通信、オフライン時のストレージ操作といった機能およびAPIがWebブラウザに実装されている
ᵒ ので、いきなり使うことができる
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

本日の説明環境• CodePenを使用
ᵒ Webブラウザ上でHTML/CSS/JavaScriptを書いて確かめることができる
ᵒ 右上の[Create]→[New Pen]で新規作成
ᵒ あとは書くだけで結果が表示されていく
ᵒ 勉強の際のちょっとした確認に便利

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Videovideo要素を操作

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

video要素の操作• video要素で動画を再生可能• そのまま再生するだけなら、ブラウザの組み込みプレイヤーから操作する• JavaScript APIを使えば、組み込みプレイヤー以外から制御可能• 動画の再生状況(どこまで再生したかなど)も取得可能
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

デモ• https://codepen.io/suzukima/pen/qmzRby• [再生]ボタンで再生、[停止]ボタンで停止

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

HTML

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation変数• "var 変数名"で変数宣言• 変数として宣言したものは、あとから利用可能

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

要素の取得• 制御する要素を取得するAPIを使用• "document.querySelector(セレクタ)"でセレクタを使った要素取得が可能

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

イベント制御• イベント制御のAPIを使用• "取得した要素.addEventListener()"で、取得した要素に指定したイベントが発生した際に実行する内容を指定できるThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation代表的イベント
イベント名

概要

click

クリックされたとき

mouseenter

マウスカーソルが要素に重なったとき

mouseleave

マウスカーソルが要素から離れたとき

focus

要素がフォーカスされたとき

keydown

キーが押されたとき

keyup

キーが離されたとき

changeinput等の値が変更されたとき

DOMContentLoaded

HTMLの読み込みと解析が終わったとき

load

画像等の読み込みが完全に終わったとき

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

video要素の制御• 取得したvideo要素を使い、APIで制御

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

video要素の制御について• 以下が参考になります• HTML5 の audio 要素と video 要素の使用- HTML | MDN• HTMLMediaElement - Web API インターフェイス | MDN

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Geolocation
位置情報の利用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Geolocation API• Webブラウザから位置情報を利用可能• 近くの店舗を表示したり、現在の位置を情報をとして提示するようなサービスを実現することができる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

デモ• https://codepen.io/suzukima/pen/vmqmyd

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

HTML• "onclick=関数"で、クリックされたときに実行する関数を指定• この場合は、クリックでgeoDisp()が実行される• "id="out""は表示結果出力場所

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

要素の取得（2）• "document.getElementById(ID名)"で、指定したID名の要素を取得

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

テキストの書き換え• "取得した要素.innerHTML=表示内容"で、取得した要素の表示を、指定した表示内容のものに書き換えることができる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

位置情報の取得（1）• APIの"navigator.geolocation.getCurrentPosition(success, error)"で、位置情報を取得し、成功したらsuccessの処理、失敗したらerror の処理を実行させることができる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

位置情報の取得（2）• 成功時に実施する処理の中で、緯度や経度などの情報を取得して利用可能

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

要素の生成と追加• "new Image()"でimg要素を作る• 作った要素のsrc属性を指定して画像を読み込むようにする• 作った要素は"取得要素.appendChild(作った要素)"でHTMLに追加

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Geolocation APIについて• 以下が参考になりますᵒ Geolocation の利用 - Web API インターフェイス | MDNThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Web Storage
ブラウザにデータを保存し利用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Web Storage API• ブラウザにデータを保存し、利用することができるAPI• データはキーと値のペアで保存される
ᵒ 例えばキーが"名前"で、値が"鈴木雅貴"• かんたんな設定の保存などに使われる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

デモ• https://codepen.io/suzukima/pen/QvXvZw• 指定した色が背景色になる• 再読込しても背景色が保存されている

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

HTML

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

要素の取得（３）• "document.getElementsByTagName(要素名)"で指定した要素を取得• 複数取得するので、その1つ目という意味
で後ろに[0]をつける

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

ストレージの宣言• 2種類あるストレージのうち、どちらを使うかを指定して宣言
ᵒ localStorageはブラウザを閉じて開いてもデータが残っている

ᵒ sessionStorageはブラウザを開いている間に限りデータが残っている(再読込を含む)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

ストレージにデータを格納• "ストレージ.setItem(キー, 値)"で、ストレージに値を保存することができる• 今回はキーをbgcolorとしている

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

フォームの値を利用• "指定したフォーム入力要素要素.value"で、フォームに入力された値を取得できる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation条件文（特定の状態で実施する処理）• "if(条件) { 特定の処理 }"で、条件どおりのときに特定の処理が実施される

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

ストレージからデータを取得• "ストレージ.getItem(キー)"で、キーに対応する値を取得することができる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

スタイルの変更• "取得した要素.style.プロパティ名"に値を指定することで、指定したプロパティの値を変更することができる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/Copyright© 2017 NTT TechnoCross Corporation

フォームの値を変更• "指定した要素.value"に値を指定すること
で、フォームの値を外から変更可能

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Web Storageについて• 以下が参考になります
ᵒ https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Canvas
ビットマップ画像の操作

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Canvas• canvas要素を対象に、JavaScriptで図形などを描画• 画像はビットマップ形式• アニメーション、グラフ描画、写真編集、動画のリアルタイム加工などに使われる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

デモ• https://codepen.io/suzukima/pen/owxNMg• 線を引くだけThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

HTML

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

51

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

描画可能な領域を作成• "取得したcanvas要素.getContext('2d')"で、描画可能な領域（描画コンテキスト）を作成できる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

52

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

パスの新規作成• "コンテキスト.beginPath()"でパスを初期化し、新規作成

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

53

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

パスで描画• "コンテキスト.moveTo(座標)"で、指定した座標へパスを移動
ᵒ 座標はコンテキストの左上を(0,0)とする• "コンテキスト.lineTo(座標)"で、現座標から指定した座標へ移動しつつパスを引く

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

54

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

パスを閉じ、描画• "コンテキスト.closePath()"で現在のパスを閉じる• "コンテキスト.stroke()"で現パスを描画

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

55

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Canvasについて• 以下が参考になります
ᵒ https://developer.mozilla.org/ja/docs/Web/Guide/HT
ML/Canvas_tutorial

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

56

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

勉強方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

57

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

できれば触ってみましょう• level1はプログラミングが対象外ですが、読んだだけではイメージがわきづらい• CodePenのような手軽に試せる環境があるので、それを利用して少しでも試してみるのがおすすめ
ᵒ そのほうが技術者としての力もつく• Mozilla Developer Network は日本語も多く情報源として優秀
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

58

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

試験に向けての心がけ的なこと• 7割できればよい• 全部覚えようとして焦るくらいなら、よく使いそうなところに絞って時間をかける
ᵒ 時間があればその他を浅く• 試験本番でわからないことがあっても焦らずに先へ進む• 7割できればよい
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

59

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

60

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Copyright© 2017 NTT TechnoCross Corporation