CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/03/18 14:00
目次

デバイスを使った機能

 モバイルアプリでは、やはりカメラや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を使ったサンプルアプリ
Onsen UIを使ったサンプルアプリ

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

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

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

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

 逆に不向きなアプリは、
 

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:目指せ、定時退社! スマートなエンジニアのためのお役立ちツール

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5