PhoneGapを使ってiPhone・Androidアプリをつくる

PhoneGap

http://phonegap-fan.com/
PhoneGapを使えばHTML5+CSS3+JavaScriptで書かれたページを、
マーケットで配布できる(ネイティブ)アプリにすることができるということが書かれていました。
iPhoneとAndroidの両方に対応しているようです!

いま使ってるパソコンには開発環境が入ってなかったのでインストール。
各ソフトのダウンロードやインストール方法が細かく書かれていました。

必要なソフトをインストール

・JDK
・Andoroid SDK
・Eclipse(最新版は3.7)
・Eclipseを日本語化

Eclips 3.7の日本語化はPleiadesで行い、ここを見ました。
http://d.hatena.ne.jp/replication/20110703/1309694538

やってみます。

1.Androidプロジェクトのセットアップ。

2.プロジェクトの中に「/libs」と「/assets/www」フォルダを作成。

3.ダウンロードしたPhoneGapフォルダの中の「phonegap.js」ファイルを「/assets/www」へ、「phonegap.jar」ファイルを「/libs」へ移動。

4.「/src」内のActivity.javaファイルを下記のように修正

package com.araishi.memosample;
import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;
public class App extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

5.phonegapの設定

「libs」フォルダを右クリックし「ビルド・パス」→「ビルド・パスの構成」を選択し、「ライブラリー」タブ内で、
「Jar追加」→「libs」→「phonegap-0.9.2.jar」を選択し「OK」

6.AndroidManifest.xmlを修正してpermissionsを追加

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.package.sample"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-sdk android:minSdkVersion="8" />  <application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:configChanges="orientation|keyboardHidden" 
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>  </application>
</manifest>

7.「/assets/www」ディレクトリ内に「index.html」ファイルを作成。

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

8.実行するとできました。

でもjQuery mobileとか使うなら

こんな感じになるかもしれません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=default-width; user-scalable=no" />
<title></title>
<link rel="stylesheet"  href="js/jquery/jquery.mobile-1.0b1.min.css" />
<link rel="stylesheet"  href="css/main.css" />
<script type="text/javascript" src="phonegap.0.9.4.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title> 
</head> 
<body>
<div data-role="page" id="home">  <div data-role="header" data-position="inline">
<h1>hello</h1>
</div>  </div></body> 
</html>

Googleグループがありましたので入ってみました!

PhoneGapファン (phonegap-fan.jp)

PhoneGapの豊富なAPI

http://phonegap-fan.com/docs/

Accelerometer
デバイスの加速度センサー情報を取得します。
Camera
カメラを通じて写真を取得します。
Compass
コンパス方向を取得します。
Contacts
連絡先データベース情報を操作します。
Device
デバイス特有の情報を取得します。
Events
JavaScriptを通じてネイティブ要素のフックを行います。
File
JavaScriptを通じてネイティブのファイルシステムを取得します。
Geolocation
位置情報を取得します。
Media
オーディオの録音と再生を行います。
Network
ネットワークの状態を取得します。
Notification
デバイス通知機能を提供します。
Storage
デバイスのネイティブストレージを操作します。

思ったよりAPIの種類があって面白そうです。
本当はJavaが書けるとよさそうなんですが、難しいっす・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です