HTML5プロフェッショナル認定試験
レベル2ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

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

本日の内容
•

試験概要

•

ストレージ

•

2

•

Web Strage•

Indexed Database API•

File API

テスト・デバッグ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5プロフェッショナル認定資格とは• 次世代のWebプロフェッショナルのスキルの向上に貢献するために、
HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッ
ショナルを中立的な立場で公平かつ厳正に認定する資格制度です。
• Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、
サーバーサイドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプロフェッショナルが対象です。
• 多くの企業が推進する次世代Web言語の認定資格として、
HTML5のプロフェッショナルのスキルの向上に役立ちます。
また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できます。

3

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

二つのレベル
対象
Webデザイナー/

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

HTMLコーダー

Webディレクター/グ
ラフィック

フロントエンドプロ
グラマー

デザイナー

Webシステムスマートフォンアプ

サーバーサイド

開発者

リ開発者

エンジニア

Webシステムスマートフォンアプ

フロントエンドプロ

開発者

リ開発者

グラマー

Webディレクサーバーサイド

Webデザイナー/

ター

エンジニア

HTMLコーダー

対象

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

© LPI-Japan 2014. All rights reserved.

4

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

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
ビジビリティ
JavascriptやCSS3などを用いて、デザイン仕様に沿った見やすい表示を行うための技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
オフラインWebアプリケーション
通信が常時接続状態ではない環境でも、効率的にWebコンテンツを動作させるための技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表
示・再生に関する技術
ユーザビリティ
ナビゲーション、地図表示など操作しやすいコンテンツを作成する
ための技術
パフォーマンス
データベースや、並列処理を使ってコンテンツを効率良く高速に動作させるための技術© LPI-Japan 2014. All rights reserved.

5

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

レベル1とレベル2の資格体系
ベーシックレベル認定名： HTML5 Level1 (Markup Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level1 Exam

所要時間：90分
試験問題数：約60問

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

受験料：\15,000 （税抜）"HTML5を使って静的なWebコンテンツを作成することができる。

認定条件： HTML5 レベル1試験に合格する"ユーザビリティ・ビジビリティの高いWEBコンテンツを設計・作成することができる。

こと"スマートフォンや車載システムなど、様々なデバイスに対応したコンテンツ作成ができる。

認定の有意性の期限：5年間

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level2 Exam

所要時間：90分

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイス
アプリケーションを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することができる。

試験問題数：未定
受験料：未定認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間© LPI-Japan 2014. All rights reserved.

6

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

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

項目

JavaScript

JavaScript文法

重要度
10

Javascriptの概要
演算子
特殊数値
配列
制御文
関数
型・オブジェクト
プロパティ
スコープ

WebブラウザにおけるJavaScript API

イベント

8

ドキュメントオブジェクト/DOM

6

ウィンドウオブジェクト

8

Selectors API
テスト・デバッグ

4
2© LPI-Japan 2014. All rights reserved.

7

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

レベル2の出題構成(2)
主題

重要度
6

項目

グラフィックス

Canvas(2D)

マルチメディア

SVG

1video要素,audio要素

2(各要素の仕様や、マークアップの記述方法に関してはレベル1に含まれるため範囲外)

オフラインアプリケーションAPI

アプリケーションキャッシュの制御

2

Session History and Navigation
表示制御

History API
Page Visibility

3
4

Timing control for script-based
animations

2

Web Storage

4

Indexed Database API

2

File API

2

ストレージ© LPI-Japan 2014. All rights reserved.

8

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

レベル2の出題構成(3)
主題
通信

項目
WebSocket

重要度2

XMLHttpRequest

4

Geolocation API

Geolocation APIの基本と位置情報の

2

Web Workers

取得
並列処理の記述

4

パフォーマンス

Navigation Timing

4

High Resolution Time

1

© LPI-Japan 2014. All rights reserved.

9

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

学習方法
•

参考書

•

サンプル問題•出題範囲を確認••10

説明できない用語が無いようにする。

自分でサンプルを作って確かめる。
•

処理の順番などを確認する。

•

Webブラウザ毎に動作が異なることがあるので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

2.8 ストレージ

11

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

ストレージの用途•

セッション情報の保存•

オフライン時の送信データの一時保存•

画像データ等のキャッシュ•

作業履歴の保存•表示設定の保存•

データ集計のための一時保存

範囲外

などなど
12

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

様々なストレージ
Webブラウザにデータを保存する方法• Cookie(試験範囲外)• Web Strage• Indexed DB• Flash(試験範囲外)
13

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

データ保存手法としてのCookie•

範囲外

1データ最大4kb程度。
(ブラウザによって違いあり)

テキストデータやアイ
コン画像ぐらいなら保存できるサイズ。

•

ドメイン毎に150〜180データ程度。

•

Webサーバとの通信時に全てのデータが送受信に含まれるため、トラフィックを無駄に増大させる。

•

HTTPヘッダに含まれるため、通信を盗聴されると情報は全て
見えてしまう。

•

Cookieの最大容量等はhttp://browsercookielimits.squawky.net/
で調べられる。

14

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

2.8.1 Web Strage
知識問題 コードリーティング問題

15

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

KVS(Key Value Store)

16•

任意のキー(Key)と値(Value)を関連付けて管理する
データ保存形式。

•

キーを指定すると値を取り出すことができる。

•

キーが重複することはない。

•

CookieやWeb Storageがキーによる検索に限定される単純なKVS、Indexed Databaseは複雑な検索が可
能な多機能なKVSといえる。

•

MySQLやPostgreSQLのようなリレーショナルデータベースに比べると機能は少ないが高速に動作する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web Storageの特徴や仕様(1)•KVS形式で、Webブラウザにデータを保存する。

•

キーによる検索しかできないため、一般的なデータベースのような検索や集計の用途には向かない。

•

永続的にデータを保存するローカルストレージと、
ブラウザ(タブ)を閉じるまで一時的にデータを保存するセッションストレージの2種類がある。

•

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

17

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

Web Storageの特徴や仕様(2)•保存できるデータ形式は文字列に限られる。文字列
以外のデータを保存する場合は、Base64などでエンコード(文字列化)する。

•

画像データなどのサイズの大きいバイナリデータの保存には向かない。

•

ローカルストレージは2MB〜5MB,セッションスト
レージは2MB〜無制限(ディスク容量まで)のデータを保存できる。

18

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

ローカルストレージとセッションストレージ•

使用できるメソッドやイベントは同じ。

•

JavaScriptで操作するオブジェクトと、データが自動的に削除されるタイミング、保存可能な容量が異なる。
オブジェクトローカルストレージ

localStorage

削除されるタイミングJavaScriptで明示的に操作

タブが閉じられるか、
セッションストレージ sessionStorage
JavaScriptで明示的に操作

19

最大容量
2MB〜
5MB
2MB〜
無制限

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

Web Storageの書き込み
Web Storageへデータを保存するには、
localStorageまたはsessionStorageオブジェクトの
setItemメソッドを使用する。
例) localStorage.setItem('key','value');
setItemメソッドの引数には、キーと値を指定する。
文字列以外の値を指定すると...

20

配列( new Array('a','b','c') )や"a,b,c"や"Mon Jan 09 2017 00:03:01

Dateオブジェクト

GMT+0900 (JST) "という文字列になる

文字列表記のないオブジェクト"[Object object]"という文字列になる

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

Web Storageの読み込み

Web Storageからデータを読み込むには、
localStorageまたはsessionStorageオブジェクトの
getItemメソッドを使用する。
例) var value = localStorage.getItem('key');
getItemメソッドの引数には、キーを指定する。

21

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

その他のメソッド/プロパティ•

lengthプロパティ
•

•

•

•

keyメソッド•

インデックスを指定して、キーを取得する。

•

var key = localStorage.key(0);removeItemメソッド•

キーを指定して、エントリを削除する。

•

localStorage.removeItem('key');clearメソッド•

22

データ件数を返す。

全てのエントリを削除する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web Storageのセキュリティ
Web Storageでは、Webサイトにログイン中にのみ参照可能(であるはず)なデータなどを保存すると、別ユーザがデータを参照できてしまうことがある。

ログイン
データ保存
同じPC

ログアウト
ログイン
同じドメインへのアクセスでデータにアクセスできてしまう。

23

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

セキュリティ対策
ユーザやセッションに紐付いた値をデータと共に保存しておいて、Web Storageを参照する際に異なっていたらデータを破棄するなどの工夫が必要。

同じPC

ログイン
ユーザIDと共に
ユーザID
データ保存
ログアウト
ログイン
ユーザID
保存されているIDとユーザIDを比較して、異なっていたらデータを破棄。

24

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

Web Storageのイベント•

ローカルストレージまたはセッションストレージが変更されると、storageイベントが発生し、
window.onstorageイベントハンドラで捕捉できる。

•

Storage Eventオブジェクトのプロパティ•

key … 変更されたエントリのキー•

oldValue … 変更前の値•

newValue … 変更後の値•

url … 変更されたストレージの紐付けられたURL•

storageArea … 変更されたストレージ(localStorage または sessionStorageオブジェクト)

25

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

問題1
以下のスクリプトのうち、Webブラウザを閉じても値がそのまま正しく保存されるものを選択しなさい。
A. localStorage.setItem( 'key' , 'value' );B. localStorage.setItem( 'key' , new Date( ) );C. sessionStorage.setItem( 'key' , new Date( ) );D. sessionStorage.setItem( 'key' , 'value' );26

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

2.8.2 Indexed Database
API
知識問題 コードリーティング問題

27

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

Indexed Database APIの特徴•

KVSである。

•

JavaScriptのオブジェクトをそのまま保存できる。

•

インデックスを作成するとキー以外の項目でデータを検索できる。

28•

トランザクション機能を持つ。

•

非同期処理を行なう。

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

Indexed Databaseの構造•

ドメイン毎に複数のデータベースを持つことができる。

•

オブジェクトストアは、MySQLなどのRDBMSでいうテーブルにあたる。

•

オブジェクトストア内に、レコードとしてJavaScriptのオブジェクトを保存できる。

データベース
オブジェクトストア

29

オブジェクトストア

キー

レコード

キー インデックス レコード

キー

レコード

キー インデックス レコード

キー

レコード

キー インデックス レコード

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

データベースへのアクセス
ブラウザ毎に異なるIDBFactoryオブジェクトを選択する。
Firefox 38(2015年5月12日リリース)でmozIndexedDBは削除

var indexedDB = window.indexedDB ||window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open('sample',1);
データベースを開く。データ
ベースが無ければ作成する。
30

データベース名とバージョン

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

オブジェクトストアの作成

範囲外

var request = indexedDB.open('sample',1);

新規作成されたか、バージョンが上がったときだ
けupgradeneededイベントが発生する。

request.onupgradeneeded = function(e){db = request.result;

キーの自動採番を有効化

db.createObjectStore("store1",{autoIncrement:true});}31

ObjectStore名を指定して作成する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

トランザクション•

データを操作する、分割できない一連の処理をトランザクションと呼ぶ。

•

トランザクションに含まれる処理は、全て完了するか、全て失敗
するかのどちらかである。

•

Indexed Databaseでは、レコード操作は全てトランザクション
を通じて行なう。

データを移動するトランザクション
値を減らす 値を増やす
レコード
32

レコード

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

データの保存
対象のオブジェクトストアを/* トランザクションを作成する */ 複数選択することもできる
var tr = db.transaction(['store1'], 'readwrite');/* トランザクションからオブジェクトストアを選択する */var store1 = tr.objectStore('store1');/* オブジェクトストアにレコードを追加する */var req = store1.add( {id:1,text:'HTML5'} );オブジェクトストアがautoIncrementならキーは自動採番される。
第2引数にキーを指定することもできる。
33

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

データの読み込み/* トランザクションを作成する */読み込み専用にもできる

var tr = db.transaction(['store1'], 'readonly');/* トランザクションからオブジェクトストアを選択する */var store1 = tr.objectStore('store1');/* オブジェクトストアからキーを指定しレコードを取得する */var req = store1.get(1);キーを指定して取得/* データの取り出し */var obj = req.result;
34

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

その他の機能•

データベースの削除
indexedDB.deleteDatabase('データベース名');•

データベースを閉じる
db.close();•

オブジェクトストアの削除
db.deleteObjectStore('オブジェクトストア名');35

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

問題2
Indexed Databaseの特徴として誤っているものを選択しなさい。
A. KVSである。
B. インデックスによる検索に対応している。
C. トランザクションには対応していない。
D. オブジェクトを保存できる。

36

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

ストレージ機能の違い
Web StorageとIndexed Databaseの違いは、データの保存形式と検索方法,最大容量,トランザクションとい
える。
保存形式

検索方法

最大容量

トランザクション

Web Storage

文字列のみ

キーのみ

2MB〜5MBなし

IndexedDatabase

JavaScriptのオブジェクト

キー
項目値

無制限

あり

最大容量は、"デバイスの空き容量の10%まで"や、"ユーザの許可が得られれば無制限"など、Webブラウザによって大きく異なる。

37

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

問題3
様々な画像データを、検索可能なタグを付けて、Web
ブラウザに永続的に保存しておきたい。適切な選択肢を選びなさい。
A. Cookie
B. Local Storage
C. Session Storage
D. Indexed Database38

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

2.8.3 File API
知識問題 コードリーティング問題

39

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

ローカルファイルアクセス機能の概要•<input type="ﬁle">で選択された、またはWeb
ブラウザにドラッグ&ドロップされたローカルファ
イルを、JavaScriptで読み込むことができる。

•

サーバサイドでしかできなかったことが、クライア
ントサイドでできるようになった。

•

クライアントサイドで画像ファイルを読み込んで加工、その後サーバにアップロードなども可能に。

40

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

セキュリティ観点での制限事項•

セキュリティ的な観点から、アクセスできるファイ
ルはユーザが意識的に選択またはドラッグ&ドロッ
プしたものに限られる。

•

プログラム側から任意のファイルを選択することは
できない。

•

任意のファイルへの新規保存や上書き保存はできな
いが、File APIで作成、編集したファイルをユーザにダウンロードさせることはできる。

41

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

ファイルオブジェクトリストの取得<input id="ﬁleItem" type="ﬁle" multiple><script>

複数選択できるようにするなら、/* Input要素を取得 */multiple属性を付ける

var ﬁleItem = document.getElementById('ﬁleItem');/* changeイベントが発生したら */ﬁleItem.addEventListener('change',function(){/* Input要素からFileListオブジェクトを取得 */var ﬁleList = ﬁleItem.ﬁles;}</script>
42

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

FileListオブジェクト
FileAPIで、input要素または、ドラッグ&ドロップで選択されたファイルのリストを表わすオブジェクト。
プロパティ

概要

lengthリストに含まれるFileオブジェクトの数。

メソッド

概要

item

43

引数にインデックスを指定してFileオブジェクトを取得する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Fileオブジェクト
File APIでひとつのファイルを管理するオブジェクト
プロパティ
name

概要
ファイル名

lastModiﬁedDate 最後に変更された日時のDateオブジェクト

Blobオブジェクトのプロパティやメソッドを継承

44

プロパティ
size
type

概要
データのバイト数
データの種類を表すMIMEタイプ

メソッド
slice

概要
指定した範囲の部分的なデータを返す
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ローカルファイルの読み込み
var ﬁleItem = document.getElementById('ﬁleItem');var reader = new FileReader(); FileReaderオブジェクト
reader.onload = function(){alert(reader.result);}の作成

ファイル読み込み
完了時の処理を登録
resultに結果が格納されている

ﬁleItem.addEventListener('change',function(){var item = ﬁleItem.ﬁles.item(0);reader.readAsText(item);});45

ファイルリストから先頭のFileオブジェクトを取得

ファイルを文字列として取得するよう指定
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

FileReaderオブジェクト
Fileオブジェクトから、内容を読み出すためのオブジェクト
プロパティ

概要

readyState

状態を表わす数値 0:EMPTY 1:LOADING 2:DONE

result

読み込んだファイルの内容

error

ファイルの読み込み中に生じたエラー

メソッド

概要

readAsArrayBuﬀer ArrayBuﬀerオブジェクトとして読み込む
readAsText
データを文字列として読み込む

46

readAsDataURL

data:URLとして読み込む

abort

読み込み処理を中断する
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題4ローカルファイルの内容をバイナリデータとして取得するメソッドを選択しなさい。
A. FileReader.readAsArrayBuﬀer
B. File.readAsBinary
C. FireReader.readAsDataURI
D. File.readAsArrayBuﬀer

47

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

2.2.5 テスト・デバッグ

48

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

JavaScriptのテスト・デバッグ手法•

各Webブラウザの開発者ツールを使う。

•

JavaScript内で変数の内容などを出力する。
•

HTML5ではdocument.writeによる出力は非推奨になっている。
https://www.w3.org/TR/2011/WD-html5-20110525/apis-in-htmldocuments.html#document.write49•

一般的な表示 : innerHTMLプロパティの使用。

•

テスト・デバッグ表示 : Consoleオブジェクトを使用。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Consoleオブジェクト•

Webブラウザの開発者ツール(コンソール)への情報
出力や、処理の実行時間の計測など、開発に便利なメソッドが用意されている。

•

Webブラウザによって、実装状況や表示結果が異なるので要注意。

50

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

consoleへの出力
メソッド名

概要、記述例

debug

console.logと同等。Firefoxでは非推奨。

error

エラーメッセージを表示。

info

メッセージタイプのログ情報を出力。

log

一般タイプのログ情報を出力。

warn

警告メッセージを出力

コンソールの表示設定で種類別に表示非表示を切り替
えて表示を整理できる。

基本的に、アイコンの表示などが違うだけ。
Webブラウザによっては、
error,warnメソッドの結果に、呼び出し箇所が表示される。

51

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

特殊な出力•assertconsole.assert(条件,'msg');
条件がfalseのとき、msgを出力する。
関数の返り値をチェックして異状を検知する場合など。

•

dirxmlconsole.dirxml(HTML要素);
HTML要素を表示。
console.logでは構造がわかりづらい場合など。

•

trace
console.trace();
スタックトレース(関数の呼び出し情報)を表示。
目的の関数が、どこから呼び出されたかを把握する。

52

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

プロファイリング•

JavaScriptの実行でどの処理に時間が掛っているかを探す。

•

console.proﬁleメソッドの呼び出しから、
console.proﬁleEndメソッドの呼び出しまでの間に実行された関数の実行時間(プロファイル)を計測する。

•

実行時間は開発者ツールのパフォーマンス(Firefox)または
Proﬁles(Chrome)に表示される。

•

各プロファイルに名前を付けることで複数のブロックにわけてプロファイルを取得できる。

•

開発者ツールの機能だけでも計測できるが、全体か関数単位での計測結果になる。

53

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

プロファイリングの実例/* プロファイリング開始 */wait1とwait2は、forループを使って時間を浪費する関数

console.proﬁle('MyProﬁle');proﬁleとproﬁleEndの間のwait1は

wait1(1000);

計測に含まれる/* プロファイリング終了 */console.proﬁleEnd('MyProﬁle');wait2(1000);

proﬁleEndの後のwait2は計測に含まれていないChromeによる表示
54

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

問題5
HTML要素について構造を考慮した出力を行なう
メソッドを選択しなさい。
A. console.log( )B. console.dirhtml( )C. console.dirxml( )D. console.info( )55

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

本日の内容
•

試験概要

•

ストレージ

•

56

•

Web Strage•

Indexed Database API•

File API

テスト・デバッグ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題の解答57•

問題1: A / Webブラウザを閉じてもデータが保持されるのは、
localStorageであり、正しく保存できるのは文字列だけである。

•

問題2: C / Indexed Databaseはトランザクション機能を持つ。

•

問題3: D / 複数の画像データを保存する場合のデータ量と、検索可能なタグをデータとして保存するには、Indexed Databaseが適切。

•

問題4: A / ファイルからのバイナリデータ読み込みはFileReader.readAsArrayBuﬀerメソッドを使用。

•

問題5: B / dirhtmlではなく、dirxmlなので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/