「adMob」の記事 - Crieit

Flutterの新しいAdMob SDKを試してみた

2021-03-04T10:28:37+09:00

Google公式で、ネイティブのラッパーではないちゃんとしたFlutterのAdMob SDKがついにベータになったようですので動かしてみました（Android）。AdMob周りはほんとに使いづらくで困っていたので個人的にはかなり朗報です。

ほらみんな、Flutterの新しいAdMob SDKでバナーがウィジェット化したやつ動かせたぞーーーーー！！！！！！！ pic.twitter.com/AH0vhAEd9D
— だら🎄2/22～28開催Webサービス1週間開発イベ (@dala00) March 4, 2021

上記の動画のように、ラッパーライブラリでなくなったことにより（かな？）、ちゃんとスクロールに追従したり、ウィジェットの重なりにも対応するようになりました。

Flutter Engageで発表された感じでしょうか？　一緒に公開されたアナウンスに詳細は書かれています。

What’s New in Flutter 2. by Chris Sells | Mar, 2021 | Medium | Flutter | Flutter

使い方

Google Mobile Ads SDK for Flutter自体はこちらです。

https://pub.dev/packages/google_mobile_ads

以下試したログですが適当に試したので適当です。

インストール

dependencies:
  google_mobile_ads: ^0.11.0+1

AndroidManifestに広告のアプリIDを入れます。

あとGradleのバージョンが3.5.0とかの低いやつだとビルド時に AAPT: error: unexpected element found in のようなエラーになるようですのでいい感じのバージョンに上げましょう。僕は3.5.4で試しました。

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.4'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }

参考
https://stackoverflow.com/questions/62969917/how-to-fix-unexpected-element-queries-found-in-manifest-error

読み込み

まずは初期化します。loadを呼ばなきゃいけないのでどこかで初期化します。

class _MyHomePageState extends State {
  BannerAd myBanner;

  bool isLoaded = false;

  @override
  void initState() {
    super.initState();
    initAd();
  }

  void initAd() {
    myBanner = BannerAd(
      adUnitId: 'ca-app-pub-****',
      // size: AdSize.getSmartBanner(Orientation.landscape),
      size: AdSize.banner,
      request: AdRequest(),
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          setState(() {
            isLoaded = true;
          });
        },
      ),
    )..load();
  }

スマートバナーも試そうとしましたが、取得できる広告サイズが -1 になって表示時にエラーになったのでとりあえず普通のバナーで試しました。

表示する

下記のような感じでリストの一部に入るようにしてみました。

  List _buildChildren() {
    final children = [];

    for (int i = 0; i < 50; i++) {
      if (i == 15) {
        children.add(isLoaded
            ? Container(
                alignment: Alignment.center,
                child: AdWidget(ad: myBanner),
                width: myBanner.size.width.toDouble(),
                height: myBanner.size.height.toDouble(),
              )
            : Container());
      } else {
        children.add(ListTile(
          title: Text(
            'test$i',
            style: TextStyle(color: Colors.black, fontSize: 18.0),
          ),
        ));
      }
    }

    return children;
  }

注意点

ページをpushする場合、同じ広告オブジェクトを使用するとエラーになります。表示するところ毎にバナーをロードした方が良いっぽいです。（ロードして表示するウィジェットを作ってそれを配置するようにしておくと良いでしょう）

あと、僕は動画生成するアプリを作っているのですが、pushしているすべてのページに広告を付けていると何故か動画が真っ白になってしまいました。試しに、pushする際に隠れるページの広告を非表示にしていくとちゃんと生成されるようになりました。謎ですがとりあえず回避方法です。

あとは広告を読み込むとコンテンツの位置がずれるので、もしかするとAdMob側から注意が来る可能性もあるかもしれません。サイズ指定の公告の場合は高さを固定するコンテナに入れておいた方が良いのかもしれません。

まとめ

とにかくFlutter直でAdMob対応してくれてるのは嬉しいですね。みなさんもどんどん使ってプルリクエストを送って安心して使えるようにしていってください！（人任せ）

GodotでiOSにてGoogle Mobile Ads SDK7.65.0以上を使う場合

2020-09-16T22:35:17+09:00

GodotのiOSでAdMobを使う場合に最新のGoogle Mobile Ads SDK7.65.0を使うと下記のようなエラーが出る。

ld: warning: Could not find or use auto-linked framework 'FBLPromises'
中略
"_OBJC_CLASS_$_JSContext", referenced from:

どうも依存関係がちゃんと解決されていないような感じ。

調べてみると下記の解決方法にたどり着いた。

Could not find or use auto-linked framework 'FBLPromises'

JavaScriptCore.frameworkというフレームワークを追加すればいいらしい。ちなみに使用しているプラグインは下記だが、まだ現時点ではこれが説明に入っていない。

https://github.com/kloder-games/godot-admob

GodotでAdMobを使う - iOSの場合

2020-05-06T00:18:18+09:00

GodotでiOSアプリにAdMobを表示する方法。Androidの場合は下記。

GodotでAdMobを使う - Androidの場合

実際にやったのはGodot3.2。Androidの場合とは違い、iOSの場合は自分でGodotのテンプレートをビルドしなければならないのでちょっと面倒くさい。

AdMobモジュールの取得

AdMobモジュールは下記。まずは下記のリポジトリをcloneしておく。

https://github.com/kloder-games/godot-admob

基本的にやり方はこのREADMEに書かれている。そちらの How to use の iOS というところ。この話の前提として、Godotのリポジトリと組み合わせてビルドが必要なため、こちらもcloneしておく必要がある。

https://github.com/godotengine/godot

AdMobモジュールをGodot側にコピーする

まずはgodot-admobリポジトリのadmobフォルダを、godotリポジトリのmodulesフォルダにコピーする。

Google Mobile Ads SDKを配置する（新）

2020/6にUIWebViewを含めたビルドではアップロードできなくなったため最新のSDKを利用できるようになった。README通りにやればよい（僕が書いてPR送った）。下記のファイルを admob/ios/lib に配置する。 put_GoogleMobileAds_framework_here のようなファイルがあるのでわかりやすい。

GoogleMobileAds.framework
GoogleAppMeasurement.framework
GoogleUtilities.xcframework
PromisesObjC.xcframework
nanopb.xcframework

Google Mobile Ads SDKを配置する（旧）

追記）UIWebView排除のため、既に最新のSDKを使えるようになっているため最新バージョンではこれは不要。（追記終わり）

次に公式のGoogle Mobile Ads SDKを配置する。現時点でのバージョン指定は7.41.0以下。ちなみにこのバージョンはもう公式ではダウンロードできないので、CocoaPodsを利用して取得した。

platform :ios, '9.0'

pod 'Google-Mobile-Ads-SDK', '7.41.0'

上記のPodfileを作って pod install。

admob/ios/lib に配置しろと書かれているが、これは先程godot側にコピーした方のフォルダ。godot側でビルドして使うため。put_GoogleMobileAds_framework_here と書かれたフォルダがあるので、そこにGoogleMobileAds.frameworkフォルダをコピーしてくる。

Godotをビルドする

これで準備ができたので、godotプロジェクト側をビルドする。詳しくはREADMEに貼られている下記リンクの通り。

http://docs.godotengine.org/en/stable/development/compiling/compiling_for_ios.html

sconsをインストールしてビルド

ビルドにはSConsというビルドツールを利用する。これはbrewでインストールできる。

brew install scons

ビルド方法は書かれている通り、下記の必要な方。

開発用

scons p=iphone target=debug

リリース用

scons p=iphone target=release

他にも、エミュレータ用や別のアーキテクチャの組み合わせなど、色々指定もできるためそれは必要であれば前述のリンクの解説を参考に。僕は上記の２つだけでやった。

これでbinフォルダにaファイルが出来上がるので、これをXcodeプロジェクト側のトップにあるaファイルと差し替えれば完成。

エラーが出たパターン１

ちなみに下記のようなエラーが出る場合があった。

scons: Reading SConscript files ...
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'
Failed to find SDK path while running xcrun --sdk iphoneos --show-sdk-path.

よくは分からないけど下記で改善できた。GitHubの方はいいねがいっぱいついてるコメントあたり。

https://qiita.com/shouta-dev/items/a8e4914ec4d88cffac10
https://github.com/facebook/react-native/issues/18408

エラーが出たパターン２

下記のようなエラーが出た。

scons: Reading SConscript files ...
Checking for C header file mntent.h... (cached) no
scons: done reading SConscript files.
scons: Building targets ...
[Initial build] Compiling ==> platform/iphone/godot_iphone.cpp
In file included from platform/iphone/godot_iphone.cpp:33:
platform/iphone/os_iphone.h:84:2: error: unknown type name 'VideoMode' [2]
        VideoMode video_mode;
         ^
platform/iphone/os_iphone.h:92:33: error: unknown type name 'VideoMode' [2]
        virtual Error initialize(const VideoMode &p_desired, int p_video_driver, int p_audio_driver);
                                        ^
platform/iphone/os_iphone.h:122:2: error: unknown type name 'InputDefault' [2]
        InputDefault *input;
         ^
platform/iphone/os_iphone.h:149:48: error: use of undeclared identifier 'InputDefault' [2]
        void joy_axis(int p_device, int p_axis, const InputDefault::JoyAxis &p_value);
                                                       ^
platform/iphone/os_iphone.h:166:36: error: unknown type name 'VideoMode' [2]
        virtual void set_video_mode(const VideoMode &p_video_mode, int p_screen = 0);
                                           ^
platform/iphone/os_iphone.h:167:10: error: unknown type name 'VideoMode' [2]
        virtual VideoMode get_video_mode(int p_screen = 0) const;
                 ^
platform/iphone/os_iphone.h:168:45: error: use of undeclared identifier 'VideoMode' [2]
        virtual void get_fullscreen_mode_list(List *p_list, int p_screen = 0) const;
                                                    ^
7 errors generated.
scons: *** [platform/iphone/godot_iphone.iphone.opt.arm64.o] Error 1
scons: building terminated because of errors.

Godot3.2にし、godotもgodot-admobも最新にしたらビルドできるようになった。

他にも、iOSの場合はgodot-admobの不具合が原因でだめな場合があった。2020/4月末あたりに解決のPRがマージされたので、それ以降はうまく行った。とにかくうまく行かない場合はissueを見て、改善していれば最新に、不具合発生の真っ最中であればちょっとコミットを戻してみたりして調整したりしなければならない。かなり面倒くさい。僕も何ヶ月も放置していてようやく対処できた。

Xcodeの設定

さきほどの５つのフレームワークをXcodeプロジェクト側にも追加する必要がある。Xcodeを開いたプロジェクトの中に参照で登録する。frameworkの読み込みパス設定に配置したフォルダの設定を追加する必要がある。xcframeworkの場合は直接Xcodeに登録するのではなく、中のios-armv7_arm64以下等にframeworkフォルダがあるのでそちらを利用する。パスの設定もそこ。

Godot側のコード

一応実際のコード。initのところでisRealを指定してあるので、デバッグのテスト広告コードを指定している部分は不要かもしれない。

if Engine.has_singleton("AdMob"):
    admob = Engine.get_singleton("AdMob")
    if OS.get_name() == 'iOS':
        # 一般向け（if文とは関係ない）
        admob.init(!OS.is_debug_build(), get_instance_id())
    else:
        # 子ども向けの例（if文とは関係ない）
        admob.initWithContentRating(!OS.is_debug_build(), get_instance_id(), true, 'G')
    if OS.is_debug_build():
        admob.loadBanner('ca-app-pub-3940256099942544/6300978111', false)
    else:
        if OS.get_name() == 'iOS':
            admob.loadBanner('iOS用の本番コード', false)
        else:
            admob.loadBanner('Android用の本番コード', false)

armv7のリンクエラー

ずっとarmv7のリンクエラーが出ていて断念していた時期があるのだが、Godotエディタ側の設定にアーキテクチャの選択があるので、Xcodeプロジェクトをエクスポートする前にそれでarmv7を外しておいたほうが良いかもしれない。このあたりハマると非常に面倒。（これはAdMobすら関係なかったかもしれないが一応メモ）

GodotでAdMobを使う - Androidの場合

2019-11-08T21:29:19+09:00

追記）Godot3.2以降は簡単になったので下記参照。

Godot3.2以降でAdMobを使う

追記終わり。

GodotでもAdMobを使うことが出来る。コード自体はGodot上にてGDScriptで書けばいいだけなので簡単だけど、ちょっと仕組み的には複雑かもしれない。ただ、やってみると、あーなるほど、そういう仕組で動いてるのか、と分かる。ちなみにGodot3.1.1現在。

iOSの場合はこちら。Godotのビルドの解説をしていたり、Godot3.2を使っていたり、Android、iOS両方に対応したGodotのコードの例もある。（ビルドはもしかしたらAndroid側は関係なくなっているのかもしれないが）

GodotでAdMobを使う - iOSの場合

モジュールを追加

具体的には下記のリポジトリにあるモジュールを利用する。

kloder-games/godot-admob: Module Admob for Godot engine

詳しい説明もここに書かれている。２つやり方があって、「Using precompiled templates (Second Option)」と書かれている方が簡単。そこの説明のhereと書かれているリンクをクリックすると下記に遷移する。

Shin-NiL/godot-custom-mobile-template: Godot Game Engine Custom Mobile Template

ここのReleaseに色々あるので、自分が使っているGodotのバージョンと同じ番号のものをダウンロードする。それを解凍したら、GodotのエクスポートメニューのAndroidの設定のところに、「Custom Package」という設定があるのでそこにDebugとRelease用のパッケージを指定する。

あとは説明にあるように下記のパーミッションを有効にしておく。

Access Network State
Internet

これは一体何をやっているのかというと、簡単に言えばAndroid Studioで作られたプロジェクトの部分がこのCustom Packageとして提供されている感じなのではないかと思う。なのでAdMobのようにネイティブ側で対応が必要な機能を提供する際にはそういったモジュールを追加してビルドされたCustom Packageを利用することで、Godot側でも利用できるようになる、という感じだと思われる。

実際問題Second Optionではない正規の方法では、モジュールを追加して自分でビルドしてくれ、という形になっている。今回はAdMobを使いたいだけなのでビルド済みのもので問題ないが、色々とモジュールを必要に応じて追加したプロジェクトを使う場合には自分でビルドしないといけないと思う。

が、Godot3.2からはもっと簡単にできるようになるよ、ということも最初のリポジトリの説明に書かれている。なのでまあとりあえず今はビルド済みのを使っておいたほうが楽かもしれない。

Godot側にモジュール追加設定

Custom Packageの準備ができたら、今度はGodotのプロジェクト側にモジュールの追加設定を行う。Godotのプロジェクトファイルがテキストファイルになっており、それを直接いじるので恐らくGodotを起動していると勝手に書き換えられて無効になってしまう。そのため一旦Godotを終了してから、下記のテキストをproject.godotに追加する。

[android]
modules="org/godotengine/godot/GodotAdMob"

AdMobを表示するコードを追加

そしたらあとはAdMobを表示するコードをシーンに追加するだけ。僕の場合は下記のようにした。デバッグ時にはテスト広告を表示し、且つAdMobモジュールが正常にロードできているかをLabelに表示して確認している。ちなみに実機でしか動作しない。

var admob = null

func _ready():
    if Engine.has_singleton("AdMob"):
        admob = Engine.get_singleton("AdMob")
        # 一般向けの場合
        # init(isReal, instance_id)
        # 子ども向けの場合
        admob.initWithContentRating(!OS.is_debug_build(), get_instance_id(), true, 'G')
        if OS.is_debug_build():
            admob.loadBanner('ca-app-pub-3940256099942544/6300978111', false)
            $UILayer/DebugLabel.set_text('ad initialized')
        else:
            admob.loadBanner('本番の広告ユニットID', false)
    else:
        if OS.is_debug_build():
            $UILayer/DebugLabel.set_text('ad not initialized')

ということでちょっと面倒くさい…けどビルド済みCustom Packageだとだいぶ楽。