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

記事内に商品プロモーションを含む場合があります。

はじめに

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

作ったもの

フラッシュライトアプリ
- ボタンを押すことでOn/Offを切り替えられる！終わり！！

f:id:hrktksm:20150327230244p:plain

作った理由

とりあえず何か1つ形にしてみよう
シンプルな画面設計で機能を満たせるモノってなんだ…？
そうだ、フラッシュライト作ろう

仕組み

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();