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(シンクイット)

広告

関連記事

Jenkins + iPhoneアプリ(2) -ローカルリポジトリにあるデータからipaファイル生成-

* これまで - * 最終目標 -(開発者)git(リモートリポジトリ)にソースをコミット

記事を読む

no image

iPhoneアプリ開発 -同じ画像を2度以上画像処理した際に起こるエラーの対処-

* 起きた現象 (1) UIImageのデータを元にピクセルの値を色々といじって画像処理。 (2)

記事を読む

no image

iPhoneアプリ開発 −タッチで線を描く(1)−

* やりたいこと 今回やりたいことは以下の2点。 -(1) 画面をタッチして、指を動かして線を描きた

記事を読む

githubを使っての開発(1) -実践github-flow-

今は開発でgithubを利用しています。 開発をおこなう上で、githubをどのように扱えば良いの

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

no image

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

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

no image

jQuery Mobileでdata-role=headerを使うときの注意点 -勝手にタイトルが変更される件-

* 現象 +headタグでtitleタグで文字列(A)を記述している +data-role=he

記事を読む

NEC_0882

Facebookで名刺を作ってみた -Mooの名刺作成サービス-

1ヶ月~半月くらい前に話題になっていたMooの名刺作成サービス。 話題になっていた時期に注文した名

記事を読む

no image

PhoneGapを触ってみた(2) -実機でテスト編-

* 今までの流れ - * 自分の端末で動かしてみよう 今回は、PhoneGapで作成したアプリを実

記事を読む

no image

jQuery Mobileでミスしたこと -JSだけ最新にしてしまってレイアウト崩れたの巻-

* 前提(CDN先) jQuery Mobileを使う場合、cssを自前のサーバにおいて、jsはC

記事を読む

広告

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 ↑