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日木曜日

AndroidではAdmobメディエーションでi-mobileが使えない件 → 使えるようになりました(2013/01/24)

Admobメディエーションで広告ネットワークの追加ボタンを押したら使えるアドネットワークの一覧が表示されて、i-mobileもそこに名前が出てくる。

選んだら、設定するIDが3つあるので同じ名前の別物ってわけでもなさそう。

でも、設定してSDK入れて準備できたとおもいきや、ビルドするとAdapterクラスが見つからないというエラーが。
なるほど、アダプターを忘れてたのね、とAdMobのサードパーティのSDKやAdapterがダウンロードできるページに行っても、i-mobileが見つからない。

なので、問い合わせました。
すげー早いレスポンスで感動したんですが、回答にはがっくり。
Androidは未対応です、と。

というわけで、同じような現象が起こったらあきらめろ、という結論でお願いします。

【追記】
と書いた数時間後に、使えるようになりました。
記事を参照してください。
すみません。

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

[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用に一部変更してるみたい。

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

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