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
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 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

    楽天ブックス

    楽天