PhoneGapを触ってみた ―導入編―

公開日: : IT, PhoneGap


スマートフォン対応をjQuery Mobileを使ってやったので、その資産をいかせないかということでPhoneGapを触ってみました。
今回は、WindowsマシンでAndroidアプリの開発です。

 PhoneGapってなに?

「HTML+CSS+JavaScript」を使用してアプリ開発ができるためのフレームワークです。
つまり様々なプラットフォームに対応するアプリを「HTML+CSS+JavaScript」で実装ができます。

 導入手順

 Android環境の用意

Androidアプリ開発なのでAndroidアプリ開発のための環境がまず必要になります。

参考サイト3を参考にしつつ、開発環境を用意してください。
とりあえず以下が必要になります。

  1. JDKJava SE Development Kit)のインストール
  2. Android SDKのインストール
  3. Eclipseのインストール

    • (Eclipseで)ADT Pluginのインストール
  4. Android API のインストール(時間がかかるので注意)

    • 今回は2.3.3を入れています
  5. AVDの作成

 PhoneGapの導入

  1. 参考サイト1からPhoneGapをダウンロード(現時点で1.3.0です)し展開
  2. EclipseでAndroidプロジェクトを作成
  3. 新規作成したプロジェクトで以下のフォルダを用意(存在しないので作成)

    • /assets/www/フォルダ
    • /libsフォルダ
  4. 1で展開したフォルダのAndroidフォルダから以下のファイルをそれぞれの場所にコピー

    • /libsフォルダにphonegap-1.3.0.jar
    • /assets/www/フォルダにphonegap-1.3.0.js
    • /resフォルダにxmlフォルダ
  5. /libsフォルダにあるphonegap-1.3.0.jarをビルドパスに追加

    • phonegap-1.3.0.jarを右クリックしてビルドパスに追加を選択

上記を終えると以下のような状態になります。

 サンプルアプリを作ってみる

準備が終わったのでサンプルアプリを作ってみます。

 メインのActivityの変更

  1. srcにある初期に作られたjavaソース(Actvitiy)を開きます
  2. 以下のように変更(変更点は3箇所です)
package com.phonegap.sample
import android.os.Bundle;
import com.phonegap.*; //←追加
public class SampleActivity extends DroidGap{ //←extends先を変更
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html"); //←loadUrlに変更
    }
}

 AndroidManifest.xmlの変更

  1. AndroidManifest.xmlを開きます
  2. タブから一番右を選択しソースを表示
  3. 以下のように変更
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.pplace.phonegap"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="10" />
<!-- 以下を追加 -->
    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="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" />
<!-- ここまで -->
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:configChanges="orientation|keyboardHidden"> //この一文を追加
        <activity
            android:name=".SampleActivity"
            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>

 HTMLファイルの作成

  1. /assets/www/フォルダにindex.htmlを新規作成
  2. 以下のように記入(例です)
<!DOCTYPE HTML>
<html>
<head>
<title>サンプル</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
サンプルだよ!
</body>
</html>

 サンプルアプリの実行

以上の3種類のファイルが作ったら実際に実行してみます。

  1. パッケージエクスプローラーから該当プロジェクトを右クリック
  2. 「実行」→「実行の構成」を選択
  3. 「Androidアプリケーション」を選び右クリックし「新規作成」
  4. まず「名前」を入力。
  5. 「Android」タブを開き、プロジェクトを参照から今回作成したのを選択
  6. 「適用」を押し、実行

これでプロジェクトがエミューレータ上で動作します。

 参考サイト

  1. PhoneGap | Home
  2. PhoneGap Fan – PhoneGap (Cordova) の日本語コミュニティ
  3. Androidアプリの開発環境を作る | Think IT(シンクイット)

広告

関連記事

no image

jQuery Mobileではまったこと -広告が表示されない!($.mobile.changePage()でのページ遷移)-

swipeした際にページ遷移をさせるためにjQueryMobileの$.mobile.changeP

記事を読む

popup

jQuery Mobile1.2のPopupを試してみた -写真を表示-

jQuery Mobile1.2の「Popup」を試してみました。 他の機能である「Collaps

記事を読む

iPhoneアプリにGoogle Analyticsを入れてみる -Google Analytics SDK for iOS導入-

* 導入経緯 iPhoneアプリをリリースして、を使って「ランキング」や「ダウンロード数」は適宜チ

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(1) -最初の一歩-

* 作るアプリ 結婚式や2次会で「自分の名前を書く」芳名帳 これをアプリで作ってみます。

記事を読む

no image

iPhoneアプリ開発 −フォントの変更−

一言:最近、iPhoneアプリの開発のためMacばかり触ってて、Windowsに戻ると混乱します。

記事を読む

1

Androidアプリ開発 -9patchで吹き出し画像を作る-

* やりたいこと TextViewで文字を表示させ、背景画像に吹き出し画像を設定した場合。 文字

記事を読む

no image

order byでハマったこと -order by、group byの処理順序-

CakePHPでorder byとgroup byを使っていてはまったことについてのメモ。 * 

記事を読む

no image

str_padとsprintfの速度

PHPで同じことが出来る「str_pad」と「sprintf」。 今まではsprintfを使う機会

記事を読む

Jenkins + iPhoneアプリ(3) -ipaファイルをTestFlightにアップロード-

* これまで - -[http://pplace.jp/2013/01/1192/:title=

記事を読む

no image

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(2)-

* 前回 は、「ユーザーにAPI利用のための認可」をおこなってもらうところまでやりました。 本エン

記事を読む

広告

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑