APIの基礎知識

SVG

• ベクターイメージ（情報を数値化して記録）
• →　複雑な画像の表示は処理速度が低下
• XML
• 拡大・縮小後も画像が劣化しない
• 描写した図形はDOM要素　→　JavaScriptで操作可能

ストリーミング配信

• HLS、MPEG-DASH
• ダウンロードの完了待たずに再生可能
• HTTPサーバで配信隣ブラウザでの再生が主流
• プラグイン不要
• ファイルとして残らないため　→　著作権の保護

HLS

• HTTP Live Streaming
• Apple社
• ストリーミングプロトコル
• HTTP

MPEG-DASH

• 「Dynamic Adaptive Streaming over HTTP」
• 国際標準のストリーミングプロトコル
• HTTPベース
• ファイルのコーデックに依存しない

Media Source Extensions

• video要素とaudio要素を拡張
• JavaScriptのAPI
• HLS、MPEG-DASHをサポート
• プラグイン無しでサポート
• 動画を分割　→　編集、広告挿入
• ネットワークに応じてストリーミングのビットレートを変更　→　途切れず再生
• ライブ配信は時間を過ぎれば視聴不可

DRM

• Digital Rights Management
• 特定のソフトウェアまたはハードウェアでのみ再生可能

Encrypted Media Extensions

DRMで暗号化されたコンテンツをブラウザで復号する際使用

DOM

• Document Object Model
• HTML、XMLを取り扱うためのAPI 
• 階層構造のドキュメントツリー（DOMツリー）

Payment Request API

HTML5で利用できる決済API

Generic Sensor API

デバイスのセンサーにアクセスするAPIは値を取得する方法はバラバラですが、Generic Sensor APIは統一的にするAPIです。

• JavaScriptから各種センサーにアクセスする方法を統一
• 環境光、近接、磁気、加速度、線形加速度、ジャイロスコープ、絶対方位、相対方位、重力

Geolocation API

• 緯度、経度
• 高度、経度の精度
• 高度
• 高度の精度
• 方角
• 速度

• ユーザの許可が不要
• ユーザの環境依存

Notifications API

通知

Ambient Light Event

デバイス付近の照度（光量レベル）を取得

Drag and Drop API

ファイルをドラッグ＆ドロップ

File API

<input type=file multiple>　→　JavaScriptで処理

Progress Events

プログレスバー

DeviceMotion Event

加速度センサー

UI Events

DOM3 Events(UI Events)	マウス、キーボード
Touch Events	タッチパネル、トラックパッド
Pointer Events	マウス、ペン、タッチパネル
DeviceOrientation Event	デバイスの方角や傾き（ジャイロセンサー）

---

Web Storage

• ブラウザ側でデータを保存する機能
• Key-Value形式
• 文字列のみ保存可能
• JavaScriptでデータを操作

sessionStorage	ブラウザ閉じるとデータ消失
localStorage	ブラウザ閉じてもデータを保持

Indexed Database API

• ブラウザ側でデータを保存する機能
• Key-Value形式
• JavaScriptを使用
• 高速な検索や、トランザクションでデータの整合性を維持
• 文字列、ファイル、blob（Binary Large OBject）などを格納できる
• ブラウザを閉じても明示的に破棄しない限りデータを保持

Cookie	Web Storage	Indexed Datebase	Web SQL （参考）
4KB	ブラウザによる	ブラウザによる	ブラウザによる
保存期間は有限	保存期限は無制限 /セッション	保存期限は無制限	保存期限は無制限
文字列	文字列	ネイティブ/ オブジェクト	ネイティブ/ オブジェクト
非同期でない	非同期でない Key-Value形式	非同期 Key-Value形式	非同期
セッションで 使用される	シンプルで 大容量保存可
実装が進んでいる			非推奨

Web Workers

Webコンテンツのスクリプトをバックグラウンドで実行するための手段

Service Workers

• ブラウザがWebページとは別でバックグラウンドでスクリプトを実行
• リソースをキャッシュしてオフラインで利用可能

Push API

• プッシュ通知を受信するだけ
• fetchを利用し通知の表示、メッセージ本体の受信
• Service Workersでアプリケーション起動不要
• メッセージをサーバに問い合わせにはfetchが必要

fetch

• 検索結果から1件抜き出す処理
• リソースを非同期で取得
• サーバに問い合わせ

XMLHttpRequest

• JavascriptでHTTP通信をする
• Webサーバと非同期通信（全体を更新せずに必要なデータを更新）を行うAPI
• Ajaxで利用される

XHTML

• 空要素　→　終了タグつけるか開始タグの閉じを「/>」
• html要素の開始タグにXHTML用の名前空間を指定

Ajax

• Webブラウザ内で非同期通信と動的なページ処理
• Asynchronous（非同期） JavaScript + XML
• XMLHttpRequestをJavaScriptを用いて使用（実際にはjQueryが一般的）

Server-Sent Events

• サーバからのプッシュ送信を実現するAPI
• 非同期でサーバからブラウザにデータを送信
• MINEタイプはtext-event-stream

WebSocket API

• Webサーバとクライアントで双方向通信（サーバ側からも能動的にメッセージを送信）を可能にするJavaScriptのAPI
• 例）チャット
• テキストデータ、バイナリデータ　OK

<WebSocket APIのイベント＞

open	ブラウザとサーバ間の接続が確立されるまでは非同期、接続が確立するとopenイベントが発生
close	ブラウザとサーバ間が切断
error	ブラウザとサーバ間でエラー発生
message	メッセージを受信した

WebRTC

• Web Real-Time Communication
• ウェブブラウザ
• 映像や音声
• P2P（Peer to Peer）　…　デバイス間で対等（ブラウザ⇄サーバでなくブラウザ同士）で通信