FANCOMI Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・新規事業のエンジニア・技術ブログ

SpriteKit上でnendの広告を表示させる

こんにちは、iOS担当のt_kinamiです。

今回は、SpriteKitで作成したアプリにnendの広告を表示する方法です。

  • SpriteKitとは?

iOS7以降で使用できるグラフィック描画用フレームワークです。 アニメーション処理を多様するゲームやアプリに適していると言われています。 appleが公式で提供しているため、Androidで使用することはできませんが、 iOSでアプリを作成する際に非常にパワフルなツールになるであろうと個人的に期待しています。

apple公式のページは以下から飛べます。 Sprite Kit Programming Guide

  • SpriteKitの始め方

数ステップで簡単に導入できます。 プロジェクト新規作成時に"SpriteKit Game"を選びます。

[caption id="attachment_2456" align="alignnone" width="300"]SpriteKit Gameを選んでいるところ SpriteKit Gameを選びます[/caption]

その後、プロジェクト名を決めて、保存するフォルダを選べば、 必要なフレームワークも自動的に追加されて、導入完了です。

[caption id="attachment_2459" align="alignnone" width="161"]SpriteKit Gameで追加されるファイルたち SpriteKit Gameで追加されるファイル[/caption]

アプリを実行し画面をタップすると、画像が表示され、ぐるぐるとアニメーションします。

[caption id="attachment_2467" align="alignnone" width="148"]実行したときの画像 実行したときの画像[/caption]

  • SpriteKitのiOS上での動作について

SpriteKitは、SKViewというView上で動作しています。 SpriteKitではSKView上で1つの画面毎にSKSceneと呼ばれるクラスを作成し、処理を実装していきます。

階層イメージ

  • 広告の実装方法

さて、ここからが本題です。 今回は一般的に良く使われる、 1.シーンが表示されるタイミングで広告を表示する 2.シーンが切り替わるタイミングで広告を消去する という処理を実装していきます。

なお、事前にSDKのマニュアルに従いプロジェクトにnendSDKを追加してください。

1.シーンが表示されるタイミングで広告を表示する

- (void)didMoveToView:(SKView *)view;

が呼ばれるので、これをオーバーライドして処理を追加します。

[java] -(void)didMoveToView:(SKView *)view{ [super didMoveToView:view];

// NADViewを生成(※ここで指定する位置は、SKView上に配置する位置であり、SpriteKit上の位置ではない)
nadView = [[NADView alloc] initWithFrame:CGRectMake(0, 0, NAD_ADVIEW_SIZE_320x50.width, NAD_ADVIEW_SIZE_320x50.height)];
[nadView setAutoresizingMask:UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin];

// 広告枠のapikey/spotidを設定(IDはテスト用)
[nadView setNendID:@"a6eca9dd074372c898dd1df549301f277c53f2b9"
             spotID:@"3172"];
// delegateを受けるオブジェクトを指定
[nadView setDelegate:self];
// 読み込み開始
[nadView load];

// SKViewにNADViewを乗せる
[self.view addSubview:nadView];

} [/java]

 2.シーンが切り替わるタイミングで広告を消去する

- (void)willMoveFromView:(SKView *)view; が呼ばれるので、これをオーバーライドして処理を追加します。

[java] -(void)willMoveFromView:(SKView *)view{

if (self.nadView) {
    // SKViewから広告を取り除く
    [self.nadView removeFromSuperview];

    // リソースを解放
    [self.nadView setDelegate:nil];
    self.nadView = nil;
}

[super willMoveFromView:view];

} [/java]

今回説明した実装方法は、テンプレートを使用してSpriteKitを作成した想定です。 手動でSpriteKitを実装した場合は、SKViewが解放される際に、 -(void)willMoveFromView:(SKView *)view; が呼ばれず、最悪の場合アプリがクラッシュする可能性があります。 その場合は、-(void)dealloc;にてNADViewの解放処理を行う等、必要に応じて解放処理を実装してください。

※この記事ではXcode5.0.2を使用しています。Xcodeのバージョンによっては手順が異なる場合があります。