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導入手順 -はじめの一歩-

jQuery Mobileの1.0がリリースされ、利用したい方が増えていると思います。 最初に何を

記事を読む

no image

Androidアプリ開発 -リストをタッチして別ページ表示-

* 前提 -「設定画面」で各種項目を設定。 --Activity:ConfigActivity --

記事を読む

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

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

記事を読む

jenkins-files

Windows環境でもJenkins -執事さんとご対面-

Trac Lightningに同梱されていますし、Windows環境でHudsonを使っている人は結

記事を読む

no image

jQuery Mobileの初期設定 -jQuery Mobieを利用時にページ内リンクさせたい-

* 前提 jQuery Mobileを利用していて、以下のタグを使ってページ内遷移したいことがありま

記事を読む

no image

はてなスターのアイコンを日本酒アイコンにしてみた

日本酒大好きです。 というわけで、はてなスターを日本酒アイコンにしてみました。 その流れ

記事を読む

構成

定期的にデータ取得のためにCakePHP1.3でシェル機能を利用

定期的にデータを取得する行為をするために、はじめてシェル機能を使ってみたのでメモ。 * ス

記事を読む

no image

iPhoneアプリ開発 −遷移先のViewControllerに値を引き継ぎたい−

例えば、トップページに複数個のボタンがあって、「A」と「B」というボタンを押下した際に、同じView

記事を読む

no image

さくらのVPSでJenkins -執事さんとご対面-

さくらのVPSを利用している方は多いかと思います。 私も、自分で遊ぶ用(開発用)として借りてみまし

記事を読む

no image

iPhoneアプリ開発 -iOS6から変わったこと-

Deployment Targetを5.1にしていた時には気がつかなかったのですが、iOS6になって

記事を読む

広告

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 ↑