Pastalablog in はてな

時代はブログ！ 日記もあるよ→http://pastak-diary.hatenadiary.com

サークルの例会講座でWebAPIについてざざっと紹介しました

資料をmarkdownで書いたので、gistに貼って共有したのですが、JS埋め込みなどが効かなかったのでブログに貼ることにしました。

自己紹介などは省略しております。あしからず。

（下記資料内の対応ブラウザの欄のFirefoxのあとの(M)はFirefox Mobileを表現しています）

今日のはなし

  • Web APIと呼ばれているJSのAPI群から一部のAPIについての紹介をします
  • 「そういうことがJSで出来るようになってるのかぁ」って程度の知見の共有です

Web API とは(1)

WebAPI はデバイスの互換性一式と、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) に加えてデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。

via https://developer.mozilla.org/ja/docs/WebAPI

Web API とは(2)

  • 要約するとJSからデバイス内のデータやハードウェアにアクセスするための各種APIの総称
    • MozillaがFirefox OSの開発のために積極的に実装(しているものが比較的多い)
      • まだ仕様が草稿・勧告候補段階または標準化提案がなされていないものもあります
      • 掲載、参照しているサンプルは今後の仕様変更などによる影響を大きく受ける場合があります。
  • Firefox OS以外（Android版FirefoxやChrome、デスクトップ向けFirefox）でも動くものをピックアップして紹介します。

WebRTC

  • ブラウザ同士でP2P通信を実現したり、カメラやマイクにアクセスしたり出来るAPI群の総称
    • チャット、ファイル交換、録音、録画・・・etc
  • 詳細：WebRTCで出会い系チャット転覆 by uiureo

Geolocation API

  • デバイスの経度緯度を取得 − ほぼ全てのデスクトップ向けモバイル向けブラウザで動作
    • デスクトップ向けブラウザは Google Location Services を使用した Wi-Fi 情報に基づく位置測定 をしている

デモ

Web Notifications API

  • デスクトップ通知を出すAPI
  • IE以外のデスクトップ向けブラウザで動作する

デモ

Network Information API

Battery Status API

Pointer Lock API

Vibration API

  • デバイスのバイブレーション機能を利用するためのAPI
モバイルデバイスで動画を見ていて、爆発シーンでデバイスが少し振動すると想像してみましょう。あるいはボンバーマンをプレイしていて、ブロックが爆発するときに穏やかな衝撃を感じると想像してみましょう!

devicelight event

  • デバイスの光センサの値の変更時に発火するイベント。
    • 環境によって背景のコントラストを変えるなどが可能になる。
    • event.valueに単位ルクスで格納される
  • サポート：Firefox(Macのみ), Firefox(M)

デモ

ここが変わる〜〜〜

deviceproximity Event

  • デバイスの近接センサーの変化に応じてイベントを発火。
    • 詳細な値を取得するdeviceproximityイベントとおおまかに近いかどうかを返すuserproximityイベントがある
  • サポート：Firefox, Firefox(M)

その他各種センサ系API

devicelightとdeviceproximityはそれぞれSensor DOM Eventとして提案されている。

上記２つは勧告候補になっている。Sensor Eventとしては下記のものも提案されている。

  • devicetemperature
    • 温度センサ(℃)
  • devicepressure
    • 圧力センサ(kP)
  • devicehumidity
    • 湿度センサ(%)
  • devicenoise
    • 雑音センサ(dbA)

まとめ

  • 最近はJSからデバイスの各種機能を利用できるAPIが増えてきた
  • 拡張機能などから利用する場合は更に出来る事の範囲が広がってる
    • 例：Chrome Extensionではスクリーンキャプチャが撮れる

参考