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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

本日の内容

2

•

試験概要

•

history API

•

ストレージ
•

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/© LPI-Japan 2017. All rights reserved.

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/© LPI-Japan 2017. All rights reserved.

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

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

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

デザイナー

プログラマーHTMLコーダー

Webディレクター

スマートフォン
アプリ開発者

サーバーサイド
エンジニア

Webシステム
開発者

対象
フロントエンド

Webデザイナー

プログラマー

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

HTMLコーダー

Webディレクター

スマートフォン

サーバーサイドエンジニア

アプリ開発者

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Webシステム
開発者

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
グラフィックス
JavascriptやCSSなどを用いて、動的にグラフィックスを生成したりアニメーションを実現したりする技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
通信・デバイスアクセス系APIJavaScriptからクラウドと通信をして情報の送受信を行った
り、センサーなどのデバイスにアクセスしたりする技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表示・再生に関する技術
ユーザビリティJavaScriptやCSSなどを用いて、デザイン仕様に沿った見やす
い表示や操作しやすいコンテンツを作成するための技術
パフォーマンス
ストレージや並列処理を使ってコンテンツを効率良く高速に動作させたり、オフラインでも動作する仕組みを作るための技術

5

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

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

試験名： HTML5 Level1 Exam

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

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

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

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

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

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

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

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

試験名： HTML5 Level2 Exam
この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明

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

し、かつ有意なHTML5レベル1認定を保有"スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションにしていること。

近い機能を組み込んだ先端のWebアプリケーションを開発することができる。

認定の有意性の期限：5年間"APIのセキュリティモデルを理解したうえで開発することができる。

6

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

重要度

項目

JavaScript

JavaScript文法

10

WebブラウザにおけるJavaScript API

イベント

8

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

6
8

Selectors API

7

History API
テスト・デバッグ

7

Canvas(2D)

8

SVG

2

マルチメディア

Timing control for script-based animation
メディア要素のAPI

2
5

ストレージ

Web Storage

7

Indexed Database API

5

File API

5

バイナリーデータ

4

グラフィックス・アニメーション

7

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

通信デバイスアクセス
パフォーマンスとオフライン

セキュリティモデル

8

項目

重要度

Web Socket

5

XMLHttpRequest

5

Server-Sent Event1

Geolocation API
Device Orientation
Web Workers
High Resolution Time
オフラインアプリケーションAPI
Page Visibility
Navigation Timing
クロスオリジン制約とCORS
セキュリティモデルとSSLの関係

5
1
5
2
3
2
1
4
4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

学習方法
•

参考書

•

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

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

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

処理の順番などを確認する。(初期化->処理->後片付け)•

Webブラウザ毎に動作が異なることがあるので注意。

•

Webサーバの有無で動作が異なることがあるので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2.2.5 history API
知識問題 コードリーティング問題

10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

History APIの概要

11•

window.historyオブジェクトを使うと、Webブ
ラウザの履歴に任意のURLを追加したり、履歴を基にページを戻ったり進めたりできる。

•

ただし、履歴内の現在位置や、履歴内の任意のURLを知る方法はない。

•

ajaxなどでコンテンツを書き変えると、URLとコンテンツの関連性が崩れてしまうがHistory APIでは
現在のURLを任意に変更できるため、URLとコン
テンツを適切に連携できる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ページ履歴に関する情報取得

12•

現在の履歴の個数を知るには、
window.history.lengthプロパティを使用する。

•

JavaScriptの通常の配列(Array)と異なり、lengthプ
ロパティに値を代入することはできない(read only)。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

履歴の操作とページ移動

13

•

進む
例) window.history.forward();•戻る例) window.history.back();•

履歴内の任意のページに移動する例) window.history.go( 1 ); // ひとつ進む
window.history.go( -1 ); // ひとつ戻る

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

URL操作•

HTML5から追加されたpushState(),replaceState()
メソッドを使うと、ロケーションバー(アドレスバー)上のURLを書き換えることができる。

•

書き換えてもリロードはされない。

•

pushState()とreplaceState()の違いは、履歴にあたらしいURLを追加するか、現地点の履歴を置き換えるか。
例)
window.history.pushState( null , null , url );window.history.replaceState( null , null , url );14

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

現在のページの情報取得
Locationオブジェクトのプロパティから現在のページの情報を取得できる。
プロパティ

15

概要

例

href

URL全体

http://html5exam.jp:80/index.html?q=abc#def

origin

スキーマ:ホスト名:ポート

http://html5exam.jp:80

protocol

プロトコル

http:

host

ホスト名:ポート

html5exam.jp:80

hostname

ホスト名

html5exam.jp

port

ポート番号(明示したときのみ)

80

pathnameパス/index.html

searchhash

URLの?以降(クエリ文字列)
URLの#以降(ハッシュ文字列)?q=abc#def
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ページのロードとリロード
ページのロード(遷移)には、以下の3通りの方法が使用できる。
•

window.locationオブジェクトへURLを代入
例) window.location = 'http://html5exam.jp';•

window.location.hrefプロパティへURLを代入
例) window.location.href = 'http://html5exam.jp';•

window.location.assign(url)メソッドを実行
例) window.location.assign('http://html5exam.jp');

ページのリロードは、window.location.reload()メソッドを実行する。
例) window.location.reload();16

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ページ履歴の置換
window.location.assign()メソッドなどの替わりに、
window.location.replace()メソッドを使用してページを移動すると、現在のページがHistoryに保存されない(History上の現在のページのURLがReplaceされる)。
例)// "戻る"で現在のページに戻れる
window.location.assign('http://html5exam.jp');// "戻る"で現在のページに戻れない
window.location.replace('http://html5exam.jp');17

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題1
以下のスクリプトを実行した結果、ロケーションバーに表示されるURLはどれか。
window.history.pushState(null,null,'/a.html');
window.history.pushState(null,null,'/b.html');
window.history.pushState(null,null,'/c.html');
window.history.replaceState(null,null,'/d.html');
window.history.back();
window.history.go(-1);
A. a.html
B. b.html
C. c.html
D. d.html

18

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2.5 ストレージ

19

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ストレージの用途

範囲外•

セッション情報の保存•

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

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

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

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

などなど
20

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

22

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

KVS(Key Value Store)

23•

任意のキー(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/© LPI-Japan 2017. All rights reserved.

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

•

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

•

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

•

ドメインに紐付いているため、基本的に他のドメインのWeb Storageは操作できない。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Web Storageの特徴や仕様(2)25•

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

•

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

•

ローカルストレージは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/© LPI-Japan 2017. All rights reserved.

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

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

•

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

localStorage

削除されるタイミング

最大容量

JavaScriptで明示的に操作

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

26

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2MB〜
5MB
2MB〜
無制限

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

27

配列( new Array('a','b','c') )やDateオブジェクト"a,b,c"や"Mon Jan 09 2017 00:03:01
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/© LPI-Japan 2017. All rights reserved.

Web Storageの読み込み

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

28

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

lengthプロパティ
•

•

•

•

keyメソッド•

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

•

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

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

•

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

29

データ件数を返す。

全てのエントリを削除する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

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

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

30

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

同じPC

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

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 2017. All rights reserved.

Web Storageのイベント

32•

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

•

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

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

oldValue … 変更前の値•

newValue … 変更後の値•

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

storageArea … 変更されたストレージ(localStorage または sessionStorageオブジェクト)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

34

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Indexed Database APIの特徴

35•

KVSである。

•

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

•

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

•

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

•

非同期処理を行なう。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Indexed Databaseの構造•

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

•

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

•

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

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

36

オブジェクトストア

キー

レコード

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

キー

レコード

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

キー

レコード

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

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

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

範囲外

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

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

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

キーの自動採番を有効化

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

ObjectStore名を指定して作成する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

トランザクション•

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

•

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

•

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

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

レコード
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

その他の機能

42•

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

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

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

43

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

検索方法

最大容量

トランザクション

Web Storage

文字列のみ

キーのみ

2MB〜5MBなし

IndexedDatabase

JavaScriptのオブジェクト

キー
項目値

無制限

あり

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

44

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

46

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ローカルファイルアクセス機能の概要

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

•

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

•

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

48•

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

•

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

•

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

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ファイルオブジェクトリストの取得<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>
49

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

50

プロパティ

概要

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

メソッド

概要

item

引数にインデックスを指定してFileオブジェクトを取得する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

概要
ファイル名

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

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

51

プロパティ
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/© LPI-Japan 2017. All rights reserved.

ローカルファイルの読み込み
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);});52

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

ファイルを文字列として取得するよう指定
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

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

概要

readyState

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

result

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

error

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

メソッド

概要

readAsArrayBuﬀer ArrayBuﬀerオブジェクトとして読み込む
readAsText

53

データを文字列として読み込む

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/© LPI-Japan 2017. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

2.5.4 バイナリーデータ
知識問題 コードリーティング問題

55

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

バイナリーデータの概要

56•

Webアプリケーションの利用範囲が広がるにつれ、
Webブラウザが対応していない独自形式のファイルを操作する必要性がでてきた。(動画、画像、VR用データなど)•

ローカルファイルや、サーバから取得したデータを直接操作するためにArrayBuﬀer、型付き配列などの仕組みが用意されている。

•

任意の形式のバイナリーデータを、FileAPIなどを使ってWebブラウザからダウンロードすることもできる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

Blob,Blob URL•

Blobは変更不可能(immutable)な生データ(バイナリデータ)を扱うためのオブジェクト。File APIで使用するFileオブジェク
トの基になっている。

•

Blobからデータを取り出すには、FileReaderを使用する。
(File APIを参照)•

作成、編集したBlob/FileをWebブラウザからダウンロードするには、createObjectURLメソッドでBlob URLを作成する。

createObjectURLを呼ぶ
Blob URLの例
ごとに異なるURLが生成
var objectURL = window.URL.createObjectURL(blob); される
console.log(objectURL);// => blob:null/e749dd31-24d1-974e-84f3-a369581d361c
57

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ArrayBuﬀerとビュー
メモリ上のArrayBuﬀer

型付き配列
ビュー

DataView(Int16Array)

ArrayBuﬀerはバ
イナリデータを表すためのデータ型

ArrayBuﬀerには直接アクセスできないた
め、ビュー(型付き配列、またはDataView)
を通じて操作する

58

...
0A

...
Byte

1B

Byte

2C

Byte

3D

Byte

4E

Byte

5F

Byte

...
Int8

0A

0A1B

Int16

2C3D

Int16

4E5F

Int16

1B2C3D4E Int32

Int8

5F

...

...

...

Byte単位で値を保存指定した型の配列としてアクセスできる

任意の構造のデータとしてアクセスできる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

型付き配列(Typed Array)•

ArrayBuﬀerを操作するためのビューの一種。

•

Byte単位ではなく、指定した型の値の配列としてアクセスできる。
使用例型

浮動小数点型(Float)

符号付き整数(Int)

符号なし整数(Uint)

ビット数

オブジェクト64

Float64Array

32

Float32Array32

Int32Array

16

Int16Array

8

Int8Array

32

Uint32Array

16

UInt16Array8

UInt8Array

8

Uint8ClampedArray※Uint8ClampedArrayは0以下の数値は0に、255以上の数値は255に制限されるため画像処理に向いている。
59

var buf = new ArrayBuﬀer(4);var i8 = new Int8Array(buf);
i8[0] = 0x01;
i8[1] = 0x02;
i8[2] = 0x03;
i8[3] = 0x04;
var i16 = new Int16Array(buf);
console.log(i16[0].toString(16));// => 0x0201
console.log(i16[1].toString(16));// => 0x0403
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

バイトオーダー•

複数バイトの値が、メモリに保存される順番のことをバイトオーダーという。

•

最上位バイトが先頭のものをビッグエンディアン、最下位バイトが先頭になるものをリトルエンディアンという。

•

型付き配列ビューはネイティブのバイトオーダーになる。
(Intel x86系CPUはリトルエンディアン、Motorola 68000系CPUやJava VMはビッグエンディアン)•

エンディアンを指定してアクセスする場合は、DataViewを使用する
数値(16進数)

ビッグエンディアン

リトルエンディアン

ABCDEF12

AB CD EF 1212 EF CD AB※リトルエンディアンにも繰り上りの計算がしやすいなどのメリットがある。
60

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

ファイルからバイナリデータを読み込む
var ﬁleItem = document.getElementById('ﬁleItem');var reader = new FileReader();ﬁleItem.addEventListener('change',function(){var item = ﬁleItem.ﬁles.item(0);var buf = reader.readAsArrayBuﬀer(item);var uint8 = Uint8Array(buf);
console.log(uint8[0]);});61

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

問題6
リトルエンディアンの環境で、変数bufに[0x01,0x02,0x03,0x04]というArrayBuﬀerオブジェクトが入っているとき以下のプログラ
ムを実行したi16[1]の値はどれか。
var i16 = new Int16Array(buf);
A. 0x43
B. 0x0403
C. 0x0304
D. 0x4321

62

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

本日の内容

63

•

試験概要

•

history API

•

ストレージ
•

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/© LPI-Japan 2017. All rights reserved.

問題の解答•

問題1: A / 履歴にはa,b,cと追加され、cがdにreplaceされる。
back()でb,go(-1)でaと戻ることになる。

•

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

•

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

•

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

•

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

•

64

問題6: B / リトルエンディアンでは、前後が逆になる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.