PhoneGap を使って、簡単な Android アプリケーションを動かしてみる

前準備

「Android SDK のダウンロードとインストールとテスト実行」の Web ページを参考に，次の操作を行う．

Android SDK のダウンロードとインストール
OpenJDK のダウンロードとインストール
Eclipse のダウンロードとインストール
Eclipse ADT (Eclipse のプラグイン Android Development Tools) のダウンロードとインストール
Android Suport Library、次のような手順でインストールしておくこと
Android SDK and AVD Manager を起動し、Android 2.2　をインストールする。
◆Ubuntu での動作手順例
```
cd /usr/local
cd android-sdk-linux
sudo ./tools/android
```

PhoneGap のダウンロード

PhoneGap の Web ページ http://phonegap.com/

Download のボタンをクリック

画面が変わるので、Download のボタンをクリック

ZIP ファイルのダウンロードが始まる．

ダウンロードされた ZIP ファイルを，分かりやすいディレクトリに展開（解凍）する

以下の説明では /usr/local に解凍したものとして説明を続ける

Eclipse で Android プロジェクトの作成

Eclipse の起動

「ファイル (File)」 → 「新規 (New)」 → 「プロジェクト (Project)」と操作する

Android アプリケーション・プロジェクト (Android Application Project) を選ぶ

プロジェクト名の設定

同時に，「ワークスペース内に新規プロジェクトを作成」をチェックする．

◆ 設定例．プロジェクト名は好きな名前でよい．ここでは，プロジェクト名は「HelloCordova」に設定している

起動アイコンを設定する

アクティビティを設定する

新しい空のアクティビティ (New Blank Activity)の設定

(オプション) 依存ソフトウェア

試しに実行してみる

PhoneGap に関する設定

フォルダ libs と assets/www の作成

先ほど作成したパッケージを右クリックし、「新規 (New)」 → 「フォルダー (Folder)」と操作する
フォルダ名として「assets/www」を指定

Eclipse で cordova-1.9.0.js を assets/www にインポート

assets/www を右クリックし，「インポート」を選ぶ．
「一般」を展開し、「ファイル・システム」を選ぶ。
PhoneGap の cordova-1.9.0.js を選ぶ

Eclipse で cordova-1.9.0.jar を libs にインポート

今度は、 libs を右クリックし，「インポート」を選ぶ．
「一般」を展開し、「ファイル・システム」を選ぶ。
PhoneGap の cordova-1.9.0.jar を選ぶ．

xml ディレクトリを res にインポート

res を右クリックし，「xml」という名前のフォルダーを作成
いま作成した「xml」を右クリックし，「インポート」を選ぶ．
「一般」を展開し、「ファイル・システム」を選ぶ。
xml を選ぶ

ファイルの配置の確認

cordova-1.9.0 が、プロジェクトのビルド・パスに含まれていることの確認

libs を右クリックし、「ビルド・パス (Build Paths)」 → 「ビルド・パスの構成 (Configure Build Path ...)」と操作する
「ライブラリー (Libraries)」をクリック．
「Android Dependencies」を展開．「cordova-1.9.0.jar」が含まれていることを確認する．

HelloCordovaActivity.java の編集

Eclipse のエディタで，src 下の Java ファイルを開く
次のように編集する
- 「import org.apache.cordova.*;」を追加
- 「extends Activity」を「extends DroidGap」に変更．
- 「setContentView(R.layout.activity_main);」を、「super.loadUrl("file:///android_asset/www/index.html");」に変更

AndroidManifest.xml の設定

http://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android を参考に、権限を設定．

Eclipse のエディタで，AndroidManifest.xml を開く
次のように編集する
Eclipse でファイルを右クリックして、「アプリケーションから開く」 → 「テキストエディター」

assets/www/index.html の作成と編集

assets/www の下に index.html を作成

次のように編集する

Eclipse でファイルを右クリックして、「アプリケーションから開く」 → 「テキストエディター」

<html>
  <head>
  <script type="text/javascript" charset="utf-8" src="<strong>cordova-1.9.0.js</strong>"></script>
  </head>
  <body>
    <p> Hello </p> 
  </body>
</html>

実行してみる (エミュレータにデプロイ)

プロジェクトを右クリックし，「実行 (Run)」 → 「Android Application」

実機にデプロイ

Settings → Applications → Development

Run As → Android Application

JavaScript を使って日時を表示する HTML ファイルの例

要点は次の２つです

charset=utf-8

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> を入れる

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            日時の表示
        </title>
        
     <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    
    </head>

    <body>
            
          <p> 今の日時：
            <script type="text/javascript">
              <!--
            dd = new Date(); 
              var y    = dd.getFullYear(); // 年 
                var m    = dd.getMonth() + 1; // 月 
              var d    = dd.getDate(); // 日 
                var week = dd.getDay(); // 曜日 
                  var hour = dd.getHours(); // 時 
                    var min  = dd.getMinutes(); // 分 
                  var sec  = dd.getSeconds(); // 秒 
                    var P = new Array( "日", "月", "火", "水", "木", "金", "土" );
                      document.write(y + "年" + m + "月" + d + "日 (" + P[week] + ") " +hour + "時" + min + "分" + sec + "秒");
                        // -->
            </script>
          </p>
            
        </p>
    </body>
</html>

実行結果の例

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには，「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい．本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先：金子邦彦（かねこくにひこ） [image]