API 過去問復習

よーた


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

技術要素:
メディア関連要素のAPIが提供する機能
ストリーミング
DRM
ビットマップグラフィックスの知識
ベクターグラフィックスの知識

メディア再生に関するAPI機能
HLS
MPEG-DASH
Media Source Extensions
Encrypted Media Extensions
Canvasの機能
SVGのマークアップとAPIの基礎知識

2) デバイスアクセス系API概要

技術要素:
位置情報
加速度センサー
ジャイロ
入力デバイス（マウス、タッチパネル、ペン）

Geolocation API
DeviceOrientation Event
DOM3 Events (UI Events)
Touch Events
Pointer Events
Generic Sensor API

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

技術要素:
データストレージの仕組み
オフラインアプリケーションに必要な知識
バックグラウンド処理に関する知識

Web Storage
Indexed Database API
Web Workers
Service Workers
Push API

4) 通信系API概要

技術要素:
Ajax
双方向データリアルタイム通信
サーバープッシュ

XMLHttpRequest(XHR) / fetch API
WebSocket API
Server-Sent Events
WebRTC

JavaScriptから操作できるvideo/audio要素の機能

JavaScriptで取得できる主な情報:

  1. 自動再生の設定

  2. 再生メニューの表示/非表示

  3. 現在の再生時間

  4. 音量　　　
    音量を0~1で設定できる

  5. 音声のミュート設定

  6. 再生速度の設定

  7. メディアの長さ

  8. 繰り返し再生の設定

  9. ネットワークの状況

JavaScriptで制御できる主な機能:

  1. 再生の開始

  2. 再生の一時停止

  3. 再生位置の変更

動画のストリーミング再生に使用されるプロトコル

ストリーミングは動作をダウンロードしながら再生する

  1. HLS
    HTTP Live Streaming
    ApacheがHTTPをベースに開発した

  2. MPEG-DASH
    Dynamic Adaptive Streaming over HTTP
    ストリーミング技術の標準化を目的に複数企業が開発した

MSE HLSやMPEG-DASHをサポートする技術

MSE(Media Source Extensions)
video要素などをプラグインなしでストリーミング再生可能にする

特徴:

  1. あらかじめ短い時間に区切られたメディアデータを扱う
    -> 動画の合間に広告やその他のコンテンツを挿入できる
    -> コンテンツの途中から再生を開始できる

  2. ネットワークの状況に応じてストリーミングの「ビットレートを変更」する
    -> コンテンツを途切れずに再生できる

  3. EME(Encrypted Media Extensions)と組み合わせて、「コンテンツを保護」できる

Canvas JavaScriptを使ってブラウザ上に描画する機能

特徴:

  1. JavaScriptを使ってブラウザ上に描画する
    HTMLは使わない

  2. ビットマップ形式で描画を行うためDOMツリーは構成しない
    しかし、JavaScriptからCanvas上のピクセル情報を操作できる

  3. アニメーション描画のメソッドが用意されてない、
    しかし、描画を繰り返すことでアニメーションを実現する

  4. PNG, GIF, JPEGなどの画像を読み込んで利用できる

SVG

SVGはwebで利用できるベクター形式の画像データ
実体はXMLに基づいたマークアップ言語である

特徴:

  1. ベクター形式で描画を行う
    拡大しても画像の劣化が発生しにくい

  2. SVGはXMLで表現できる、更にテキストエディタで編集できる
    svg要素、img要素、CSSを使えばSVGをHTMLで表示できる
    HTMLだけでも図形の描写が出来る

CanvasとSVGの特徴

Canvasの特徴:

  1. Canvasはビットマップ
    細かいピクセルの集まり

  2. 写真のような複雑で細かい画像の描画に向いている

  3. 画像のサイズが同じなら複雑さは処理速度に影響しない
    しかし、画像のサイズが大きくなれば、描画するピクセルが増えるので処理速度は低下する

  4. 画像だけでなくアニメーションも実現できる

SVGの特徴:

  1. ベクター形式
    図形の集合

  2. 画像の拡大・縮小によって画質の劣化は発生しにくい

  3. 描画する図形ごとにDOMが追加されるので、複雑な画像の表示によって処理速度が低下する

Canvasは画像のサイズが大きくなれば、処理速度が低下する
SVGは画像の複雑になれば処理速度が低下する

Geolocation API デバイスの位置情報にアクセス

特徴:

  1. 位置に関する以下の情報を取得できる
    ・緯度
    ・経度
    ・高度
    ・方角
    ・速度
    ・(緯度、経度、高度の)精度

  2. Geolocation APIの使用には、ユーザの許可が必要

  3. 必ずしも位置情報を取得できるとは限らない

  4. ブラウザの制約によりHTTPS通信でないといけない

  5. GPSのついていない端末でも使用できる
    ただし、制度は悪くなる

  6. ロケールごとの地域情報は取得できない

スマートフォンで位置情報を取得する場合:

  1. 位置情報を取得するときはGeolocation APIを使用する

  2. 位置情報を取得するときは、ブラウザに位置情報の利用を許可するかダイアログが表示される

  3. 現在地から移動した時でも、監視して自動的に新しい位置情報を取得できる

  4. 地図サービスなどと連携して地図上に現在位置を表示できる

  5. ユーザの環境によって取得できる位置情報の精度は異なる
    一定でない

DeviceOrientation Event

デバイスの向きが変化した時にユーザインタフェースを変更できる技術には、
・DeviceOrientation Event
・メディアクエリ
がある

DeviceOrientation Eventの特徴:

  1. デバイスの左右の傾き(y軸)、前後の傾き(x軸)、ひなり(z軸)を取得できる

  2. JavaScriptのプログラムを用いて、ユーザインタフェースを変更できる

メディアクエリとDeviceOrientation Eventの併用
-> ユーザインタフェースを切り替えられる

ブラウザから取得できるデバイスの情報

DeviceOrientation Event と Geolocation APIを用いれば、
・傾き
・速度
を取得できる

ブラウザから取得できない情報:

  1. 温度

  2. 電圧

  3. 重力

DOM3 Events

ユーザによるマウスやキーボードなどの入力操作を取り扱うためのイベント

DOM3 Events　は「ブラウザタブの移動」や「ファイルダウンロード」に関するイベントは行わない

イベントが発生すると、JavaScriptで記述したプログラムを実行する。
使用例:

  1. ユーザの操作に合わせてユーザインタフェースを変更する

  2. インタラクティブなwebページを作成

DOM3 Eventの例:

  1. ホイールイベント
    ホイール装置の操作に関するイベント

Touch Events / Pointer Events

Touch Events
画面を指で捜査しているときの状態変化に関するイベント
タッチスクリーンに対応している

特徴:
1) マルチポイントタッチに対応している
2) ダブルタップやスワイプなどの操作に対応してない

Pointer Events
Touch Events同様にタッチ操作に対応しているが、
さらに様々なデバイスからのポインタ入力を取り扱うためのイベント

なのでタッチスクリーン(スマホなど)以外にも対応している


特徴:
1) マウス、ペン、タッチなど様々なポインティングデバイスに対応している
2) ポインタの圧力や傾きなどを取得できる

Touch EventsもPointer Eventsも、両方タッチ操作をイベントとして検知できる

Web Storage

ブラウザに「キーと値の組み合わせ」でデータを保持する仕組み。

Web Storageに保存できるデータは「文字列のみ」

画像データを保存するなら Data URIスキームなどに変換する

Web Storageの種類:
データの保存期間が違う。

  1. localStorage
    ブラウザが閉じられてもデータを保持する
    ウィンドウやタブ間でデータを共有できる

  2. sessionStorage
    ブラウザが閉じられると同時にデータが消失する
    新しいウィンドウやタブを開くと新しいセッションが開始する

Indexed Database API

構造化されたデータを保存する仕組み

Indexed Database APIの特徴:

  1. RDBのようにインデックスによる検索やトランザクションに取る安全な操作が出来る

  2. SQLではなくJavaScriptで操作する

  3. 格納できる値の種類は、
    文字列
    ファイル
    blob(画像データ)

  4. 格納処理は非同期で実行される

  5. ブラウザが閉じられても、明示的にデータを破棄しない限り、永続的にデータを保持する

例えば以下のようなwebアプリケーションを新規に作成するときに、
以下の要件の技術が必要なら、Indexed Database APIを使う

  1. 大容量のデータを保存する

  2. データを永続保存する

  3. ファイルやblobを保存する

  4. パフォーマンスが求められる

Web SQLは使用策定が中止されているため新規作成時には向いてない

Application Cache

Webページのキャッシュに関する仕様。

Application cacheの特徴:

  1. Webページをキャッシュし、オフラインでもWebページを表示できる
    Webページを構成するリソース(HTML, CSS, 画像)をブラウザにキャッシュする
    オフラインでもwebページを表示できるようにする。

  2. JavaScriptによってキャッシュしたリソースを更新できる

  3. HTTPS通信以外でも使用可能

マニフェストファイルの更新:

  1. 更新日時やバージョンなどをコメント行として記述

  2. リソース変更時に変更する

  3. キャッシュの更新はJavaScriptでも制御できる

マニフェストファイルの特徴:

  1. 拡張子は任意
    一般的には、.appcache を使用する

  2. MIMEタイプは、text/cache-manifest

  3. マニフェストファイルをHTMLで読み込むためには、ファイルのURLをhtml要素の「manifest属性を指定」する

  4. 文字コードは「UTF-8」

  5. 記述形式は「XMLではない」

マニフェストファイルの先頭には、CACHE MANIFESTと記述する
続けてキーワードを記述することで、オフラインにキャッシュするリソースを指定する

マニフェストファイルに記述可能なキーワード:

  1. CACHE:
    キャッシュするファイル名
    (相対パス)

  2. NETWORK:
    キャッシュしないファイル名

  3. FALLBACK:
    キャッシュに失敗した時に表示するファイルを指定

  4. SETTINGS:
    キャッシュの設定

例)
CACHE MANIFEST

CACHE:
index.html
styles.css
script.js
images/logo.png

NETWORK:
*

FALLBACK:
/ offline.html

Web Workers

JavaScriptを並列実行するための仕様

  1. ワーカと呼ばれるJavaScriptの処理単位を、Webページの描画処理を実行する
    メインスレッドから分離し、バックグラウンドで実行する

  2. メインスレッドとワーカは並列実行されるため、webページのパフォーマンスを向上できる

Web Workersの特徴:

  1. JavaScriptの処理を並列に処理できる

  2. ワーカが実行する処理は、JavaScriptファイルに記述する

  3. ワーカは、独立したスレッドとしてバックグラウンドで処理される

  4. メインスレッドとワーカの間で、データを交換できる

  5. ワーカからDOMにアクセスできない

Service Workers

Webページとは別にブラウザのバックグラウンドで動作するJavaScript実行環境

Service Workersの特徴:

  1. ブラウザのバックグラウンドでスクリプトを実行できる

  2. Webページが閉じても、動作を継続して実行できる

  3. オフライン処理、プッシュ通知、データ保存などの機能を提供できる
    関連するAPIと組み合わせる
    ・オフライン処理　　Cache API
    ・プッシュ通知　　 Push API
    ・データ保存　　 Web Storage

  4. HTTPS通信でしか動作しない

プッシュ通知の特徴:
サーバからユーザに対して任意のタイミングで通知できる仕組み

  1. Push APIを使用して、サーバからのプッシュ通知を受信できる

  2. fetchを使用して、プッシュ通知のメッセージ取得を行う

  3. Service Workersにスクリプトを登録することで、
    Webページを閉じていてもプッシュ通知の受信ができる

Push APIを使用すれば、ブラウザでもサーバからプッシュ通知を受信できる
Push APIはプッシュ通知を受信できるだけ
その他のAPIと組み合わせる必要がある

プッシュ通知のメッセージの取得はfetch
プッシュ通知の表示はNotification API

例) スマホ上でネイティブアプリのように動作するwebアプリ開発する

Service WorkersとAPIを使って何が出来るか?

  1. Service Workersを使用することで、オフライン処理やプッシュ通知を実現できる

  2. Service Workers上でリソースをキャッシュする場合、Cache APIを使用する

  3. プッシュ通知を受信する場合、Push APIを使用する

  4. スマートフォンの位置情報を取得する場合、Geolocation APIを使用する

Service Workers上でサーバと非同期通信を行う場合、
fetchを使う。
(XMLHttpRequestではない)

Service Workers上で組み合わせるAPIの例

最新のHTML5のAPIを使用することで、スマホ上でネイティブアプリのように動作するwebアプリを開発できる
このようなアプリには Service Workers が中核となる。

  1. Cache API
    リソースをキャッシュする

  2. Push API
    プッシュ通知を受信する

  3. fetch
    サーバと非同期通信する

  4. GeolocationAPI
    位置情報を取得する

  5. DeviceOrientation Event
    デバイスの傾きや方角を取得する

メモ: XMLHttpRequestもサーバとの非同期通信を行うが、その場合、fetchを使用する必要がある

XMLHttpRequest

ブラウザ/サーバ間で通信を行う技術

  1. Ajaxを実現するために用いられることが多い

  2. 非同期通信である

  3. 既定のポートは80番、または443番

  4. HTTPメソッドを指定できる

  5. リクエスト/レスポンスが完了すると切断する
    つまり、常時接続ではない

Server-Sent Events

非同期でwebサーバからブラウザにデータを送信する技術

Server-Sent Eventsの特徴:

  1. Webサーバからデータを送信できる

  2. 非同期通信である

  3. HTTP通信を使う

  4. ブラウザからwebサーバにデータを送信できない

  5. データを送信すると通信は終了するが、自動的に再接続する
    常時接続ではないが効率的

WebSocket API

ブラウザ/webサーバ間で双方向の常時接続通信を行う技術

より効率的な常時接続通信が行える

WebSocket APIの特徴:

  1. 常時接続通信

  2. 双方向通信

  3. URIスキーマはws, またはwss
    wssはセキュア通信

  4. 規定のポートは80番、または443番

WebRTC

リアルタイムコミュニケーション技術

WebRTCの特徴:

  1. データの通信を行う

  2. オーディオ、ビデオの送受信を行う

  3. P2P通信である(ブラウザ-ブラウザ間の通信)

オンライン会議システム、チャットシステムに適した技術

  1. オンライン会議システムに適した技術
    -> WebRTC

  2. チャットシステムに適した技術
    -> WebSocket API

JavaScriptで操作できるvideo要素、audio要素

主な機能
・音量を0~1で設定
・再生速度を変更
・再生メニューの表示/非表示の切り替え
・再生開始、一時停止
・再生位置の変更

メモ: 全画面表示の切り替えはできない

ストリーミング

HLS HTTP Live Streaming
MPEG-DASH

Media Source Extensions
    細かく区切る
    プラグインがなくても再生できる
    EMEでコンテンツを保護できる
    ビットレートを変更してコンテンツを途切れずに再生する

Encrypted Media Extensions コンテンツ保護

Canvas

ピクセル
写真のように精巧

JavaScriptを使って描画する(HTMLではない)
ビットマップ形式なので拡大したら図形が劣化する

描画を繰り返してアニメーションを作る
DOMツリーではない。JavaScriptで操作できない

SVG

ビクターマップ
ぶれない

ベクター形式の画像データ
拡大しても劣化しにくい

HTMLで表示するには、svg要素、img要素、CSS等を使う

SVGはxmlで表現できる。テキストエディタで編集できる

HTMLだけで図形の描写が出来る。JavaScriptがなくてもいい


SVGは描画する図形が増えるとパフォーマンスが低下する

Geolocation API

・位置情報を取得するにはGeolocation APIを使う
・位置情報を取得するときは、ブラウザに使用の許可のダイアログ合表示される
・現在地から移動した時も、監視して自動的に新しい位置情報を取得できる
・地図サービスと連携して地図上に現在位置を表示できる
・ユーザの環境によって位置情報の精度は変わる
    (一定でない)


・取得できる情報
    緯度、経度、高度、方角、速度、精度(緯度、経度、速度)
・使用にはユーザの許可が必要
・HTTPS通信でのみ使える
・GPSのついてない端末でも使える
・ロケールごとの地域情報を取得できない

デバイスの向きが変化した時にユーザインタフェースを変更できる技術
1) DeviceOrientation Event
2) メディアクエリ

DOM3 Events

ユーザによるマウスやキーボードなどの入力操作を取り扱うイベント

ブラウザタブの移動やファイルダウンロードに関連するイベントは扱わない

UIイベント
フォーカスイベント
マウスイベント
ホイールイベント
入力イベント
キーボードイベント
コンポジションイベント
    IMEの操作

注意: マウスのクリックはマウスイベント
        ホイールイベントじゃない

Touch Events Pointer Events

両方タッチスクリーンに対応


Touch Events
    指での操作の状態変化に対応している
    しかし、ダブルタップ、スワップには対応してない

Pointer Events
    タッチ以外の他の入力にも対応している
    スマホ以外に対応している

Web Storage

キーと値の組み合わせでデータを保持する

テキストデータのみ保存できる
blobデータ(画像など)を保存するにはData URIスキームに変換する

2種類ある
localStorage
    ブラウザを閉じてもデータを保持する
    ウィンドウやタブ間でデータを共有できる
sessionStorage
    ブラウザが閉じられると同時にデータが消える

    新しいタブやウィンドウを開く = 新しいセッション開始

Indexed Database API

非同期で処理を実行
格納できる値は、文字列、ファイル、blobなど
    オブジェクトを格納できる

インデックスやトランザクションを使用できる


SQLではなくJavaScriptを使う

永続的にデータを保存する

Application cache

webページをキャッシュして、オフラインでもwebページを表示できる

HTTPS通信以外でも使える

マニフェストファイルでキャッシュするファイルを指定する

JavaScriptによってキャッシュしたリソースを更新する

マニフェストファイル

拡張子は任意。でもappcacheが推奨
MIMEタイプは、text/cache-manifest

形式はXMLではない

文字コードはUTF-8

マニフェストファイルのURLをhtml要素のmanifest属性に指定する


マニフェストファイルのキーワード:
    先頭に CACHE MANIFEST

    CACHE:

    NETWORK:

    FALLBACK:

    SETTINGS:

Web Workers

JavaScriptを並列実行する仕様
JavaScriptの処理単位: ワーカ

ワーカが実行する処理はJavaScriptファイル
ワーカは独立したスレッドとしてバックグラウンドで処理される
メインスレッドとワーカの間でデータを交換できる

メインスレッドとワーカは別々に処理を行う

Service Workers

WEbページとは別にブラウザのバックグラウンドで動作するJavaScript実行環境

HTTPS通信でしか動作しない
webページを閉じても、動作を継続して実行できる

他のAPIと組み合わせて処理を行う
1) Cache API 
    リソースをキャッシュする
2) Push API
    プッシュ通知を受信する
3) fetch
    サーバと非同期通信する
4) GeolocationAPI
    位置情報を取得する
5) DeviceOrientation Event
    デバイスの傾きや方角を取得する

メモ: XMLHttpRequestもサーバとの非同期通信を行うが、    
    　　その場合、fetchを使用する必要がある

Push API プッシュ通知

  1. Push APIを使用して、サーバからのプッシュ通知を受信できる

  2. fetchを使用して、プッシュ通知のメッセージ取得を行う

  3. Service WOrkersにスクリプトを登録することで、Webページを閉じていても
    プッシュ通知の受信ができる

Web Socket

XMLHttpRequest

WebRTC

Server-Sent Events
非同期
サーバからブラウザに送信

WebSocket
非同期
双方向通信

XMLHttpRequest
非同期

WebRTC
非同期
P2P
動画、音声の送受信を行う

この記事が気に入ったらサポートをしてみませんか？