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

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

この記事を読むのに必要な時間:およそ 5.5 分

前回は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種です。

著者プロフィール

富田宏昭(とみだひろあき)

株式会社キクミミでFileMaker/SQLiteを使ったWebアプリ開発に従事しながら,オープンソースソフトウェアのハウツー記事執筆を行う。趣味は横乗り系スポーツ,美術館めぐり,高速ジャンクション鑑賞。

コメント

コメントの記入