2017を教科書にフロントエンド周りの技術を習得する連載。APIsを紹介します。ブラウザのAPIについて学ぶの説明です。ブラウザのAPIについて学ぶBOM(ブラウザオブジェクトモデル)とDOM(ドキュメントオブジェクトモデル)は、ブラウザ内のWebプラットフォームで利用できる唯一のブラウザAPIではありません。APIやブラウザAPIと見なすことができます。APIと呼ばれ、独自の仕様を混乱させ、実際のHTML5仕様で標準化しています。APIやブラウザAPIには、タブレット端末や携帯端末のブラウザから利用できるデバイスAPI(例:Navigator.getBattery())が含まれています。/ブラウザAPIを知り、学習する必要があります。これらすべてのAPIを身に付けるには、最新の5つのブラウザに対するHTML5test.comの結果を調べるのが良いツールです。bookを読みましょう。この本がHTML5で使用できるAPIを体系的に纏めています。Graphics)CanvasとSVGはどちらも図形描画をHTML5ドキュメンド上で行えるAPIです。どちらを使用しても同じような表現が可能ですが、主な違いはCanvasがラスターデータなのに対し、SVGはベクターデータになります。複雑な絵を表示するのに適している。直線や曲線などで構成される図形などに適している。VideoHTML5では<video>タグで動画を、<audio>タグで音声をドキュメントに埋め込む事が出来ます。JavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。要素の使用ジオロケーションHTML5ではジオロケーションのAPIも用意してあります。これは以下のソースを元にデバイスの位置を取得する事ができます。使用しているWebページにアクセスすると、プライバシー保護メカニズムが起動します。位置情報は機密情報ですので、受信したときにはデータの取り扱い、保管、再送信に注意する必要があります。ユーザーがデータを格納する権限を与えない限り、必要なタスクが完了した後は常にデータを破棄する必要があります。位置情報を取得するメソッドジオロケーション情報を取得する為にはnavigator.geolocationインターフェースが持つ以下のメソッドを使用する事ができます。通信におけるAPIでは、大きく分けて2つの種類が登場します。クロスドメイン通信とリアルタイム通信です。MessagingやXMLHttpRequestを使用すると、クロスドメイン制約というそのHTMLファイルが置かれているドメインのサーバとしか通信できないという制約を回避することが可能となります。iframeやwindowで安全にクロスドメイン通信を可能にするためのメソッド。ブラウザとサーバとのHTTP通信をクライアント側で行うためのAPI。Ajaxで使用されることで有名。リアルタイム通信WebSocketは、Web上の単一のソケットを通して動作する全二重通信チャネルを実現します。リアルタイムウェブアプリケーションに必須のAPIです。WebSocket接続を確立するには、クライアントとサーバーの初期ハンドシェイク中にHTTPプロトコルからWebSocketプロトコルにアップグレードします。確立されると、全二重モードでWebSocketデータフレームをクライアントとサーバーの間で往復させることができます。フォームHTML5フォームは、既存のシンプルなHTMLフォームを進化させ、より多くのタイプのコントロールを提供しています。以下の様な要素が追加されてます。Validationという強力な機能が追加されています。これを用いると、ユーザがフォームに入力している間にデータを検証し、何らかのミスをした場合は直ちに知ることができます。これはユーザがHTTPレスポンスを待つ時間を減らし、サーバで誤ったフォーム入力を扱うことがないようにします。疑似クラスにマッチします。APIをJavaScriptから操作することにより、ネイティブのエラーメッセージの制御や、HTML5フォーム検証をサポートしないブラウザに対処することができます。データフォームの検証ドラッグ&ドロップHTML5のドラッグ&ドロップAPIを使用するには、移動可能にする要素にdraggable=trueを設定します。それらのドラッグ&ドロッププロセス全体を監視する、以下の様なイベントハンドラが用意されています。http://apress.jensimmons.com/v5/pro-html5-programming/ch9.htmlDataTransferまた、JavaScript側でdataTransferオブジェクトにドラッグするデータをセットしておき、ドロップ時にそのデータを受け渡すことでドラッグ&ドロップを実現します。1つの転送項目をMIMEタイプの形式で登録することができる。指定された型の登録データ項目を取り出す。現在登録されているすべてのフォーマットの配列を返す。すべてのアイテムとその関連フォーマットのリストを返す。ドロップに関連付けられたファイルを返す。引数なしで呼び出すと、登録されているすべてのデータがクリアされる。format引数を指定して呼び出すと、その特定の登録だけが削除される。指定した画像をドラッグイメージとして使用するようにブラウザに指示する。x座標とy座標を指定した場合は、マウスカーソルの下のどこに表示するかを指示する。ドラッグされた要素自身以外にもドラッグ要素を追加したい場合にこれを設定する。none、copy、copyLink、copyMove、link、linkMove、move、またはallのいずれかに設定すると、その操作のみがユーザーに許可される。ドロップによっておこる結果を指定する。none、copy、link、moveが設定可能。WorkersJavaScriptはシングルスレッドで処理を行うので、長すぎる処理を行う場合は他の処理を遅延させます。WorkersはWebアプリケーションにバックグラウンド処理機能を提供し、重い演算のマルチスレッド処理が可能となります。Workersは、WebページとDOMにアクセスできません。Eventsを使用してバックエンドサーバーと通信することで、バックエンドサーバからのメッセージをリアルタイムに表示するWebページなどがあります。Workerも存在します。Workersのオブジェクト宣言はこれだけです。Worker("myWorker.js");postMessage()でデータをworkerに渡します。worker.postMessage(x);workerで指定されたJavaScriptファイル上ではonmessageハンドラによって、受け取ったデータを処理できます。postMessage()でデータを返します。{//~処理~postMessage(results);}返されたデータを再びonmessageを使用して、workerから返されたメッセージに応答します。Storageは、クライアントのブラウザにデータを保存する為のAPIです。cookieとの違いは保存できるデータ量の上限の違いや通信時のオーバーヘッドの差が主です。StorageにはsessionStorageとlocalStorageがあり、それぞれの違いは以下の様になります。必要時のみデータ量上限の列にあるオリジンとは、「http://mojage.club:80」の様な「プロトコル://ドメイン名:ポート番号」のセットを1オリジンといいます。WebアプリケーションServiceWorkerを使用することにより、ネットワーク接続なしでアプリケーションを実行できるようになります。Workersの1つで、postMessage()でデータのやり取りを行います。これはプログラム可能なネットワークプロキシなので、ネットワークリクエストをコントロール出来ます。その為、HTTPS接続が必須です。ServiceWorkerは使用されていない間は終了され、必要な時になったら起動します。Workerを利用するには以下の手順を踏みます。/ブラウザAPIに関する豊富な情報があります。[日本語]すべてのAPIがW3CまたはWHATWGによって指定されているわけではないことに注意してください。/ブラウザAPIについて学習するのに役立つ以下リソースがあります。2019年12月月19日午後3時58分PSTもじゃげくらぶQooQ。