はじめに
こんにちは某猫です。
先日、Flutter で irodori というアプリを出しました。
街中にある色を見つけて集めるアプリです。今までなんとも思っていなかった街並みも「色を気にしながら歩く」と見え方が全然変わってきてみて面白いんですよぇ
今回はそのホームに入れているネイティブ広告の実装メモです。
やりたかったこと
irodori のホームは、写真カードがチェキっぽく並ぶ画面です。
ここに普通のバナー広告を入れると、けっこう急に広告です。
もちろん広告なので広告なのですが、画面のリズムとしては少し強い。
なので、ホームではカードの1枚としてネイティブ広告を混ぜることにしました!
実装上は、作成済みカードの一覧に広告用 item を差し込んでいます。
ざっくり言うと4枚ごとに1枚です。
static const _nativeAdInterval = 4;
広告の item は通常カードと同じ GridView に流します。
こうしておくと、スクロール、余白、カードの角度、影などを通常カードと同じ考え方で扱えます。
index計算は地味に間違えやすい
広告を混ぜる場合、実データの index と表示上の index がずれます。
表示上の5番目が広告なら、その後のカードは1つずつずれる。
このへんを雑にやると、タップしたカードと開く詳細が違うみたいな最悪UIになります。
今回は表示 index から album index を戻す関数を分けています。
static int _albumIndexForDisplayIndex(int index) {
return index - (index ~/ (_nativeAdInterval + 1));
}
この関数だけ見ると普通なのですが、広告が最後に来るケースもあるので、_isNativeAdIndex 側で端数グループも見ています。
サイズはFlutterとSwiftの両方で見る
ネイティブ広告の表示は Flutter だけでは完結しません。
Flutter 側では NativeAd をロードして AdWidget を置きます。
一方で iOS 側では FLTNativeAdFactory を登録して、Swift で NativeAdView を作っています。
今回だと MediaView を正方形にして、その下に Ad バッジと見出し、CTA ボタンを置いています。
この時点で、広告のサイズは2箇所で決まります。
- Flutter のグリッドが作るカードサイズ
- Swift の Auto Layout が要求する中身のサイズ
この2つが噛み合わないと、表示は壊れます。
特に2列グリッドは、端末幅が小さくなるとカード幅も小さくなります。
デザイン上の余白を全部引いたあと、ネイティブ側の固定サイズが本当に入るかを見る必要があります。
AdWidgetには枠を与える
Google のドキュメントにも、iOS では AdWidget を幅と高さが指定されたコンテナに置くように書かれています。
ネイティブ広告を Flutter の普通の Widget と同じ気持ちで扱うと、ここを見落とします。
今回のようにグリッドの子として置く場合でも、広告カード全体の大きさが確定していることが大事です。
広告カードの外側は通常カードと同じサイズ。
読み込み中も、失敗時も同じサイズ。
その内側だけ AdWidget、ローディング、ハウス広告で切り替える。
この設計にしておくと、ロード状態でホーム全体が動きません。
失敗時のハウス広告
AdMob の広告は常に返るわけではありません。
なので、失敗したときは自分の別アプリへの導線を出すようにしました。
これを入れておくと、広告が出ないときでも空白になりません。
もちろん収益という意味では AdMob の代わりにはなりません。
ただ、ホームの見た目が崩れない。
個人開発アプリではそれだけでも結構うれしいです。
まとめ
Flutter でネイティブ広告をホームのカードに混ぜる場合、見ておくところはこのへんでした。
- 表示 index とデータ index を分ける
- 広告 item も通常 item と同じサイズで扱う
- Flutter 側の枠とネイティブ側の Auto Layout を両方見る
- iOS の
AdWidgetには幅と高さのある枠を与える - 失敗時も枠を消さない
広告の実装というより、リストUIに特殊な item を混ぜる実装ですね。
AdMob の話をしているつもりが、最終的には普通にレイアウト設計の話になってしまいました。
それではまた。
ぜひダウンロードして使ってみてね！