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

# はじめに 

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


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

* [第1回](https://qiita.com/glassmonkey/items/7dd8cf2037e17c5131f8)
* [第2回](https://qiita.com/glassmonkey/items/9ed36f0e8f27952c7c6d)
* [第3回](https://qiita.com/glassmonkey/items/95d470bc780e35d079fa)
* [第4回](https://qiita.com/glassmonkey/items/75f6df813d0458e9cf5b)
* [第5回](https://qiita.com/glassmonkey/items/84bf4810e10fbaa199af)
* [第6回](https://qiita.com/glassmonkey/items/b95acb92bb7736b1426f)

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

# データベース何使ってる？
ローカルだと[SQLite](https://pub.dev/packages/sqflite)で、リモートだと[FireStore](https://pub.dev/packages/cloud_firestore)がやはり便利そう。
手軽に検索機能を実現してるケースも今回聞けてよかった。

# プライバシーポリシーとかどうしてるか？
生成してくれるサービスを教えていただきました。
DeepL先生になげればだいたいなんとかしてくれそう。

[@taku](https://twitter.com/hara_taku_)さんありがとうございました。

https://app-privacy-policy-generator.firebaseapp.com/

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

基本的には[[Flutter]バナー広告をWidgetに埋め込む](https://qiita.com/gkn/items/f5fde5be608384f1a272)を参考に[公式](https://pub.dev/packages/firebase_admob)ものはやめて、[admob_flutter](https://pub.dev/packages/admob_flutter/versions/1.0.0-beta.5)を利用しました。

## なぜfirebase_admobを使わなかったか
最初は公式出してるし、それでええやんのお気持ちで利用を検討しました。
* ウィジェットじゃないので、描画ライフサイクルを管理しないといけない
  * ウィジェットじゃない何かなので画面遷移の度にdiposeなどの管理が必要。そのままだと残ってしまう。 
* ボトムバーのサイズ取得が必要
* サイズ管理が面倒
以上の理由からやめました。

## なぜadmob_flutterを採用した理由
一方で[admob_flutter](https://pub.dev/packages/admob_flutter/versions/1.0.0-beta.5)はウイジェット扱いなんで描画後の高ささえ取得できれば諸々の問題はクリアしそうだったので、採用しました。

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

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

## どう実装したか

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

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

```dart

     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;
              })
            }))
```

 * バナー用ラッパーウィジェット
 
```dart
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でした。


```dart

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



## 一応はそれっぽくできた
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/22c39a17-08e7-6fb7-49c0-74f0bdfedb16.png" width="360">
※画面は開発中のタイマーアプリのものです

## 不安
webviewが不安定でたまに死んでるっぽいのが気になる…
![スクリーンショット 2020-07-12 20.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/733e0efd-f285-6587-608d-35f6edb36b33.png)

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

## iOSのビルドついて
追記(2020年07月26日）

現状そのままだと依存関係で失敗してビルドに失敗する
方法が分かり次第追記します。

どうやら広告ユニットのIDと広告IDの記載をiOS版での記載が間違っていました。
それに加えてビルド時のキャッシュが悪さしていたので、下記の２点で一応はなおりました。

* info.plistの記載の確認
* `flutter clean`



# おわりに次回開催と宣伝
こちらで定期的にもくもく会を隔週の頻度で実施予定です。次回は7月26日を予定しています。

https://flutter-okurayama.connpass.com/event/182765/

LTなど発表したい方いましたら [@glassmonekey](https://twitter.com/glassmonekey)にご連絡いただけますと嬉しいです。LTの練習とかも大歓迎です。

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


# 感想というかメモ
広告設定したらプライバシーポリシーとかで一応リリース〜〜〜