LPI-Japan主催

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

2017年6月

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本日お話すること• JavaScript概要• 各種APIを試してみよう
ᵒ マルチメディアグラフィックスAPI（Video、Canvas）

ᵒ デバイスアクセスAPI（Geolocaiton）
ᵒ オフラインストレージAPI（Web Storage）

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概要
何をするものかを理解しよう

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

JavaScriptとは• Webページの構成物を操作することができるプログラミング言語
ᵒ 主にWebブラウザ上で動作する• ECMAScriptと呼ばれる仕様の実装の総称• ES5やES6といった表記はECMAScriptの略 + バージョン番号

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の利用シーン• フォーム入力内容チェック• 特定要素のクリックで新しく要素を表示• 再読込なしでページの情報を更新

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使用方法（1）• script要素の内容として記述する

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使用方法（2）• script要素のsrc属性で外部スクリプトファイルを指定して読み込む

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

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

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

videovideo要素を操作

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

video要素の制御• video要素で動画を再生可能• 普通に使った場合はブラウザ組み込みのプレイヤーで操作する• JavaScriptを使えば組み込みプレイヤー以外から制御可能

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

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

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

HTMLThe 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

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

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

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

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イベント制御• "取得した要素.addEventListener()"で、取得した要素に指定したイベントが発生した際に実行する内容を指定することができる

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

代表的イベント
イベント名

概要

click

クリックされたとき

mouseenter

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

mouseleave

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

focus

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

keydown

キーが押されたとき

keyup

キーが離されたとき

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

DOMContentLoaded

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

load

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

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

video要素の制御• 取得したvideo要素を使いメソッド実行

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

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

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

Geolocation
位置情報の利用

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

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

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

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

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

HTML• "onclick=関数"で、クリックされたときに実行する関数を指定• この場合はgeoDisp()に書かれた処理が実行される

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

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

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

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

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

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

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

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

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

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

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

Geolocation APIについて• 以下が参考になりますᵒ Geolocation の利用 - Web API インターフェイス |MDN

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

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

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

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

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

デモ• https://codepen.io/suzukima/pen/QvXvZw• 指定した色が背景色になる• 再読込しても指定した色はそのまま

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

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

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

The 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

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

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

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

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

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条件文（特定の状態で実施する処理）• "if(条件) { 特定の処理 }"で、条件どおりのときに特定の処理が実施される

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

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

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

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

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

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

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

Web Storageについて• 以下が参考になります
ᵒ Web Storage API を使用する - Web API インターフェ
イス | MDN

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

勉強方法

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

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

Open the Future with HTML5.

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