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で取得できる主な情報:
自動再生の設定
再生メニューの表示/非表示
現在の再生時間
音量
音量を0~1で設定できる音声のミュート設定
再生速度の設定
メディアの長さ
繰り返し再生の設定
ネットワークの状況
JavaScriptで制御できる主な機能:
再生の開始
再生の一時停止
再生位置の変更
動画のストリーミング再生に使用されるプロトコル
ストリーミングは動作をダウンロードしながら再生する
HLS
HTTP Live Streaming
ApacheがHTTPをベースに開発したMPEG-DASH
Dynamic Adaptive Streaming over HTTP
ストリーミング技術の標準化を目的に複数企業が開発した
MSE HLSやMPEG-DASHをサポートする技術
MSE(Media Source Extensions)
video要素などをプラグインなしでストリーミング再生可能にする
特徴:
あらかじめ短い時間に区切られたメディアデータを扱う
-> 動画の合間に広告やその他のコンテンツを挿入できる
-> コンテンツの途中から再生を開始できるネットワークの状況に応じてストリーミングの「ビットレートを変更」する
-> コンテンツを途切れずに再生できるEME(Encrypted Media Extensions)と組み合わせて、「コンテンツを保護」できる
Canvas JavaScriptを使ってブラウザ上に描画する機能
特徴:
JavaScriptを使ってブラウザ上に描画する
HTMLは使わないビットマップ形式で描画を行うためDOMツリーは構成しない
しかし、JavaScriptからCanvas上のピクセル情報を操作できるアニメーション描画のメソッドが用意されてない、
しかし、描画を繰り返すことでアニメーションを実現するPNG, GIF, JPEGなどの画像を読み込んで利用できる
SVG
SVGはwebで利用できるベクター形式の画像データ
実体はXMLに基づいたマークアップ言語である
特徴:
ベクター形式で描画を行う
拡大しても画像の劣化が発生しにくいSVGはXMLで表現できる、更にテキストエディタで編集できる
svg要素、img要素、CSSを使えばSVGをHTMLで表示できる
HTMLだけでも図形の描写が出来る
CanvasとSVGの特徴
Canvasの特徴:
Canvasはビットマップ
細かいピクセルの集まり写真のような複雑で細かい画像の描画に向いている
画像のサイズが同じなら複雑さは処理速度に影響しない
しかし、画像のサイズが大きくなれば、描画するピクセルが増えるので処理速度は低下する画像だけでなくアニメーションも実現できる
SVGの特徴:
ベクター形式
図形の集合画像の拡大・縮小によって画質の劣化は発生しにくい
描画する図形ごとにDOMが追加されるので、複雑な画像の表示によって処理速度が低下する
Canvasは画像のサイズが大きくなれば、処理速度が低下する
SVGは画像の複雑になれば処理速度が低下する
Geolocation API デバイスの位置情報にアクセス
特徴:
位置に関する以下の情報を取得できる
・緯度
・経度
・高度
・方角
・速度
・(緯度、経度、高度の)精度Geolocation APIの使用には、ユーザの許可が必要
必ずしも位置情報を取得できるとは限らない
ブラウザの制約によりHTTPS通信でないといけない
GPSのついていない端末でも使用できる
ただし、制度は悪くなるロケールごとの地域情報は取得できない
スマートフォンで位置情報を取得する場合:
位置情報を取得するときはGeolocation APIを使用する
位置情報を取得するときは、ブラウザに位置情報の利用を許可するかダイアログが表示される
現在地から移動した時でも、監視して自動的に新しい位置情報を取得できる
地図サービスなどと連携して地図上に現在位置を表示できる
ユーザの環境によって取得できる位置情報の精度は異なる
一定でない
DeviceOrientation Event
デバイスの向きが変化した時にユーザインタフェースを変更できる技術には、
・DeviceOrientation Event
・メディアクエリ
がある
DeviceOrientation Eventの特徴:
デバイスの左右の傾き(y軸)、前後の傾き(x軸)、ひなり(z軸)を取得できる
JavaScriptのプログラムを用いて、ユーザインタフェースを変更できる
メディアクエリとDeviceOrientation Eventの併用
-> ユーザインタフェースを切り替えられる
ブラウザから取得できるデバイスの情報
DeviceOrientation Event と Geolocation APIを用いれば、
・傾き
・速度
を取得できる
ブラウザから取得できない情報:
温度
電圧
重力
DOM3 Events
ユーザによるマウスやキーボードなどの入力操作を取り扱うためのイベント
DOM3 Events は「ブラウザタブの移動」や「ファイルダウンロード」に関するイベントは行わない
イベントが発生すると、JavaScriptで記述したプログラムを実行する。
使用例:
ユーザの操作に合わせてユーザインタフェースを変更する
インタラクティブなwebページを作成
DOM3 Eventの例:
ホイールイベント
ホイール装置の操作に関するイベント
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の種類:
データの保存期間が違う。
localStorage
ブラウザが閉じられてもデータを保持する
ウィンドウやタブ間でデータを共有できるsessionStorage
ブラウザが閉じられると同時にデータが消失する
新しいウィンドウやタブを開くと新しいセッションが開始する
Indexed Database API
構造化されたデータを保存する仕組み
Indexed Database APIの特徴:
RDBのようにインデックスによる検索やトランザクションに取る安全な操作が出来る
SQLではなくJavaScriptで操作する
格納できる値の種類は、
文字列
ファイル
blob(画像データ)格納処理は非同期で実行される
ブラウザが閉じられても、明示的にデータを破棄しない限り、永続的にデータを保持する
例えば以下のようなwebアプリケーションを新規に作成するときに、
以下の要件の技術が必要なら、Indexed Database APIを使う
大容量のデータを保存する
データを永続保存する
ファイルやblobを保存する
パフォーマンスが求められる
Web SQLは使用策定が中止されているため新規作成時には向いてない
Application Cache
Webページのキャッシュに関する仕様。
Application cacheの特徴:
Webページをキャッシュし、オフラインでもWebページを表示できる
Webページを構成するリソース(HTML, CSS, 画像)をブラウザにキャッシュする
オフラインでもwebページを表示できるようにする。JavaScriptによってキャッシュしたリソースを更新できる
HTTPS通信以外でも使用可能
マニフェストファイルの更新:
更新日時やバージョンなどをコメント行として記述
リソース変更時に変更する
キャッシュの更新はJavaScriptでも制御できる
マニフェストファイルの特徴:
拡張子は任意
一般的には、.appcache を使用するMIMEタイプは、text/cache-manifest
マニフェストファイルをHTMLで読み込むためには、ファイルのURLをhtml要素の「manifest属性を指定」する
文字コードは「UTF-8」
記述形式は「XMLではない」
マニフェストファイルの先頭には、CACHE MANIFESTと記述する
続けてキーワードを記述することで、オフラインにキャッシュするリソースを指定する
マニフェストファイルに記述可能なキーワード:
CACHE:
キャッシュするファイル名
(相対パス)NETWORK:
キャッシュしないファイル名FALLBACK:
キャッシュに失敗した時に表示するファイルを指定SETTINGS:
キャッシュの設定
例)
CACHE MANIFEST
CACHE:
index.html
styles.css
script.js
images/logo.png
NETWORK:
*
FALLBACK:
/ offline.html
Web Workers
JavaScriptを並列実行するための仕様
ワーカと呼ばれるJavaScriptの処理単位を、Webページの描画処理を実行する
メインスレッドから分離し、バックグラウンドで実行するメインスレッドとワーカは並列実行されるため、webページのパフォーマンスを向上できる
Web Workersの特徴:
JavaScriptの処理を並列に処理できる
ワーカが実行する処理は、JavaScriptファイルに記述する
ワーカは、独立したスレッドとしてバックグラウンドで処理される
メインスレッドとワーカの間で、データを交換できる
ワーカからDOMにアクセスできない
Service Workers
Webページとは別にブラウザのバックグラウンドで動作するJavaScript実行環境
Service Workersの特徴:
ブラウザのバックグラウンドでスクリプトを実行できる
Webページが閉じても、動作を継続して実行できる
オフライン処理、プッシュ通知、データ保存などの機能を提供できる
関連するAPIと組み合わせる
・オフライン処理 Cache API
・プッシュ通知 Push API
・データ保存 Web StorageHTTPS通信でしか動作しない
プッシュ通知の特徴:
サーバからユーザに対して任意のタイミングで通知できる仕組み
Push APIを使用して、サーバからのプッシュ通知を受信できる
fetchを使用して、プッシュ通知のメッセージ取得を行う
Service Workersにスクリプトを登録することで、
Webページを閉じていてもプッシュ通知の受信ができる
Push APIを使用すれば、ブラウザでもサーバからプッシュ通知を受信できる
Push APIはプッシュ通知を受信できるだけ
その他のAPIと組み合わせる必要がある
プッシュ通知のメッセージの取得はfetch
プッシュ通知の表示はNotification API
例) スマホ上でネイティブアプリのように動作するwebアプリ開発する
Service WorkersとAPIを使って何が出来るか?
Service Workersを使用することで、オフライン処理やプッシュ通知を実現できる
Service Workers上でリソースをキャッシュする場合、Cache APIを使用する
プッシュ通知を受信する場合、Push APIを使用する
スマートフォンの位置情報を取得する場合、Geolocation APIを使用する
Service Workers上でサーバと非同期通信を行う場合、
fetchを使う。
(XMLHttpRequestではない)
Service Workers上で組み合わせるAPIの例
最新のHTML5のAPIを使用することで、スマホ上でネイティブアプリのように動作するwebアプリを開発できる
このようなアプリには Service Workers が中核となる。
Cache API
リソースをキャッシュするPush API
プッシュ通知を受信するfetch
サーバと非同期通信するGeolocationAPI
位置情報を取得するDeviceOrientation Event
デバイスの傾きや方角を取得する
メモ: XMLHttpRequestもサーバとの非同期通信を行うが、その場合、fetchを使用する必要がある
XMLHttpRequest
ブラウザ/サーバ間で通信を行う技術
Ajaxを実現するために用いられることが多い
非同期通信である
既定のポートは80番、または443番
HTTPメソッドを指定できる
リクエスト/レスポンスが完了すると切断する
つまり、常時接続ではない
Server-Sent Events
非同期でwebサーバからブラウザにデータを送信する技術
Server-Sent Eventsの特徴:
Webサーバからデータを送信できる
非同期通信である
HTTP通信を使う
ブラウザからwebサーバにデータを送信できない
データを送信すると通信は終了するが、自動的に再接続する
常時接続ではないが効率的
WebSocket API
ブラウザ/webサーバ間で双方向の常時接続通信を行う技術
より効率的な常時接続通信が行える
WebSocket APIの特徴:
常時接続通信
双方向通信
URIスキーマはws, またはwss
wssはセキュア通信規定のポートは80番、または443番
WebRTC
リアルタイムコミュニケーション技術
WebRTCの特徴:
データの通信を行う
オーディオ、ビデオの送受信を行う
P2P通信である(ブラウザ-ブラウザ間の通信)
オンライン会議システム、チャットシステムに適した技術
オンライン会議システムに適した技術
-> WebRTCチャットシステムに適した技術
-> 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 プッシュ通知
Push APIを使用して、サーバからのプッシュ通知を受信できる
fetchを使用して、プッシュ通知のメッセージ取得を行う
Service WOrkersにスクリプトを登録することで、Webページを閉じていても
プッシュ通知の受信ができる
Web Socket
XMLHttpRequest
WebRTC
Server-Sent Events
非同期
サーバからブラウザに送信
WebSocket
非同期
双方向通信
XMLHttpRequest
非同期
WebRTC
非同期
P2P
動画、音声の送受信を行う
この記事が気に入ったらサポートをしてみませんか?