フロントエンド技術を学ぼう 2-16.ブラウザのAPIについて学ぶ

Image source: http://www.evolutionoftheweb.com/

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第26回はPart II: Learning Front-End Devから、
16項のLearn Web/Browser APIsを紹介します。

ブラウザのAPIについて学ぶの説明です。

Sponsored Link

ブラウザのAPIについて学ぶ

BOM(ブラウザオブジェクトモデル)とDOM(ドキュメントオブジェクトモデル)は、ブラウザ内のWebプラットフォームで利用できる唯一のブラウザAPIではありません。DOMやBOMではない、ブラウザをプログラミングするためのインタフェースは、Web APIやブラウザAPIと見なすことができます。(過去には悲惨なことに、これらのAPIのいくつかはHTML5 APIと呼ばれ、独自の仕様を混乱させ、実際のHTML5仕様で標準化しています。)

Web APIやブラウザAPIには、タブレット端末や携帯端末のブラウザから利用できるデバイスAPI(例:Navigator.getBattery())が含まれています。必要に応じてWeb /ブラウザAPIを知り、学習する必要があります。これらすべてのAPIを身に付けるには、最新の5つのブラウザに対するHTML5test.comの結果を調べるのが良いツールです。

一般的な学習

以下のweb bookを読みましょう。この本がHTML5で使用できるAPIを体系的に纏めています。

Pro HTML5 Programming(プロHTML5プログラミング)

Canvas / SVG(Scalable Vector Graphics)

CanvasとSVGはどちらも図形描画をHTML5ドキュメンド上で行えるAPIです。どちらを使用しても同じような表現が可能ですが、主な違いはCanvasがラスターデータなのに対し、SVGはベクターデータになります。

表現方法 データ形式 特徴 使い所 使用例
<canvas>タグ ラスター pixelごとに色・濃度の情報を記録する画像形式 複雑な絵を表示するのに適している。 写真
<svg>タグ ベクター 画像を数値で記録している画像形式 直線や曲線などで構成される図形などに適している。 アイコン

参照元 :
HTML5 Canvas [読み物]
Canvas [読み物][日本語]

Audio & Video

HTML5では<video>タグで動画を、<audio>タグで音声をドキュメントに埋め込む事が出来ます。またJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。

参照元 : HTML5 の audio 要素と video 要素の使用

ジオロケーション

HTML5ではジオロケーションのAPIも用意してあります。これは以下のソースを元にデバイスの位置を取得する事ができます。

  • IPアドレス
  • 座標の三角測量
  • GPS
  • RFID、Wi-Fi、BluetoothのMACアドレスを使用したWi-Fi
  • GSMまたはCDMA携帯電話のID
  • ユーザー定義

位置情報はプライバシーに関わるものなので、Geolocation API を使用しているWebページにアクセスすると、プライバシー保護メカニズムが起動します。位置情報は機密情報ですので、受信したときにはデータの取り扱い、保管、再送信に注意する必要があります。ユーザーがデータを格納する権限を与えない限り、必要なタスクが完了した後は常にデータを破棄する必要があります。

位置情報を取得するメソッド

ジオロケーション情報を取得する為にはnavigator.geolocationインターフェースが持つ以下のメソッドを使用する事ができます。

メソッド 用途
getCurrentPosition() クライアントの位置情報を一回度だけ取得
watchPosition() クライアントの位置情報を定期的に取得
clearWatch() watchPosition()から得た位置情報をクリアする

参照元 : Geolocation

通信

通信におけるAPIでは、大きく分けて2つの種類が登場します。クロスドメイン通信リアルタイム通信です。

クロスドメイン通信

Cross Document MessagingXMLHttpRequestを使用すると、クロスドメイン制約というそのHTMLファイルが置かれているドメインのサーバとしか通信できないという制約を回避することが可能となります。

API 使用方法
window.postMessage iframeやwindowで安全にクロスドメイン通信を可能にするためのメソッド。
XMLHttpRequest ブラウザとサーバとのHTTP通信をクライアント側で行うためのAPI。Ajaxで使用されることで有名。
リアルタイム通信

WebSocketは、Web上の単一のソケットを通して動作する全二重通信チャネルを実現します。リアルタイムウェブアプリケーションに必須のAPIです。WebSocket接続を確立するには、クライアントとサーバーの初期ハンドシェイク中にHTTPプロトコルからWebSocketプロトコルにアップグレードします。一旦確立されると、全二重モードでWebSocketデータフレームをクライアントとサーバーの間で往復させることができます。

フォーム

HTML5フォームは、既存のシンプルなHTMLフォームを進化させ、より多くのタイプのコントロールを提供しています。例えば、以下の様な要素が追加されてます。

  • tel
  • email
  • url
  • search
  • range
  • number
  • color
  • datetime
  • datetime-local
  • time
  • date
  • week
  • month
HTML5 Form Validation

HTML5にはForm Validationという強力な機能が追加されています。これを用いると、ユーザがフォームに入力している間にデータを検証し、何らかのミスをした場合は直ちに知ることができます。これはユーザがHTTPレスポンスを待つ時間を減らし、サーバで誤ったフォーム入力を扱うことがないようにします。

以下の属性をinput要素に追加することにより、入力された値が間違っている場合は:invalid、正しい場合はvaild CSS 疑似クラスにマッチします。

  • pattern属性
  • required属性
  • maxlength属性
  • min属性とmax属性

またConstraint validation APIをJavaScriptから操作することにより、ネイティブのエラーメッセージの制御や、HTML5フォーム検証をサポートしないブラウザに対処することができます。

参照元 : データフォームの検証

ドラッグ&ドロップ

HTML5のドラッグ&ドロップAPIを使用するには、移動可能にする要素にdraggable=trueを設定します。そしてそれらのドラッグ&ドロッププロセス全体を監視する、以下の様なイベントハンドラが用意されています。

イベントハンドラ イベント発生タイミング
dragstart ドラッグ開始時
drag ドラッグ中
dragenter ドラッグ要素がドロップ要素に入った時
dragleave ドラッグ要素がドロップ要素から離れた時
dragover ドラッグ要素がドロップ要素に上に重なっている時
drop ドロップ時
dragend ドラッグ終了時

Image source: http://apress.jensimmons.com/v5/pro-html5-programming/ch9.html

DataTransfer

また、JavaScript側でdataTransferオブジェクトにドラッグするデータをセットしておき、ドロップ時にそのデータを受け渡すことでドラッグ&ドロップを実現します。

Function handleDrag(evt) {
    var transfer = evt.dataTransfer;
}
プロパティ/メソッド 使用方法
setData(format, data) 1つの転送項目をMIMEタイプの形式で登録することができる。
getData(format) 指定された型の登録データ項目を取り出す。
types 現在登録されているすべてのフォーマットの配列を返す。
items すべてのアイテムとその関連フォーマットのリストを返す。
files ドロップに関連付けられたファイルを返す。
clearData() 引数なしで呼び出すと、登録されているすべてのデータがクリアされる。format引数を指定して呼び出すと、その特定の登録だけが削除される。
setDragImage(element, x, y) 指定した画像をドラッグイメージとして使用するようにブラウザに指示する。x座標とy座標を指定した場合は、マウスカーソルの下のどこに表示するかを指示する。
addElement(element) ドラッグされた要素自身以外にもドラッグ要素を追加したい場合にこれを設定する。
effectAllowed none、copy、copyLink、copyMove、link、linkMove、move、またはallのいずれかに設定すると、その操作のみがユーザーに許可される。
dropEffect ドロップによっておこる結果を指定する。none、copy、link、moveが設定可能。

参照元 :
ネイティブ HTML5 ドラッグ&ドロップ
DataTransfer

Web Workers

JavaScriptはシングルスレッドで処理を行うので、長すぎる処理を行う場合は他の処理を遅延させます。Web WorkersはWebアプリケーションにバックグラウンド処理機能を提供し、重い演算のマルチスレッド処理が可能となります
Web Workersは、WebページとDOMにアクセスできません。Web Workersの使用例としては、インタラクティブなWebページの動作を遅延させずに処理を行いたいWebアプリケーションや、Web SocketsまたはServer-Sent Eventsを使用してバックエンドサーバーと通信することで、バックエンドサーバからのメッセージをリアルタイムに表示するWebページなどがあります。
また、SharedWorkerという、複数のウィンドウやiframe、Workerからアクセス可能な Workerも存在します。

データの受け渡し

Web Workersのオブジェクト宣言はこれだけです。

worker = new Worker("myWorker.js");

postMessage()でデータをworkerに渡します。

worker.postMessage(x); 

workerで指定されたJavaScriptファイル上ではonmessageハンドラによって、受け取ったデータを処理できます。そしてpostMessage()でデータを返します。

onmessage = function(x) {
  //~処理~
    postMessage(results);
}

返されたデータを再びonmessageを使用して、workerから返されたメッセージに応答します。

worker.onmessage = function(x) {//受け取る
  //~処理~
}

参照元 :
Javascript マルチスレッド処理技術 WebWorkerのサンプル
インライン WEB WORKERS
Web Worker を使用する

Web Storage

Web Storageは、クライアントのブラウザにデータを保存する為のAPIです。cookieとの違いは保存できるデータ量の上限の違いや通信時のオーバーヘッドの差が主です。Web StorageにはsessionStoragelocalStorageがあり、それぞれの違いは以下の様になります。

データの保存方法 ウィンドウ間のデータ共有 データ有効期限 データ量上限 サーバーとのデータ通信
cookie 期限を指定可能 4KB 毎回
sessionStorage × タブやウィンドウを閉じるまで 1オリジンあたり5MB 必要時のみ
localStorage 永続的に保存可能 1オリジンあたり5MB 必要時のみ

データ量上限の列にあるオリジンとは、「http://mojage.club:80」の様な「プロトコル://ドメイン名:ポート番号」のセットを1オリジンといいます。

参照元 : Web Storage API

オフライン Webアプリケーション

ServiceWorkerを使用することにより、ネットワーク接続なしでアプリケーションを実行できるようになります。これはWeb Workersの1つで、postMessage()でデータのやり取りを行います。これはプログラム可能なネットワークプロキシなので、ネットワークリクエストをコントロール出来ます。その為、HTTPS接続が必須です。そしてServiceWorkerは使用されていない間は終了され、必要な時になったら起動します。再利用するデータの保管場所としてIndexedDB APIを利用します。

Service Workerの利用

Service Workerを利用するには以下の手順を踏みます。

  1. Service Workerの登録
  2. Service Workerのインストール
  3. リクエストへのレスポンス

参照元 :
Service Worker の紹介
Service Workerの利用について
IndexedDB

補足

MDNには、Web /ブラウザAPIに関する豊富な情報があります。

すべてのAPIがW3CまたはWHATWGによって指定されているわけではないことに注意してください。MDNのほかに、すべてのWeb /ブラウザAPIについて学習するのに役立つ以下リソースがあります。