HTML5 APIについて

1. HTML5 API
第二部

2. 第二部 HTML5 API
HTML5 使ってますか？
実は、HTML5には新たなタグや属性が増えただけでなく、
あらゆるAPIも備わっています。
古いブラウザに対応する必要があるため、
使いたくてもなかなか使えないのが現状もあると思いますが、
使えるときには、いろいろ出来るので結構面白いです。

3. 第二部 HTML5 API
HTML5 APIの種類
Clipboard API
Web Strorage (ストレージ)
HTML Media Capture API
VibrationAPI
Web GL
Geolocation API
and more…

4. Clipboard API
Clipboard API は、Web上でクリップボード操作が可能になります。
可能なクリップボード操作は、
・ Copy コピー
・ Cut カット
・ Paste ペースト
の３つです。
ただの、ctrl + c や ctrl + v との違いは、
コピー・カット・ペーストの操作による挙動を
プログラム出来る点にあります。
コピぺ禁止にしたり、
セキュリティ上、コピー・カットさせたくないテキストの代わりに
別の文字列を与えたりなどが可能になるという事です。

5. Web Storage Web Storageは、クッキーに変わる新機能として大容量で有効期限のな
いデータをユーザーのPCに永続的に保存できるようになりました。
セキュリティもクッキーより高くなっています。
クッキー
4KB
あり
すべてのリクエストで、
サーバにデータを自動送
信
Web Storage
5MB
なし
データを使用するときの
み送信
容量
保存有効期間
セキュリティ

6. HTML
Media
Capture
API
HTML Media Capture API は、ブラウザからカメラやマイクの起動や操
作が可能です。
HTML Media Capture APIによる操作は、
・カメラ
・動画
・音声
になります。
特に、音声録音を用いれば、ボイスレコーダーアプリなどすぐに出来る
ぐらい簡単です。

7. Vibration API VibrationAPIは、その名の通りバイブレーションを発動させたりなどの
操作ができるAPIです。
指定した時間だけ、バイブレーションさせたり、
数秒置きに、間隔をあけたり、
もちろん実行しているバイブレーションを停止させる、
と言った操作ができます。

8. Web GL Web GL は、ブラウザで3Dグラフィックを実現するAPIです。
もう、あれこれ説明するより、以下のサイトにアクセスするが早いです。
http://www.ro.me/

9. Geolocation API Q. このAPIの機能は、以下のうちどれでしょう？
ヒント： ジオロケーションと読みます
位置情報操作
1
端末情報操作
2
記憶情報操作
3
Ａ. 位置情報操作
Geolocation APIは、無線LAN・WiFi・携帯電話基地局・GPS・IPアドレス
などから位置情報を取得します。
1

10. 第二部 HTML5 API
HTML5 APIの種類
Clipboard API
Web Strorage (ストレージ)
HTML Media Capture API
VibrationAPI
Web GL
Geolocation API
・・・クリップボード操作をするAPI
・・・保存などのデータ操作をするAPI
・・・写真・動画・音声などを記録するAPI
・・・バイブレーション操作をするAPI
・・・グラフィック操作をするAPI
・・・位置情報を取得するAPI
結構名前のまんまな機能なんですね。
まとめると

11. 第二部 HTML5 API
APIの活用術
APIは組み合わせて使うことも、可能です。
①Google map API + HTML5 Geolocation API
= 地図上で現在地がわかる！
②HTML5 Geolocation API + HTML5 Vibration API
= ある場所に踏み入れると、バイブレーションを自動で鳴らせる！
① + ② Google map API + HTML5 Geolocation API + HTML5 VibrationAPI
= 地図上に進路を表示し、あるポイントに差し掛かった時バイブレーションを発動！
夜にやれば、セルフ肝試しツールに！？

12. 第二部 HTML5 API
引用・参照元
http://www.w3.org/TR/clipboard-apis/
http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/html-media-capture/
http://www.w3.org/TR/vibration/
http://dev.w3.org/geo/api/spec-source.html
http://webos-goodies.jp/archives/65_impressive_webgl_demos_and_apps.html
http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html

13. まとめ

14. まとめ
APIとは、あらゆる機能を簡単にプログラミングに組み込むための仕様・規格。
たくさんのAPIがあり、Web界隈のAPIはもっともHOT!
Google Map API や HTML5 API と言ったAPIがあり、
PCのみでなく、スマホ上でも動く！（Webだからね）
APIにより、難しいそうな処理も少しのコーディングであれこれ出来る。