AdSense部秋学期ミッション(5) - AdSense実験室

AdSense部秋学期ミッション(5)

2013-12-09

さて、ミッション終了まで早いものであと一週間。いよいよ大詰めですな~。
ここまでの作業、かなりのハイペースで進めてきたので、なかなかここに備忘録を書き留めておく時間もとれません…。(T_T)
後から見直すためにちゃんとこまめに記録しておこうと思ったんだけどな~。まあ仕方ない。
とりあえず主だったものだけ忘れないようにピックアップしとくと、

  • Google Maps API に AdSense表示機能があるのを発見
  • 地図の透過率調整に使ってるスライダーをjQuery Mobileに変更
  • 古地図サイトを、観光ガイド寄りに変更

Google Maps APIのAdSense機能は知らなかったなあ。
調べてみたら、2010年頃から対応してたみたい。

[Inside Adsense] Google Maps API で AdSense が利用できます

Google Maps API で AdSense

こんな感じで、画面の指定した場所(この場合は中央上)に、その地図に関連した広告が出せます。
今回、この機能は使わない予定だけど、地図系サービスでいいアイデア思いついた時には使えそう。いちおう覚えとこう。

2つめのjQuery Mobile。地図の透過率調整でjQueryスライダーを使ってたんだけど、どうもスマホやタブレットで使いづらいな~と思ってたら、もともと対応してなかったみたい。そりゃできないわけだ(笑)
で、モバイルでも使えるjQuery Mobileに変えました。これでスマホとかでも安心。

jQuery Mobileスライダー

3つめ、地図サイトの方針変更。やっぱりただ地図が表示されるだけじゃつまんないし、ちょっと軌道修正しました。今後のアプリ化のことも考えると、この方がニーズあると思うし。
ただ、観光ガイドとなると記事のボリュームも必要だし、写真なんかも欲しいしで、そのへんどうするかがちょっと悩みどころ。

Androidアプリ作成

さて、今回のミッションの最大の関心事、AdMob。そろそろ本腰入れてアプリの方も頑張らねば。つーか、期限まであともう一週間しかないんだけど…。(^-^;
とりあえず「Androidアプリ開発」の本を一冊買って、アプリ作りの基本を勉強中。
で、やっぱり気になるAdMob。実際アプリで表示するとどんな感じになるのか試したくてちょっとやってみました。

AdMobをアプリで使うためにはいろいろと下準備が必要みたいで、

  1. AdMobアカウントを取得
  2. AdMobにアプリを登録。これでアプリで使うための「adUnitId」がもらえる。
  3. Eclipse開発環境にSDKを導入
  4. GoogleAdMobAdsSdk-6.4.1.jarファイルをプロジェクトの外部ライブラリとして設定

主だった作業はこんな感じ。
私の場合、AdMobアカウントはもう先日取得済みなので、今回はアプリの登録以降の作業をやりました。
アプリの登録も画面の指示に従っていけば全然難しいことはなくて、まだ開発中でGooglePlayに未登録のアプリでも問題なく設定できました。
3のSDKの導入も、EclipseのウィンドウメニューからAndroid SDKマネージャを使えばボタンをポンポンと押すだけで導入完了。実に簡単。
4も、外部ライブラリ使ったことあれば問題ない作業なんだけど、私も毎回手順を忘れるのでいちおう記録に残しとこう。

  1. まず、AdMob導入したいプロジェクト名を右クリック→「プロパティー」を開く。
  2. 左メニューの「Javaのビルドパス」を選択。上のタブで「ライブラリー」、右の「外部Jar追加」ボタンをクリック。

  3. Android SDKマネージャでダウンロードしたSDKが、Eclipse関連フォルダにあるはず。「Eclipseフォルダ > sdk > extras > google > admob_ads_sdk」にあるGoogleAdMobAdsSdk-6.4.1.jarファイルを選択して「OK」。

  4. 上タブ「順序およびエクスポート」でAdMobSDKをチェックしておく

こんな感じですね。

で、アプリのレイアウト用xmlで

<com.google.ads.AdView
    android:id="@+id/adView"
    android:layout_width="fill_parent"
    android:layout_height="63dp"
    ads:adSize="BANNER"
    ads:adUnitId="ca-app-pub-XXXXXXXXXXXXXXXXXXXXX"
    ads:loadAdOnCreate="true"
/>

と、AdMob用のエリアを確保してやれば、めでたくAdMobが表示されます。

AdMob広告表示

できたー! ちゃんと広告表示されただけでなんか嬉しい(笑)

→ 次の記事:AdSense部秋学期ミッション(6)

スポンサーリンク