力こそパワー

筋トレ好きプログラマーのガジェット・ロードバイク紹介

お風呂で使える低価格防水タブレットの新定番「Qua tab PZ」
完全食COMPを1年以上飲み続けている私がおすすめする組み合わせ3選
手軽で美味しい完全栄養食「BASE PASTA」実食レビュー
PHILIPS製42.5型4Kディスプレイ「BDM4350UC/11」
電子書籍デビューに最適!「Kindle Paperwhite」レビュー。他モデルとの違いも解説
Kindleだけじゃない!電子書籍サービスならhontoがおすすめ!
ベストバイな2in1モデル「Acer Chromebook R 13」
防犯・耐刃・防水多機能リュック「Bobby」購入レビュー
通勤・通学カバンに入れておくと役立つモノ(と、微妙だったモノ)を紹介します

FirefoxOSでフラッシュライトアプリを作ったお話

スポンサーリンク
はじめに

このブログはそんなに読んでいる人多くない≒ググってたどり着く前に有名なブログを読んでいるだろう、と思いますのでFirefoxOSアプリの基本的な書き方までは紹介しません。


作ったもの
  • フラッシュライトアプリ
    • ボタンを押すことでOn/Offを切り替えられる!終わり!!

f:id:hrktksm:20150327230244p:plain

作った理由
  1. とりあえず何か1つ形にしてみよう
  2. シンプルな画面設計で機能を満たせるモノってなんだ…?
  3. そうだ、フラッシュライト作ろう
仕組み
  • Camera APIのflashMode(フラッシュライトのプロパティ)の状態を変化させている
作り方
  • 権限を「privileged」に変更
    • Camera APIを利用するには権限を「privileged(特権)」にする必要があります
  • FirefoxOSアプリには3種類の権限があります
権限 ざっくりとした説明
Web 権限なし
Privileged 特権あり
Certified 超強い権限なので一般ユーザーは使えません
  • マニフェストファイルで権限を追記
"type": "privileged",
"permissions": {
  "camera": {}
},

これだけでCamera APIをアプリ内で利用できます。

あとはScript内で呼んであげるだけ。

  // フラッシュのOn/Offをボタンのクリックイベントに割り当て
var button = document.getElementById('ボタンのId');
button.onclick = function () {
  flashLight();
};

// 実際にフラッシュを操作する箇所
function flashLight(){
  if(camera.flashMode === 'off'){
    camera.flashMode = 'torch';
  }else{
    camera.flashMode = 'off';
  }
}

やりたいのはこれだけなのですが、そのためにはカメラを取得しないといけないですね。

var camera;

function getCamera() {
  console.log('getCamera');

  var options = {
    mode: 'picture',
    recorderProfile: 'jpg'
  };
    
  // `getListOfCameras()`はカメラの配列(["back", "flont"])
  cammera = navigator.mozCameras.getListOfCameras()[0];

  function onSuccess(success) {
    camera = success;
    console.log('getCamera:success', camera);
  }

  function onError(error) {
    console.warn('getCamera:error', error);
  }

  releaseCamera();
  navigator.mozCameras.getCamera(type, options, onSuccess, onError);
}

//init辺りでgetCameraを呼ぶ

getCamera();

これでイケるはず。

ちなみにこれで私は色々躓きました。

次回はそんなことも書きつつ、Marketplaceへの公開方法を紹介します。

スポンサーリンク