Titanium Mobile で開発した iPhone アプリに AdMob を導入する

バージョンアップ開発中のすき間iPhoneアプリDM@chatにAdmobを表示したくて調べたけれど、あまりきれいにまとまった手順がなかったので、自分のためにも残しておく。

Titanium Mobile の提供元である Appcelerator から AdMob 用のモジュールも提供されたので、それを iPhone アプリに導入するための手順です。

Appcelerator Developer Blogよりmodules提供のお知らせのポストだと手順がわかりづらかったので、それより新しめのAndroid導入用のポストの動画を参考にさせてもらった。

1. Appcelerator の github から AdMob modules をダウンロードする

いくつかのmodulesがgithubで公開されている。

1. 今回必要なのはiPhone用のAdMobモジュールなので、この階層(admob/mobile/ios)まで移動する。
2. このディレクトリ内にある、「ti.admob-iphone-***.zip」というファイル名を見つける。
   • 自分が確認したときは ti.admob-iphone-1.0.zip と ti.admob-iphone-1.1.zip が置かれていた。
   • このファイルはビルドされた時に生成されるべきzipファイルだと思うけど、すでにが置かれていたのでビルドの必要はなかった。
3. zipファイル名をクリックする。
   • 今回の場合、「ti.admob-iphone-1.1.zip」にした。
4. 次に表示された画面にて「raw」リンクをクリックする。ダウンロードできるので適当な場所に保存する。

2. Titanium Mobile プロジェクト内へ配置する

1. ダウンロードしたzipファイルをプロジェクトディレクトリ直下(Resourcesやtiapp.xmlと同じ階層)に移動する。
2. zipファイルを開き解凍する
3. modulesディレクトリが作成される。
   • 中身は今回の場合、iphone/ti.admob/1.1/… のようになっている。
4. 不要になったzipファイルを削除する。

以下のように、Resourcesディレクトリとtiapp.xmlファイルと同じ階層に「modules」ディレクトリが置かれればOK。

3. tiapp.xml を編集する

1. tiapp.xml を適当なエディタソフトで開く。
2. の部分記述を変える。
   • 今回はバージョン1.1なので、以下のように記述した。

<modules>

<module version="1.1">ti.admob</module>

</modules>

4. (一度動作確認したければ、)example/app.js で動かしてみる。

1. プロジェクト内の app.js を適当な名前にリネームして、modules/iphone/ti.admob/1.1/example にある app.js をコピーしてくる。
2. Titanium Studioのメニューより、該当のプロジェクトに対して、Project > Clean を実施する。
   • すでに作成済みなプロジェクトに AdMob を導入しようとしている場合は実施しないと、シミュレータ起動時にエラーになる。
   • ビルド時に生成されたファイルを削除してくれる。
3. Titanium Studioのメニューより、Run > Run を実行して、シミュレータを起動する。
4. AdMobが表示されればOK。
5. exampleからコピーしてきた app.js を削除し、リネームしたものを app.js に戻す。

5. オリジナル app.js に追記する。

起動時に app.js がビューする場合は、以下を app.js に追記すれば良い。adviewをWindowに入れれば表示される。

publisherID の部分は事前に AdMobサイトでアプリを登録した際に発行されるIDを入力してください。

var Admob = require('ti.admob');

var win = Ti.UI.createWindow({

backgroundColor: 'white'

});



var adview = Admob.createView({

top: 0, left: 0,

width: 320, height: 50,

adBackgroundColor: 'black',

testing: true,

keywords: '',

publisherId:'***************' // 取得したIDに置き換えてください。

});



win.add(adview);

自分の場合、app.js は tabGroup の設定のみなので追記した先は app.js ではなく、tab 内の window で指定されているファイルにそれぞれ以下のように追記した。

AdMob が上部で、その下が TableView を表示したかったので top を定義している。

var win = Ti.UI.currentWindow;



// Admob

var Admob = require('ti.admob');

var adview = Admob.createView({

top: 0, left: 0,

width: 320, height: 50,

adBackgroundColor: 'black',

testing: true,

keywords: '',

publisherId:'a14f1d41c54f42c' // Replace this string with your own API key!

});



win.add(adview);



var data = [];

var tableView = Ti.UI.createTableView({

data:data,

top:50, left:0,

width:320,

minRowHeight:58

});



win.add(tableView);

6. シミュレータを起動してみる。

1. Titanium Studioのメニューより、該当のプロジェクトに対して、Project > Clean を実施する。
2. Titanium Studioのメニューより、Run > Run を実行して、シミュレータを起動する。
3. AdMobが表示されればOK。
   • もしこれでもエラーが起きる場合は、Titanium Studioで新規プロジェクトを作成し、Resouces フォルダをコピーしてやり直すのが良いと思う。

以下のような感じで無事表示できましたと。

参考URL

• 大体の手順のイメージを捉えるのに役に立った</p>
  • http://m-50.jugem.jp/?eid=9
  • http://d.hatena.ne.jp/kaz_konno/20110305/1299344159
• Appcelerator Developer Blog
  • http://developer.appcelerator.com/blog/2011/07/building-apps-with-modules.html
  • http://developer.appcelerator.com/blog/2011/09/admob-for-android-module-tutorial-and-code.html

</div>