LoginSignup
6
8

More than 5 years have passed since last update.

@aikumi

HTML5プロフェッショナル認定資格Level.2 覚えるべきことまとめ <様々なHTML5関連API その2>

Last updated at Posted at 2017-03-27

前回にひきつづき、APIのまとめです
前回と今回のまとめにあるようなAPI関連の知識問題も結構たくさん出題されました。
重要度が低いところも、出題されているところも出題されていたので、幅広く知識をつける必要があると思いました！

マルチメディア

メディア要素のAPI ★★★★★☆☆☆☆☆

audio要素、video要素のプロパティ

  • readyState
    • このメディア要素の状態を返す
    • 以下のものがとれる
      • HAVE_NOTHING(数値0)
        • 利用可能でない状態
      • HAVE_METADATA(数値1)
        • 十分な情報が取得済み
      • HAVE_CURRENT_DATA(数値2)
        • 現在の再生位置に対応するデータは利用可能
      • HAVE_FUTURE_DATA(数値3)
        • 現在の再生位置に対応するデータは利用可能で再生方向に早送りするにも十分
      • HAVE_ENOUGH_DATA(数値4)
        • HAVE_FUTURE_DATAの状態 + 再生速度十分 or データ受信済み
  • networkState
    • メディア要素はネットワークとインタラクトしながら動作する
    • 以下のような現在のネットワーク状態がとれる
      • NETWORK_EMPTY(数値0): 全ての属性が初期状態
      • NETWORK_IDLE(数値1): ネットワークを利用していない状態
      • NETWORK_LOADING(数値2): データダウンロード中
      • NETWORK_NO_SOURCE(数値3): 利用するリソースが見つかっていない
  • error
    • 要素の現在のエラー状態を示すMediaErrorオブジェクトを返す
    • エラーがない時はnull
    • エラーの詳細は以下のもの
      • MEDIA_ERR_ABORTED(数値1): メディアリソースのフェッチが中止された
      • MEDIA_ERR_NETWORK(数値2): リソースが利用可能だと確定したあとでリソースのフェッチを止めることになった
      • MEDIA_ERR_DECODE(数値3): リソースが利用可能だと確定したあとでそのメディアのリソースのデコード中にエラーが発生した
      • MEDIA_ERR_SRC_NOT_SUPPORTED(数値4): src属性に指定されたメディアリソースが不適切
  • paused
    • 再生が中断されている場合には「true」を返す
  • ended
    • 再生が完了(メディアリソースの最後まで到達)した場合にはtrueを返す
  • duration
    • 再生時間の長さ(秒)を示す
  • currentTime
    • 現在の再生位置(秒)を示す

audio要素、video要素のプロパティのメソッド

  • load()
    • 該当の要素をリセット。新しいメディアリソースを選択してロード
  • play()
    • paused属性をfalseに設定して必要に応じてリソースをロード、再生開始。完了してる時は最初から再生
  • pause()
    • 再生を中断する。pause属性をtrueに設定する。必要に応じてリソースをロード

オフラインアプリケーションAPI ★★★☆☆☆☆☆☆☆

  • アプリケーションキャッシュの制御はApplicationCacheのAPIを使う
  • ApplicationCacheはwindowオブジェクトから取得できる

ApplicationCacheのプロパティ

  • status
    • 以下の定数を返す
  • 定数
    • UNCACHED
    • IDLE
    • CHECKING
    • DOWNLOADING
    • UPDATEREADY
    • OBSOLETE

ApplicationCacheのメソッド

  • update()
    • キャッシュの更新
  • abort()
    • アプリケーションキャッシュのダウンロードプロセスを中断する
  • swapCache()
    • 新しい情報がある場合はアプリケーションキャッシュを更新する

Page Visibility ★★☆☆☆☆☆☆☆☆

  • Page Visibility APIはWebページが見えている状態にあるか否かを知らせてくれる
  • 見えていない時とは
    • ウィンドウが最小化された場合
    • 同じウィンドウの他のタブを見ている場合

Documentオブジェクトの追加プロパティ

  • hidden
    • true or false
  • visibilityState
    • visible: 少なくとも部分的に可視状態
    • hidden: ユーザから見えていない
    • prerender: プレレンダリングされていてユーザから見えてない
    • unload: アンロードされている

Documentオブジェクトの追加イベント

  • visibilityChange
    • ドキュメントの可視性が変化した時に発火

Navigation Timing ★☆☆☆☆☆☆☆☆☆

  • Timing control script-based animationはスクリプトで記述されたアニメーションのフレーム操作ができる
  • フレームの描画準備が整った時にアニメーションフレームが呼び出されるためなめらかで効率的にできる

windowオブジェクトに追加されるメソッド

  • requestAnimationFrame()
    • FrameRequestCallbackオブジェクトを引数に取り、スクリプトベースのアニメーションフレームのスケジューリングを行う
  • cancelAnimationFrame()
    • 指定したIDのアニメーションフレームのスケジューリングをキャンセルする

ストレージ

Web Storage ★★★★★★★☆☆☆

  • Cookieでは扱うことができなかったような大容量のデータをブラウザに蓄積するためのAPI
    • Cookie: 4KB
    • WebStorage: 5MB
  • 蓄積できるデータはキーと値のペア

Storageのプロパティ

  • length
    • ストレージに格納されているキー / 値のペア値

Storageのメソッド

  • key()
    • 指定した番号のキーを返す
  • getItem()
    • 指定したキーの値を取得する
  • setItem()
    • 指定したキーの値を保存する
  • removeItem()
    • 指定したキーのデータを削除する
  • clear()
    • 全てのデータを削除する

StorageEventのプロパティ

  • key
    • 変更があったキー
  • oldValue
    • 変更があった値の古い値
  • newValue
    • 変更があった値の新しい値
  • url
    • キーが変更されたドキュメントのアドレス
  • storageArea
    • 変更のあったStorageオブジェクト

Indexed Database API ★★★★★☆☆☆☆☆

  • IndexedDatabaseAPIは値とオブジェクトをローカルマシンに保存
  • オブジェクトに対する高速なインデックス処理と検索を可能にする

File API ★★★★★☆☆☆☆☆

  • ローカルに保存されたファイルの属性や内容を取得できる
  • ユーザがフォームから選択したファイルやドラッグ&ドロップしたファイルを扱える
    • ここでアクセスできるのはユーザが指定したファイルのみ

FileListのプロパティ

  • length
    • 含まれるファイル数

FileListのメソッド

  • item()
    • 指定された番目のFileオブジェクトを返す

※ Blobオブジェクトはバイナリデータを扱うオブジェクト

Blobオブジェクトのプロパティ

  • size
    • Blobオブジェクトのバイト数
  • type
    • Blobオブジェクトのメディアタイプ

Blobオブジェクトのメソッド

  • slice()
    • 指定したバイトレンジの新しいBlobオブジェクトを返す
  • close()
    • BLobオブジェクトの利用を終了する

※ FileはBlobを継承している

Fileのプロパティ

  • name
    • ファイル名
  • lastModifiedDate
    • ファイルが最後に更新された日時

※ Fileオブジェクトを取得したらFileReaderオブジェクトをインスタンス化してコンテンツをメモリに読み取ることができる

FileReaderのプロパティ

  • readyState
    • 以下の状態
      • EMPTY: オブジェクトが生成されたまだデータを読み込んでない状態
      • LOADING: ファイルのデータを読み込んでいる状態
      • DONE: ファイルのデータをメモリ上にロードし終わった or 途中でエラーが発生した状態
  • result
    • ファイル内容をメソッドに合わせた形で表す
  • error
    • ファイルの読み込みで発生したエラーに関するDOMErrorオブジェクト

FileReaderのメソッド

  • readAsArrayBuffer()
    • データをArrayBufferとして読み込む
  • readAsText()
    • データをテキストとして読み込む
  • readAsAsDataURL()
    • データをDataURLとして読み込む
  • abort()
    • データ読み込みを中断する

通信

WebSocket ★★★★★☆☆☆☆☆

  • 双方向通信を実現
  • RFC6455で標準化

コンストラクタ

WebSocket.js
new WebSocket(url, protocol)

WebSocketのプロパティ

  • url
    • WebSocketオブジェクトが接続しているURLを示す
  • readyState
    • コネクション状態を示す
      • CONNECTING
      • OPEN
      • CLOSING
      • CLOSED
  • bufferAmount
    • WebSocketオブジェクト内にバッファされているデータのサイズを示す
    • この値が0である場合にはプログラムから送信指示があったデータはネットワークに送信されている状態であることを示す

WebSocketのメソッド

  • send()
    • サーバとの間で確立したコネクションにデータを送信する
  • close()
    • サーバと確立したコネクションを切断する

イベント

  • onopen
    • サーバとのコネクション確立成功時
  • onmessage
    • サーバから新たなメッセージが届いた時
  • onerror
    • エラー発生時
  • onclose
    • コネクションがクローズされた場合

XMLHttpRequest ★★★★★☆☆☆☆☆

  • jsから呼び出し可能なHTTP通信を提供するAPI
  • SPAの実現が可能

Server-Sent Events ★☆☆☆☆☆☆☆☆☆

  • WebSocketとの違い

    • WebSocketはHTTPではなく専用のプロトコルを使うため、パフォーマンスが高い
    • SSEはHTTPを使うため、通信の互換性が高い

  • 通信方法

    • プロトコル: HTTP/1.1
    • Content-Type: text/event-stream

デバイスアクセス

Geolocation API ★★★★★☆☆☆☆☆

  • ユーザの位置情報を取得できる
  • ユーザの許可を得ずに情報を取得することはできない
    • ブラウザの確認ウィンドウで位置情報の利用を許可するかどうか選択する
  • Geolocationオブジェクトはnavigatorオブジェクトから取得できる

Geolocationのメソッド

  • getCurrentPosition()
    • ユーザの現在の位置情報を1回だけ取得する
    • 引数にコールバック関数を設定できる
  • watchPosition()
    • ユーザの現在の位置情報を定期的に監視する
    • 引数にコールバック関数を設定できる
  • clearWatch()
    • watchPosition()による位置情報の監視をクリアする

Positionのプロパティ

  • coods
    • Coordinatesオブジェクトで位置情報を含む
  • timestamp
    • 測位が成功した時刻を表す

Coordinatesプロパティ

  • latitude
    • 緯度
  • longitude
    • 経度
  • altitude
    • 高度
  • accuracy
    • 緯度・経度の精度
  • altitudeAccuracy
    • 高度の精度
  • heading
    • 方角
  • speed
    • 速度

PositionErrorのプロパティ

  • code
    • PERMISSION_DENIED
    • POSTION_UNAVAILABLE
    • TIMEOUT
  • message
    • エラーの説明

DeviceOrientation Event ★☆☆☆☆☆☆☆☆☆

  • スマートフォンに搭載された加速度センサーやコンパスの情報をJavaScriptからリアルタイムに取得できる
  • イベントは2つ
    • DeviceOrientationEvent
      • 加速度センサーがデバイスの方向の変化を検出したときに発生
    • DeviceMotionEvent
      • 加速度が変化したときに発生 ### DeviceOrientationEvent
  • absolute
    • true or false
  • alpha
    • z軸を中心にしたデバイスの動きを表す
  • beta
    • x軸を中心にしたデバイスの動きを表す
  • gamma
    • y軸を中心にしたデバイスの動きを表す

DeviceMotionEvent

  • acceleration
    • x: 西から東へ向かう軸を表す
    • y: 南から北へ向かう軸を表す
    • z: 地面から直立する軸を表す
  • rotationRate
    • alpha: スクリーン (デスクトップ環境ではキーボード) から直立する軸を表す
    • beta: スクリーンの面 (デスクトップ環境ではキーボード) の左から右へ向かう軸に沿った回転量を表す
    • gamma: スクリーンの面 (デスクトップ環境ではキーボード) の下から上へ向かう軸に沿った回転量を表す

パフォーマンスとオフライン

Web Wokers ★★★★★☆☆☆☆☆

  • スレッドを生成して並列処理を行える
  • グローバルオブジェクトとしてWorkerGlobalScopeを利用できる
  • Worker同士はメッセージボードを利用して通信できる

コンストラクタ

worker.js
var worker = new Worker('example.js');

Workerのメソッド

  • terminate()
    • Workerを終了する
  • postMessage()
    • Workerにメッセージを送信する

Workerのイベントハンドラ

  • onerror
    • エラーが発生した場合に発火する
  • onmessage
    • メッセージを受信した場合に発火する

WorkerGlobalScopeのプロパティ

  • self
    • WorkerGlobalScopeオブジェクト自身
  • location
    • Workerが作成された時のWorkerLocationオブジェクト
  • navigator
    • WorkerNavigatorオブジェクト

High Resolution Time ★★☆☆☆☆☆☆☆☆

  • High Resolution Time APIはミリ秒以下の分解能を持つ時刻を扱うためのAPI

High Resolution Time APIのメソッド

  • now()
    • 文書のナビゲーション開始時点から本メソッド呼びだしが発生するまでのミリ秒(マイクロ秒)数を返す
    • DOMHighResTImeStamp型
    • Dateとは似てるけど違う
      • ミリ秒以下もとれる（以下の例参照）
      • High Resolution Time APIはナビゲーション開始時を起点とする
      • Dateは世界時標準によって設定される時間を示す
例
console.log(Date.now()) // 1490580523638
console.log(performance.now()) // 175606.08000000002
6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
8