アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monacaアプリでフラッシュライトを利用する方法

Monaca JavaScript HTML5
こんにちは、渡辺です。

今回は、「EddyVerbruggen/Flashlight-PhoneGap-Plugin」プラグインを利用して
フラッシュライトを操作するサンプルプロジェクトを作ります。

■利用するプラグイン


EddyVerbruggen/Flashlight-PhoneGap-Plugin
( https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin )


■サンプルプロジェクトについて


サンプルプロジェクトでは、フラッシュライトを1秒間隔で点滅させるアプリを作成します。

・サンプルプロジェクトの動作確認環境


・iPhone6 (iOS 8.1.2)
・GALAXY Note 2 SC-02E (Android4.3 )
・デバッグビルドしたアプリで確認済
(注意:ストア版デバッガーでは、今回利用するプラグインが組み込めれていないため、動作しませんので注意してください。)

■プラグインのインストール


こちらの過去記事に記述したましたので、参照ください。

■フラッシュライトが利用できるか確認する


まず「deviceready」イベントが発生したあとに、フラッシュライトが利用できるか確認します。
変数isAvailableで判定しています。



window.plugins.flashlight.available(function(isAvailable) {
  if (isAvailable) {
  
    /**
     * フラッシュライトが利用できる場合の処理を記述 
     */

  } else {
    alert("Flashlight not available on this device");
  }
});


■フラッシュライトのOn / Off


フラッシュライトをOn/Offする方法です。
下の方法以外にも「window.plugins.flashlight.toggle()」を利用すれば、
現状OnのときはフラッシュライトをOffに、Offの状態のときは、Onに切り替えることができます。



    // switch on
    window.plugins.flashlight.switchOn(); 

    // switch off
      window.plugins.flashlight.switchOff();

■フラッシュライトを点滅させる


setInterval()を利用して、フラッシュライトを点滅させる方法です。
点滅させる間隔は、ここでは1秒としていますが、任意に調整してください。



    interval = setInterval(function () {
        window.plugins.flashlight.toggle();
      }, 1000);

■フラッシュライトを終了させる(Android)


Androidの場合は、アプリ終了時にフラッシュライトを適切に終了させる必要があります。
終了を行わないと、アプリがバックグラウンドに入っても、フラッシュライトが光り続けてしまします。ここでは、バックグラウンドに入る際の処理と、「戻る」ボタンの挙動を上書きするようにしています。




    document.addEventListener("backbutton", function () {
      // pass exitApp as callbacks to the switchOff method
      window.plugins.flashlight.switchOff(exitApp, exitApp);
    }, false);

    document.addEventListener("pause", function () {
       window.plugins.flashlight.switchOff(exitApp, exitApp);
    }, false);

    function exitApp() {
            clearInterval(interval);
            navigator.app.exitApp();
          }

■サンプルプロジェクトのコード


index.html




<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        document.addEventListener('deviceready', function () {
          var interval = null;
          window.plugins.flashlight.available(function (isAvailable) {
            if (isAvailable) {
              interval = setInterval(function () {
                window.plugins.flashlight.toggle();
              }, 1000);
            } else {
              alert("Flashlight not available on this device");
            }
          });
        
          document.addEventListener("backbutton", function () {
            window.plugins.flashlight.switchOff(exitApp, exitApp);
          }, false);
        
          document.addEventListener("pause", function () {
            window.plugins.flashlight.switchOff(exitApp, exitApp);
        　}, false);

          function exitApp() {
            clearInterval(interval);
            navigator.app.exitApp();
          }
        });
    </script>
</head>

<body>
    This is a template for Monaca app.
</body>

</html>


■参考情報


・EddyVerbruggen/Flashlight-PhoneGap-Plugin
https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin


■お知らせ


Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください！
https://ja.monaca.io/careers.html