API | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「HTML5.1のAPI」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTMAPIL技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

マルチメディア

HTML5で追加されたaudio要素video要素により、簡単にマルチメディアコンテンツを埋め込むことが可能になった。

この埋め込んだマルチメディアコンテンツを、JavaScriptを使って制御することができる。

JavaScriptで実行可能な操作

〇 コンテンツの再読み込み
〇 再生の開始
〇 再生の一時停止
再生位置の変更

JavaScriptで取得可能なデータ

〇 コンテンツが再生・早送り等可能な状態か
〇 ネットワークの状態
〇 エラー情報
〇 コンテンツの場所
〇 コンテンツの長さ
〇 音量(設定は0~1の範囲で設定可能
〇 トラック情報

〇 自動再生の設定
〇 繰り返し再生の設定
〇 再生メニューの表示/非表示
〇 現在の再生時間
〇 音声のミュート設定
再生速度の設定

JavaScriptでできないこと!

× 全画面表示の切り替え

ストリーミング

ストリーミングを実現する技術

モバイルデバイスやPC等、様々なネットワーク環境を対象に、動画をストリーミング再生させるサービスが増えている。特にモバイルデバイスにおいては、その通信状況も刻々と変化している。

ストリーミング技術とは、動画コンテンツをダウンロードしながら再生する技術のこと。

Adaptive Streaming技術とは、通信状況に合わせて、適切なビットレートの動画を選択し、スムーズなストリーミング再生を実現する技術のことをいう。

代表的なAdaptive Streaming技術には、HLS(HTTP Live Streaming)MPEG-DASH(Dynamic Adaptive Streaming over HTTP)がある。

HLS(HTTP Live Streaming)は、
米アップル社が開発した、動画をストリーミング配信するためのプロトコル
HTTPベースで、
特別なストリーミングサーバを使わず
通常のWebサーバから配信することが可能。
HTTPSを使った暗号化や認証にも対応。

DASH(Dynamic Adaptive Streaming over HTTP)は、
アドビ社や米マイクロソフト社などにより開発されたプロトコル。
HLSと同様にHTTPプロトコルを利用。
通常のWebサーバから配信することが可能。
2012年にISOにて標準化された。
MSEから操作でき、ファイルのコーデックに依存しない。

ちなみに…
WebMは、Webで利用できる動画フォーマット。

ストリーミング配信のためのJavaScript API

JavaScriptAPIストリーミングに対応したものが用意されている。

Media Source Extensions (MSE) は、HLSMPEG-DASHのように、HTTPでストリーミング配信されるコンテンツを再生するために作られたAPI

Media Source Extensions (MSE) を利用すると、video要素などをプラグインなしでストリーミング配信されるコンテンツを再生することができる

またMSEは、あらかじめ短い時間に区切られたメディアデータを扱うため、動画の合間に広告やそのほかのコンテンツを挿入したり、コンテンツの途中から再生を開始したりできる。

Media Source Extensions (MSE) は、Adaptive Streaming技術にも対応しているので、ネットワーク帯域幅やCPU使用率に基づいて、再生途中で動画のビットレートを変更することも可能。

もう1つ、動画配信に重要なものにDRM(Digital Rights Management デジタル著作権管理)がある。

ただ、MSEにはDRMの仕組みがないため、不正にコンテンツをコピー・再配布される危険性がある

Encrypted Media Extensions (EME)は、暗号で保護されたストリーミングコンテンツを再生する際に使用する。

Media Source Extensions (MSE)Encrypted Media Extensions (EME)を組み合わせることで、DRMで保護されたストリーミングコンテンツをWebブラウザ上で再生することができる。

グラフィックス

HTML4まではJPEGやPNGなどの画像ファイルを別途用意して画像を表示していた。また画像を動的に変更するにはFlashなどのプラグインが必要だった。HTML5では、それらをJavaScriptで実現できるようになっている

Canvas

Canvasは、JavaScriptを使って画像を描画するための仕様。

Canvasは、画像をビットマップ形式で描画する。DOMツリーは構成しないが、JavaScriptからCanvas上のピクセル情報を操作できる。

アニメーション描画のメソッドは存在しないが、静止画の描画を繰り返すことでアニメーションを実現できる。

ビットマップ形式のため、拡大・縮小すると画像が粗くなる

描画した画像を変更するには、全体を書き直す必要がある。

また、ブラウザに対応した画像ファイルをCanvasに読み込み、加工し、画像ファイルとして書き出すことも可能

Canvasを利用する際の流れ
1.HTMLcanvas要素を用意する
2.JavaScriptcanvas要素を参照し、描画用のContextオブジェクトを取得する
3.JavaScriptを使って描画する。

■Canvasで描画可能な操作
・線を書く
・円を書く
・四角を書く
・色を塗る
・テキストを書く
・画像ファイルを読み込む
・拡大・縮小・回転する

SVG (Scalable Vector Graphics)

SVGは、ベクター形式の画像をHTMLに直接インライン要素として記述できる仕様。

ベクター形式のため、拡大・縮小・回転といった変形をしても、画像が粗くならない

XML形式で画像を作成する。

DOMツリーを構成するため、一度描画した図形をJavaScriptから操作することが可能。

SVGをHTMLで表示するには、svg要素のほか、img要素CSSを利用する方法などがある。

svg要素を利用する場合、HTMLファイルにSVGのソースコードを記述することができる。

img要素を利用する場合、src属性の値にsvg形式の画像データを指定する。

CSSを利用する場合、background-imageプロパティを使い、背景画像としてsvg形式の画像データを読み込む。

svg要素内で使用する要素
circle 円を作成する
ellipse 楕円を作成する
line 線を作成する
rect 四角形を作成する
path パスを定義する

デバイスアクセスAPI

Geolocation API

Geolocation APIは、ユーザーの位置情報を扱うためのAPI。たとえば地図で現在位置を取得したり、その場所に行った事を知らせるチェックインのような機能で使われる。

地図サービスと連携することで、地図上に現在位置などの表示を行える。また、現在位置から移動した場合でも、監視して自動的に新しい位置情報を取得することもできる

Geolocation APIでは、無線LAN、Wi-Fi、携帯電話基地局、GPS、IPアドレスといった複数のソースから位置情報を取得する。

そのため、ユーザーの環境によって取得できる情報の精度取得時間に違いが出てくる

Geolocation APIでは、ユーザーの許可がないと位置情報を取得することができない。位置情報を取得する際には、ブラウザは位置情報の利用を許可するかどうかをユーザーに確認するダイアログを表示するようになっている。

Geolocation APIは現在、一般的なブラウザでもサポートされている。よってPCのようなGPS情報を取得できない端末にも、位置情報を利用したコンテンツを提供することが可能

■ 経度
■ 緯度
■ 高度
■ 経度・緯度・高度の精度
■ 方角
速度

Device Orientation Event

Device Orientation Eventは、デバイスの方角や傾きが変化した時に発生するイベント

■ デバイスの頭が指す方角
■ デバイスの上下方向の傾き(x軸)
■ デバイスの左右方向の傾き(y軸)
■ デバイスのひねり(z軸)
Device Orientation Eventが発生したタイミングで、JavaScriptのプログラムを用いてユーザインターフェースを変更できる。
また、メディアクエリを用いてユーザインターフェースを切り替えることも可能。
デバイスの温度、電圧、重力などの情報は取得できない

Touch Events

Touch Eventsは、タッチパネルなどの画面を触るなど、画面を指で操作している間に、その状態が変化すると発生するイベントマウス関連のイベントとは異なり、複数同時発生するタッチをサポートしている

Touch Eventsは、マルチポイントタッチに対応するなど、タッチスクリーンを想定した仕様になっている。

ただし、ダブルタップスワイプなどの特殊な操作には対応していない

■ 画面をタッチ
■ 画面をタッチしたまま動かす
■ 画面から離す
■ 画面タッチへの割り込み

Pointer Events

Pointer Eventsは、マウス・ペン・タッチパネルといったさまざまなデバイスを、ポインタと呼ばれる、マウスをモデルとした抽象デバイスとして統一的に扱えるようにするもの。

ポインタ(ペンなど)の圧力や傾きなどを取得できる

■ 対象の要素に乗る
■ 対象の要素から離れる
■ 動作状態になる(ボタンが押される)
■ 非動作状態になる(ボタンが離される)
■ 状態が変化する(ポインタが動く)
■ 操作を中断させるイベントが発生
■ キャプチャ開始
■ キャプチャ終了

DOM3 Events ( UI Events )

DOM3 Events(UI Events)は、マウスやキーボードなどの入力操作を取り扱うためのイベント

イベントの種類 概要 イベント例
UIイベント UIやHTML文書の操作に関するイベント 文書および関連リソースの読み込みを完了
フォーカスイベント フォーカスの状態変化に関連するイベント フォーカスを受け取る直前
マウスイベント マウス操作に関連するイベント マウスのボタンクリック
ホイールイベント マウス等ホイール装置の操作に関するイベント ホイールを回転
入力イベント キーボード等の入力による文章更新に関するイベント 文章が更新された直後
キーボードイベント キーボードの操作に関するイベント キーボードを押す
間接的テキスト入力イベント
(コンポジションイベント)
日本語入力時などに使用するIMEの操作に関するイベント IMEで入力開始

オフラインストレージAPI

Web Storage

Web Storageは、キーと値の組み合わせブラウザにデータを蓄積し、利用するAPI。

Cookieと比較すると大容量のデータを扱うことができる

ブラウザに蓄積したデータを利用することで、アプリケーションのオフライン利用通信量削減による高速化が期待できる。

Web Storageには、セッションストレージローカルストレージの2種類がある。

セッションストレージは、ウィンドウまたはタブが閉じられるとともにデータが消失する

ローカルストレージは、ウィンドウやタブを閉じてもデータが消えず、次にページを参照した時にもそのデータを利用することができる

処理は同期で行われる。

保存できるデータは文字列のみ。そのため、blobデータ(画像など)をそのまま保存することはできない。blobデータなどを格納したい場合は、Data URIスキームなどに変換する。

Indexed Database API

Indexed Database APIは、Web Storageと同様、キーと値のペアJavaScriptのオブジェクトを蓄積し、利用するAPI。

一般的なリレーショナルデータベースにおける、インデックスやトランザクションによる安全な操作をできることが特徴。

ここでのトランザクションとは、データベースの一連の処理のこと。一連の処理の開始と終了を宣言することで、複数のトランザクションを並行処理させたり、処理の途中でエラーが発生しても、処理の開始時に戻すことが可能。

Indexed Database APIは、一般的なリレーショナルデータベースと同様に扱えるため、大量のデータを扱うオフライン利用可能なアプリケーションのデータベースとして利用される。

Indexed Database APIは、SQLではなくJavaScriptで操作する

処理は非同期で実行されるため、パフォーマンスが優れている。ブラウザが閉じられても、明示的にデータを破棄しない限り、永続的にデータを保持する。

格納できる値の種類は文字列、ファイル、blobなど。

データ保存のまとめ

ブラウザでデータを保存する主な技術として、
・HTTPクッキー
・Web Storage(localStorage / sessioStorage)
・Indexed Database
・Web SQL (※仕様策定が中止されている
がある。

Cookie Web Storage Indexed Database
API
Web SQL
保存容量 4KB 5MB – 10MB
(※ブラウザによって異なる)
5MB – 10MB
(※ブラウザによって異なる)
5MB – 10MB
(※ブラウザによって異なる)
保存期間 有限 無制限 / セッション 無制限 無制限
データ形式 文字列 文字列 ネイティブ
オブジェクト
ネイティブ
オブジェクト
同期 同期 同期 非同期 非同期
特徴 セッションなどで利用 シンプルなAPI
大容量データを保存できる
さまざまなデータを扱えるが、APIが複雑なため、実装が難しい SQLライクの文法でデータを操作できる
備考 最も実装が進んでいる 文字列以外のデータを扱う場合、別途変換など行う必要あり。 DBとは操作方法が異なる 仕様策定が中止されているため、非奨励

Application cache

Application cacheは、マニフェストファイルという設定ファイルに指定したファイルをローカルのブラウザにキャッシュさせることで、オフラインでのページ閲覧を可能にするもの。キャッシュの制御は、APIを通じて行う。

Application cacheのAPIでは、アプリケーションキャッシュダウンロード中であるなどの状態の確認や、キャッシュの明示的な更新などが可能。また、イベントとして、キャッシュ済みなどのイベントも用意されている。

マニフェストファイルの指定とAPIを組み合わせることで、状況にあわせたキャッシュの制御が可能になる。

Webページを構成するリソース(HTMLやCSS、画像など)ブラウザにキャッシュすることによって、オフラインでもWebページを表示できるようになる。

キャッシュの更新は、マニフェストファイルの変更の有無で判断される。そのため、リソースを更新するだけでは、ブラウザのキャッシュは更新されない。リソースを更新するたびにマニフェストファイルを変更する必要がある。

更新の際は、更新日時やバージョンなどをコメント行として記述しておき、リソース更新時に変更する方法を推奨。なお、キャッシュの更新はJavaScriptでも制御できる

現在、Application cacheは廃止が検討されている。そのため、新規作成時の使用は非推奨オフラインWebアプリケーションを実現する場合は、Service Workersの使用を検討した方がよい。

キャッシュに関する設定ファイル
html要素manifest属性で指定する
文字コードUTF-8
拡張子は一般的に「.appcache」だが、任意
MIMEタイプは「text/cache-manifest
◆ 先頭にはCACHE MANIFESTと記述し、続けてキーワードを記述。
◆ 主なマニフェストファイルのキーワード

名称 説明
CACHE: キャッシュするファイル名を指定する。相対パスを用いる。
NETWORK: キャッシュしないファイル名を指定する。指定されたファイルは、ネットワークから取得される。
FALLBACK: キャッシュに失敗したときに表示するファイルを指定する。
SETTINGS: キャッシュの設定を指定する。
値として「prefer-online」のみ指定可能
prefer-onlineが指定されている場合、オンライン時はApplication cacheは無視され、オフライン時のみApplication cacheが利用される

マニフェストファイルの記述例

CACHE MANIFEST

CACHE:
sample.html
sample.css
sample.js

NETWORK:
news.html

FALLBACK:
failed.html

SETTINGS:
prefer-online

Web Workers

Web Workersは、ブラウザでのスクリプト処理をバックグラウンドで実行するためのもの。

ブラウザのJavaScriptはシングルスレッドだったため、長時間かかる処理を実行すると、その終了までユーザインタフェースの処理などがブロックされていた。

Web Worker独立したスレッドを利用することで、ユーザーインターフェースの処理などに影響を与えることなく、大量の処理を行うことが可能。

Web WorkerではWorkerと呼ばれるものを独立したスレッドとして生成し、並列でスクリプトを実行させる。JavaScriptは、そのWorkerとメッセージをやりとりすることで、Workerの開始、終了といった制御を行う。

ワーカで実行する処理は、HTMLファイル内ではなく、JavaScriptファイルに記述する。

Service Workers

Service Workersは、Webページとは別にバックグラウンドでスクリプトを実行することができる環境のことを指す。

Service Workersを利用することで、リソースをキャッシュしてオフラインでも利用可能にしたり、プッシュ通知やバックグラウンドでの同期など、Webページやユーザの操作を必要としない機能を提供することができる。これらの機能は、ネイティブアプリケーションのように動作するアプリケーションを作る上で欠かせないもの。

Web WorkersがWebページの内部で動作するのに対し、Service WorkersはWebページと別に動作し、ライフサイクルも異なる。例えば、オフライン状態であったり、Webページを開いていたタブが閉じられても、Service Workersは必要に応じて動作する。

Service Workersあくまで実行環境なので、Cache APIWeb Storage、後述するPush APIfetchなどを組み合わせて、バックグラウンドでプッシュ通知を受信したり、メッセージ本体を受信したりといったことが可能になる。

Service Workersは、セキュリティへの配慮がなされており、HTTPS通信でしか動作しない

Push API

Push APIは、アプリケーションがサーバからのプッシュ通知を受信できるようにする。

Service Workerと組み合わせることで、アプリケーションが動作しているかどうかに関わらず受信することができる

Push APIはあくまでプッシュ通知を受信するだけなので、プッシュ通知の表示やメッセージ本体の受信などは別途実施する必要がある。なお、プッシュ通知の表示にはNotifications APIを、メッセージ本体の受信は後述するfetchで行う

fetch

fetchは、指定したリソースを非同期で取得する際に使用する。後述するXML HttpRequestもリソースを取得するものだが、Service Worker上では、fetchを使う必要がある

前述のように、プッシュ通知を受けた際のメッセージ本体受信には、fetchを利用しなければならない

fetchは、Service Worker以外でも、後述するXML HttpRequestの代わりに使うことができる

通信系API

XML HttpRequest

XML HttpRequestは、JavaScriptでのHTTP通信を実現するAPI。現在表示しているページから画面遷移を伴わずHTTP通信を行い、各種データを取得することができる。

地図アプリケーションなどで用いられるAjax(Asynchronous JavaScript + XML)では、このXML HttpRequestを用いて画面遷移を伴わないページ更新を実現している。

XML HttpRequestには、Level1Level2が存在する。基本的な機能は同じだが、大きな違いとして、Level2では、異なるドメインの間でやりとりするクロスドメイン間通信が行えるようになっている。

WebSocket API

WebSocket APIは、JavaScriptでのWebSocketプロトコル通信を実現するAPI。HTTPはブラウザからサーバにリクエストを送信して、そのレスポンスが返ってくるという通信のみだった。

WebSocketプロトコルとは、ブラウザとサーバ、どちらからもデータを送信可能な双方向の常時接続通信を実現するための仕様

WebSocketを用いることで、チャットのような双方向通信が頻繁に発生するアプリケーションを容易に作ることができる。

WebSocketを用いた通信の概要は、一度サーバとブラウザとの間でHTTPを行い、WebSocketでの接続を確立し、その後、その確率した接続を利用して双方向通信を行う。

WebSocketのURIスキームはwsまたはwss(セキュア)のどちらかを用いる。規定のポートは80番、または443番。

Server-Sent Events

Server-Sent Eventsは、サーバからのプッシュ送信を実現するAPI。

通常のHTTPでは前述したようにクライアントからサーバにリクエストを送信し、そのレスポンスが返ってくると通信は終了する。サーバからのデータを受け取るには、こちらからリクエストを送信する必要があった。

Server-Sent Eventsでは、サーバからレスポンスを受け取っても通信を終了させず、接続を維持する。サーバはその接続を利用して、メッセージを継続的に送信する。ただし、サーバからしかデータを送信することができない

常時接続ではないが、ロングポーリングによる通信よりも効率的な通信を実現できる

Server-Sent Eventsは、HTTPを利用するため、HTTPしか使えない環境でプッシュ通知を実現したいときに有効。

WebRTC

WebRTC(Web Real-Time Communication)は、ブラウザでリアルタイムコミュニケーションを実現するための仕組み。

WebRTC(Web Real-Time Communication)を使うことで、ブラウザ間のビデオチャットやボイスチャット、会議システムなどが実現可能。

●端末に接続されたカメラやマイクを利用して画像や音声を取り込む

●取り込んだカメラやマイクのデータをP2P通信で送受信する

●テキストやバイナリなどのデータをP2P通信で送受信する

 

 

 

 

 

>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG