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

2013年7月7日日曜日

enchant.jsでゲーム作ってPhoneGapでスマホアプリ化したった

HTML5+JavaScriptでゲームが作れるフレームワークであるenchant.js(http://enchantjs.com/ja/)で簡単なゲームを作って、それをPhoneGapでラップしてアプリ化してみた。

穴に落ちないようにギリギリでジャンプし続けるだけの超単純なゲームです。
ギリギリでジャンプすることだけが目的なので、ジャンプした後は勝手に飛距離を調整して着地させてます。
キャラがクマなのはenchant.jsに付属してたものをそのまま使ってるだけで、お金か絵心があればオリジナルキャラでやりたかったけどやむなし。



実装上困った点はまた後日まとめるとして、Android4.x系のバグでenchant.jsの最新バージョンが使えなかったこととPhoneGapとの絡みでコールバック地獄が大変。

あと、使いたかったParse.comでスコアの共有。


なんのトラブルもなく超簡単に実装できた。

iPhone版はリジェクトされたのでAndroid版しかないけど、気が向いたら遊んでみてくださいな。


Android app on Google Play

2013年5月14日火曜日

PhoneGapのWebIntentプラグインを2.7.0に対応させてみた。

PhoneGapのプラグインはたくさんあっていいけど、PhoneGap本体の頻繁なアップデートに追随していないものもいっぱいあってイマイチ。

ちょっとしたアップデートならいいけど、プラグインのアーキテクチャがゴロッと変わったりしてるのに放置されたりするのさすがにどうかと思うわ。

それはさておき、これまでPhoneGap2.3.0を使っていたのを現時点(2013/05/14)で最新の2.7.0にしたのを機に、今使っているプラグインをそれに対応させたので、せっかくなので公開しておきます。 

まずはWebIntentプラグイン。 その名のとおりIntentを発行するプラグインで、僕はアプリからブラウザを起動するのに使ってます。

https://github.com/kyosuke25/phonegap-plugins/tree/master/Android/WebIntent

どうぞご自由にお使いください。

2013年1月25日金曜日

PhoneGapでAdMobを使う(Android版)

PhoneGapでアプリを作って広告収入でお小遣いが入ればいいな、ということで、そのやり方の紹介です。

PhoneGapでアプリを作るときに使う技術って、基本的にはHTML+JavaScript+CSSなので、ワンソースでiOSアプリもAndroidアプリも作れて、めっちゃ簡単。

でも、広告掲載みたいな外部SDKを使うとなるとワンソースじゃ無理なので、OSごとの実装が必要になります。

で、PhoneGapで作ったiOSアプリにAdMobを載っける方法はどなたかがまとめておられます。
http://webdelog.info/2012/09/iphone/cordova-phonegap-ios-admob/

それのAndroid版が日本語で見つからなかったのでここでまとめておきます。
といっても、
https://github.com/phonegap/phonegap/wiki/In-App-Advertisements
に載ってるの抜粋&翻訳です。

SDKのダウンロードとかパブリッシャーIDの発行とかは省略します。

まず、AndroidManifest.xmlのandroid:targetSdkVersionの値が"13"以上になっていることを確認して、applicationタグで囲まれた部分に、
<activity android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:name="com.google.ads.AdActivity"></activity>
を追加。

で、Javaの方にある○○Activity(だいたい、アプリケーション名+Activityっていう名前)に、
public class ○○Activity extends DroidGap {
    private Handler mHandler = new Handler();
    private AdView adView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        mHandler.postDelayed(new Runnable() {
            public void run() {
                doAdMob();
            }
        }, 5000);
    }
    private void doAdMob() {
        adView = new AdView(this, AdSize.BANNER, "パブリッシャーID");
        LinearLayout layout = super.root;
        layout.addView(adView);
        layout.setHorizontalGravity(android.view.Gravity.CENTER_HORIZONTAL);
        AdRequest request = new AdRequest();
        adView.loadAd(request);
    }
}
を追加。

でもこれはLocalStorageを使う場合の実装。
広告を遅らせて表示することでLocalStorageの情報が消えないらしい。
LocalStorageを使ってない場合の実装は、参照元のページを見てください。

2013年1月24日木曜日

[PhoneGap2.3.0]ボクシングの採点アプリ、できました。

とりあえずPhoneGapでアプリを作ってみようと思い、自分でもニーズはなかったのですが、たまたまテレビでボクシングをやってたので、それに影響されてラウンドごとに採点して記録するアプリを作りました。

昔、よく採点してたよなぁ。山本に影響されて。

それはともかく、ディープなボクシング好きなら間違いなく誰もがやっているであろう、テレビや会場で試合観戦しながらの採点。
でも、こんなにスマホを持ってる人が増えてるのにわざわざチラシの裏に書いてる。
しかも調べてみたらまともな採点アプリがない。(「ニーズがないからや」とか言わない。)

というわけで、PhoneGapの勉強がてら作りました。

興味があったらダウンロードして使ってください。

「採点しようぜ」
-Android版
https://play.google.com/store/apps/details?id=com.kyosuke25.socialboxing
-iPhone版
開発中

[PhoneGap2.3.0]navigator.notification.confirm は要注意!

PhoneGapで、navigator.notification.confirmを使ってダイアログを表示させ、OKを押したら画面遷移、Cancelを押したらその画面のままという実装をするときの注意点です。
JavaScriptにあるconfirmメソッドと同じ挙動だと思って使うとバグになりますよ、っていう話です。

■confirm()を使う場合

-JavaScript
$('#okButton').click(function(){
    if(!confirm('次の画面に移っていい?')) {
        return false;
    }
});

-HTML
<a data-role="button" href="next.html" id="okButton" >次の画面</a>

クリックイベントがあったらconfirmを呼んで、Cancelを押された時はfalseを返すようにすれば次の画面には行かない。

■同じようなノリでnotification.confirmを使った場合(ダメな例)


-JavaScript
$('#okButton').click(function(){
    navigator.notification.confirm(
        '次の画面に移っていい?',
        function(buttonIndex){ // ★押された時の動作
            if(buttonIndex == 2) {
                return false;
            }
        },
        '確認',
        'はい,いいえ'
    );
});

-HTML
<a data-role="button" href="next.html" id="okButton" >次の画面</a>

このとき、「はい」「いいえ」のボタンを押す前に次の画面に行っちゃいます。

なぜか。

公式のAPIドキュメントを読むと、notification.confirmは非同期なんだと。

つまり、上のコードの★に書いた部分を実行する前に、clickイベントが終わってしまいます。

■notification.confirmを使って意図通り動かす場合

-JavaScript
$('#okButton').click(function(){
    navigator.notification.confirm(
        '次の画面に移っていい?',
        function(buttonIndex){ // ★押された時の動作
            if(buttonIndex == 1) { // 「はい」が押された時
                window.location.href('next.html');
            } else { // 「いいえ」が押された時
                // 何もしない
            }
        },
        '確認',
        'はい,いいえ'
    );
    return false; // 念のため
});
-HTML
<a data-role="button" href="#" id="okButton" >次の画面</a>

つまり、勝手に次の画面に行かないようにaタグには次の画面のURLは入れないようにして、コールバック関数の中でムリヤリ次の画面に飛ばす、って感じ。

でもやっぱり気持ち悪いので、別のソリューションがあったら教えてください。
あと、return false;の場所が微妙な気もする。

2013年1月20日日曜日

[PhoneGap2.3.0]PhoneGapでiOS用とAndroid用のコードはそのまま共有できない!

PhoneGapは、HTML+JavaScript+CSSを使ってワンソースでiOSアプリとAndroidアプリが作れるよ、っていう結構凄い奴。

でも、その「ワンソース」っていうのは一から十まで同じソースが使えるわけじゃないから要注意。

まあ、AdMobとかの広告表示用のSDKは、iOS用とAndroid用で別々になってるから普通に分かる。

けど、ハマったのが、PhoneGap APIを使ってる場合は、Android用に作った物をそのままコピペしてMacにコピーしても(その逆も)思惑通りには動かないってこと。
つまり、実は本体部分のHTML・JavaScript・CSSをそのままコピーしたらダメ。

どうやらdevicereadyイベントがbindできないかfireしない。
そうなると、navigator.notification.confirm("メッセージ", function(){// something}, "タイトル");がAndroidでは動いたのにiOSでは動かない、ってことが起きる。

その理由は、phonegap.jsがiOS版とAndroid版で違うためらしい。
iOS用に作る場合はスクリプトを叩いてプロジェクトを作るけど、このときにiOS用に一部変更してるみたい。

こんなことで一日つぶすとは・・・。