はじめに

HTML5プロフェッショナル認定試験の試験対策でping-tという神サイトを使って勉強しているのですが、合格体験記を見ていたところAPIについて時に苦戦したという声が多く見受けられました。

そこで、公式の例題解説で出題されているAPIを元に、ping-tに出題されているものから範囲を広げて様々なAPIの情報をまとめてみました。これから受験を考えている方の助けになれば幸いです。(私も特に苦手な範囲です...)

1.5 APIの基礎知識

Drag and Drop API

役割：マウスでドラッグ可能な要素を選択し、その要素をドロップ可能な要素へドラッグし、マウスボタンを離すことでドロップすることができる

1.5.1 マルチメディア・グラフィックス系API概要

SVG (Scalable Vector Graphics)

役割：XMLベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述する。jpegやpngのようなビットマップ画像形式と比較して、品質を損なうことなく任意の大きさにできる。

キーワード: ベクター形式、XML、ロゴ、アイコン

Canvas

役割：JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供する。ビットマップ形式なので、svgとは異なり拡大するとピクセルが引き伸ばされ、画質が劣化する。

キーワード: ビットマップ形式、ゲーム、グラフ、動的

Media Source Extensions (MSE)

役割：プラグイン不要でウェブベースのストリーミングメディアを可能にする。MSE を使用すると、メディアストリームを JavaScript で作成し、<audio> 要素や <video> 要素で再生できる。

キーワード: ストリーミング、HLS、MPEG-DASH

Encrypted Media Extensions (EME)

役割：デジタル制限管理スキームの対象となるコンテンツの再生を制御するためのインターフェイスを提供する。Encryptedは暗号化されたという意味。

キーワード: 暗号化、著作権保護

1.5.2 デバイスアクセス系API概要

Geolocation API

役割: ユーザーが望む場合に、自分の位置情報をウェブアプリケーションに提供できる。

キーワード: 許可が必要、チェックイン、GPSなしでOK

DeviceOrientation Event

役割: 端末の現在の向きを地球座標フレームと比較した場合に、方角センサーから最新のデータが得られた場合に発生するイベント。Orientationは向きという意味。HTTPSでのみ利用可能。

キーワード: 向き、ジャイロセンサー、加速度センサー

DeviceMotion Event

役割: 端末の位置と方向の変化のスピードに関する情報を提供する。

キーワード: 動き、加速度センサー

Touch Events

役割: 端末やトラックパッドでの指の動きを解釈する機能を提供する。

キーワード: タッチパネル、トラックパッド、指

Pointer Events

役割: ポインティング機器に対して発生するDOMイベント。マウス、ペンやスタイラス、（1本以上の指でなどの）タッチなどのポインティング入力機器を処理するよう単一のDOMイベントモデルを作成するように設計されている。Touch Eventsと非常に似ており、そこに圧力、接触ジオメトリー、傾きなどが含まれる。マウス、ペン、タッチなど複数の入力方法を一つのイベントモデルで扱える。

キーワード: マウス、ペン、スタイラス

Proximity API

役割: 近接センサーによって測定されたデバイスと物体間の距離に関する情報を提供するツール。手などの物体がデバイスに近づいた音楽プレーヤーを一時停止する機能に使える。Proximityの訳は「近接性」

キーワード: 近接、センサー、赤外線

Vibration API

役割: 端末のバイブレーション機能を制御する。スマホを振動させるためのAPI。振動を感知するためのものではないので注意。

キーワード: バイブ、振動させる

Ambient Light Event

役割: 照度センサーから周囲の明るさを取得。

キーワード: 周囲の明るさ、照度センサー

1.5.3 オフライン・ストレージ系API概要

Web Storage

役割: Cookie を使用するよりも直観的な方法で、ブラウザーがキーと値のペアを保存できる仕組み。

キーワード: sessionStorage、localStorage

sessionStorage

1セッションのデータのみを保存。データはブラウザー（またはタブ）が閉じられるまで保存される。データはサーバに転送されない。

キーワード: 一時保存

localStorage

ブラウザーを閉じたり再び開いたりしても持続する。有効期限なし、JavaScriptによるクリア、もしくは、ブラウザーキャッシュ/ローカルに保存したデータのクリアによってのみ削除される。

キーワード: 永続的

Indexed Database API

役割: 多くのデータを保存できる。高パフォーマンスなデータの検索が可能。JavaScriptベースのオブジェクト指向データベースで、キーでインデックス付けされたオブジェクトを保存および取り出す。

キーワード: インデックス、トランザクション

Web Workers

役割: バックグラウンドでの実行を可能にする仕組み。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できる。

キーワード: バックグラウンド処理、UIフリーズ防止、webページの内部

Service Workers

役割: ブラウザのバックグラウンドで動く技術。オフラインでもWebサイトを使えるようにしたり、プッシュ通知を可能にしたりする。

キーワード: バックグラウンド処理、オフライン、プッシュ通知

Web WorkersとService Workersの違い

Web Workers: 特定のページ内の性能を上げるための技術
Service Workers: Webサイト全体の動作やオフライン対応を制御するための技術

と解釈しました

File API

役割：ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにする

Progress Events

役割：プロセスの進捗を計測するイベント

Notifications API

役割: 通知 API のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われる。

キーワード: 通知

1.5.4 通信系API概要

XMLHttpRequest(XHR) / fetch API

サーバーと対話するために使用。ページ全体を更新する必要なしに、データを受け取ることができる。XHRは古くからある技術で、fetch APIはよりモダンで使いやすいPromiseベースのAPIである。

キーワード: Ajax、非同期通信、一部だけ更新

WebSocket API

役割: ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができる

キーワード: 双方向通信、リアルタイム、チャット

Server-Sent Events

役割: サーバーからクライアントへの一方的な通信を行う

キーワード: 一方向、サーバからしかデータを送信できない

WebRTC

役割: ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャした音声／映像ストリームの送受信を可能にする技術。

キーワード: ピアーツーピアー(P2P)、ブラウザで完結、音声・ビデオ会議、ファイル交換、画面共有

Payment Request API

ユーザーとユーザーが好む決済システムおよびプラットフォームを、商品やサービスの代金を支払いたい販売者に接続するためのブラウザーベースの仕組みを提供する。

キーワード: 決済

参考