【実装事例】タブレットでもアイコン広告をおっきく表示しよう!iPadで小さくならない実装方法とは


smashtennis
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

ご存知の方も多いと思いますが、アスタを運営している株式会社マルジュはカジュアルゲームを多数リリースしています。
先日リリースした「スマッシュテニス」はiPhoneの無料総合で最高32位にランクしました!
そしてなんと、iPadの無料総合では最高4位にランクインしており、iPadユーザーからも高い人気を得ています。

iOS向けゲームアプリを開発されている方なら、iPhoneとiPadの両方に対応するユニバーサルアプリとして開発されている方も多いと思います。
しかしその際に気になるのが広告表示の対応ですね。
アスタの場合は特に何も設定しないとiPhone向けの小さいサイズで表示されてしまいます。

しかしちょっとした処理を付け加えることでiPadでも大きく表示することができます。
今回は“C++なんて触ったこと無い”私宮本が、頑張ってiPadへの対応方法をご紹介します!


まずはUniversalにして実行してみる

今回はアスタSDK同梱のサンプルアプリを元にした画面下部に4つ表示させたアプリでご紹介します。
まずはXcodeのGeneral > Deployment Info > Deviceが「iPhone」になっているので、これを「Universal」に変更します。

Universal

これをiPhoneとiPadのシミュレーターでそれぞれ起動してみます。

iPhone

iPhone

iPad

iPad



ご覧の通りiPhoneでは良い感じに表示されていますが、
iPadではアイコン1つ1つが小さく残念な感じになってしまっています。

条件分岐を使って対応する

ここで使用するのが「UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad」による条件分岐です。
iPadとiPhoneで実行するコードを分けることで、それぞれに適したサイズで表示できます。

// MrdIconLoaderを生成
MrdIconLoader *iconLoader = [[MrdIconLoader alloc] init];

// iPadの場合
if (UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad)
{
  // 幅を2倍、高さを2.3倍に(任意の値)
  CGRect frame = CGRectMake(10, 10, 75*2, 75*2.3f);

  // MrdIconCellを生成
  MrdIconCell *iconCell = [[MrdIconCell alloc] initWithFrame:frame];

  // タイトルフォントを変更(任意の値)
  iconCell.titleFont = [UIFont boldSystemFontOfSize:20.0f];

  // タイトルのFrameを変更
  // Y座標を少しマイナスして、アイコンとタイトルのマージンを詰めてデザイン調整(任意の値)
  iconCell.titleFrame = CGRectMake(iconCell.titleFrame.origin.x,
                                   iconCell.titleFrame.origin.y-15,
                                   iconCell.titleFrame.size.width,
                                   iconCell.titleFrame.size.height);

  // マニュアルの(3)〜(6)
  [iconLoader addIconCell: iconCell];
  [myView addSubview: iconCell];
  [iconLoader startLoadWithMediaCode: @"MY_MEDIA_CODE"];
  _iconLoader = iconLoader;
}

iOSシミュレータのスクリーンショット 2014.01.31 20.11.20
こちらが上記のコードを元に最適化した画面です。

アイコンサイズを約2倍くらいにするとiPadでもちょうど良いサイズになります。
実際の実装方法は環境によって様々だと思いますので、上記のコードを参考にして実装してみてください。

実装方法が柔軟なアスタ

アスタのiOS向けSDKではさまざまなオプションを用意しており、アイコンやテキストサイズのほか、文字色や影を設定することもできます。
詳しくはアスタSDKのマニュアルページに記載してありますので、ぜひご覧ください。

アスタではiPad・Androidタブレットアプリの収益化をお考えのデベロッパー様も大募集中です。
新規登録、お問い合わせはこちらからお気軽にどうぞ。

記事内で不明な点や詳しく知りたいところがある場合も、お問い合わせページよりお気軽にどうぞ!

Feedlyで購読
follow us in feedly