SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発(AD)

Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声APIを使った楽器アプリの作例

Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発 第3回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 WebブラウザFirefoxの技術で開発されたOSであるFirefox OSは、地理位置情報や加速度センサーといったおなじみのAPIに加え、カメラやBluetooth、NFCなど、ハードウェアにアクセスできる多彩なAPIを備えています。本記事では、Firefox OSに搭載されたハードウェアアクセスAPIについての概要と簡単な使い方を紹介します。さらに、いくつかのセンサーAPIと音声API、Firefox OS搭載スマホ「Fx0」を使って、簡単な楽器アプリの作り方を解説していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本稿で作成する楽器アプリのサンプルは、GitHubにて公開しています。

はじめに

 連載の第3回を担当します藪下です。Firefox OSコミュニティでいろいろイベントのスタッフをしたり、Firefox OSのソースコードを読む勉強会を開いたりしている「FxOSコードリーディング」というコミュニティを主宰しています。

 第1回では、Firefox OSの概要や開発環境について、第2回ではAPIを使ったカメラアプリ開発の手順について解説しましたが、第3回となる今回は、第2回で取り上げたカメラAPIなどのような、ハードウェア制御が可能なAPIを掘り下げていきます。すべてのハードウェア制御を詳しく解説はできませんが、大まかに何ができるかや、簡単な使い方、資料の所在を一通り解説します。

Firefox OSのハードウェアAPIの概要

 Geolocation APIやVibrator APIに代表されるように、昨今のHTML5ではHTMLとJavaScriptからハードウェアにアクセスすることができます。モバイル向けブラウザやFirefox OSなどのモバイル端末上で動作するブラウザでは、多彩なセンサーを搭載しているので、これらのセンサーにアクセスすることで今までのWebアプリでは実現できなかった体験を提供できるようになってきました。

 Firefox OSでは、W3Cで定義され各ブラウザで提供されているAPIに加えて、さらに多彩なAPIを備えています。W3Cで定義されていないAPIにも、BluetoothやNFCなど今後の標準化が楽しみなものも含まれていたり、カメラAPIのようにW3C標準に見られるAPIより細やかな制御が可能なAPIも存在します。

 本記事では、Firefox OSに搭載されたハードウェアアクセスAPIについて、概要と簡単な使い方を述べた後、いくつかのセンサーAPIと音声APIを使って簡単なアプリケーションの作り方を見ていきます。

Firefox OSでアクセスできるハードウェア

 Firefox OSでアクセスできるハードウェアには以下のようなものがあります。W3C標準規格があるものとないものがあるので、大きく二つに分けて紹介します。今回はそれぞれのAPIについて詳細は述べません。各API資料のURLを付記しておくので、実際の使用に際しては資料で仕様を確認してください。

 本記事では、下記のAPIについて解説します。

W3C標準
  • 環境光センサー
  • バッテリー
  • GPS
  • 近接センサー
  • 加速度センサー
  • バイブレーション
  • getUserMedia
W3C非標準
  • カメラAPI
  • Bluetooth
  • NFC
  • ストレージ

W3C標準のAPI(1)

環境光センサー

 環境光センサーは周辺の明るさを測定するセンサーです。環境光センサーAPIでは測定した明るさをルクス単位で扱います。Firefox OSのプリインアプリでは、環境の明るさに応じて液晶パネルの明るさを変え、見やすく省電力にする用途に使われています。

 環境光センサーAPIは、windowに環境光センサーの値が変化した際に呼び出される、イベントハンドラを登録しておく形で使用します。これは他のセンサーAPIにもよく見られる形です。イベント名はdevicelightです。以下に例を示します。

window.addEventListener('devicelight', handler);
function handler(event) {
    var light = event.value; // 環境光センサーの値(ルクス)
    (snip)
}

 環境光センサーAPIについてのリファレンスは以下のURLを参照ください。

バッテリー

 バッテリーステータスAPIでは、バッテリーの残量や充電状態、満充電/枯渇までの時間を知ることができます。Firefox OSのプリインアプリでは、ステータスバーの電池ピクト表示や設定アプリでのバッテリー状態表示、残量低下時の警告、残量低下時のモード変更などに使われています。

 バッテリーステータスAPIは、navigator.batteryのプロパティとイベントが基本になります。navigator.batteryはバッテリー残量、充電状態、満充電までの時間、枯渇までの時間の4つのプロパティと対応するイベントを持っています。

 バッテリー状態の取得の例を以下に示します。

var battery = navigator.battery || navigator.mozBattery;
battery.addEventListener("levelchange", dateBatteryStatus);
battery.addEventListener("chargingchange", dateBatteryStatus);
battery.addEventListener("chargingtimechange", dateBatteryStatus);
battery.addEventListener("dischargingtimechange", dateBatteryStatus);
function updateBatteryStatus() {
    var level = battery.level;
    var charging = battery.charging;
    var chargingTime = battery.chargingTime;
    var dischargingTime = battery.dischargingTime;
    (snip)
}

 イベントとプロパティそれぞれの詳しい仕様は述べません。バッテリーステータスAPIのリファレンスは以下のURLを参照して下さい。

次のページ
W3C標準のAPI(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発連載記事一覧

もっと読む

この記事の著者

藪下 正美(ヤブシタ マサミ)

 株式会社グローバルサイバーグループ マネージャ。 大阪のソフトウェア開発会社で主に携帯電話・スマートフォンのドライバからアプリまで幅広く開発に従事。 関東支社に転属後はスマートフォン・タブレット向けのアプリ開発を主に担当。 2012年終わりごろからFirefox OSに注目しコミュニティ活動に精力的に参加している。 会社ブログ 個人ブログ  FxOSコードリーディング主催 サイト Facebookグループ

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8540 2015/03/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング