[flutter]flutter_admobが非推奨になったのでgoogle_mobile_adsに移行する

みなさんご存知でしょうが、最近google_mobile_adsというパッケージが公開されました。広告に関するものだということで、flutter_admobはどうなるのかなと思っていたところ、なんと非推奨に。2021年4月で廃止だそうです。廃止って言葉が引っかかったので早々に移行します。

※思った以上に壮大な内容になりそうなので記事を分割する予定です。flutter2にあげた後特にfirebase関係でエラーが出て困っている方、経験した範囲内でよければですが、twitterで連絡いただければ優先的に記事書きます。

まずFlutterのアップデート

まずは flutter upgrade を行います。

その後、pubspec.yamlにてパッケージを変更。

dependencies:
  firebase_admob ←削除
  google_mobile_ads: ^0.12.1 ←追加

また、SDKバージョンも変更しておきます。

environment:
  sdk: ">=2.12.0 <3.0.0"

そしてプロジェクトフォルダでflutter pub getを実行すると、パッケージの入れ替えが完了しているはずです。

がしかし、次のエラーが。

pub get failed (1; So, because app depends on both
flutter_localizations any from sdk and firebase_auth ^0.18.3, version
solving failed.)

これらは新しいSDKバージョンに対応していないことが問題なようです。(Nullセーフティ)

なのでfirebase_authのバージョンをあげて再度実行すると、、他のfirebase関係もバージョンエラーが発生。

Because firebase_auth >=1.0.2 depends on firebase_core ^1.0.3 and lett depends on firebase_core ^0.5.2, firebase_auth >=1.0.2 is forbidden.

結局何度も繰り返し、最終的な状態がこちらです。一例として参考にしてください。他のパッケージでも出るかもしれませんが、その時は適宜新しいバージョンにして試してください。

  firebase_core: ^1.0.3
  firebase_auth: ^1.0.2
  google_mobile_ads: ^0.12.1
  flutter_twitter: ^1.1.3
  firebase_analytics: ^7.1.1
  firebase_messaging: ^9.1.1
  firebase_storage: ^8.0.2
  image_picker: ^0.7.4

…そうなんです。今回、軽い気持ちで作業を始めたのですが、関連するパッケージのコードも最新の実装方法へとアップデートする必要が出てきました。日頃からメンテしておけばこんなことにはならずに済んだのです。。。

とりあえずこの記事にはfirebase_admobからgogle_mobile_ads移行分に関するもののみ抜粋します。

結構変化あり

多分皆さん、load()をawaitして、その後すぐにshow()していたと思います。これでもたまに動くのですがなぜかうまく表示されないことが続きました。色々デバッグしていると、どうもload()をawaitしても、読み込みが終了してから次の行へ進む動作ではなくなったみたいです。

  InterstitialAd? interstitialAd;
  interstitialAd = InterstitialAd(
        adUnitId: adUnitId,
        request: AdRequest(),
        listener: AdListener(onAdLoaded: (ad) async {
          SystemChrome.setEnabledSystemUIOverlays([]);
          if (interstitialAd != null) {
            await interstitialAd!.show();
            interstitialAd = null;
          }
        }, onAdClosed: (ad) {
          SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
        }, onAdFailedToLoad: (ad, error) {
        }),
      );
  await interstitialAd!.load();

また、Interstitialを閉じるボタンが通知領域の裏に隠れてしまうバグが発生することがあるので、SystemChrome.setEnabledSystemUIOverlaysを使って、都度表示を切り替えています。

ビルドまでの道のり(iOS)

大変なのは純粋にFlutter2への対応でした。

いざビルドを実行すると、以下のエラーがiOSにて発生。

Warning: CocoaPods recommended version 1.10.0 or greater not installed.
Pods handling may fail on some projects involving plugins.
To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

どうやらバージョンをあげないといけないようです。

「pod repo update」したところ、以下のエラーが発生。

CocoaPods 1.10.1 is available.
To update use: `gem install cocoapods`

新しいバージョンにはinstallで更新してくださいとのこと。素直に「gem install cocoapods」するとまたもやエラー。

ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

どうやら権限の問題でインストールできない様子。ネットで調べたところ、以下のコマンドでインストールすれば良いとのこと。

sudo gem install -n /usr/local/bin cocoapods

その後、プロジェクトのiosフォルダにてpodfile.lockを削除し、再度「pod repo update」を行いました。

その状態でビルドをかけると、nullsafetyになっていないパッケージが存在しているため、エラーが出てしまいます。
エラーの内容はapp.frameworkが見つからないとかそんな内容でした。

~~~~~~~ Debug-iphonesimulator/App.framework" failed: No such file or directory (2)
done

なぜこのような文言のエラーが出たのかわかりませんが、vsCodeのデバッグタブを開き歯車からlaunch.jsonを開きます。そして以下を追加。

            "type": "dart",
            "args": [
                "--no-sound-null-safety" //追加

これでiOSはビルドが通るようになりました。

ついでにAndroidも対応

Androidもビルドを試してみると以下のエラー。

The build failed likely due to AndroidX incompatibilities in a plugin. The tool is about to try using Jetifier to solve the incompatibility.
[!] Flutter tried to create the file `android/settings_aar.gradle`, but failed.
To manually update `settings.gradle`, follow these steps:
    1. Copy `settings.gradle` as `settings_aar.gradle`
    2. Remove the following code from `settings_aar.gradle`:
        def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
        def properties = new Properties()
        assert localPropertiesFile.exists()
        localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
        def flutterSdkPath = properties.getProperty("flutter.sdk")
        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
        apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"

メッセージ的に、gradleのバージョンが怪しいと考え試しにflutter2の新規プロジェクトを作成してみたところ、android/build.gradleでの指定バージョンが既存のプロジェクトより上がっていました。

classpath 'com.android.tools.build:gradle:4.1.0'

これでビルドを開始するとまた次のエラーが。

 Minimum supported Gradle version is 6.5. Current version is 5.6.2. If using the gradle wrapper, try editing the distributionUrl in /Users/yuya/FlutterProjects/lett/android/gradle/wrapper/gradle-wrapper.properties to gradle-6.5-all.zip

ここは表示されている対処法とはちょっと違い、andrdoid/gradle/wrapper/gradle-wrapper.propertiesにて以下に変更。

distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip

さらに、どうもfirebase_messaging関係で実装していた部分の書き換えも必要だったため作業。
android/app/main/kotolin/app名/Application.ktを開き、以下に変更。

package アプリ名
import io.flutter.app.FlutterApplication
import io.flutter.plugin.common.PluginRegistry

import io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingPlugin

class Application() : FlutterApplication(), PluginRegistry.PluginRegistrantCallback {
  override fun registerWith(registry: PluginRegistry?) {
      val key: String? = FlutterFirebaseMessagingPlugin::class.java.canonicalName
      if (!registry?.hasPlugin(key)!!) {
          FlutterFirebaseMessagingPlugin.registerWith(registry?.registrarFor("io.flutter.plugins.firebase.messaging.FlutterFirebaseMessagingPlugin"));
        }
    }
}

さらに、android/app/build.gradleの方も各バージョン情報変更。

android{
    compileSdkVersion 30 //変更
    ......
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "app.name"
        minSdkVersion 23  //変更
        targetSdkVersion 30 //変更
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
}

自分の環境の場合、ここまできた後に以下のコマンドを実行することでやっとビルドが通るようになりました。長かった。。。

flutter clean
flutter pub cathe repair
flutter pub get

まとめ

少なくともadmob表示に関する変更点はほとんどなかったです。それよりも他のところが大変なことに。エラーでほとんどのファイルが真っ赤です。今後もflutter2に関する情報を発信できればなと思います!

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


Firebase Flutter
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました