MacBookPro RetinaにEclipseをインストールしてPhoneGapを使えるようにする方法

eclipseicon

□サイト内検索


スポンサードリンク


環境

Mac OX 10.8
Eclipse Classic 4.2
PhoneGap 2.0

Eclipseをダウンロード〜ADTプラグインのインストール

Eclipseをダウンロードする。
Eclipse Downloads

Eclipse Classic 4.2,Mac OS 64bitを選択。
ダウンロードしたら解凍する。

Eclipse1
Eclipse2

解凍したeclipseフォルダをアプリケーションフォルダへ移動させる。(場所はどこでも良い。)

起動時には、解凍したeclipseフォルダにある「Eclipse.app」をダブルクリックして起動する。

Eclipse3

Android SDKをダウンロードして設定する

Eclipse用ADTプラグインを設定する。
解凍したeclipseフォルダにある「Eclipse.app」をダブルクリックして起動する。

初回時はeclipseのworkspaceを決める。
変更する必要があれば、変更する。
「OK」をクリックする。

Help > Install New software

「Add」のボタンをクリック。

リポジトリを追加する。
名前:
自分で判別できるものにして
URL:

https://dl-ssl.google.com/android/eclipse/

にする。

すべてのtoolsにチェックを入れて、「Next」をクリック。

Install

「Next」をクリックして進むとライセンスの許諾があるので
「I accept the terms of the license agreements」を選び、「Finish」をクリックする。

Security Warningがでたら「OK」をクリックして進む。

Security WarningSoftware Updates がでたら「Yes」をクリックしEclipseを再起動する。

Software Updates
再起動後、Android SDKを新しくインストールするか聞かれる。
新しくインストールする場合にはチェックをつけて「Finish」をクリックする。

Welcome to Android Development

「Accept All」を選び、「Install」をクリックする。

Choose Packages to Install

PhoneGapをダウンロード〜Eclipseの設定

正規手順

Apache Cordova API Documentation
PhoneGap のサイトへ移動して
PhoneGapをダウンロードする。

PhoneGap | Download & Archives

PhoneGap1

Eclipseのメニューから
File > project でアンドロイドプロジェクトを作成する。

作成後はダウンロードしたPhoneGapのファイルから必要なものをEclipeのプロジェクトへコピーする。

[1]フォルダを作る
/libs
assets/www
res/xml

[2]
PhoneGapのファイルを開き、
lib/android/example/の下にサンプル用のファイルがあるのでこれをEclipseへコピーする。

assets/www にPhoneGapのファイルから example/assets/www/cordova-2.0.0.jsをコピーする。
/libsにPhoneGapのファイルからexample/assets/libs/cordova-2.0.0.jar をコピーする。
xmlフォルダにPhoneGapのファイル xml/config.xmlをコピーする。

[3]
EclipseのPackage Explorer(フォルダが階層表示されている部分)で
/libs/cordova-2.0.0.jarを選択して右クリック。
Build Path(ビルドパス)/Add To Build Path(ビルドパスに追加)を選択。

[4]
assets/wwwの下に下記htmlを入力したindex.htmlを作成。
もしくはサンプルよりコピー。

<!DOCTYPE HTML>
<html>
  <head>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf8" src="cordova-2.0.0.js"></script>
  </head>
  <body>
      <h1>Hello PhoneGap</h1>
  </body>
</html> 

[5]
src/com.*****/MainActivity.java
の中身を変更。

追加

import org.apache.cordova.*;

変更

classのextendをActivityからDroidGap
setContentView() からsuper.loadUrl(“file:///android_asset/www/index.html”);

Java

[6]
AndroidManifest.xml を右クリックし
Open With > Text Editorを選ぶ。

下記ソースを追加。

<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<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-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

activityタグの下記ソースを変更

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

AndroidManifest.xmlが下の画像のようになればいい。

Manifest

画像は
Apache Cordova API Documentationより

[6]テストビルド
パッケージを選択して、右クリック > Run As > Android application
を選択してテスト用シュミレーターもしくは実機をUSB接続して、テストビルドする。

テスト用シュミレーター機を作成していない場合は作成することになる。

[7]ページ追加等
assets/www/の下にWEBページを作る感覚でhtmlを作成することで
アプリのページを増やすことができる。

ダウンロードしたPhoneGapのサンプルindex.htmlをビルドした場合は
PhoneGapの機能を試すことができる。

細かい機能は本家の日本語docmentで確認できる。
Apache Cordova API Documentation

ちなみにxml/config.xmlを入れ忘れてアプリを起動させると

[ERROR]Error initializing Cordova: Class not found

とエラーがでます。

Device

参照URL

Eclipse×PhoneGapでAndroidアプリ開発! ~インストールからアプリ実行まで (1/3):CodeZine


スポンサードリンク

このサイトが役に立ったらシェアにご協力ください

  • このエントリーをはてなブックマークに追加

コメントを残す

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