Androidプログラミングに挑戦2!(22)単位変換アプリを作る-AdMobの登録

0
    JUGEMテーマ:プログラミング

    今回は、アプリをいじるのはちょっとお休みして、Googleのアプリ広告サービスAdMobへの登録の様子を見ていきたいと思います。

    まずはこちらのURLからAdMobにアクセスします。
    https://apps.admob.com/

    するとこちらのサインアップページにジャンプします。
    (Googleアカウントの確認/ログインを求められる場合があります)



    ここで、ログインしているアカウントに紐づいているAdSenseとAdWordsのアカウントがチェックされます。AdSenseはホームページなどに広告を表示して、広告がクリックされると報酬がもらえるシステム、AdWordsはそのAdSenseで表示される広告を出す(有料で)システムです。AdMobもアプリに広告を表示してクリック報酬をもらったり、逆にアプリに広告を出すことができるシステムなので、お金のやり取りが発生します。このお金のやり取りの窓口をAdSenseとAdWordsにまとめているという訳なのです。

    私の場合はAdSenseの方だけアカウントを持っていましたので、持っているアカウントのサイト運営者IDが表示され、AdWordsアカウントは「有効なアカウントはありません」という表示になっています。無いものはこの先のステップで作ることができます。
    ということなので残念ながらAdSenseのアカウントの作り方はここでお伝えすることができません。以前AdSenseのアカウントを単独で作った時は結構面倒くさかった覚えがあるので、ここでの手続きがどれだけ簡単になっているのか興味のあるところではありますが。

    ここは、表示されたアカウントを使用する、の方をクリックして先に進みます。
    次はAdSenseアカウントの確認です。持っていない場合はここで新しく作ることができる、のだと思います。



    問題ありませんので、「このAdSenseアカウントを使用する」で、次に進みます。
    次はAdWordsアカウントの作成です。



    なんと、これだけでAdWordsのアカウント作成完了です。
    まあ、Googleにとってはお金を受け取るアカウントなので、敷居が低いにこしたことはないわけです。
    次はAdMobのプログラムポリシーの確認です。



    プログラムポリシーと利用規約に十分目を通したら、「AdMobアカウントを作成」をクリックします。
    これでAdMobアカウントの開設は完了です。



    ここで「ご利用開始」をクリックすると、AdMobのウェルカムページにジャンプします。



    早速「ご利用を開始」をクリックしてみましょう。
    ここからはアプリを登録し、広告IDを取得するプロセスになります。



    まず最初にアプリを選択する画面になります。
    「アプリを検索」と「アプリを手動で追加」の2つのメニューがあります。アプリを検索とは、すでにGoogle Playに公開されているアプリに広告を追加する場合なので、開発中の場合は「手動で追加」を行います。といってもアプリの名前とプラットフォーム(AndroidかiOSかWindowsか)を選択するだけです。アプリの名前は、自分が判るような名前であればOKだと思います。記入/選択したら「アプリを追加」をクリックします。
    次は広告ユニットの設定です。



    バナー広告かインタースティシャル広告(全画面広告)を選んだら、それぞれ表示される項目を設定していきますが、まずはデフォルトでもいいでしょう。広告ユニット名だけは何かわかりやすい名前を付けてやってください。
    「保存」をクリックすると広告ユニットIDが発行されます。



    おめでとうございます!これで無事広告IDを取得することができました。
    広告IDとアプリへの広告の詳しい設定方法が書かれたサイトへのリンクをメールで送ることができますので、せっかくなので送ってみました。



    メール自体にあまり情報量はありませんが、覚えということで。
    「完了」をクリックすると管理画面が表示されます。



    画面トップには「ホーム」「収益化」「宣伝」「分析」の4つのメニューが表示されています。このページは「収益化」です。せっかくなので他のページも見てみましょう。
    まずは「ホーム」



    収益額等のまとめページになっています。次は「宣伝」です。



    これは自分のアプリを宣伝(有料)するページでした。しばらくは見ないでOKでしょう。ちなみにこのページだけ、ページを移動するときに確認のダイアログが表示されるようになっています、はい。

    最後は「分析」です。これはGoogleアナリティクスと紐づけてアプリのユーザーの動向などを分析するページです。
    私はGoogleアナリティクスのアカウントも持っていますので、ついでに登録してしまいましょう。



    私はここで既存のアカウントを選びました。



    メニューから既存のアカウントを選び、表示された内容に問題なければ「続行」をクリックします。



    ここで続行をクリックするとダイアログが出て、アプリのトラッキングIDの設定が行われます。



    「トラッキングIDを設定」をクリックします。



    新しいトラッキングIDを作成、をチェックして保存します。
    これでトラッキングIDが発行されます。



    完了をクリックすると分析画面が表示されます。
    実際のトラッキングIDの埋め込み方などは、また勉強して、その内ご紹介します。



    さて、以前挙げた残りのプロセスをもう一回見てみましょう。

    (済)・カテゴリー、単位を充実させる。
    (済)・単位の説明を表示する。
    (済)・アイコンを作る。
    (済)・多言語対応にする。
    (済)・広告を入れる(広告なしの有料版も公開する)
    (未)・Google Playデベロッパーに登録する。
    (未)・アプリを公開する。

    そうです、残るはGoogle Playデベロッパーに登録してアプリを公開するだけになりました。

    それでは次回をお楽しみに。

     


    Androidプログラミングに挑戦2!(21)単位変換アプリを作る-広告の追加(その2)

    0
      JUGEMテーマ:プログラミング

      さてさて、前回のバナーはみ出し事件、落ち着いて考えてみると思い当たるフシがあります。
      パッと見は下から出てきたテンキーにバナーだけ押し上げられているように見えるのですが、実際は、テンキーが出現することによってメインの画面を収めているRelative Layoutが縮んでいるのではないかと思うのです。
      このAdViewだけParentの底辺にくっつけてレイアウトしたため、レイアウトが縮むのに合わせて上に移動してきてしまったと考えると理屈が通ります。

      では試しに、AdViewを上の変換ボタンにくっつけてレイアウトしてみましょう。
      こんな感じです。



      これをエミュレータで走らせてみましょう。これでどうでしょう?



      どうです?大成功!・・・と言いたいところなのですが。新たな問題発生です。
      スクリーンショットではわからないのですが、バナーが点滅しているのです。
      それに同期して変換ボタンが数dp高さ方向に伸び縮み振動しています。
      意味不明です。
      とりあえず、バナーをもう少し下げて完全に見えなくしたら振動は収まりました。
      が、このままでは別のもっと画面の長い機種などが現れた時に、テンキーの領域が狭まってまたバナーが少し出現してしまうかもしれません。これではイタチごっこです。

      それならいっそ、レイアウトをちょっといじってバナーが常に全部見えるようにしてやったらいいのではないでしょうか?
      現状の、バナーと変換ボタンが近接しているレイアウトは、間違ってバナーをタップしてしまう可能性もあり、ユーザにとって非常にストレスになるとも思うので、思い切って変換ボタンをカテゴリースピナーの横あたりにもっていってはどうでしょうか?
      こんな感じです。



      どうでしょう?
      少しレイアウトが混雑してきたので、タップできる部分がわかりやすいように、スピナーの三角マークを右下に着けて、右と下にボーダーを入れてみました。
      元画像は、Android SDKの、sdk/platforms/android-23/data/res/drawableにある、spinner_default_holo_light_am.9.pngというファイルです。とあるテーマを適用したときのスピナー用背景です。
      元ファイルは右下の三角が2倍くらい大きいのと、下線しかないので、画像処理ソフトを使って三角を小さくし、右の縦線を追加し、ついでにコンテンツ部分もぎりぎりまで拡大して適用しました。
      その他、バナーの点滅が起きないように、スピナーの高さを1dp刻みで調節しました。また、日本語と英語で文字サイズも変えて調節しました。結果、こんな風にうまく表示されるようになりました。




      えー、広告の話だったはずが、レイアウト変更だけで話が終わってしまいました・・・

      次回は、AdMobの本登録をやっていきたいと思います。


      Androidプログラミングに挑戦2!(20)単位変換アプリを作る-広告の追加(その1)

      0
        JUGEMテーマ:プログラミング

        それでは今回は広告の追加を進めていきたいと思います。
        第1回目は、仮のIDで仮広告を表示するところまで行きます。

        まず、アプリに広告を表示するサービスは色々あります。本来ならそれぞれの特徴を比較して最適なものを選ぶところですが、今回は導入が簡単なAdMobを使っていきたいと思います。
        どう簡単かというと、このAdMobはGoogleがやっている広告サービスなんです。そしてGoogle Play serviceの一部としてAndroid Studioに簡単に組み込むことができるんです。うだうだ考えているよりやった方が早いということで、早速始めてみたいと思います。

        まず、Android Studioに組み込む必要のあるツール類を確認していきましょう。Android Developerサイトを参考に作業を進めていきます。Android Studioのメニューから「SDK Manager」を開きます。



        ■最新のSDKツール
        「Tools」から
        ・Android SDK Tools
        ・Android SDK Platform-tools
        ・Android SDK Build-tools(最新バージョンのもの)
        「Android X.X」フォルダから
        ・SDK Platform
        ・「ARM EABI v7a System Image」などのエミュレータ用のシステム イメージ

        ■追加API用のサポートライブラリー
        「Tools」から
        ・Android Support Repository
        ・Android Support Library

        ■その他の API 用の Google Play サービス
        「Tools」から
        ・Google Repository
        ・Google Play サービス

        このうち、未インストールだったのは最後の「Google Play サービス」だけでしたので、これをインストールしました。

        ここからはAdMobのスタートガイドに従い、各種設定を行っていきます。

        まずGradleを設定します。
        Android Studioの左のProject画面で「Gradle Scripts」を開くとbuild.gradleというファイルが2つあると思います。その内、(Module:app)とついている方のbuild.gradleを開くと一番最後にdependencyというブロックがあると思います。そこに1行書き足します。
         
        dependencies {
            compile fileTree(dir: 'libs', include: ['*.jar'])
            testCompile 'junit:junit:4.12'
            compile 'com.android.support:appcompat-v7:23.1.1'
            compile 'com.google.android.gms:play-services-ads:8.4.0'
        }
        

        5行目が書き足した1行です。ここでGoogle Play Serviceの中のGoogle Mobile Ads APIを指定しています。2016年1月13日現在で最新バージョンは8.4.0です。最新バージョンはリリースノート等で確認してください。
        無事終了したら確認のため一旦ビルドしてみてください。問題があれば早く見つけてつぶしましょう。

        次にマニフェストファイルを変更していきます。
         
        <?xml version="1.0" encoding="utf-8"?>
        <manifest xmlns:android="http://schemas.android.com/apk/res/android"
            package="com.example.tetsuya.unitconverter6">
            <!-- Include required permissions for Google Mobile Ads to run-->
            <uses-permission android:name="android.permission.INTERNET"/>
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
            <application
                android:allowBackup="true"
                android:icon="@mipmap/ic_launcher"
                android:label="@string/app_name"
                android:supportsRtl="true"
                android:theme="@style/AppTheme">
                <!--This meta-data tag is required to use Google Play Services.-->
                <meta-data android:name="com.google.android.gms.version"
                    android:value="@integer/google_play_services_version" />
                <activity android:name=".UnitConverter6">
                    <intent-filter>
                        <action android:name="android.intent.action.MAIN" />
                        <category android:name="android.intent.category.LAUNCHER" />
                    </intent-filter>
                </activity>
                <!--Include the AdActivity configChanges and theme. -->
                <activity android:name="com.google.android.gms.ads.AdActivity"
                    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
                    android:theme="@android:style/Theme.Translucent" />
            </application>
        </manifest>
        

        まず4〜6行目、広告を取得するためにインターネットにアクセスする権限と、インターネットにアクセスできるかどうかをチェックする権限を付与します。
        次に13〜15行目、Google開発者サービスのバージョンを参照する<meta-data>タグを追加します。
        そして22〜25行目、バナー広告がタップされたときに使用されるActivityを宣言しておきます。
        無事済んだらまた確認のためビルドしてみてください。


        次いで、アプリに広告IDを文字リソースとして追加しておきます。
         
        <resources>
            <string name="app_name">UnitConverter</string>
            <string name="banner_ad_unit_id">ca-app-pub-3940256099942544/6300978111</string>
            <string name="categoryText">Category: </string>
        

        これはvalues¥strings.xmlの一部です。
        3行目に追加したのが、テスト用の広告ユニットIDです。本番前はこれで動作をチェックします。
        なお、strings.xmlが多言語化により2つありますので、両方に設定しておきます。


        次に、レイアウトに広告を表示するAdViewを追加します。activity_unit_converter6.xmlを開きます。
         
        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:ads="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            tools:context="com.example.tetsuya.unitconverter6.UnitConverter6">
            (中略)
            <com.google.android.gms.ads.AdView
                android:id="@+id/adView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                ads:adSize="BANNER"
                ads:adUnitId="@string/banner_ad_unit_id"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true">
            </com.google.android.gms.ads.AdView>
        </RelativeLayout>
        

        まず4行目、広告で使用する新しい名前空間を定義します。
        そして中略後のモジュールがAdViewです。まるっと追加してください。
        出来たらレイアウトを確認してみてください。こんな感じに一番下にバナーエリアが表示されているはずです。


        そうしたら最後にメインのjavaに広告を読み込む処理を追加します。
         
        package com.example.tetsuya.unitconverter6;
        import android.support.v7.app.AppCompatActivity;
        import android.os.Bundle;
        import android.widget.ArrayAdapter;
        import android.widget.EditText;
        import android.widget.TextView;
        import android.view.View;
        import android.widget.Spinner;
        import android.widget.AdapterView.OnItemSelectedListener;
        import android.widget.AdapterView;
        import java.util.ArrayList;
        import android.text.Html;
        import com.google.android.gms.ads.AdRequest;
        import com.google.android.gms.ads.AdView;
        
        public class UnitConverter6 extends AppCompatActivity {
        (中略)
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_unit_converter6);
                
            (中略)
            
                AdView mAdView = (AdView) findViewById(R.id.adView);
                AdRequest adRequest = new AdRequest.Builder().build();
                mAdView.loadAd(adRequest);
            }
        }
        

        まずimportの最後の2つを追加します。そして、一番最後の3行、これが広告を表示するブロックです。

        以上で、処理は全部終了しました。
        上手くいったかどうか、ビルドしてみましょう。



        上手くいくとこんな風にテストバナーが表示されます。
        大成功!!!
        と思って、なんとなくアプリに数字を打ち込もうとしたところ・・・・・



        何と、下からスライドして出てきたテンキーに押し上げられて広告が上にずり上がり、変換ボタンの裏側に入り込んでしまいました。変換後の単位名称も覆い隠してしまっています・・・

        うーん、これはちょっと色々考えて修正してやらなくてはいけません。


        今回はここまで、続きは次回をお楽しみに。















         



        calendar

        S M T W T F S
        1234567
        891011121314
        15161718192021
        22232425262728
        293031    
        << December 2019 >>

        アクセスカウンタ

        合計:
        今日:
        昨日:

        selected entries

        categories

        archives

        recent comment

        • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
          てちくん
        • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
          てちくん
        • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
          小田きく江
        • ロリポブログでGoogleにサイトマップを登録する際の注意事項
          てちくん
        • ロリポブログでGoogleにサイトマップを登録する際の注意事項
          suraugi
        • いそべぇのペーパークラフトを作る(初級編)(12)
          てちくん
        • いそべぇのペーパークラフトを作る(初級編)(12)
          だべえ
        • noomでマイナス12kgのダイエットに成功!
          Yoko

        recommend

        recommend

        recommend

        ドール デザートメーカー ヨナナス901
        ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

        結構高いんです、でも欲しいんです!

        links

        profile

        書いた記事数:173
        最近の更新日:2017/01/30

        search this site.

        others

        mobile

        qrcode

        powered

        無料ブログ作成サービス JUGEM

        Google Adsense

        楽天ブックス

        楽天