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

2012/01/24 (Tue)

■[Dev] Titanium Mobile で開発した iPhone アプリに AdMob を導入する 12:24

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

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

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

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

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

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

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

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

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

3. tiapp.xml を編集する

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

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

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

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

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