Image source: http://www.evolutionoftheweb.com/
Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。
第26回はPart II: Learning Front-End Devから、16項のLearn Web/Browser APIsを紹介します。
ブラウザのAPIについて学ぶの説明です。
ブラウザの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 MessagingやXMLHttpRequestを使用すると、クロスドメイン制約というそのHTMLファイルが置かれているドメインのサーバとしか通信できないという制約を回避することが可能となります。
API | 使用方法 |
---|---|
window.postMessage | iframeやwindowで安全にクロスドメイン通信を可能にするためのメソッド。 |
XMLHttpRequest | ブラウザとサーバとのHTTP通信をクライアント側で行うためのAPI。Ajaxで使用されることで有名。 |
リアルタイム通信
WebSocketは、Web上の単一のソケットを通して動作する全二重通信チャネルを実現します。リアルタイムウェブアプリケーションに必須のAPIです。WebSocket接続を確立するには、クライアントとサーバーの初期ハンドシェイク中にHTTPプロトコルからWebSocketプロトコルにアップグレードします。一旦確立されると、全二重モードでWebSocketデータフレームをクライアントとサーバーの間で往復させることができます。
フォーム
HTML5フォームは、既存のシンプルなHTMLフォームを進化させ、より多くのタイプのコントロールを提供しています。例えば、以下の様な要素が追加されてます。
- tel
- 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が設定可能。 |
参照元 :
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) {//受け取る
//~処理~
}
参照元 :
Web Storage
Web Storageは、クライアントのブラウザにデータを保存する為のAPIです。cookieとの違いは保存できるデータ量の上限の違いや通信時のオーバーヘッドの差が主です。Web StorageにはsessionStorage
とlocalStorage
があり、それぞれの違いは以下の様になります。
データの保存方法 | ウィンドウ間のデータ共有 | データ有効期限 | データ量上限 | サーバーとのデータ通信 |
---|---|---|---|---|
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を利用するには以下の手順を踏みます。
- Service Workerの登録
- Service Workerのインストール
- リクエストへのレスポンス
参照元 :
補足
MDNには、Web /ブラウザAPIに関する豊富な情報があります。
- MDN Web API Reference
- MDN Web APIs Interface Reference - All Interfaces, Arranged Alphabetically
- MDN WebAPI - Lists Device Access APIs and Other APIs Useful for Applications
- MDN Web API リファレンス [日本語]
- MDN Web API インターフェイス [日本語]
- MDN WebAPI [日本語]
すべてのAPIがW3CまたはWHATWGによって指定されているわけではないことに注意してください。MDNのほかに、すべてのWeb /ブラウザAPIについて学習するのに役立つ以下リソースがあります。
0 件のコメント:
コメントを投稿