Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ（その2）

目指せ、定時退社！ スマートなエンジニアのためのお役立ちツール（4）

デバイスを使った機能

　モバイルアプリでは、やはりカメラやGPS、センサーなどデバイスが持つ機能を使ったアプリを作りたいですよね。Monacaは「PhoneGap」を使っているので、これらの機能にアクセスできます。PhoneGapは、Adobe社により公開されているHTML5/JavaScriptでネイティブなモバイルアプリケーションを作成するための開発フレームワークです。オープンソースとしてApache Cordovaという名前で公開されています。

　では、モバイル端末のコンパスを使って方位を取得する簡単なサンプルを作成します。

　まず、compass.htmlというファイルを新規作成し、次のような画面作成してください。

コンパスによる方位の取得画面（compass.htmlの抜粋）

<body>
<div id="loginPage" data-role="page" data-theme="b">
  <div data-role="header" data-position="fixed">
    ～中略～
  </div>
  <div role="main" class="ui-content">  
    <button id="compassBtn" class="ui-btn">コンパス</button>
    <div id="compassData"></div>
  </div>
  <div data-role="footer" data-position="fixed">
    ～中略～
  </div>
</div>
</body>

　次に、［コンパス］ボタンをクリックすると方位を取得するコードを、以下のように作成します。

コンパスによる方位の取得（app.jsの抜粋）

$(function(){
～中略～
  $(document).on('click', '#compassBtn', function(){

    // 1. デバイスの準備ができたら方位を取得
    $(document).on('deviceready', 
       (function() {
        navigator.compass.getCurrentHeading(
          
          // 2. 方位取得成功
          function(heading) {
            $('#compassData').text ('現在の方位:' + heading.magneticHeading);
          },
          // 3. 方位取得失敗
          function(err) {
            alert('取得失敗');
          });
       })()
    )
  });
});

　プログラムの説明の説明をします。

1．デバイスの準備ができたら方位を取得

　方位を取得するコンパスを利用するには、PhoneGap APIを利用します。PhoneGap APIがロードされたときに呼び出されるdevicereadyイベントが発生したら、方位を取得するgetCurrentHeadingメソッドを実行します。

2．方位取得成功

　方位の取得に成功したら、heading.magneticHeadingで取得できます。これを、id属性がcompassDataのdiv要素に出力します。

3．方位取得失敗

　何らかの理由で方位取得に失敗したら、アラートを表示します。そのときは、失敗時のコールバック関数であるfail()にアラートを表示する命令を書きます。

［Note］Monacaでアプリを作成するときのポイント

　Monacaバックエンドはユーザ認証だけでなく、さまざまな機能が用意されています。
 

　例えば、データをコレクションとして扱うためのAPIやプッシュ通知を行うAPI、デバイスの情報を取得するAPIなど便利な機能があります。また、PhoneGapでは今回ご紹介したコンパス以外にも、GPSやカメラを使うものや端末のローカルストレージを使用したりすることもできます。また、今回のサンプルでは画面部分の作成にjQuery Mobileを使用しましたが、Onsen UIと呼ばれるWeb ComponentsのHTMLをコンポーネント化する仕組みを取り入れたフレームワークを使うことも可能です。
 

Onsen UIを使ったサンプルアプリ

　ただし、HTML5／JavaScriptで開発しているため、処理速度という点ではネイティブで作成したときに比べるとどうしても遅くなってしまいます。また、Monacaではバックグラウンドで待機するアプリが作成できません。
 

　これらをまとめるとMonacaが得意とするアプリは、
 

• 数少ない情報を表示／操作する機能が多いもの（アルバム／簡易メモ帳など）
• Webから情報を取得して表示するもの（Webアプリに近いもの）
• カメラ／センサーなどのデバイスの基本的な機能のみしか使用しないもの

で、これらであれば非常に短時間でアプリを完成させることができます。
 

　逆に不向きなアプリは、
 

• アクションゲームなど処理速度がもとめられるもの
• 複雑な操作が必要なもの
• UIをプラットフォームごとに細かく制御したいもの
• デバイス固有の機能を使うもの

のようなものが考えられます。作りたいアプリによって、開発プラットフォームを上手に選んでください。