2013/08/02

新時代の機能が満載!HTML5入門 新API一覧

新時代の機能が満載!HTML5入門 新API一覧

今回はHTML5から追加されるJavaScript APIを紹介します。
どれも高度なウェブサイト、ウェブアプリケーションの作成に役に立つ機能ばかりなので積極的に利用していきましょう。

■目次

■web Storage(ストレージ)

web Storage(ストレージ)

今までは顧客のログイン情報、入力情報、ショッピングサイトのカート情報などのデータはブラウザのクッキーに保存してきました。

しかしクッキーは容量に制限有効期限がありセキュリティも低いという欠点があります。

HTML5でクッキーに変わる新機能として追加されたWeb Storageでは、大容量有効期限のないデータをユーザーのPCに永続的に保存できるようになり、セキュリティもクッキーより高いです。

■File API(ファイル操作)

File API(ファイル操作)

File APIを使うとブラウザからPC内のファイルを直接参照、編集できるようになります。

セキュリティーのためアクセスできるのはユーザーが選択したファイルのみに限られます。

■Geolocation API(位置情報)

Geolocation API(位置情報)

Geolocation APIはGPSなどの位置情報を扱えるAPIです。
今までも携帯端末で位置情報を取得することはできましたが各キャリアで独自のコード書かなければなりませんでした。

HTML5では一つのコードを書けば全デバイスで同じ機能を実現できるようになります。
またデスクトップPCなど、GPSが搭載されていなくても無線LAN・WiFi・携帯電話基地局・IPアドレスなどから位置情報を取得できます。

■Web Workers(並列スレッド処理)

Web Workers(並列スレッド処理)

通常ブラウザは平行に処理をせずに直列に処理をするのでJavaScriptなどの処理中に他の操作や処理を受け付けません。

Web Workersは処理を平行に行うためのAPIです。
Web Workersを使えば画面表示を最優先させながらも裏で重い処理をさせる事もできます。

※Workerとは一つの処理の単位、つまりスレッドの事です。

■Drag and Drop API(ドラッグ&ドロップ)

Drag and Drop API(ドラッグ&ドロップ)

HTML5では「draggable="true"」を付けるだけでほぼすべての要素がドラッグ&ドロップ可能になります。

上手く活用すると、詳しい説明がなくても直感で操作できるようなサイトやアプリケーションを作れるのでユーザビリティーも良くなります。

更にアイデア次第でアプリやゲームなど面白い使い方ができると思います。

■Canvas API(グラフィック描画)

Canvas API(グラフィック描画)

いままではwebで画像を表示する時はJPGGIFPNGなどを使うのが一般的でした。

Canvas APIを使えばHTMLやJavaScriptだけで画像を描画できますのでグラフの表示やゲームの処理などが高速になります。

■History API(履歴操作)

History API(履歴操作)

ブラウザの「戻る」「進む」ボタンのイベントを取得してURL履歴を操作できるAPIです。

ウェブアプリケーションなど、非同期の画面移行でもブラウザの「戻る」ボタンで前の状態に戻す事ができるようになります。

■策定中(2013年8月2日現在)のAPI

現在W3Cが策定を進めていて将来導入されるかもしれない仕様の一部をご紹介します。

・Media Capture API

スマートフォンやタブレット、ノートPCに搭載されているカメラやマイク、それによってとられた写真や動画を扱うAPIです。
現在は各デバイスによって仕様が違うためにデバイスごとに違うソースを書く必要がありますが一つのソースを書けば全デバイスで同じ機能を実現できるようになります。

・System Information API

CPUメモリの使用状況、ネットワークの通信状態、バッテリーの状況など本来ならOSのシステムが参照する情報にアクセスできるようになります。

・Clipboard API

コピー、カット、ペーストする時に使うクリップボードを操作するAPIです。

■ブラウザの対応状況(2013年8月2日現在)

ブラウザイメージ

API IE Chrome Firefox Safari Opera
Web Storage 8以降
File API 10以降
Geolocation API 9以降
Web Workers 10以降
Drag and Drop API 5.5以降
Canvas API 9以降
History API 10以降

最新版のブラウザではほぼすべての機能に対応しています。

■まとめ

今まではデスクトップアプリじゃないと出来なかった事がウェブアプリケーションで出来るようになってきてます。
新しい技術をどんどん使って今までにないような便利で面白いサイトを作っていきましょう。