第7回Flutterもくもく会参加レポート(Admob設定編)

はじめに

2020年7月12日にZoomにてFlutterもくもく会を実施したので、
そのレポートになります。個人的所感メインです。
何かご意見などありましたらよろしくお願いします。
話題になった内容をトピックとして記載します。

もし良ければ過去のものもご覧ください。

• 第1回
• 第2回
• 第3回
• 第4回
• 第5回
• 第6回

トピック

今回のもくもく会で出た話題の一部をピックアップ。
今回は個人開発している方が多かったので色々聞いちゃいました。

データベース何使ってる？

ローカルだとSQLiteで、リモートだとFireStoreがやはり便利そう。
手軽に検索機能を実現してるケースも今回聞けてよかった。

プライバシーポリシーとかどうしてるか？

生成してくれるサービスを教えていただきました。
DeepL先生になげればだいたいなんとかしてくれそう。

@takuさんありがとうございました。

Admob設定

個人開発しているアプリもだいぶ佳境になってきたので、最後に残ってたAd設定と格闘してました。

基本的には[Flutter]バナー広告をWidgetに埋め込むを参考に公式ものはやめて、admob_flutterを利用しました。

なぜfirebase_admobを使わなかったか

最初は公式出してるし、それでええやんのお気持ちで利用を検討しました。

• ウィジェットじゃないので、描画ライフサイクルを管理しないといけない
  • ウィジェットじゃない何かなので画面遷移の度にdiposeなどの管理が必要。そのままだと残ってしまう。
• ボトムバーのサイズ取得が必要
• サイズ管理が面倒
  以上の理由からやめました。

なぜadmob_flutterを採用した理由

一方でadmob_flutterはウイジェット扱いなんで描画後の高ささえ取得できれば諸々の問題はクリアしそうだったので、採用しました。

一方でデメリットも存在し、公式はMobileAdTargetingInfo
を設定できるのでパーソナライズできる分CPMは高く見込めるので、業務で使うならそっちかなという印象でした。

issueで議論はさている感じなのでこれからに期待ですね。リポジトリの更新も活発なので個人的には好印象でした。
https://github.com/kmcgill88/admob_flutter/issues/162

どう実装したか

こんな形で描画後にサイズをコールバックする形で親ウィジェットで調整できるように実装しました。
雰囲気はこんな形です。これを呼び出して親側が適宜高さを調整する形で実装しました。

• 親ウィジェット(一部)

     SafeArea(
          child: Stack(children: [
        Padding(
          padding: EdgeInsets.only(
              top: 10, left: 10, right: 10, bottom: 10 + height),
          child: ~~~何か描画要素〜〜〜
        ),
        Positioned(
            bottom: 0,
            child: BannerView(onResize: (Size size) {
              setState((){
                  height = size.height;
              })
            }))

• バナー用ラッパーウィジェット

class BannerView extends StatefulWidget {
  const BannerView({this.onResize});

  final Function(Size size) onResize;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return BannerViewState();
  }
}

class BannerViewState extends State<BannerView> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final AdmobBannerSize adSize =
        AdmobBannerSize.ADAPTIVE_BANNER(width: size.width.toInt());
    notifySize(adSize);
    return AdmobBanner(adUnitId: BannerAd.testAdUnitId, adSize: adSize);
  }

  Future<void> notifySize(AdmobBannerSize adSize) async {
    final Size result = await Admob.bannerSize(adSize);
    widget.onResize(result);
  }
}

とくにライブラリに付属しているbannerSizeが超便利で、
基本的にはネイティブに問い合わせないとサイズがわからないものを、いい感じで扱いやすくしているのもgood pointでした。

 final Size result = await Admob.bannerSize(adSize);

一応はそれっぽくできた

※画面は開発中のタイマーアプリのものです

不安

webviewが不安定でたまに死んでるっぽいのが気になる…

このあたりの事象は要チェック
https://github.com/flutter/flutter/issues/33511

iOSのビルドついて

追記(2020年07月26日）
現状そのままだと依存関係で失敗してビルドに失敗する
方法が分かり次第追記します。
どうやら広告ユニットのIDと広告IDの記載をiOS版での記載が間違っていました。
それに加えてビルド時のキャッシュが悪さしていたので、下記の２点で一応はなおりました。

• info.plistの記載の確認
• flutter clean

おわりに次回開催と宣伝

こちらで定期的にもくもく会を隔週の頻度で実施予定です。次回は7月26日を予定しています。

LTなど発表したい方いましたら @glassmonekeyにご連絡いただけますと嬉しいです。LTの練習とかも大歓迎です。

下記のコンパスも良ければ登録お願いします。これを機に一緒に始めましょう
https://flutter-okurayama.connpass.com/

感想というかメモ

広告設定したらプライバシーポリシーとかで一応リリース〜〜〜