ラベル PhoneGap の投稿を表示しています。 すべての投稿を表示
ラベル PhoneGap の投稿を表示しています。 すべての投稿を表示

2014年9月20日土曜日

PhoneGap : Android の実機で実行できない場合

PhoneGap では run コマンドの引数を指定することで、
エミュレータでの実行か、実機での実効化を切り替えられます。

Android の場合は、
# 実機での実行
$ phonegap run android --device

# エミュレータでの実行
$ phonegap run android --emulator

コンピュータに接続された実機が見つからなかった場合は、
実機を指定していてもエミュレータ上で実行されます。

--device オプションをつけているのにエミュレータで実行される場合は、
実機の USB デバッグ設定ががオフになっていないかや、
ケーブルに問題がないかなど確認が必要になります。。

2014年9月19日金曜日

PhoneGap バイブレーションプラグインでエラー

バイブレーション実行時に以下のようなエラーが出る場合があります。
ERROR: Plugin 'Vibration' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml

こういった場合は、
プラグインを一旦削除して再インストール、
ビルドしたファイルを一旦別の場所に移動して再ビルドすると直ります。

ただし再ビルドすると Objective-C や Java など、
ネイティブで変更を加えている箇所が初期状態に戻ってしまうので、
手動で元の状態まで復元していく必要があるので注意が必要です。

2014年9月18日木曜日

PhoneGapよく使うプラグイン

今のところ使っているプラグインです。

Dialogs
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md
OSの alert や confirm を呼び出すことができます。

InAppBrowser
https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md
アプリ内でほかのサイトを表示したり、
ブラウザに処理を渡してサイトを開いたりできます。

Media
https://github.com/apache/cordova-plugin-media/blob/master/doc/index.md
音声ファイルが再生できます。
<audio> 要素だと上手く動作しない場合でもこちらだと上手く再生されることが多いです。

Vibration
https://github.com/apache/cordova-plugin-vibration/blob/master/doc/index.md
スマートフォンを振動させられます。

In-App Purchase
https://github.com/j3k0/PhoneGap-InAppPurchase-iOS
iOS のアプリ内課金処理を実装できます。

In App Billing
https://github.com/poiuytrez/AndroidInAppBilling/blob/master/v3/README.md
Android のアプリ内課金処理を実装できます。


今のところ最新の PhoneGap 3.5 にて、
上記プラグインは全て動作確認済みです。
各プラグインの使用方法等はそのうち書こうと思います。

2014年9月15日月曜日

PhoneGap で OS のアラートを呼び出す

PhoneGap では JavaScript の alert() がデフォルトで動作します。
表示される alert() は WebView のものです。

一方、プラグインを使用することで、
OS デフォルトのアラートを表示することもできます。
見栄え的にはこちらのほうが良いです。

org.apache.cordova.dialogs プラグイン
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md

インストール
$ phonegap plugin add https://github.com/apache/cordova-plugin-dialogs.git

使い方
navigator.notification.alert('アラート本文', function() {
    // 閉じた時の処理
}, 'タイトル');

2014年9月13日土曜日

PhoneGap の Android プロジェクトを Eclipse で開く

PhoneGap で Android 向けにビルドしたプロジェクトの開き方(Eclipse 版)です。

まず Android Developers 公式から、
Eclipse ADT をダウンロード・インストールします。



PhoneGap で Android 向けにビルドします。
$ phonegap build android

[application_root]/platforms/android/
が作成されます。これを Eclipse で開きます。

Eclipse を開いて、
File > New > Project... を選択。



Android Project from Existing Code を選択。



Root Directory として
[application_root]/platforms/android/
を選択します。



Copy projects into workspace を選ぶとワークスペースにコピーが作成されます。
こちらをチェックするとビルドする度に、
元のファイルを読み直す必要になってしまうのでチェックは付けずに進めます。

あとは通常の Android アプリと同じように
端末で実行したり apk ファイルを作成して Google Play にアップロードできます。

2014年9月8日月曜日

PhoneGap 3.5 で音声再生

公式のドキュメントでも紹介されている Media プラグインを使用して音声再生ができます。

org.apache.cordova.media
https://github.com/apache/cordova-plugin-media/blob/master/doc/index.md

HTML5 の <audio> 要素も使用できますが、
連続して再生するとたまに音がでない場合があるなど、
少々不安定な感じがするので上記プラグインを使用しています。

2014年9月6日土曜日

PhoneGap: Android のバックボタンを無効化

PhoneGap 3.5 で複数の HTML を遷移するようなアプリの場合、
Android のバックボタンを押すと前の画面に戻ってしまいます。

PhoneGap ではハードウェア関連のイベントを、
JavaScript のイベントとしてデフォルトで発行してくれます。

バックボタンの場合は "backbutton" イベントが発行されます。
jQuery を使用する場合は以下のように戻るボタンを無効化できます。
$('backbutton', function() {
    // 戻るボタンの無効化
    return false;
})


HTML を 1 ページだけにして、
JavaScript で表示を切り替える設計にすれば上記は不要です。

2014年9月4日木曜日

PhoneGap 3.5 + Media プラグイン + Android で BGM 再生できない

org.apache.cordova.media プラグインを使用すると、
JavaScript からBGM が再生できます。

apache/cordova-plugin-media | GitHub
https://github.com/apache/cordova-plugin-media

iOS では www/ を基準にした相対パスでファイルの場所を指定できますが、
Android の場合だとエラーが発生して音声が再生できませんでした。

Android の場合は以下のように音声ファイルの場所を指定する必要があります。
var media = new Media('file:///android_asset/www/my_sound.mp3');
media.play();

Android の WebView からローカルファイルにアクセス出来ないという情報があり、
そもそもどこを参照しているのかを調べるため、
location.href を出力してみたところ上記の URI が表示されたので、
そこからパスを指定したところ再生されました。

ドキュメントに書かれていなかったので、
音声周りで数日悩んでしまいました。

2014年8月26日火曜日

PhoneGap: プラグインが存在しないエラー

PhoneGap 3.5 の iOS で発生
プロジェクトをビルドしようとすると以下の様なエラーが出て、
ビルドが通らなくなりました。

CDVPlugin class CDVFile (pluginName: File) does not exist.

PhoneGap のプラグインを追加している場合
platforms/ios/[プロジェクト名]/Plugins/
の中にプラグインのファイルが追加されます。

何らかの原因でプラグインのファイルが追加されていない場合、
上記のエラーが発生します。


1. platforms/ios ディレクトリを削除(この時バックアップをとっておく)
2. 該当するプラグインだけを再インストール
3. ビルド
4. バックアップから復元

という手順でビルドが通るようになりました。
恐らく、ビルドされた後の iOS のプロジェクトを手作業で修正している場合に発生するものと思われます。

2014年8月25日月曜日

PhoneGap: WebStorage は deviceready で使用する

PhoneGap では通常の Web ブラウザと同様に、
localStorage, sessionStorage を使用してデータを保存することができます。
Web ブラウザのデータとは別に保存されるため、
ブラウザ側で過去のデータ削除をこなっても、
アプリではデータが残ります。

ただし localStorage や sessionStorage は、
deviceready イベントが発生したあとで使用する必要があります。
jQuery などで ready イベントを拾って来て実行しても、
データが保存されなかったり消えてしまったりするケースがあるので、
必ず deviceready イベントの後に実行するよう注意が必要です。

2014年8月24日日曜日

PhoneGap: Android のバージョン番号でビルド失敗するケース

android 向けにビルドした際に以下の様なエラーが出る場合、
バージョン番号のフォーマットが誤っている可能性が高いです。
$ phonegap build android
......
[aapt] [application_root]/platforms/android/ant-build/AndroidManifest.xml:2: error: Error: Float types not allowed (at 'versionCode' with value 'NaN').
 [31m   [error] [39m [application_root]/platforms/android/cordova/build: Command failed with exit code 2

config.xml を開いて、アプリのバージョン番号を確認して下さい。
iOS の場合は 1.0 などでもビルドが通りますが、
Android の場合は 1.0.0 などビルドバージョン(メンテナンスバージョン)まで
記述しなければ上記エラーが発生します。

2014年8月23日土曜日

iOS In-App Purchase のプロダクトが取得できない場合

PhoneGap では iOS 向けのアプリ内課金処理を実装できるプラグイン
「PhoneGap-InAppPurchase-iOS」が公開されています。
https://github.com/j3k0/PhoneGap-InAppPurchase-iOS

最初に Apple のサーバへアプリ内課金の商品データを読み込む必要があるのですが、
設定が整っていなければ以下の様なエラーが出て読み込みに失敗してしまいます。
2014-08-22 19:23:16.253 AppName[1065:907] InAppPurchase[objc]: Has 0 validProducts

私の場合は購入された代金の振込先情報を登録していなかったこととが原因でした。

iTunes Connect にログインした後、
"Contracts, Tax, and Banking" にて連絡先や銀行口座情報などを、
登録しておく必要があります。
また、実際に登録してから使用できるようになるまで1時間程度かかりました。

登録についてはこちらが大変わかりやすかったです。

iTunes connectで入金口座の登録をしよう | onTheHammock.com
http://onthehammock.com/blog/1286

2014年8月21日木曜日

PhoneGap : InAppPurchase-iOS のインストール

PhoneGap では課金処理が JavaScript から制御できるプラグインが、
有志によっていくつか公開されています。

2014年8月現在も更新され続けている熱心なプラグインに
"cc.fovea.plugins.inapppurchas" があります。
https://github.com/j3k0/PhoneGap-InAppPurchase-iOS

プラグインのインストールに成功すると、
storekit というオブジェクトがグローバルに作成され、
それを使って課金処理が制御できるようになります。
if(window.storekit !== undefined) {
    alert('プラグインのインストールに成功しました');
}

Readme にはインストールに関して色々書いてありますが、
コマンド1つだけでOKです。
$ phonegap local plugin add git://github.com/j3k0/PhoneGap-InAppPurchase-iOS.git
$ phonegap plugin list
cc.fovea.plugins.inapppurchase 3.4.1 "InAppPurchase" <= これがでてくればOK

Readme の Manually にもソースファイルの移動や、
config.xml の編集などが書いてありますが、
こちらは上記のコマンドを使用しないで手動でインストールする場合の方法なので、やる必要はありません。(これもやっていたせいで詰まっていました)

2014年8月17日日曜日

PhoneGap で再ビルドするとプラグインが動かない

PhoneGap 3.5 で、 platform/ios や platform/android を削除して、
もう1度ビルドした場合、インストールされていたプラグインが有効化されないようです。
インストールされているプラグインを全て削除して、
もう1度インストールしなおしてビルドするとプラグインが動作しました。
# プラグインの一覧を確認
$ phonegap plugin list

# プラグインを全て削除
$ phonegap plugin remove [プラグイン名]
$ phonegap plugin remove [プラグイン名]
......

# プラグインを再度追加
$ phonegap plugin add [プラグイン名]
$ phonegap plugin add [プラグイン名]
......

# 再ビルド
$ phonegap build ios
$ phonegap build android

2014年8月16日土曜日

PhoneGap のアプリを無線で実機デバッグ

PhoneGap でアプリをビルド・実行する際には、
実機とエミュレータを切り替えることができます。

公式のアプリをスマホにインストールすれば、
無線LAN経由でのプログラム書き込み・実行が可能です。
(ただし、やってみたところファイル読み込みの問題か実行速度がかなり遅かったです)



まず、PhoneGap のアプリをインストール。
iOS, Android, Windows Phone の3種類準備されています。
http://app.phonegap.com

次にコマンドラインから以下を実行。
$ phonegap serve
(server ではなく serve なので注意)

すると IP アドレスが表示されるので、
スマホの PhoneGap アプリへ入力します。
IP アドレスが正しければ無線経由で実行が開始されます。

実行速度が遅かったのであまり使ってないですが、
USB ケーブルでの接続が面倒なときは良いかもしれません。

2014年8月13日水曜日

PhoneGap でエミュレータ、実機の切り替え

run コマンドにオプションを付加することで実機デバッグ、エミュレータでの実行を指定することができます。

$ phonegap -run ios --emulator
$ phonegap -run ios --device

--emulator オプションをつけるとエミュレータで実行、
--device オプションをつけると USB や無線で接続された実機で実行されます。

2014年8月10日日曜日

PhoneGap でビルドが通らなくなった場合

config.xml を編集したあと、ビルドが通らなくなる場合があります。
変更箇所を元に戻してもビルドが通らない場合、
platform/ios, platform/android などのディレクトリを
一旦削除してからビルドするとうまくいきました。

PhoneGap 3.5 の場合だと、
config.xml にてアプリ名を日本語に変更した際に、
この現象が発生しました。

2014年8月8日金曜日

PhoneGap 3.5 で InAppBrowser が動かない場合

PhoneGap 3.5 で外部サイトを開くときに、
InAppBrowser というプラグインを使用すると便利です。

JavaScript からアプリ内で Web ページを開いたり、
スマートフォンの Web ブラウザを起動して Web ページを開くことができます。
// アプリ内で Web ページを開く
window.open('http://google.co.jp/', '_blank');

// Web ブラウザを起動して Web ページを開く
window.open('http://google.co.jp/', '_system');

InAppBrowser では、
アプリ内で Web サイトを開いた際に「閉じる」ボタンを表示することで、
元の画面に戻ってくることができます。
閉じるボタンが出ない場合は InAppBrowser が有効になっていないので注意が必要です。

以下の3点を確認する必要があります。

1.プラグインがインストールされている
$ phonegap plugin list
のコマンドでインストールされているプラグイン一覧を確認できます。
InAppBrowser がこの中に入っていなければなりません。
インストールは
$ phonegap plugin add https://github.com/apache/cordova-plugin-inappbrowser.git
のように行います。

2.cordova.js をロードしている
<script src="cordova.js"></script>
HTML 内で上記のスクリプト読込が必要です。
これをロードしないと「閉じるボタン」が表示されないデフォルトの画面遷移になります。
www/ ディレクトリ内には存在しないのですが、
各種プラットフォーム向けにビルドした際に生成されます。
ドキュメントにも見当たらなかったので詰まりました。

3.window.open() を使用している
<a> 要素でも同じことができるという記述を見かけたのですが、
PhoneGap 3.5 で試してみたところ window.open() を呼び出さないと動きませんでした。
上のコードのように window.open() を JavaScript から呼び出すと無事表示されました。

2014年8月6日水曜日

PhoneGap で外部サイトが開けない場合

対象バージョンは PhoneGap 3.5 です。

例えば <a> 要素で外部サイトへのリンクを設定したが動かない場合などは、
アクセス可能なサイトを予めホワイトリストとして登録必要があります。
config.xml を開いて
<access origin="*" />

を追加とすると全てのサイトにアクセス可能になります。
特定のサイトをアクセス可能にする場合は URL を入れればOKです。

White List Guid | Phone Gap API Documentation
http://docs.phonegap.com/en/3.5.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide

2014年8月5日火曜日

PhoneGap 3.5 でアプリのアイコンが反映されない

アプリアイコンのパスを書くときに "www/" から書かなければ反映されないようです。

このように "www/" の下から書くとデフォルトのアイコンが表示される。
<platform name="android">
 <icon src="icon/android/ldpi.png" density="ldpi" />
 <icon src="icon/android/mdpi.png" density="mdpi" />
 <icon src="icon/android/hdpi.png" density="hdpi" />
 <icon src="icon/android/xhdpi.png" density="xhdpi" />
</platform>

一方、"www/" を含めると表示された。
<platform name="android">
 <icon src="www/icon/android/ldpi.png" density="ldpi" />
 <icon src="www/icon/android/mdpi.png" density="mdpi" />
 <icon src="www/icon/android/hdpi.png" density="hdpi" />
 <icon src="www/icon/android/xhdpi.png" density="xhdpi" />
</platform>

公式ドキュメントには "www/" の下のパスから書くとあったのですが、
私の環境だと "www/" も含めて書かなければ表示されませんでした。
http://docs.phonegap.com/en/edge/config_ref_images.md.html#Icons%20and%20Splash%20Screens
(ちなみに、phonegap コマンドは www/ の上で実行しても下で実行しても同様でした)

プロジェクトをビルドした時のログで、
アイコンの画像ファイルを探すのの失敗していたエラーが出ていたので気付きました。

PhoneGap のバージョンはこちら
$ phonegap -v
3.5.0-0.20.10