HTML5の便利なAPI

HTML5でWebの表現力は一気に拡大しています。もちろんJavaScriptでも多数のAPIが追加されており、リッチなWebシステムを構築するのに必須機能が揃ってきています。今回は多数あるHTML5 APIの中で、業務システム周りで使えるものをピックアップして紹介します。

## File API

従来のJavaScriptではローカルファイルへアクセスできませんでした。HTML5で追加されたFile APIによって、ファイル選択ダイアログであったり、ドラッグ&ドロップされたファイルを読み込めるようになりました。

CSVファイルを読み込んだり、画像を読み込んで加工すると言った処理もできるようになっています。また、読み込んだ内容をAjaxでサーバに送ることで、ファイルのドラッグ&ドロップでアップロード処理を行うと言った処理も可能になります。

[File – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/File)

## Geolocation API

位置情報を取得するAPIです。一般的なPCにはGPSモジュールは入っていませんので、IPアドレス、WiFi、Bluetoothなど様々な情報を使って位置情報を特定します。一度だけ取得することも、継続的に取得し続けることもできます。精度はそこそこといったところなので、あまり厳密性を求めるような運用は難しいでしょう。

位置情報を使えば付近の情報を取得したり、駅名や住所の入力を省けるようになります。スマートフォンなど文字入力が面倒な場合において特に有効です。

[Geolocation の利用 – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation)

## クリップボードAPI

いわゆるクリップボードの操作が可能になるAPIです。文字列をコピーするだけでなく、HTMLやリンクなども対象になります。さらにファイルをコピーすることでアクセスできるようにもなります。

ユーザに任意の文字列をコピーしてもらうのに使ったり、画像やHTMLなどを含んだコンテンツをコピーしてもらうのに使えます。

[ClipboardEvent – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/ClipboardEvent)

## localStorage

キーバリュー型でデータの保存、取り出しができるストレージです。Cookieに似ていますが、もっと容量は大きな仕組みです。KVSなので、検索などの機能はありません。恒久的なデータ保存場所として使うのが便利です。

[Window.localStorage – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)

## History API

JavaScriptで画面を書き換えるようなWebアプリケーションの場合、History APIを使うことでブラウザの履歴として管理できるようになります。ハッシュまたはパーマネントURLを書き換える形になります。

History APIでパーマネントURLを使う場合、そのURLに対してダイレクトにアクセスしたとしてもきちんと表示されるようになっている必要があります。

[ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN](https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history)

## WebSocket API

サーバとクライアントで同期的にメッセージを送受信できる仕組みがWebSocketです。特定のチャンネルを購読したり、逆にブロードバンドにメッセージを流すこともできます。ソケットとついている通り、HTTPとは異なるプロトコルを使います。

そのためWebSocket用のサーバを別途用意したりする必要があります。その際セッションデータなどを連携させるなど実装には工夫が必要になるでしょう。

[WebSockets – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API)

—-

APIは他にもたくさんあります。WebGLであったり、Web NotificationといったAPIもあります。Webシステムをより便利にするためにHTML5 APIを活用してください。