2012年3月22日

PhoneGapアプリ開発のちょっとしたコツ

PhoneGapはスマートフォンにてハイブリッドアプリケーションを作成するためのフレームワークです。この記事では、PhoneGapによりワンソース・マルチユース（クロスプラットフォーム）なアプリを開発するためのコツをご紹介します。

従来まで、スマートフォンアプリの開発形態は、

・ネイティブアプリ
・Webアプリ

に大別されていました。ネイティブアプリでは端末の機能を全て活用できる一方で、クロスプラットフォーム性がありません（iOSとAndroidで別々に実装）。他方、WebアプリではWebViewを使ったり、ブラウザを使用することで、HTML5などの機能を使用します。これにより、クロスプラットフォーム性が担保されています。一方で、ネイティブ機能を利用できない、などの制約も発生していました。

PhoneGapを使用したハイブリッドアプリは、上記の２つの手法の間に存在し、次の特徴を持っています。

・HTML5によるビューの実装
・クロスプラットフォーム性
・端末機能の使用

一見、良いことだらけのように見えます。しかし、実際にプロジェクトで使用し、iOSとAndroidの両方に適用しようとなると、様々な問題につきあたります（当然のことながら）。多くの問題とその解決方法の中から次の4つについてご紹介します。

① Android, iOS4, iOS5の区別
② javascriptの読み込み
③ DOMContentLoaded
④ ライブラリ（jQuery OR Zepto）

① Android, iOS4, iOS5の区別

javascriptによりnavigatorのuserAgent, appVersionなどを使用して切り分けます。特に、iOS4とiOS5とではCSSなどで挙動が異なる部分が多く、区別は必須です。以下に一例を示します。


var IS_ANDROID = (/android/gi).test(navigator.appVersion);
var IS_IOS4    = navigator.userAgent.match(/OS 4_[0-9_]+ like Mac OS X/i) !== null;
var IS_IOS5    = navigator.userAgent.match(/OS 5_[0-9_]+ like Mac OS X/i) !== null;

こういった値を何らかのオブジェクトにまとめておくと、とても便利です。

② javascriptの読み込み

画面数が増えるに従い、javascriptファイルが増えるに従い、javascriptファイルを読み込み・使用することが多くなります。その一方で、javascript言語の仕様上、依存関係を各ファイルに記述できません。そんな時には、scriptタグを書きだすスクリプトファイルを１つ用意します。そして、そのファイルを各画面にて読み込みます。例えば、次のようになります。

main.js


var IS_ANDROID = (/android/gi).test(navigator.appVersion);
(function() {
  var phonegapJs = '';
  // PhoneGapライブラリの設定
  if(IS_ANDROID) {
    phonegapJs = 'phonegap-android.js';
  } else {
    phonegapJs = 'phonegap-ios.js';
  }
  // 読み込むファイルのリスト生成
  var scripts = [
    // 各種ライブラリ
    'js/vendor/phonegap/' + phonegapJs,
    'js/vendor/zepto/zepto.js',
    // アプリ固有のスクリプト
    'js/app/...',
    '...'
  ];
  for (var i = 0, len = scripts.length; i < len; i++) {
    loadScript(scripts[i]);
  }
})();
function loadScript(filename) {
  // 以下のように書かないと、xcodeでのハイライトがおかしくなる
  // 実際には、普通にdocument.writeでタグを書きだしても良い
  var script = '%3Cscript type="text/javascript" src="' + filename + '"%3E%3C/script%3E';
  document.write(unescape(script));
}

そして、各HTMLファイル内にて、まず上記のスクリプトを読み込みます。

index.html


<html>
<head>
  <script type="text/javascript" src="js/main.js"></script>
  ...
</head>
<body>
  ...
</body>
</html>

極々当たり前のことですが、これだけでかなり楽になります。同時に、javascriptファイルを分割できるため、コード自体も読みやすくなります（分割には賛否両論ありそうですが・・・）。また、require.jsなど、似たような機能を持ったライブラリもあります。興味のある方は、お試しください。

③ DOMContentLoaded

DOMContentLoadedイベント内にて、devicereadyイベントをバインドしましょう。DOMContentLoadedイベントは、DOMの読み込みが終わった際に発生します（これ以降、DOMを使えます）。

PhoneGapでは、プラグイン機構を通じてネイティブ機能へアクセス可能です。ただし、アクセスできる条件として、PhoneGapにより、javascriptのdevicereadyイベントが発生している必要があります。


document.addEventListener('deviceready', function(){
  // この中でアプリの内容・ロジックを実行する
});

実際にアプリの内容を実行する際には、DOMを活用したり、CSSを使ったりと、HTMLの構造を必ず利用します。そのため、HTML構造などが読み込まれてからdevicereadyをバインドする必要があります。次のように、BODYタグのonLoadやloadイベントでバインドすることも可能です。


<html>
<head>
  <script type="text/javascript" src="phonegap.js"></script>
  <script type="text/javascript">
    function onBodyLoad() {
      document.addEventListener('deviceready', onDeviceReady);
    }
    function onDeviceReady() {
      // PhoneGap開始後の処理を記述する
    }
</script>
</head>
<body onLoad="onBodyLoad();">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</body>
</html>

ただ、onLoadやloadイベントはDOMContentLoadedイベントに比べて遅くなる場合があります。というのも、画像ファイル等の読み込みも待ってしまうからです。そのため、アプリの開始が遅れる恐れがあります。DOMContentLoaded発生時にdevicereadyをバインドする方法は、次の通りです。


<html>
<head>
  <script type="text/javascript" src="phonegap.js"></script>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){
        document.addEventListener('deviceready', onDeviceReady);
    });
    function onDeviceReady() {
      // PhoneGap開始後の処理を記述する
    }
  </script>
</head>
<body>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</body>
</html>

④ ライブラリ（jQuery OR Zepto）

javascriptの操作性や利便性を向上させるライブラリとしては、Zeptoを使いましょう。ZeptoはjQeuryからIE対応を取り除いた、軽いライブラリです（jQueryに比べて）。スマートフォン用のjQueryと思って下さい。jQueryも便利ですが、スマートフォンで使うとかなり重くなります。

まずは、極々基本的なお話をしました。実際、使ってみると、PhoneGapやHTML5でのスマートフォンアプリ開発がかなりスムーズになります。機会があれば、ぜひ試してみて下さい。