HTML5プロフェッショナル認定試験レベル2 例題解説

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

2.5 ストレージ

例題5.17「2.5.1 Web Storage」
レベル2の出題範囲「2.5.1 Web Storage」からの出題です。
Web Storageについて正しく説明しているものをすべて選択しなさい。
  • sessionStorageに保存したデータはブラウザーを閉じるとデータが失われる
  • リクエストのたびに保存されているデータをサーバーへ自動的に送信を行う
  • localStorageでは5MB程度のデータを永続的に保存することができる
  • localStorageでは任意のファイルをデータとして保存することができる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日:2020年4月1日

答えはこちら

答え A、C
sessionStorageはブラウザーが起動している間のみデータの保存、読み出しが可能な仕組みです。永続的に保存するためにはlocalStorageを利用します。localStorageは5MB程度のデータを保存することはできますが、基本的にKey-valueの形式で格納する必要があります。そのため、ファイルのようなデータは一度展開してJSONなどの形式に変換した上で格納する必要があるため、Dは間違いです。
リクエストのたびに保存されているデータを送出するのは、Cookieの役割です。セッション状態の保持などに用いられますが、Web Storageとは異なる仕組みのため、Bは間違いです。

出題範囲の詳細

例題解説の提供:株式会社クリーク・アンド・リバー社
関口 和真 氏

例題5.16「2.5.4 バイナリ―データ」
レベル2の出題範囲「2.5.4 バイナリ―データ」からの出題です。
リトルエンディアンの環境で、以下のスクリプトを実行した結果はどれか。

var buf = new ArrayBuffer(4);
var i8 = new Int8Array(buf);
i8[0] = 0x12;
i8[1] = 0x34;
i8[2] = 0x56;
i8[3] = 0x78;
var i16 = new Int16Array(buf);
console.log(i16[0].toString(16)); // 16進表記での出力
  • 12
  • 3412
  • 7856
  • 78563412

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

答えはこちら

答え B
2.5.4 バイナリーデータに関する出題です。
ArrayBufferはバイナリデータを表すためのオブジェクトです。
ただし、ArrayBufferには直接アクセスできないため、ビュー(型付き配列、またはDataView)を通じて操作します。
型付き配列にはInt8ArrayやInt16Array,Float32Arrayのように要素の型とビット長を表わす名前が付いています。
一般的なコンピュータのメモリは1バイト単位でデータを保存しますが、複数バイトにわたる値がメモリに保存される順番のことをバイトオーダーと言います。
バイトオーダーにはビッグエンディアン、リトルエンディアンがあります。
最上位バイトが先頭のものをビッグエンディアン、最下位バイトが先頭になるものをリトルエンディアンと呼びます。
現在主流のパソコンのCPUはリトルエンディアンです。
リトルエンディアンの環境では、0xABCDという16進表記の値は0xCD,0xABという順番でメモリに保存されます。
一見、無駄に複雑なリトルエンディアンですが、メモリからCPUに下の桁から取り出して計算するほうが繰り上りの計算がしやすいなどのメリットがあります。

出題は、4バイトの要素を持つArrayBufferにInt8Arrayのビューを通じてデータをセットしたあと、Int16Arrayのビューを通じてデータを取り出した場合どうなるかという内容です。
[0x12,0x34,0x56,0x78]というArrayBufferに対して、Int16Array(2バイトの型)で要素を取り出していますので、リトルエンディアンの環境では、[下位,上位,下位,上位]という順番で[0x3412,0x7856]という16bitの値が入っていると見なされます。
したがって、インデックス0の要素は0x3412になります。
もしビッグエンディアンの環境なら、[上位,下位,上位,下位]という順番で[0x1234,0x5678]という配列になります。

出題範囲の詳細

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

例題5.15「2.5.4 バイナリ―データ」
レベル2の出題範囲「2.5.4 バイナリ―データ」からの出題です。
JavaScriptの型付き配列に関する記述で間違っているものを選びなさい。
  • JavaScript の型付き配列では バッファ と ビュー に実装を分けている。
  • ArrayBuffer は、可変長のバイナリデータのバッファを示すために使われるデータタイプである。
  • 型付き配列のビューは自身を表現する名称を持ち、Int8、Uint32、Float64 などの一般的な数値型のビューを提供する。
  • ビッグエンディアンとは上位バイトから下位バイトの順に保存する方式である。

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

答えはこちら

答え B
型付き配列に関する問題です。
ArrayBuffer は、一般的な固定長のバイナリデータのバッファを示すために使われるデータタイプです。
JavaScriptにおいて、配列はArrayオブジェクトとして扱いますが、Arrayオブジェクトは可変長のデータ構造です。
固定長とは入れられる要素の個数が決まっていて、可変長は入れる要素の数に応じて配列の大きさが変わることを表わします。
可変長のほうが使うには便利ですが、大きさを変えるために余計な処理とデータ領域が必要になるため効率は良くありません。

JavaScriptでもプログラムの効率化が必要とされるようになってきたため、ArrayBufferのような固定長のデータタイプが用意されました。
したがって B は間違いです。

その他は全て正しい記述です。

AとCの型付き配列は画像データや音声データなどのバイナリ―データを効率良く処理するための仕組みです。
バイナリデータをそのまま格納したArrayBufferと、そのデータを特定のデータ型の配列としてアクセスするビューで構成されます。

詳細は以下のMozilla のサイトにも書かれているので参照してください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays

DのエンディアンとはたとえばUinit32のようにマルチバイトを使用するデータ(この場合は4バイト)をメモリー上にどのような順番で格納するかを決める方式のことです。
ビッグエンディアンは上位の桁から1バイトずつ順番に格納する形式で、リトルエンディアンは下位の桁から1バイトずつ順番に格納する形式です。
一見わかりにくいリトルエンディアンですが、桁数の多い数値の計算をおこなう際に桁上りの処理が簡単になるなどのメリットがあります。
エンディアンの詳細は以下のMozilla のサイトにも書かれているので参照してください。
https://developer.mozilla.org/ja/docs/Glossary/Endianness

出題範囲の詳細

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

例題5.14「2.5.3 File API」
レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素でファイルを選択したあと、JavaScriptを実行した。
ファイルの読み込みが完了する前にreader.abort()が実行されたとき、出力される結果を選択しなさい。

[HTML]
<input id="fileItem" type="file">

[JavaScript]
var fileItem = document.getElementById('fileItem');
var item = fileItem.files.item(0);
var reader = new FileReader();
reader.readAsText(item);
reader.abort();
console.log( reader.readyState );

  • 1
  • 2
  • EMPTY
  • ABORTED

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

答えはこちら

答え B
2.5.3 File API についての出題です。
ローカルからファイルを読み込む、FileReaderオブジェクトのreadyStateプロパティとabortメソッドに関する知識が必要になります。

FileReaderオブジェクトのreadyStateプロパティはファイル読み込みの状態を表わします。 EMPTY(読み込み前),LOADING(読み込み中),DONE(読み込み完了)の3つの状態があり、それぞれ0,1,2の数値で表わされます。

FileReaderによる読み込みを中断させるabortメソッドは終了後にreadyStateプロパティの値をDONE(2)にします。
正常に全てのデータを読み込み終わった状態とabortによる中断はreadyStateプロパティでは判別できない点に注意してください。

出題範囲の詳細

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

例題5.13「2.5.3 File API」
レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの内容を文字列として取得し表示する正しい手順を選択しなさい。
    [HTML]
<input id="fileItem" type="file" multiple="multiple">
  • var fileItem = document.getElementById('fileItem');
    var item = fileItem.files.item(0);
    var reader = new FileReader();
    reader.onload = function(){
    alert(reader.result);
    }
    reader.readAsText(item);
  • var fileItem = document.getElementById('fileItem');
    var item = fileItem.files.item(0);
    var reader = new FileReader(item);
    alert(reader.result);
  • var fileItem = document.getElementById('fileItem');
    var item = fileItem.files.item(0);
    var reader = new FileReader();
    alert(reader.readAsText(item));
  • var fileItem = document.getElementById('fileItem');
    var item = fileItem.files.item(0);
    var reader = new FileReader();
    reader.onload = function(){
    alert(reader.result);
    }
    reader.readAsString(item);

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

答えはこちら

答え A
2.5.3 File API に関する出題です。
ローカルからファイルを読み込む、FileReaderオブジェクトのonloadイベントハンドラとreadAsTextメソッドに関する知識が必要になります。

ローカルファイルを読み込むためには、FileReaderオブジェクトを生成したあと、onloadイベントハンドラに読み込み完了時の処理を設定し、読み込むデータ形式にあわせてreadAs〜メソッドを実行します。

readAs〜メソッドには、
・ readAsArrayBuffer ファイルの内容をArrayBufferオブジェクトとして取得
・ readAsText ファイルの内容を文字列として取得
・ readAsDataURL ファイルの内容をDataURL(バイナリをBase64エンコードした文字列)として取得があります。

Javaなどの他の言語ではファイルを読み込むためのオブジェクトを1ファイル毎に1つ用意しますが、JavaScriptでは一つのFileReaderオブジェクトを使い回すことができるため他の言語の経験者は注意が必要です。

出題範囲の詳細

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

例題5.12「2.5.3 File API」
レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの情報を取得する正しい手順を選択しなさい。
    [HTML]
<input id="fileItem" type="file" multiple="multiple">
  • var fileItem = document.getElementById('fileItem');
    var file = fileItem.files(0);
  • var fileItem = document.getElementById('fileItem');
    var item = fileItem.item(0);
  • var fileItem = document.getElementById('fileItem');
    var files = fileItem.files;
    var item = files.item(0);
  • var fileItem = document.getElementById('fileItem');
    var files = fileItem.files;
    var file = files.get(0);

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

答えはこちら

答え C
2.5.3 File API に関する出題です。
ファイルの情報を管理するFileListオブジェクトのitemメソッドに関する知識が必要になります。

HTML5のFile APIでは、これまで難しかった、ユーザが指定したローカルファイルをJavaScriptで操作できるようになりました。
File APIでは、type属性がfileであるinput要素、つまりファイル選択で選択されたファイルの情報を取得できます。

手順としては、まずinput要素のDOMオブジェクトを取得します。
次にそのオブジェクトのfilesプロパティからFileListオブジェクトを取得します。
最後にFileListオブジェクトのitemメソッドを呼び出すことでFileオブジェクトを取得できます。

ファイル選択では同時に複数のファイルを選択することもできるため、itemメソッドの引数には取得したいファイルのインデックスを指定します。
配列と同じく、インデックスは0から始まります。

複数のファイルを選択するためにはinput要素にmultiple属性が必要ですが、multiple属性が無く、ひとつしかファイルを選択できない場合でも、FileListオブジェクトのitemメソッドにはインデックスの指定が必要です。

出題範囲の詳細

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

例題5.11「2.5.3 File API」
レベル2の出題範囲「2.5.3 File API」からの出題です。
File APIで取得したFileオブジェクトの、lastModifiedDateプロパティの値として正しいものを選択しなさい。
  • 最終更新時間を表すUnixTime(1970年1月1日 0時0分0秒からの秒数)
  • 最終更新時間を表わすDateオブジェクト
  • 最終更新時間を表す "2016-11-16 13:00:18"のような文字列
  • 最終更新時間を表す "Wed Nov 16 2016 13:00:18 GMT+0900 (JST)"のような文字列

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

答えはこちら

答え B
2.5.3 File API に関する出題です。
ファイルの情報を管理するFileオブジェクトのlastModifiedDateに関する知識が必要になります。

Fileオブジェクトには最終更新時間を表すlastModifiedDateプロパティがあります。 lastModifiedDateプロパティは読み取り専用で、Dateオブジェクトを取得することができます。
Dateオブジェクトはalertメソッドやdocument.writeメソッドで表示すると、 自動的にDateオブジェクトの内容が文字列に変換されるため、 "Wed Nov 16 2016 13:00:18 GMT+0900 (JST)"のような結果になります。 lastModifiedDateプロパティに文字列が格納されていると勘違いしないよう注意が必要です。

出題範囲にはlastModifiedDateとして記載されていますが、W3CのFile API草案では、 lastModifiedプロパティとしてUnixTimeを扱うよう変更されました。 Webブラウザによって対応が違うので注意が必要です。

参考ページ:https://www.w3.org/TR/2015/WD-FileAPI-20150421/#file-attrs

出題範囲の詳細

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

例題5.10「2.5.3 File API」
レベル2の出題範囲「2.5.3 File API」からの出題です。
以下のinput要素で選択したファイルの個数を表示する正しい手順を選択しなさい。
    [HTML]
<input id="fileItem" type="file" multiple="multiple">
  • var fileItem = document.getElementById('fileItem');
    alert(fileItem.length);
  • var fileItem = document.getElementById('fileItem');
    alert(fileItem.files.length);
  • var fileItem = document.getElementById('fileItem');
    alert(count(fileItem.files));
  • var fileItem = document.getElementById('fileItem');
    alert(count(fileItem.files));

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

答えはこちら

答え B
2.5.3 File API に関する出題です。
ファイルの情報を管理するFileListオブジェクトの取得方法とlengthプロパティに関する知識が必要になります。

type属性がfileのinput要素でユーザが選択したファイル情報のリストを管理するオブジェクトが、FileListオブジェクトです。
input要素のDOMオブジェクトのfilesプロパティで、FileListオブジェクトを取得できます。
FileListオブジェクトには選択したファイルの数を表わすlengthプロパティと、 リストから一つのFileオブジェクトを取り出すitemメソッドがあります。
ちなみに、複数のファイルを選択するためには、input要素にmultiple属性が必要です。

出題範囲の詳細

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

例題5.9「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レベル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レベル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レベル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レベル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レベル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レベル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ソリューションイノベータ株式会社
武藤 周 氏

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及/促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。