PhoneGapで手軽にiPhone/Androidアプリを作ろう

第2回Hello, Worldアプリの作成─PhoneGap:Buildの利用方法

前回はPhoneGapのデプロイからiOS/Androidアプリが開発できる環境を整えるまでを紹介しました。今回はHello, Worldアプリケーションの作成とビルド、PhoneGap:Buildの使い方を紹介していきたいと思います。さて、その前にwww/index.htmlに記載されているコメントを簡単にチェックしておきましょう。

index.htmlを読む

Xcodeを開き、www/index.htmlを確認します。

リスト1 www/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />       
    -->
    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
    
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    for more details -jm */
    /*
    function handleOpenURL(url)
    {
        // TODO: do something with the url passed in.
    }
    */
    
    function onBodyLoad()
    {       
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    for more details -jm */
    function onDeviceReady()
    {
        // do your thing!
        navigator.notification.alert("PhoneGap is working")
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
      <h1>Hey, it's PhoneGap!</h1>
      <p>Don't know how to get started? Check out <em><a href="http://github.com/phonegap/phonegap-start">PhoneGap Start</a></em>   
  </body>
</html>

コード中にコメントが記載されている箇所は、おもに次の4点です。

  1. iOSデバイス用のアプリケーションを作成する場合にインクルードするファイルについて
  2. アプリケーション上でドラッグを禁止したい場合について
  3. カスタムURLスキーマを使いたい場合について
  4. devicereadyについて

1.iOSデバイス用のアプリケーションを作成する場合にインクルードするファイルについて

iOSデバイス(iPhone/iPad)用のアプリケーションを作成する場合、メインのCSSファイルをロードした後に、各デバイス用に最適化されたCSSをロードする一文を追加します。

iPadの場合
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
iPhoneの場合
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

また、iOS 4.0以前向けのアプリケーションを実装する場合は、あらかじめjson2.jsを用意しておく必要があります。GitHubからjson2.jsをダウンロードし、wwwディレクトリ以下に配置後、次の一文を追加します。

<script type="text/javascript" charset="utf-8" src="json2.js"></script>

2.アプリケーション上でドラッグを禁止したい場合について

アプリケーション内でドラッグを禁止したい場合は、次のコードを追加します。

    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);

3.カスタムURLスキーマを使いたい場合について

カスタムURLスキーマを使って外部アプリケーションから起動したい場合は、引数を受け取る処理をhandoleOpenURL()関数の中に記述します。この際の引数はinvokeString変数に格納されます。

4. devicereadyについて

Events APIのひとつ、devicereadyイベントはPhoneGapライブラリのロードが完了した際に発火します。PhoneGapはネイティブコードとJavaScriptコードの2つから成り立っています。両方のコードのロードが完了した時点で、はじめてPhoneGapの各種APIにアクセスができるようになります。PhoneGapを使ったアプリ開発では、このdevicereadyイベントが開発の要となります。対応しているプラットフォームは、Android, BlackBerry WebWorks(OS 5.0以上), iOSの3種です。

Hello, Worldアプリケーションの作成

それではいよいよiOSのHello, Worldアプリケーションを作成してみましょう。www/index.htmlを開き、編集を行います。編集後のindex.htmlのコードは次のとおりです。

リスト2 Hello, Worldアプリ用index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Hello, PhoneGap!</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">
    <!--
    function preventBehavior(e) 
    { 
        e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady()
    {
        document.getElementById('myDevice').innerHTML = 'PhoneGap on ' + device.platform;
        if ( -1 < device.platform.indexOf('iPhone') )
        {
            var link = document.createElement('link');
            with( link )
            {
                rel = 'stylesheet';
                media = 'only screen and (max-device-width: 480px)';
                href = 'iphone.css';
                type = 'text/css';
            }
            document.getElementsByTagName('head').item(0).appendChild(link);
        }
        document.getElementById('deviceDescribes').innerHTML = 
            '<ul>' +
            '<li>device.name = ' + device.name + '</li>' +
            '<li>device.phonegap = ' + device.phonegap + '</li>' +
            '<li>device.platform = ' + device.platform + '</li>' +
            '<li>device.uuid = ' + device.uuid + '</li>' +
            '<li>device.version = ' + device.version + '</li>' +
            '</ul>';
    }
    -->
    </script>
  </head>
  <body>
      <h1>Hello, PhoneGap!</h1>
      <h2 id="myDevice"></h2>
      <p id="deviceDescribes">デバイスの情報を取得しています...</p>     
  </body>
</html>
</code>

このHello, Worldアプリケーションでは、PhoneGapに用意されているDevice APIを用いて、デバイスの機器情報を表示します。コード内容で使用されているAPIは次のとおりです。

Device API

各種デバイスのハードウェアおよびソフトウェア情報を取得します。対応しているプラットフォームはAndroid、BlackBerry、BlackBerry WebWorks(OS 5.0以上⁠⁠、iOSの4種です。

device.nameデバイスの型番か名前を返します。Andoridの場合は、デバイスの型番を返します。iOSの場合は、iTunesで設定したデバイスの名前を返します
device.phongapデバイス上で動作しているPhoneGapのバージョン情報を返します
device.platformデバイスのOS名を返します。iPhoneデバイスの場合はどのプラットフォームでも文字列"iPhone"を返します
device.uuidデバイスのUUID(Universally Unique Identifier)を返します
device.versionデバイスのOSバージョンを返します

複数のプラットフォームに対応するアプリケーションの中で、OSごとに処理を変更したい場合はdevice.platformを使うと良いでしょう。サンプルアプリケーションの場合、iPhoneの場合は「PhoneGap on iPhone」と表示され、iphone.cssをインクルードします。Androidの場合は「PhoneGap on Android」と表示されます。

それでは実際にビルドを行い、シミュレータで動作を確認してみましょう。画面左上のRunボタンをクリックしてビルドを行います。シミュレータが起動すればOKです。

図1 Hello, WorldアプリをiPhoneシミュレータ上で動作確認
図1 Hello, WorldアプリをiPhoneシミュレータ上で動作確認

iOSシミュレータで無事に起動できたことを確認できたら、続いてAndroid用のHello, Worldアプリケーションを作成してみましょう。Eclipseを起動し、assets/wwwディレクトリにindex.html作成、さきほどのコードをコピー&ペーストします。

index.htmlを作成したらビルドを行い、Androidエミュレータで動作を確認します。

図2 Hello, WorldアプリをAndroidエミュレータ上で動作確認
図2 Hello, WorldアプリをAndroidエミュレータ上で動作確認

PhoneGap:Buildの利用方法

さきほど作成したHello, Worldアプリケーションを、PhoneGap:Buildを使ってビルドしてみましょう。iOS向けのバイナリをビルドするには証明書とプロビジョニングプロファイルが必要になるので、あらかじめ準備してください。まずはPhoneGap:Buildのサイトにアクセスし、メールアドレスを入力してアカウントを仮登録します。

図3 PhoneGap:Build Webサイト。メールアドレスを登録してアカウントを仮登録
図3 PhoneGap:Build Webサイト。メールアドレスを登録してアカウントを仮登録

入力したメールアドレス宛に、アカウント登録画面のURIとβコードが送付されます。ユーザ名とメールアドレス、パスワードとβコードを入力すると、アカウントの本登録が完了です。

図4 アカウント登録画面。各種情報を入力し、本登録を完了させる
図4 アカウント登録画面。各種情報を入力し、本登録を完了させる
図5 アカウント登録後のホーム画面。これからビルドを行うアプリケーションの名前とアップロード方法を尋ねられる
図5 アカウント登録後のホーム画面。これからビルドを行うアプリケーションの名前とアップロード方法を尋ねられる

アカウント登録後、これからビルドを行うアプリケーションの名前とアップロード方法を尋ねられます。アップロード方法は次の3とおりです。

create a new git repository:
新しいGitリポジトリを作成します。リポジトリはPhoneGap.comに置かれます
pull from a git/svn repo url:
既存のGit/SVNリポジトリからファイル群をインポートします
upload an archive or index.html file:
PCから直接ファイル群をアップロードします

アップロード方法は後から変更ができませんのでご注意ください。小規模なアプリケーションならファイルのアップロードを、比較的規模の大きいアプリケーションの場合はGitリポジトリからのインポートというように使い分けをしましょう。ここではYour App nameを"PhoneGapTestApp"とし、select upload methodでは"upload an archive or index.html file"を選択しました。

図6 アプリケーション名を「PhoneGapTestApp」とし、upload an archive or index.html fileでindex.htmlを選択
図6 アプリケーション名を「PhoneGapTestApp」とし、upload an archive or index.html fileでindex.htmlを選択

Createボタンをクリックするとindex.htmlがアップロードされ、ビルドがはじまります。このサンプルアプリケーションの場合、1、2分ほどでビルドが完了しました。

図7 ファイルをアップロードした直後。iOSは警告のアイコンが表示され、ほかのプラットフォームのアプリケーションはビルド中を意味するアイコンが表示されている
図7 ファイルをアップロードした直後。iOSは警告のアイコンが表示され、ほかのプラットフォームのアプリケーションはビルド中を意味するアイコンが表示されている
図8 しばらく経ってからリロードを行うと、ビルドが完了したプラットフォームのアプリケーションがダウンロードできるようになっている
図8 しばらく経ってからリロードを行うと、ビルドが完了したプラットフォームのアプリケーションがダウンロードできるようになっている
図9 詳細画面ではQRコードでのアクセスのほか、コードの再アップロードやリビルドといった処理が行える
図9 詳細画面ではQRコードでのアクセスのほか、コードの再アップロードやリビルドといった処理が行える

Android, webOS, Symbian, BlackBerryプラットフォームについては、アップロードするだけでバイナリファイルが作成されます。iOSのバイナリを作成するには、証明書とプロビジョニングプロファイルをセットアップする必要があります。

iOSのバイナリをビルドするには、アカウント管理画面またはアプリケーション設定画面のSigningメニューからiOSの証明書ファイルとプロビジョニングプロファイルのアップロードを行います。

証明書ファイルの取り扱いにはご注意ください。また、サードパーティ製のWebアプリケーションに証明書をアップロードすることをご理解のうえ、お手元の環境で試される場合はご自身の責任で行ってください。

iOS Certificate and Provisioning Profile Pairにおいて、キーチェーンアクセスから出力した証明書ファイルとXcode Organizerから出力したプロビジョニングプロファイルを選択し、出力時に設定したパスワードを入力してアップロードします。

図10 iOS Certificate and Provisioning Profile Pairにて、2ファイルをアップロード
図10 iOS Certificate and Provisioning Profile Pairにて、2ファイルをアップロード
図11 証明書ファイルのアップロードが終わると、アカウントにiOSキーとして関連付けがされる
図11 証明書ファイルのアップロードが終わると、アカウントにiOSキーとして関連付けがされる

さきほどアップロードしたアプリケーションの設定画面で、このiOSキーを使ってビルドを行うように設定を行い、リビルドを行います。

図12 キーをアップロード後、iOS向けのバイナリがビルドできた
図12 キーをアップロード後、iOS向けのバイナリがビルドできた

PhoneGap:Buildをもちいて複数プラットフォーム向けのバイナリを作成するところまでを紹介しました。一度登録さえしてしまえば、ソースファイルの更新→リビルドという手順だけで各種プラットフォーム向けのバイナリファイルを入手できます。β版ということで将来的にどのような形で利用できるようになるかはいまのところ不明ですが、今後の動向に注目しておきたいWebサービスです。

次回はPhoneGap APIの紹介と、簡単なメモ帳アプリケーションを作成するところまでを解説していきます。

おすすめ記事

記事・ニュース一覧