2013年10月13日日曜日

PhoneGap (Cordova) によるAndroidアプリ作成

今回は、HTML5、CSS、JavaScriptによるAndroidアプリ開発についてです。
これらのWebアプリ技術を使って、Androidアプリ作成を可能にするのが、PhoneGap(Cordova)です。

PhoneGap(Cordova)の開発環境について、まとめてみました。

◆PhoneGap(Cordova)のダウンロード

以下のPhoneGap公式サイトからダウンロードします。

http://phonegap.com/

[Install]ボタンをクリックすると、phonegap.zipがダウンロードできます。



ZIPファイルを任意のディレクトリに展開すれば、PhoneGap(Cordova)を使用する準備は完了です。

(現時点でのバージョンは2.4.0)


◆新規プロジェクトの作成

①Eclipseで新規プロジェクトを作成します。

プロジェクトの作成方法については、以下を参照してください。


②PhoneGap(Cordova)資材のコピー

phonegap-2.4.0\lib\android配下の以下の資材をコピーします。



・libsフォルダにcordova-2.4.0.jarをコピー
・assets/wwwフォルダにcordova-2.4.0.jsをコピー
・resフォルダにxmlフォルダをコピー


cordova-2.4.0.jarは、Librariesに追加します。



◆AndroidManifest.xmlの編集

以下の編集が必要になります。

①端末解像度の対応

解像度が異なる端末に対応するための設定です。
<uses-sdk.../> タグの上に挿入してください。

<supports-screens
android:largeScreens="true"
android:normalScreens ="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"/>

②パーミッション設定

PhoneGap公式サイトでは、以下のパーミッションをすべて追加する必要があると書いてあります。

<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" />

ただし、まずは作成するアプリに必要なパーミッションだけを追加するほうが良いでしょう。
最初は、以下のパーミッションのみを<application.../> タグの上に挿入してください。
これらのパーミッションを追加しないと、exception SecurityExceptionの例外が発生してしまいます。

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

他のパーミッションについては、必要に応じて追加することにしましょう。


③端末回転のサポート

端末の回転やキーボードの出し入れなどによって、Activityを再起動させない設定です。
以下を、<activity>タグ内に挿入してください。

android:configChanges="orientation|keyboardHidden|keyboard|locale"
Android3.2(API Level: 13)以降では、
android:configChanges="orientation|keyboardHidden|keyboard|locale|screenSize"


◆Activityの編集

Activityファイルを以下のように編集します。

・import android.app.Activity; の行をimport org.apache.cordova.*; に変更
・継承を Activity から DroidGap に変更
・setContentView() の行を super.loadUrl("file:///android_asset/www/index.html");に変更

(注意)
元々あったonCreate()を編集した場合、以下のエラーが出力されます。

- Cannot reduce the visibility of the inherited method from DroidGap
- overrides org.apache.cordova.DroidGap.onCreate

この場合は、いったん @Override onCreate()メソッドを削除してから、
改めて、Override/Implement MethodsからDroidGapのonCreate(Bundle)をオーバーライドしてください。



◆動作確認

assets/www ディレクトリにindex.htmlファイルを作成します。
ファイルのエンコードはUTF-8に設定します。



以下は、その一例です。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>PhoneGapSample</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
</head>
<body>
<p>いいね!Androidアプリ</p>
</body>
</html>

シミュレーターもしくは、実機でアプリが実行されることを確認してください。



2013年8月25日日曜日

Android Projectのコピー

幾つかアプリを作成していると、以前に作成したアプリのソースを活用したいときがあります。
そのようなときは、Projectをコピーして、これをもとに新しいアプリを作成すのがよいでしょう。

そこで、今回はAndroid Projectをコピーして、新たなアプリを作成するための手順についてまとめてみました。

例として、コピー元のProjectをSourceProject、コピー先のProjectをDestinationProjectとします。

【SourceProject】

①Projectのコピー&ペースト
SourceProjectを選択して、[ctrl] + [c]でコピーしてから、Package Explorer上で[ctrl] + [v]で貼り付けすると、「Copy Project」ダイアログが表示されます。


Project nameに、コピー先のProject名(ここでは、DestinationProject)を入力して、[OK]をクリックします。


Projectがコピーされます。

【DestinationProject】



このままだと、コピー先のProjectのソースファイル中に、コピー元のProject名がそのまま残っていいます。
②~⑤の手順で、Project名を全て変更する必要があります。


②AndroidManifestファイルの編集
SourceProjectをDestinationProjectに全て置換します。



置換してファイルを保存すると、以下のインフォメーションが表示されますので、[Yes]をクリックします。

「The package definition in the manifest changed.
Do you want to update your Launch Configuration(s)?」



③Layout XMLファイルの編集
SourceProjectをDestinationProjectに全て置換します。



④Packageの名前の変更
Packageの右クリックから[Refactor] - [Rename]を選択します。


Rename Packageダイアログが表示されます。


New nameにPackage名(ここでは、papakingyo.application.destinationproject)を入力して、[OK]をクリックします。


[Continue]をクリックします。



⑤その他ファイルの編集
コピー元のProject名が残っているファイルがあれば、編集します。

この例では、strings.xmlファイルの編集も必要です。




これで、Projectのコピーは完了です。





2013年8月24日土曜日

AdMobのバージョンアップ

AdMobのバージョンアップについて、以下のお知らせが届きました。


「いつも Google AdMob をご利用いただきありがとうございます。
本日、大幅に改良を加え、バージョンアップした新しい AdMob をリリースしました。

新しい AdMob では、デベロッパーの皆様は、アプリの収益化や宣伝を効率よく行えるようになり、ビジネスの拡大により多くの時間を割けるようになります。

新しい AdMob をお使いいただくには、ご自身でアカウントをアップグレードする必要があります。AdMob をお使いのアプリデベロッパーの皆様は、アップグレードして新しい AdMob をお試しください。」



バージョンアップの最大の利点の一つは、収益を日本円で受け取ることができるようになることでしょうか。

そこで、今回はAdMobのバージョンアップの手順についてです。


①お知らせのメールにある「アカウントを今すぐアップグレード」のリンクをクリックして、AdMobにログインします。画面最上部の[アップグレード]ボタンをクリックします。


②Googleアカウントの選択で、既存のGoogle AdSenceアカウントにリンクするを選択します。


③タイムゾーンを「東京」、通貨を「日本円」に選択します。



④AdMobプログラムポリシーの確認をして、[AdMobアカウントを作成]ボタンをクリックします。


⑤[ご利用開始]ボタンをクリックします。


⑥次に、以前のAdMobデータをインポートします。
新しくなったAdMobへようこそで、[スタート]ボタンをクリックします。


⑦データのインポートを開始する前の注意事項を確認して、[インポートを開始]ボタンをクリックします。


⑧インポートが完了するまで、ログアウトはしません。


⑨数分後に、データのインポート完了のメールが届きます。


⑩画面を更新すると、データのインポート完了の表示がされています。



以上でAdMobのバージョンアップは完了です。




2013年8月18日日曜日

Android Icon Set - お手軽なアイコン作成

Google Playストアがリニューアルして、表示されるアプリのアイコンサイズが以前より大きくなりました。
これで、Android アプリに於いても、アイコンの重要性がますます高まってきたと思います。
アイコンのデザインの良し悪しで、ダウンロード数も変わってくるのではないでしょうか。

そこで、今回はランチャーアイコンの作成についてです。

これまで、このランチャーアイコンの作成には、結構苦労してきたのですが、最近のAndroid SDKには、「Android Icon Set」というアイコン作成ツールが用意されていて、とても手軽にランチャーアイコンを作成することができるようになりました。
そこで、この「Android Icon Set」の使い方をまとめてみました。

1.Android Icon Set の起動

Eclipseのメニューバーにある[New]ボタンをクリックすると、「Select a wizard」ダイアログが表示されます。
ここで、[Android]-[Android Icon Set]を選択して、[Next]ボタンをクリックします。


2.アイコンセットの選択

「Choose Icon Set Type」ダイアログから、[Launcher Icons]を選択して、作成対象のプロジェクトとアイコン名を指定して、[Next]ボタンをクリックします。
尚、[Launcher Icons]では、ランチャーアイコンと高解像度アイコン(512×512)を作成できます。
高解像度アイコン(512×512)は、Google Playに表示するアイコン用です。
 
3.アイコンイメージの作成

「Configure Icon Set」ダイアログでアイコンイメージを作成していくのですが、自分で用意した画像から作成する場合、クリップアートで用意された画像から作成する場合、テキストで作成する場合の3通りから選択できます。

 ①自分で用意した画像から作成

 
 
 ②テキストから作成

 
 ③クリップアートから作成

  [chose]ボタンをクリックして、「Choose Clip Art Image」から好きなイメージを選択します。

 
 ①、②、③それぞれ、最後に[Finish]ボタンをクリックします。

4.ランチャーアイコンの更新

「file Already Exists」ダイアログが表示されますので、[Yes]ボタンをクリックして、作成したアイコンを上書き保存にして完了です。
 
Package Explorerで作成したアイコンを確認する。








2013年8月17日土曜日

【更新】Speed Color Memory

「Speed Color Memory」はエキサイティングな神経衰弱ゲームです。
できるだけ速く、色のペアを見つけて、カードを消していきます。

5秒間隔で、カードが画面の一番下に追加されていきます。
カードが列の一番上の行に到達すると、ゲームオーバーです。
急いで色のペアを見つけて、カードを消していってください。

色のペアを見つけると、ポイントが追加されますが、色の組合せを間違えると、ポイントは削減されます。
ポイントがなくなると、ゲームオーバーです。
一度めくられたカードの色は覚えておいて、ミスをできるだけ少なくする必要があります。

ステージをクリアするごとに、色の種類が増えて、難易度は高くなります。
ステージは1から4まであり、最終ステージはかなりの難易度です。
是非、全ステージのクリアを目指して、挑戦してみてください。



Google Playでダウンロードする




2013年5月6日月曜日

【新作】ならべてハングル

ハングル文字のパズルをならべて、正しい単語を完成させる学習パズルゲームです。
学習内容が簡単なパズル形式で、ハングルの読み方も表示できますので、まだハングル文字を正確に覚えていない初心者の方でも十分楽しめる内容となっています。
一回あたりの出題数は10問となっています。
通勤通学の電車の中や、毎日のちょっとした空き時間に気軽に学習していただけます。
また、今後のアプリ更新によって、登録単語をより充実させていく予定です。どうぞご期待ください。

◆特長
・出題範囲を「全て」「未解答」「不正解」から選択できます。
「始める」ボタンで学習をスタートすると、まず出題範囲を選択するダイアログが表示されます。
「全て」「未解答」「不正解」の中から出題範囲を選択してください。
・出題分野の選択ができます。
「設定」ボタンで設定画面を表示すると、出題分野を選択することができます。
・ハングルの読み方の有無を選択できます。
「設定」ボタンで設定画面を表示すると、ハングルの読み方の表示(カタカナ読み)の有無を選択できます。
現在の学習レベルに応じて、ON/OFF切り替えてみてください。

2013年5月4日土曜日

AdMob導入時のエラーについて


AdMobの導入で思った通りに広告が表示されず、以下のような警告表示になりました。





『You must have AdActivity declared in AndroidManifest.xml with configChanges.』は、configChangesをAndroidManifest.xmlに加えて宣言する必要があるといった内容です。

でもおかしい。

AndroidManifest.xmlには、以下のようにconfigChangesも加えて宣言しています。

<activity android:name="com.google.ads.AdActivity"
   android:configChanges="keyboard|keyboardHidden|orientation"/>

これは、ダウンロードしたAdMobのSDKバージョンと、Android SDKのAPIレベルが問題のようです。

作成中のアプリは、AdMob SDKがGoogleAdMobAdsSdk-6.4.1.jarで、Android SDKのAPIレベルが8です。



これが、問題なのです。

解決方法は2つあります。

①Android SDKのAPIレベルを変更
AdMob SDK(GoogleAdMobAdsSdk-6.4.1.jar)では、Android SDKのAPIレベルを13(Android 3.2)以上にします。

②AdMobのSDKバージョンを変更
Android SDKのAPIレベルが8では、AdMob SDK(GoogleAdMobAdsSdk-4.1.1)だと、正常に動くことが確認できています。

2013年3月31日日曜日

「Unexpected text found in layout file」の警告について


LayoutのXMLファイルを編集していると、以下の警告が表示されることがあります。

「Unexpected text found in layout file」

予期しないテキストがレイアウトファイルの中で検出されたということなのですが、
ファイルをどう確認しても、警告となる原因が見つかりません。

きっと、見た目では確認できないゴミテキストが紛れ込んでいるのでしょう。

こんなときは、いったんEclipseを再起動すると良いでしょう。

案の定、再起動後に同じファイルを確認すると、今度は、確かに不要なテキストが目に見えるかたちで存在していました。

従って、これを削除することで問題が解決できました。

2013年3月23日土曜日

「This file is derived. Do you really want to edit it?」のメッセージについて


ファイルを編集しようとすると、以下の警告ダイアログが表示されることがあります。



メッセージは、

「This file is derived. Do you really want to edit it?」

と表示されていて、要するに、ファイル属性が「derived」であるが、本当に編集してもいいですか?といった内容です。

このメッセージが表示されたときの対処方法は以下の通りです。

【その1】
まず、編集しようとしているファイルが、Rクラスなど、そもそもgen [Generated Java Files]デレクトリに自動生成されるファイルの場合は、[No]クリックして、編集をやめる必要があります。

【その2】
今まで普通に編集できたファイルが、突然警告表示されるようになってしまった場合は、おそらく、誤ってgen [Generated Java Files]デレクトリへファイルを移動させてしまって、その後、もとの場所へ戻すなどの操作をした場合が考えられます。
このような時は、以下のように、ファイルの属性を変更してあげれば、編集が可能になります。

①ファイルの右クリックから[Properties]をクリックする。




②AttributesのDerivedにあるチェック項目を外してから、[Apply]のクリックでファイルの属性を変更します。