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

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

2.6 通信

例題6.7「2.6.3 Server-Sent Events」
レベル2の出題範囲「2.6.3 Server-Sent Events」からの出題です。
Server-Sent Eventsを使用するためにはどのオブジェクトを生成すれば良いか、正しいものを選択しなさい。
  • ServerSentオブジェクト
  • EventSourceオブジェクト
  • XMLHttpRequestオブジェクト
  • WebSocketオブジェクト

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

答えはこちら

答え B
2.6.3 Server-Sent Eventsに関する出題です。
Server-Sent Eventsは、クライアントからコネクションを接続すれば、サーバから任意のタイミングで情報を送信できる仕組みです。
Server-Sent Eventsを利用するには、EventSourceオブジェクトを生成します。
ServerSentオブジェクトは存在しません。
スクリプトでの記述は以下のようになります。

var eventSource = new EventSource(接続先URL);
eventSource.onmessage = function(event) {
// 受信時の処理
}

EventSourceオブジェクトとWebSocketオブジェクトは生成時に引数で接続先URLを指定し、XMLHttpRequestオブジェクトはopenメソッドで接続先を指定します。

出題範囲の詳細

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

例題6.6「2.6.2 XMLHttpRequest」
レベル2の出題範囲「2.6.2 XMLHttpRequest」からの出題です。
以下のソースコードにおいて、受信したデータを取得するために[A]に入れるべき値を選択しなさい。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState == [ A ] ){
		if(xhr.status == 200) {
			alert(xhr.responseText);
		}
	}
};
xhr.open('get','http://example.jp/',true);
xhr.send();
  • 1
  • 2
  • 3
  • 4

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

答えはこちら

答え D
2.6.2 XMLHttpRequestに関する出題です。
XMLHttpRequestオブジェクトを使用すると、ウェブブラウザによるページのロードやリロードと非同期にサーバへアクセスすることができます。
XMLHttpRequestオブジェクトのreadyStateプロパティは接続の状態によって値が変化します。
0:UNSET(XMLHttpRequestオブジェクトが作成されたが、openメソッドが呼び出される前)
1:OPEND(openメソッドが呼び出された)
2:HEADERS_RECEIVED(send()メソッドが呼び出され、レスポンスヘッダの受信まで完了)
3:LOADING(サーバからのレスポンス(Body部分)をダウンロード中)
4:DONE(レスポンスダウンロードまで全て完了)

また、readyStateプロパティの値が変化するとonreadystatechangeイベントが発生します。
出題のスクリプトではonreadystatechangeイベントの中で、readyStateプロパティを使ってデータが取り出せる状態のチェックをしています。
xhr.readyState == 4であれば受信が完了しています。
しかし受信が完了していても、何らかのエラーが発生している可能性があるため、statusプロパティでレスポンスのステータスコードが200(OK)であることを確認しています。
そのあとでresponseTextプロパティを使ってサーバからのデータを取り出しています。

出題範囲の詳細

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

例題6.5「2.6.3 Server-Sent Event」
レベル2の出題範囲「2.6.3 Server-Sent Event」からの出題です。
Server-Sent Eventで使用されるEventSource　オブジェクトに存在するイベントを全て選びなさい。
  • onready
  • onopen
  • onmessage
  • onend

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

答えはこちら

答え B、C
これはServer-Sent Eventの各種イベントハンドリングに関する問題です。
イベントを受け取るためにサーバーへの接続を開始するには、イベントを生成するスクリプトの URI を指定する新たな EventSource オブジェクトを作成します。
インスタンスを生成したら、メッセージの受け取りを始めることができます。
EventSourceのイベントハンドラは以下の3つです。
onerror: エラーがイベントが起きたときに呼ばれます。
　 onmessage: メッセージイベントを受け取ったときに呼ばれます。
onopen: 接続が開始された時に呼ばれます。
従って、BとCが正解です。
Aに関しては readyState プロパテイというものがあります。
Dに関しては接続を閉じるclose()というメソッドがあります。

出題範囲の詳細

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

例題6.4「2.6.2 XMLHttpRequest」
レベル2の出題範囲「2.6.2 XMLHttpRequest」からの出題です。
XMLHttpRequestオブジェクトを使用して取得したデータをブラウザにキャッシュさせないための方法として適切なものを一つ選択しなさい。
  • XMLHttpRequestオブジェクトのnoCacheプロパティにtrueをセットする
  • アクセスするURLを毎回違う文字列にする
  • WindowオブジェクトのnoCacheプロパティにtrueをセットする
  • openメソッドの第5引数に{\'Cache-Control\':\'no-cache\'}を指定する

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

答えはこちら

答え B
XMLHttpRequestを使用した非同期通信においても、Webブラウザのキャッシュ機能は適用されるため、繰り返しアクセスしてもキャッシュされたコンテンツしか取得できないケースがあります。Webブラウザのキャッシュを無効化する最も確実な方法は、毎回異なるURLでアクセスすることです。
XMLHttpRequestのopenメソッドで使用するURLについて、以下のように、最後に現在時刻を追加することでアクセスする毎に異なる文字列を生成することが出来ます。

var url = \'http://example.jp/\';
url += ((/\\?/).test(url) ? "&" : "?") + (new Date()).getTime();
このテクニックはXMLHttpRequest以外でもキャッシュ回避の方法として有用です。
また、試験範囲には含まれていませんが、XMLHttpRequestオブジェクトのsetRequestHeaderメソッドを使用し、リクエストヘッダにキャッシュ無効化の設定を埋め込むことでWebブラウザのキャッシュを回避することも可能です。
その他の選択肢、A,CについてはnoCacheというプロパティは存在しません。Dについてはopenメソッドに第5引数は存在しません。

出題範囲の詳細

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

例題6.3「2.6.1 WebSocket」
レベル2の出題範囲「2.6.1 WebSocket」からの出題です。
ブラウザ（JavaScript）からのWebSocketの接続時において、サーバとの間で認証を行いたい。
認証情報の送信に利用可能な手段をすべて選びなさい。
  • クッキー
  • 任意のHTTPヘッダ
  • WebSocketのサブプロトコル(Sec-WebSocket-Protocolヘッダ)
  • WebSocketの拡張(Sec-WebSocket-Extensionsヘッダ)

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

答えはこちら

答え A, C
ブラウザからJavaScriptでWebSocket接続するには、WebSocketオブジェクトを生成するだけでいいのですが、現状、その際に指定できるパラメータはURIとサブプロトコルのリストだけです。
WebSocketの仕様上、任意のヘッダを利用できる、WebSocketの拡張が利用できる、とありますが、現在のJavaScriptのAPIには実装されていません。
他にはクッキーが利用できます。従って、WebSocketの接続における認証で利用できる手段は、現状、サブプロトコルとクッキーに限られます。
もちろん、WebSocket接続後のメッセージのやりとり（messageイベント）の中でも実現可能ですが、メッセージを受信したタイミング全てで認証済みかの判断を入れることになり、コスト増につながります。

出題範囲の詳細

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

例題6.2「2.6 通信」
レベル2の出題範囲「2.6 通信」からの出題です。（WebRTCについては2017年1月現在、出題範囲には含まれていません。）
WebRTCの説明として、間違っているものを全て選択しなさい。
  • カメラやマイクなどのクライアントPCの資産が利用できる。
  • ブラウザ同士で直接（peer to peer）接続ができるため、サーバを必要としない。
  • WebRTCを使えば、ブラウザだけ（プラグインなどの機能拡張なし）で、ビデオチャットアプリケーションが作成できる。
  • WebRTCで扱える通信データは、画像や音声のストリーミングだけである。

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

答えはこちら

答え B,D

WebRTCでは、ブラウザ同士の直接接続をネゴシエートするために、事前にお互いの情報をやりとりする必要があるため、サーバは必要です。
お互いの情報を作成/チェックするために、STUNやTURN、ICEなどのIRC関連プロトコルを利用しており、これらのサーバも必要になります。
PCのカメラやマイクから取得した画像や音声のストリーミングだけでなく、DataChannelを利用してピア接続上で双方向通信が行えます。

出題範囲の詳細

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

例題6.1「2.6.1 WebSocket」
レベル2の出題範囲「2.6.1 WebSocket」からの出題です。
WebSocketで扱えるデータについて、間違っているものを全て選択しなさい。
  • WebSocketで扱えるデータはテキストだけである。
  • WebSocketでバイナリデータを送受信したい場合は、BASE64でエンコードして文字列として送受信する必要がある。
  • WebSocketでは、テキストだけでなく、バイナリデータも送受信でき、画像や音楽など様々なデータをサポートしている。
  • WebSocketで送受信可能なデータサイズに特に制限はない。

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

答えはこちら

答え A,B,C

WebSocketで扱えるデータは、String、Blob、ArrayBuffer、ArrayBufferViewの4種類である。
バイナリデータを扱えるため、Base64でエンコードして文字列にする必要はありません。
しかし、バイナリデータはBlob、ArrayBuffer、ArrayBufferViewしかないので、画像や音楽などのデータを扱うには独自に実装する必要があります。

送受信可能なデータサイズには、WebSocketの仕様として特に明記されていません。
しかし、実際にはネットワークの許容量やブラウザ、サーバなど、様々な制限が存在します。
また、unsigned longのbufferedAmountプロパティによって未送信のデータ量が制御されています。

出題範囲の詳細

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

メルマガ登録E-mail Magazine

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

氏名

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

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

メルマガ登録する