それでは各画面の概要について紹介していこう。

バナー

バナーとはアプリケーションの下部に表示される、iAdの開始地点とも言えるスペースのこと。

iAdの開始地点とも言えるバナー

バナーで選択できるテンプレートは次の4種類。

テンプレート名 内容
Blank テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Image 画像でバナーを構成
Image and Text 画像とラベルでバナーを構成
Dynamic Text マルチラベルでバナーを構成

バナーで選択できるテンプレートは4種類。テンプレート選択後、各オブジェクトの調整をおこなっていく

バナーに配置できるオブジェクトは次の4種類。

オブジェクト 概要 インスペクタで調整できる項目
Image 画像を取りあつかう サイズ、座標、ボーダー、影、リフレクション、透明度
Label テキストを取りあつかう サイズ, 座標, パディング, フォント, 背景色, ボーダー, 影, リフレクション, 透明度
Multi-Label 複数のテキストを取りあつかう。一定おきに表示するテキストを変えたい場合に エフェクト、サイズ、座標、パディング、フォント、背景色、ボーダー、影、リフレクション、透明度
View 四角形のレイヤを取りあつかう サイズ、座標、ボーダー、影、リフレクション、透明度

バナーを表示している状態でiAd Producer左下部の"Objects"をクリックし、各オブジェクトを追加する

テンプレートでImage and Textを選択し、画像とテキストを挿入した図

スプラッシュ

スプラッシュはバナーをタップし、次に表示されるページのこと。iAdのローディング中、ユーザにおもしろさや興味を与えるための画面だ。スプラッシュでは画像のほか、みじかいムービー(Preroll Video)を再生することも可能だ。

スプラッシュで選択できるテンプレートは次の7種類。

テンプレート名 内容
Blank テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Blank(横) テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Bouncing 配置されたオブジェクトが上下にバウンドする
Drop 配置されたイメージオブジェクトが上から下に向かって移動し、表示される
Mosaic 配置されたオブジェクトが左上から右下に向かってモザイク状に表示される
Rotating 配置されたオブジェクトがぐるぐる回りながら表示される
Wave 配置されたイメージオブジェクトが波打ちながら表示される

スプラッシュで選択できるテンプレートは7種類。どんなアニメーションかを先に確認したい場合は、テンプレートを選択後、Exportメニューから"Preview in Safari"か"Preview in Simulator"を選んで動作を見ておこう

スプラッシュに配置できるオブジェクトは先のImage、Label、Multi-Label、Viewにくわえて次の16種類。なお、これら配置できるオブジェクトは次のメニューや各ページと共通。

オブジェクト 概要 インスペクタで調整できる項目
Audio サウンドを取りあつかう サイズ、座標、リフレクション、透明度
Button ボタンを取りあつかう。インスペクタでどの画面に遷移させるかを簡単に設定できる 遷移先の画面、サイズ、座標、フォント、背景、ボーダー、影、リフレクション、透明度
Carousel 画像をカルーセル形式で取りあつかう カルーセルの方向、サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Cover Flow 画像をカバーフロー形式で取りあつかう カバーフローの角度、サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Flip View 画像をフリップ形式で取りあつかう エフェクト、サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Gallery View 画像を横方向に展開する ドット表示の有無、サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Grid View 画像をグリッド形式で取りあつかう グリッドの列/行数、サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Page Dots ページドットを取りあつかう。各オブジェクトイベントを設定して使用 ドット数、サイズ、座標、リフレクション、透明度
Progress プログレスバーを取りあつかう。各オブジェクトイベントを設定して使用 サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Scroll View スクロールビューを取りあつかう。各オブジェクトイベントを設定して使用 サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Shake View 画像をシェイクで取りあつかう。各オブジェクトイベントを設定して使用 サイズ、座標、背景、ボーダー、影、リフレクション、透明度
Slider スライダを取りあつかう。各オブジェクトイベントを設定して使用 スライダの最大/最低値、サイズ、座標、影、リフレクション、透明度
Switch On/Offスイッチを取りあつかう。各オブジェクトイベントを設定して使用 スイッチの初期状態、座標、影、リフレクション、透明度
Text Field テキストフィールドを取りあつかう。各オブジェクトイベントを設定して使用 プレースホルダーテキスト、サイズ、座標、影、リフレクション、透明度
Video ムービーを取りあつかう。再生する以外にも、再生/一時停止/再生終了時に特定の処理をおこなえる コントローラ表示の有無、サイズ、座標、ボーダー、影、リフレクション、透明度
Wipe Clear 画像をこすり、非表示にする ブラシのサイズ、画像サイズ、座標、背景、ボーダー、影、リフレクション、透明度

Splash, Preroll Video, Menu, 各Pageに配置できるオブジェクトは合計20種類

Buttonオブジェクトではインスペクタでどの画面に遷移させるかをプルダウンで簡単に設定できる

iTunesでおなじみのCover Flowも簡単に作成可能

テンプレートでDropを選択し、画像とテキストを挿入した図

メニュー

メニューは各ページへの橋渡し的な役目をする、iAdの中心となるページ。ユーザはメニューに配置されたボタンをタップして興味があるコンテンツへアクセスしていくことになる。

メニューで選択できるテンプレートは次の5種類。

テンプレート名 内容
Blank(縦) テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Blank(横) テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Buttons 配置されたオブジェクトが上下にバウンドする
Hide-Reveal 配置されたイメージオブジェクトが上から下に向かって移動し、表示される
Wipe Clear Buttonsとおなじレイアウト。画面をこすり、メニューを表示する。表示後はほかのページに移動してもワイプしなおす必要はない

メニューで選択できるテンプレートは5種類。ボタンのラベルは各ページの名前がそのまま適用される。Hide-RevealとWipe Clearは特徴のある動作なので、まずは動作をプレビューで見ておこう

ページ

ページで選択できるテンプレートは次の14種類。

テンプレート名 内容
Blank(縦) テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Blank(横) テンプレートを使用せず、自分でオブジェクトを配置する場合に使用
Cover Flow 画像をカバーフロー形式で取りあつかう
Flip View 画像をフリップ形式で取りあつかう
Gallery View 画像を横方向に展開する
Grid View(横) 画像をグリッド形式で取りあつかう
Grid View(縦) 画像をグリッド形式で取りあつかう
Image Carousel 画像をカルーセル形式で取りあつかう
Map 地図を表示する。各オブジェクトイベントを設定して使用。サンプルコードが参考になる
Pan to View スクロールビューを取りあつかう。各オブジェクトイベントを設定して使用
Purchase ストアのタイプとiTunes Item IDを指定しておくことで、購入画面を表示する。指定できるストアタイプはApp、Album、Song、Movie、TV、Videoの6種
Pan to View スクロールビューを取りあつかう。各オブジェクトイベントを設定して使用
Shake to Change 画像をシェイクで取りあつかう。各オブジェクトイベントを設定して使用
Video Carousel ムービーをカルーセル形式で取りあつかう
Wallpaper Picker 画像を横方向に展開。ボタンをタップすると表示している画像を壁紙として保存する

各ページで選択できるテンプレートは14種類。テンプレート独特の機能はMap、Purchaseの2つ

PurchaseではストアのタイプとiTunes Item IDを指定しておくことで、iAd内で該当アイテムの購入画面を表示させることができる

バナーから各ページまで、テンプレートの決定→オブジェクトの調整というようにウィザード感覚でiAdを構築することが可能だ。ちょっと凝った実装をしたいという場合は、各オブジェクトを右クリックすることで表示されるメニューからイベントを選択して、JavaScriptでのコーディングをおこなえば良い。いくつかのテンプレート/オブジェクトにはあらかじめコードが用意されている。ぜひ参考にしたい。