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

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

2.8 パフォーマンスとオフライン

例題8.11「2.8.3オフラインアプリケーションAPI」
レベル2の出題範囲「2.8.3オフラインアプリケーションAPI」からの出題です。
ブラウザがネットに接続しているかどうか判別するために利用できるプロパティは以下のどれか選びなさい。
  • navigator.connection
  • window.navigator.onLine
  • window.onoffline
  • window.ononline

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

答えはこちら

答え B
ブラウザのネット接続状況に関する判別方法に関する問題です。
window.navigator.onLine プロパティはブラウザの接続状態を返します。 true はオンライン、false はオフラインを示します。

このプロパティを使うと、ネットワーク接続している場合にのみXmlHttpRequestなどを使ってサーバーとデータのやり取りをし、接続していない場合はウェブブラウザのストレージにデータを保存しておくというような機能を実現できます。

詳細は以下の Mozilla のリンクを参照してください。
https://developer.mozilla.org/ja/docs/Web/API/NavigatorOnLine/onLine

他の選択肢についても解説します。
CとDを使用してもネットワークの接続状態を調べることは可能ですがこの2つはイベントでありプロパティではありません。

window.ononlineはウェブブラウザがネットワークに接続した場合に発生するイベントです。同様に、window.onofflineはウェブブラウザからネットワーク接続が切断された場合に発生するイベントです。
ただし、ページ読み込みの段階ですでに接続または切断している場合にはこれらのイベントは発生しないので注意が必要です。あくまでも状態が変化した場合にのみ発生するイベントです。

また、XAMPPなどローカルで動くWebサーバーで検証している場合、他にネットワーク接続がないとofflineになることがある点も注意が必要です。

詳細は以下の Mozilla のリンクを参照してください。
https://developer.mozilla.org/ja/docs/Online_and_offline_events

Aのnavigator.connection　は主にネットワークの帯域の判定に使われるものです。
有線、Wi-Fi、携帯電話網などの接続種別を取得したり、接続方法が変わるとイベントが発生するような機能が想定されています。2017年11月現在ではドラフト状態の規格で、いくつかのモバイル系のブラウザとGoogle Chromeで一部の機能の実装が行われている程度ですので、まだ実用は難しいでしょう。

内容につきましては以下の Mozilla のリンクやW3Cの仕様を参照してください。
https://developer.mozilla.org/ja/docs/Web/API/Navigator/connection
http://wicg.github.io/netinfo/

出題範囲の詳細

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

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

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

答えはこちら

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

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

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

出題範囲の詳細

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

例題8.9「2.8.2 High Resolution Time」
レベル2の出題範囲「2.8.2 High Resolution Time」からの出題です。
ミリ秒精度の現在時刻と、マイクロ秒精度の時刻原点からの時刻を取得するメソッドの正しい組み合わせを一つ選択して下さい。
  • ミリ秒精度:performance.now() マイクロ秒精度:Date.now()
  • ミリ秒精度:Date.getMilliseconds() マイクロ秒精度:performance.getMicroSeconds()
  • ミリ秒精度:Date.getMilliseconds() マイクロ秒精度:performance.now()
  • ミリ秒精度:Date.now() マイクロ秒精度:performance.getMicroSeconds()
  • ミリ秒精度:Date.now() マイクロ秒精度:performance.now())

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

答えはこちら

答え E
JavaScriptで日時を扱う場合は通常Dateオブジェクトを使用しますが、ミリ秒(1/1000秒)精度のため、ほんの一瞬の処理にかかった時間を計測しようとすると、結果が0ミリ秒になってしまうことがありえます。
そこで、より高精度の時刻を取得できる、High Resolution APIがHTML5で導入されました。
High Resolution APIはNavigation Timing API同様、window.performanceプロパティを使用します。
performanceオブジェクトはHigh Resolution API唯一のメソッドである、now()メソッドを持ちます。
Dateオブジェクトで現在時刻を取得するDate.now()メソッド同様、
performance.now()という形で使用します。

[例]
var milli = Date.now();
var micro = performance.now();
var a = 10000;
var b = 20000;
var c = a + b;
document.write('Date.now():'+(Date.now() - milli)+'ms');
document.write('performance.now():'+(performance.now() - micro)+'ms');
上記スクリプトでは環境に依るものの、Date.now()を使用したケースでは0msになってしまいますが、performance.now()を使用したケースでは、0.030856113880872726msといった値が取得できます。
Date.now()とperformance.now()の大きな違いはもうひとつあり、 Date.now()は1970 年 1 月 1 日 から経過したミリ秒単位での整数値の測定結果であることに対し、 performance.now()ではナビゲーション開始時点からのマイクロ秒精度の小数点以下の値を持つミリ秒単位での測定結果であることです。
performance.now()の結果は、ブラウザ、またはブラウザの設定によってより低い精度に丸められることがあります。
その他の選択肢は、
A. ミリ秒精度とマイクロ秒精度の内容が逆です。
B. Date.getMilliseconds()および、performance.getMicroSeconds()というメソッドはありません。
C. Date.getMilliseconds()というメソッドはありません。DateオブジェクトのgetMilliseconds()インスタンスメソッドは指定された日時のミリ秒部分のみを取得します。
D. performance.getMicroSeconds()というメソッドはありません。

出題範囲の詳細

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

例題8.8「2.8.5 Navigation Timing 」
レベル2の出題範囲「2.8.5 Navigation Timing」からの出題です。
DNSにおける名前解決の所要時間を取得するために使用する、Navigation Timing APIのプロパティを2つ選択して下さい。
  • domainLookupStart
  • domainLookupBegin
  • domainLookupStop
  • domainLookupEnd

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

答えはこちら

解答 A,D
Webページの読み込みに関する一連の動作をナビゲーション(Navigation)と呼びます。
ナビゲーションでは、Webブラウザは現在表示しているページ情報の削除(アンロード)から、ロードの完了までの各工程を経ます。
この各工程の開始および終了時刻を取得する仕組みがNavigation Timing APIです。
Navigation Timing APIを使用することで、Webページの表示で時間の掛る工程を発見できるため、Webページの表示の高速化に役立てることができます。
Navigation Timing APIでは、Windowオブジェクトに属する、performanceプロパティを使用します。
グローバルオブジェクトであるWindowに所属するため、任意の場所でwindow.performanceとしても、 performanceとしても使用することができます。
performanceオブジェクトは、時刻情報を持つtimingオブジェクトと、ページ遷移に関する情報を持つ、navigationオブジェクトをプロパティに持ちますが、試験範囲を見ると、timingオブジェクトの比重が高いようです。
DNSによる名前解決の所要時間は、domainLookupStartプロパティと、domainLookupEndプロパティを使用して以下の式で取得することができます。
performance.timing.domainLookupEnd - performance.timing.domainLookupStart
ただし、Webブラウザに名前解決のキャッシュがある場合は、domainLookupStartとdomainLookupEndの値は等しくなります。
その他の選択肢 B,Cは存在しないプロパティです。
Navigation Timing APIでは、Start/Stop,Begin/Endという組み合わせでは"無い"ので注意してください。

出題範囲の詳細

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

例題8.7「2.8.5 Navigation Timing」
レベル2の出題範囲「2.8.5 Navigation Timing」からの出題です。
Performanceオブジェクトで取得できる情報を下記からすべて選びなさい。
  • ミリ秒スケールでのリソースの取得にかかる時間
  • マイクロ秒スケールでの現在時刻
  • マイクロ秒スケールでの経過時間
  • ミリ秒スケールでの現在時刻

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

答えはこちら

答え A, C
PerformanceオブジェクトのgetEntriesByType("resource")でCSSやJavaScriptファイルなどのリソースの取得にかかる時間を取得できます。Resource Timing APIで定義されています。
ただし、navigationプロパティで取得できるエポック秒ではなく、ナビゲーション開始からの経過時間です。
マイクロ秒スケールで取得できるのは、High Resolution Time APIで定義されている、now()メソッドになりますが、現在時刻ではなく、こちらもナビゲーション開始からの経過時間です。
マイクロ秒スケールでの経過時間は、User Timing APIを利用します。
mark("識別子")メソッドによって、ナビゲーション開始からの経過時間をマイクロ秒スケールで記録し、measure("識別子", "識別子start", "識別子End")メソッドによって時間差を算出、getEntriesByType("measure")によって、記録した時間差を参照できます。
また、markしたものは、getEntriesByType("mark")で参照できます。
これらのマイクロ秒スケールで取得できる時間は、実際にはミリ秒単位で、小数点以下にマイクロ秒が表現されます。
ミリ秒スケールでの現在時刻の取得は、Dateオブジェクトです。

出題範囲の詳細

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

例題8.6「2.8.5 Navigation Timing」
レベル2の出題範囲「2.8.5 Navigation Timing」からの出題です。
Navigation Timing APIを用いて、画面表示のパフォーマンスを計測できるケースを全て選択しなさい。
  • onloadイベントハンドラの中で、AJAXとDOM操作によって表示する画面を構築する。
  • DOM操作によってiframeタグを追加し、その中に画面を表示する。
  • DOM操作によってdivタグを追加し、その中にAJAXとDOM操作によって表示する画面を構築する。
  • グローバルなJavaScriptの処理の中で、DOM操作によって表示する画面を構築する。

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

答えはこちら

答え B,D

Navigation Timing APIは、windowオブジェクトが持つperformance属性から利用できます。

このAPIによって計測できるタイミングは、URLの変更によって現在の画面がアンロードされるタイミングから、サーバにアクセスしてHTMLファイルを取得、DOMの解析、画面表示に必要な（DOMの変更のおそれのある）CSSやJavaScriptを全てロードし、onloadイベントハンドラが終了するタイミングまでです。

単にブラウザが必要なファイルを取得してレンダリングするだけであれば、このAPIを用いて画面表示というユーザが利用可能になるまでのパフォーマンスを計測できますが、AJAXなどを利用して非同期で画面を構築する、といった場合には、このAPIでは画面表示のパフォーマンスを測れません。
ただし、iframeタグの中では、windowオブジェクトを持っているため、そのパフォーマンスを測定することは可能です。

出題範囲の詳細

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

例題8.5「2.8.1 Web Workers」
レベル2の出題範囲「2.8.1 Web Workers」からの出題です。
以下の内容のJavaScriptファイル(worker.js)を使用してWeb Workerを使用した場合に、発生したエラー内容を表示することのできるスクリプトを一つ選択しなさい。
worker.js

   onmessage = function(event) {
   	postMessage(dummy); // 未宣言の変数の参照
   }
  • var worker = new Worker('worker.js');
    worker.onerror = function(error) {
      console.error(error.lineno);
    }
    worker.postMessage('Hello.');
  • var worker = new Worker('worker.js');
    worker.onerror = function(error) {
      console.error(error.message);
    }
    worker.postMessage('Hello.');
  • var worker = new Worker('worker.js');
    worker.onmessage = function(error) {
      console.error(error.message);
    }
    worker.postMessage('Hello.');
  • var worker = new Worker('worker.js');
    worker.onerror = function(error) {
      console.error(error.filename);
    }
    worker.postMessage('Hello.');

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

答えはこちら

答え B

Web Workerのエラー検知およびエラーイベントについての問題です。
Web Workerの内部で発生したエラーを検知するためには、Workerのonerrorイベントにイベントハンドラを設定します。

イベントハンドラにはerrorイベントオブジェクトが渡されます。
errorイベントオブジェクトにはエラー内容に関する様々なプロパティがありますが、試験範囲内では、
・人間が読み取れるエラーメッセージとして、messageプロパティ
・エラーが発生したスクリプトのファイル名,filanameプロパティ
・スクリプトファイル内でのエラーが発生した行番号,linenoプロパティ
が挙げられています。

従って、onerrorイベントへのイベントハンドラ設定と、error.messageプロパティを使用しているBが正解となります。

その他の選択肢については、
A. error.linenoを出力しているため、エラーの発生した行番号しか表示されません。
C. onmessageイベントを使用しているため、エラー検知を行なえません。
D. error.filenameを出力しているため、エラーの発生したファイル名しか表示されません。

出題範囲の詳細

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

例題8.4「2.8.1 Web Workers」
レベル2の出題範囲「2.8.1 Web Workers」からの出題です。
次のHTMLを表示した際の説明として正しいものをすべて選びなさい。
sample.html

<html>
<head>
<meta charset="utf-8">
<script>
var obj = {"num": 1000000000};
var func = function(obj){
    var result = 0;
    for (var i = 0; i <= obj.num; i++) {
        result += i;
    }
    return result;
}

var worker = new Worker("worker.js");
worker.onmessage = function(e) {
    document.getElementsByTagName("body")[0].innerHTML = e.data;
};
worker.onerror = function(e) {
    document.getElementsByTagName("body")[0].innerHTML = e;
};
worker.postMessage({"obj": obj, "func":func});
</script>
</head>
<body></body>
</html>
worker.js

onmessage = function(e){
    postMessage( e.data.func(e.data.obj) );
};
  • エラーメッセージが表示される。
  • 1から1000000000まで合計した値が表示される。
  • ブラウザがフリーズする。
  • 何も表示されない。

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

答えはこちら

答え D
関数オブジェクトは、そのままワーカーには渡せずにエラーになって、何も表示されずに停止します。
下記のように、関数オブジェクトを文字列に変換してから渡す、ワーカー側で文字列から関数オブジェクトを作成して実行する、といった改修を行えば、ワーカーとして正常に動作します。
sample.html 21行目

worker.postMessage({"obj": obj, "func":func});
　↓
worker.postMessage({"obj": obj, "func":func.toString()});
worker.js

onmessage = function(e){
    var f;
    eval(\'f = \' + e.data.func);
    postMessage( f(e.data.obj) );
};
また、ワーカーは別スレッドで動作するため、ブラウザはフリーズしません。

出題範囲の詳細

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

例題8.3「2.8.4 Page Visibility」
レベル2の出題範囲「2.8.4 Page Visibility」からの出題です。
ページを表示しているウィンドウをユーザが見える状態にしているかどうかをコンソールに表示するコードとして正しいものをすべて選びなさい。
  • document.addEventListener("visibilitychange", function(e){
    if(document.visibilityState=="visible")console.log("見ている");
    else console.log("見ていない")
    }, false);
  • document.addEventListener("visibilitychange", function(e){
    if(document.hidden == false) console.log("見ている");
    else console.log("見ていない");
    }, false);
  • window.addEventListener("online", function(){console.log("見ている")}, false);
    window.addEventListener("offline", function(){console.log("見ていない")}, false);
  • window.AddEventListener("pageshow", function(){console.log("見ている")}, false);
    window.AddEventListener("pagehidden", function(){console.log("見ていない")}, false);

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

答えはこちら

答え A、B

ページを表示しているウィンドウを「ユーザが見える状態」と「そうでない（違うタブを表示している、ウィンドウを最小化している）状態」で切り替えるときに発生するイベントが、documentオブジェクトに発生するvisibilitychangeイベントです。
このイベントが発生した時に、document.visibilityStateとdocument.hiddenの状態が両方とも変更されるので、どちらを参照してもよいです。

windowオブジェクトに発生するonline / offlineイベントは、ネットワーク状態の変化によって発生し、また、pageshow / pagehiddenイベントは、ヒストリ操作によるページ移動で発生します。

出題範囲の詳細

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

例題8.2「2.8.3 オフラインアプリケーションAPI」
レベル2の出題範囲「2.8.3 オフラインアプリケーションAPI」からの出題です。
オフラインWebアプリケーションで、JavaScriptを使用してキャッシュされたファイルを更新したい。更新に必要なApplication Cacheのメソッドを全て選択しなさい。
  • update()
  • releadCache()
  • swapCache()
  • cleanCache()
  • reflesh()

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

答えはこちら

答え A, C
Level.1 試験では、"1.5.1 オフラインWebアプリケーション"として出題されている機能ですが、Level.2 試験では、JavaScriptからアプリケーションキャッシュを操作する方法が出題範囲に含まれるようになります。
update()メソッドはキャッシュの更新を開始します。
update()メソッドを実行した結果、statusプロパティがUPDATEREADYになれば、更新するファイルがあるということになります。
swapCache()メソッドを実行して、キャッシュの内容を更新します。
swapCacheメソッドを実行してキャッシュの内容を入れ替えてもページをリロードしない限り、新しいリソースは使用されない点は注意が必要です。
必要であればwindow.location.reload()を実行して自動的にリロードを行ないます。
その他の選択肢については、
B,D,E そのようなメソッドはありません。

出題範囲の詳細

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

例題8.1「2.8.3 オフラインアプリケーションAPI」
レベル2の出題範囲「2.8.3 オフラインアプリケーションAPI」からの出題です。
アプリケーションキャッシュでキャッシュされるリソースについて、正しいものを一つ選択しなさい。
  • マニフェストファイルがあるサイトとは違う、リモートサイトのリソースもキャッシュできる。
  • 認証などオンラインで取得する必要があるリソースがある場合は、そのリソースだけキャッシュされない。
  • キャッシュの取得に失敗したリソースがある場合は、そのリソースだけキャッシュされない。
  • マニフェストファイルがあるサイトにあるリソースを、リモートサイトのリソースの代わりにキャッシュできる。

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

答えはこちら

答え B
マニフェストファイルには、同一サイトのリソース（URL）しか記述できません。
オンラインで取得する必要があるリソースは、マニフェストファイルのNETWORKセクションに書けばキャッシュされません。
マニフェストファイルにキャッシュする対象とされたリソースは、全て取得できないとキャッシュが更新されません。

出題範囲の詳細

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

メルマガ登録E-mail Magazine

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

氏名

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

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

メルマガ登録する