トップページ -> 研究道具箱と教材 -> JavaScript による Web プログラミング -> PhoneGap を使って、簡単な Android アプリケーションを動かしてみる
[サイトマップへ]  

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

参考 Web ページ:

http://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

http://gihyo.jp/dev/serial/01/phonegap

前準備

PhoneGap のダウンロード

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

  2. Download のボタンをクリック

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

    ZIP ファイルがダウンロードされる．

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

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

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

  1. Eclipse の起動

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

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

  4. プロジェクト名の設定

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

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

  5. 起動アイコンを設定する

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

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

  8. (オプション) 依存ソフトウエア

  9. 試しに実行してみる

PhoneGap に関する設定

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

    2. フォルダ名として「assets/www」を指定

  2. Eclipse で cordova-1.9.0.js を assets/www にインポート
    1. assets/www を右クリックし，「インポート」を選ぶ．

    2. 「一般」を展開し、 「ファイル・システム」を選ぶ。

    3. PhoneGap の cordova-1.9.0.js を選ぶ

  3. Eclipse で cordova-1.9.0.jar を libs にインポート
    1. 今度は、 libs を右クリックし，「インポート」を選ぶ．

    2. 「一般」を展開し、 「ファイル・システム」を選ぶ。

    3. PhoneGap の cordova-1.9.0.jar を選ぶ．

  4. xml ディレクトリを res にインポート
    1. res を右クリックし，「xml」という名前のフォルダーを作成

    2. いま作成した「xml」を右クリックし，「インポート」を選ぶ．

    3. 「一般」を展開し、 「ファイル・システム」を選ぶ。

    4. xml を選ぶ

  5. ファイルの配置の確認

  6. cordova-1.9.0 が、プロジェクトのビルド・パスに含まれていることの確認
    1. libs を右クリックし、 「ビルド・パス (Build Paths)」 → 「ビルド・パスの構成 (Configure Build Path ...)」 と操作する

    2. 「ライブラリー (Libraries)」 をクリック．

    3. 「Android Dependencies」を展開． 「cordova-1.9.0.jar」が含まれていることを確認する．

  7. HelloCordovaActivity.java の編集
    1. Eclipse のエディタで，src 下の Java ファイルを開く

    2. 次のように編集する
      • 「import org.apache.cordova.*;」を追加

      • 「extends Activity」を 「extends DroidGap」に変更．
      • 「setContentView(R.layout.activity_main);」を、 「super.loadUrl("file:///android_asset/www/index.html");」に変更

  8. AndroidManifest.xml の設定

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

    1. Eclipse のエディタで，AndroidManifest.xml を開く

    2. 次のように編集する

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

  9. assets/www/index.html の作成と編集
    1. assets/www の下に index.html を作成

    2. 次のように編集する

      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>

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

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

  11. 実機にデプロイ

    Settings → Applications → Development

    Run As → Android Application

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

要点は次の２つです 

<?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>

実行結果の例