• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル2 サンプル問題

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

2.5 ストレージ

例題5.8「2.5.1 Web Storage」「2.5.2 Indexed Database API」
レベル2の出題範囲「2.5.1 Web Storage」「2.5.2 Indexed Database API」からの出題です。
Indexed DatabaseとWeb Storageの違いとして正しくないものを2つ選択しなさい。
  • Indexed DatabaseはRDBMSであり、Web StorageはKVSである。
  • Indexed Databaseではトランザクションを使用できる。
  • Web Storageではデータの内容による検索はできない。
  • 最大データ容量は一般にIndexed Databaseのほうが小さい。
  • Web Storageには文字列データしか格納できないが、Indexed Databaseにはバイナリデータも格納できる。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A、D
2.5.2 Indexed Database API に関する出題です。
各選択肢について見ていきます。
A. Indexed Databaseはオブジェクト型データベース、Web Storageはキーバリュー型ストレージ(KVS)という分類になるため、内容は誤りです。
B. Indexed Databaseでは一連の操作の整合性を保つトランザクション機能がありますが、Web Storageにはありません。したがって内容は正しいです。
C. Indexed Databaseではインデックスを制作することでデータの内容による検索ができますが、Web Storageではできません。したがって内容は正しいです。
D. 最大データ容量はデバイスの空き容量や、設定によりますが、Web Storageは2MBから10MB、Indexed Databaseでは空き容量や設定の限度までのものが多いです。したがって内容は誤りです。
E. Web Storageには文字列しか保存できません。Indexed Databaseには、文字列のほかにFileオブジェクトやBlobオブジェクトといった、様々な形式のデータを保存できます。したがって内容は正しいです。

"正しくないものを2つ選択"ですので、AとDが正解になります。

出題範囲の詳細
2.5.1 Web Storage
2.5.2 Indexed Database API

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.8「2.5.2 Indexed Database API」
レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
データの更新においてトランザクション機能を持つAPIを選択しなさい。
  • Indexed Database API
  • File API
  • Web Storage API
  • Cookie API
  • RDBMS API

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A
2.5.2 Indexed Database API に関する出題です。
トランザクションとは、データの更新において更新が全て成功したか、全て失敗したかのどちらかにしかならない機能です。
例えば、2つの銀行口座の間で振り込みを行なうとして、振り込み元の口座の残高を減らしたものの、振込先の口座の残高を増やすことに失敗すると金額の整合性が取れなくなってしまいます。

このように途中で失敗した場合に、振り込み元の口座の残高を減らした処理も取り消す仕組みがトランザクションです。

Webブラウザ上で動作するアプリケーションでは、いつユーザがブラウザを閉じてしまったりリロードするかわかりません。
そのような場合でも処理の結果が中途半端にならないようにする必要があります。
そこでトランザクションを使って、データの整合性を維持する必要があるのです。

File API、Web Storage APIにはトランザクションの仕組みはありません。
Cookie API、RDBMS APIはHTML5には存在しません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.7「2.5.2 Indexed Database API」
レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
openメソッドで作成したIndexed Databaseを削除する場合に使用するメソッドを選択しなさい。
  • exit()
  • close()
  • deleteDatabase()
  • dropDatabase()

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C
2.8.2 Indexed Database API に関する出題です。
Indexed Database APIでは、データベースの作成や削除はIDBFactoryオブジェクトを使用します。
"openメソッドで作成した"という部分はある意味引っ掛けで、データベースを削除するメソッドはIDBFactoryオブジェクトのdeleteDatabaseメソッドになります。
IDBFactoryオブジェクトのopenメソッドに対してcloseメソッドではありません。

作成されたデータベースそのものを表すIDBDatabaseオブジェクトには、データベースとの接続を閉じるcloseメソッドがあるので注意してください。
その他のメソッドはIndexed Database APIには存在しません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.6「2.5.1 Web Storage」
レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
以下のスクリプトの表示結果についての説明として正しいものを選択しなさい。
        
for(var i = 0;i < localStorage.length;i++) {
  console.log( localStorage.key(i) );
}	
	
    
  • localStorageに格納されている全ての値をキーのアルファベット順に表示する。
  • localStorageに格納されている全ての値を追加した順に表示する。
  • localStorageに格納されている全ての値を表示するが、順番はユーザエージェント毎に異なる。
  • localStorageに格納されている全ての値をキーのアルファベットの逆順に表示する。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C
2.5.1 Web Storage に関する出題です。
Local StorageやSession Storageには、番号(数値)を指定するとその位置の値を取得するkeyメソッドがあります。
配列のインデックスのようなものですが、値の順番については注意が必要です。
W3CのWeb Storageに関する文書では、"The order of keys is user-agent defined"と記述されていて、ユーザエージェント、つまりWebブラウザ依存とされています。
従ってWebブラウザによっては異なる結果になることも考えられます。

実用面で考えると、keyメソッドは出題のように全てのキーについて処理を行なう場合にのみ使うほうが無難でしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.5「2.5.1 Web Storage」
レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Local Storageに保存されている全てのデータを削除するスクリプトとして正しいものを選択しなさい。
  • localStorage.clear();
  • localStorage.removeItems();
  • localStorage.removeItem();
  • localStorage.clearAllItems();
  • localStorage.deleteItems();

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え A
2.5.1 Web Storage に関する出題です。
Local StorageやSession Storageでは、全てのデータを削除する方法として、clearメソッドが用意されています。
localStorage.clear()または、sessionStorage.clear()を実行することでそのオリジンに関する全てのデータを削除することができます。
Local Storageでは特に一部の環境を除き自動的にデータが削除されないため、必要に応じてデータを削除しないとセキュリティ上の問題やパフォーマンスの低下を招きかねません。

データをひとつずつ指定して削除する場合には、removeItemメソッドを使います。
removeItemメソッドは引数にキーとなる文字列を渡して実行することでキーと紐付いている値を削除することができます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.4「2.5.1 Web Storage」
レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
以下のスクリプトの実行結果として正しいものを選択しなさい。
        
var obj = {'a':'A','b':'B'};
localStorage.setItem('object',obj);
document.write(localStorage.getItem('object'));	
	
    
  • "undefined"と表示される
  • "{'a':'A','b':'B'}"と表示される
  • "[object Object]"と表示される
  • エラーが発生し何も表示されない

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C

2.5.1 Web Storage に関する出題です。
Web Storageに保存できるデータの形式は、文字列に限られます。
オブジェクトをsetItemメソッドを使って保存すると、"[object Object]"という文字列に変換されて保存されます。
ただし、Arrayオブジェクト、つまり配列は"['a','b','c']"のような形で文字列化されます。
このルールはオブジェクトをdocument.writeメソッドやconsole.logメソッドで表示した場合と同じです。
つまり、そのオブジェクトにtoStringメソッドがどのように実装されているかによるということです。

Web Storageへ文字列ではないデータを保存する場合には、Base64エンコーディングやシリアライズと呼ばれる処理をする必要があります。
またはIndexed Databaseなど、別のAPIを使用することを検討したほうが良いでしょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル2認定者 高井 歩 氏

例題5.3「2.5.2 Indexed Database API」
レベル2の出題範囲「2.5.2 Indexed Database API」からの出題です。
次のJavaScriptのソースコードを含むWebページを表示するブラウザには、バージョン1のbooksデータベースとbookオブジェクトストアがすでに作成されています。
そのブラウザで再度次のWebページを表示した結果として正しいものを1つ選びなさい。
なお、オリジンなどの条件も同一であるとします。
        
var idb = window.indexedDB,
	 request = null,
	 db = null,
	 store = null,
	 transaction = null;
		
request = idb.open( "books", 1 );
request.onupgradeneeded = function () {
	db = request.result;
	
	store = db.createObjectStore("book", { keyPath: "isbn" });
	store.createIndex("by_author", "author");
	
	store.put({ title: "The Woman in the Dunes", author: "Kobo Abe", isbn: 123456 });
	store.put({ title: "Confessions of a Mask", author: "Yukio Mishima", isbn: 234567 });
}

request.onsuccess = function() {
	db = request.result;
	transaction = db.transaction( "book" );
	store = transaction.objectStore( "book" );
	
	store.put({ title: "Kappa", author: "Ryunosuke Akutagawa", isbn: 987654 });
}
	
    
  • successイベントが発生し、bookオブジェクトストアに新しいデータが追加される
  • successイベントが発生し、bookオブジェクトストアへのデータ追加でエラーが起きる
  • upgradeneededイベントが発生し、同名bookオブジェクトストアを作成しようとすることでエラーが起きる
  • upgradeneededイベントが発生し、同名indexを作成しようとすることでエラーが起きる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え B

データベースと接続するには、IDBFactoryのopenメソッドを使用します。
openメソッドの1つ目の引数にはデータベース名を、2つ目の引数にはデータベースのバージョンを指定します。
2つ目の引数で指定したバージョンが、ブラウザが保持しているデータベースのバージョンより大きい場合には、IDBDatabaseオブジェクトのupgradeneededイベントが発生します。
また、データベースとの接続が成功した場合には、successイベントが発生します。
本問題では、ブラウザにはバージョン1のデータベースが作成されているため、upgradeneededは発生しません。
そのため、選択肢CとDは誤りです。
オブジェクトストアの検索やデータ追加をするには、データベースとの接続が成功している状態で、IDBDatabaseオブジェクトのtransactionメソッドを実行します。
transactionメソッドの1つ目の引数では、操作するオブジェクトストア名を、2つ目の引数ではトランザクションのモードを指定します。
トランザクションのモードには、readonly(読み取り専用)やreadwrite(読み書き可能)が指定できます。
トランザクションのモードを省略した場合には、既定値としてreadonly(読み取り専用)が適用され、オブジェクトストアにデータを追加しようとするとエラーが発生します。
そのため、選択肢Bは正答、選択肢Aは誤りとなります。
なお、本問題のソースコードで正しくデータ追加するには、db.transaction( "book", "readwrite" )と指定します。

出題範囲の詳細

例題解説の提供:
HTML5アカデミック認定校 富士通ラーニングメディア
HTML5レベル2認定者 抜山 雄一 氏

例題5.2「2.5.3 File API 」
レベル2の出題範囲「2.5.3 File API 」からの出題です。
次のJavaScriptコードにおいて、色データが格納されたBlobオブジェクトを読み込み、コンソールに「rgba(R, G, B, 不透明度)」の形式で出力するための最も適切なコードを一つ選択しなさい。
なお、コード内のdata変数にR、B、G、不透明度(%)の順にunsigned integerで格納されていることとする。
  •         
    var r, g, b, a = 0;
    var reader = new FileReader();
    reader.onload = function(read){
        var rgba = new Uint8Array(read.target.result);
        r = rgba[0]; // Rの読み込み
        g = rgba[1]; // Gの読み込み
        b = rgba[2]; // Bの読み込み
        a = rgba[3]; // 不透明度の読み込み
    };
    reader.readAsArrayBuffer(data);
    console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
    		
            
  •         
    var r, g, b, a = 0;
    var reader = new FileReader();
    reader.onload = function(read){
        var view = new DataView(read.target.result);
        var rgba = view.getUint32(0);
        r = (rgba & 0xff000000)<<<24; // Rの読み込み
        g = (rgba & 0xff0000)<<<16; // Gの読み込み
        b = (rgba & 0xff00)<<<8; // Bの読み込み
        a = rgba & 0xff; // 不透明度の読み込み
        console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
    };
    reader.readAsArrayBuffer(data);
    		
            
  •         
    var r, g, b, a = 0;
    var reader = new FileReader();
    reader.onload = function(read){
        var view = new DataView(read.target.result);
        r = view.getUint8(0); // Rの読み込み
        g = view.getUint8(1); // Gの読み込み
        b = view.getUint8(2); // Bの読み込み
        a = view.getUint8(3); // 不透明度の読み込み
        console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
    };
    reader.readAsArrayBuffer(data);
    		
            
  •         
    var r, g, b, a = 0;
    var reader_r = new FileReader();
    reader_r.onload = function(read){
        var view = new DataView(read.target.result);
        r = view.getUint8(0); // Rの読み込み
    };
    reader_r.readAsArrayBuffer(data.slice(0, 1));
    
    var reader_g = new FileReader();
    reader_g.onload = function(read){
        var view = new DataView(read.target.result);
        g = view.getUint8(0); // Gの読み込み
    };
    reader_g.readAsArrayBuffer(data.slice(1, 2));
    
    var reader_b = new FileReader();
    reader_b.onload = function(read){
        var view = new DataView(read.target.result);
        b = view.getUint8(0); // Bの読み込み
    };
    reader_b.readAsArrayBuffer(data.slice(2, 3));
    
    var reader_a = new FileReader();
    reader_a.onload = function(read){
        var view = new DataView(read.target.result);
        a = view.getUint8(0); // 不透明度の読み込み
    };
    reader_a.readAsArrayBuffer(data.slice(3, 4));
    console.log("rgba(" + r + ", " + g + ", " + b + ", " + a + ")");
    		
            

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C

reader.onload()メソッドの中でconsole.log()メソッドを呼んでいないAとDは、それぞれの値が不定になるため不正解です。
また、Bは4バイトを一気に読み込んでいるため、実行環境のCPUによって(ビッグエンディアン/リトルエンディアン)値の順番が変わってしまう可能性があります。

検証用データのサンプルコードを下記に掲載します。

        
		// data変数の設定
		var buff = new ArrayBuffer(6); // ArrayBufferのサイズを決めるだけ
		var view = new DataView(buff); // バッファへの入力はDataViewなどで行う
		view.setUint8(0, 0xff); // R
		view.setUint8(1, 0xcc); // G
		view.setUint8(2, 0xaa); // B
		view.setUint8(3, 70); // 不透明度
		var data = new Blob([view], 
           {"type":"application/octet-stream"});
		// IE11の場合
		//var data = new Blob([new Uint8Array([0xff, 0xcc, 0xaa, 70])], 
           {"type":"application/octet-stream"});
       
       

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

例題5.1「2.5.1 Web Storage」
レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Web Storageのセキュリティについて、正しいものを全て選択しなさい。
  • ドメインが同じであれば、ストレージを共有できる。
  • URL毎に独立のストレージを作成できる。
  • ドメインが同じあっても、スキーマが異なる場合はストレージを共有できない。
  • セッションの異なるストレージは共有できない。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

答え C

ページが違っても、スキーマ+ドメインが同じであれば、ストレージを共有できます。
ドメインが異なると共有できません。
Dは、sessionStorageに限定していないので間違いです。

仕様上は、「ユーザが設定した場合、設定された期間が過ぎたら自動で消去する」、「クッキー同様、ユーザがデータを削除できるインターフェースがあること」、「ストレージを利用するサイトをホワイトリストでアクセスコントロール出来ること」、「ユーザがデータの出処(サイト)がわかるようになっていること」などが記述されていますが、ブラウザによっては実装されていないものがあります。

http://www.w3.org/TR/webstorage/#privacy

出題範囲の詳細

例題解説の提供:
LPI-Japanプラチナスポンサー NECソリューションイノベータ株式会社
武藤 周 氏

このページの先頭へ