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。

f:id:d_sea:20120124112355p:image

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 フォルダをコピーしてやり直すのが良いと思う。

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

f:id:d_sea:20120124122013p:imagef:id:d_sea:20120124122012p:image

参考URL
</div>