Help us understand the problem. What is going on with this article?

cordova-plugin-admob-freeでInterstital not ready yetエラー

More than 1 year has passed since last update.

最近(2018年10月)、Ionic3でAndroidアプリを作って、Play Storeで公開しました。

そこに至るにはいろいろと罠がありましたので、その記録を思い出せるうちに書いて残しておこうと思います。

困ったり解決したりする度にツイートしてたからいけるはず……!!

いくつかの記事にわけて、シリーズとしてまとめておきます。

なお、なんとかリリースできたアプリはこちら。日本語入力速度を測定します。→フリックとローマジ 〜日本語入力スピード測定〜

シリーズ一覧

cordova-plugin-admob-free

2018年10月15日現在、Ionicで使えるCordovaプラグインのうち、AdMobを導入するためのものは2つあって、片方はお金を払わないと収益の一部を持っていかれるようです(恐らく正確には、広告インプレッションの一部を持っていかれる)

で、そういうことがなく、完全無料を謳っているのがこちらのcordova-plugin-admob-freeです。

https://ionicframework.com/docs/native/admob-free/

https://github.com/ratson/cordova-plugin-admob-free

これの使い方で一部困った症状があったので、その症状と対策を紹介します。

症状

こことほぼ同様です。

https://github.com/ratson/cordova-plugin-admob-free/issues/118

要約すると、

Interstitial広告を、きちんとprepare().then(()=>show())という形で、prepareの完了を待ってから表示するようにしているのに、

なぜかUncaught (in promise): Interstital not ready yetというエラーが出る

というものです。

バナー広告ならこの書き方で問題なかったのに。

こちら、原因は結局よくわかりませんでしたが、どうも、

この書き方をしているにもかかわらず、きちんと準備完了を待ってくれていないようです。

その証拠に、上記リンクを読んでみると、「prepareを実行してから物理的に2秒待ってshowするとうまくいく」という記述があります。

ですがまあ、その方法だと、2秒以内に読み込んだ時も2秒待っちゃうし、2秒で読み込めなかったら相変わらずエラーだし、ちょっとまずいですね。

ちゃんと、順序正しく実行するように書いてみましょう。

対策

そこで、Promiseのthenに頼るのをやめて、「準備完了イベントをトリガーに、表示処理を動かす」という方針で実装したらうまくいきました。

が。

イベントまわりのコーディングをどんな感じでやったらいいのかが全然説明されておらず、やや苦労しましたので、最終的にどうしたかを紹介します。

コードはこんな感じ。

...
  constructor(..., private admobFree: AdMobFree, ...) { }
...
      admobFree.interstitial.prepare();//prepareは単体で実行
      //以下、各イベントに対する応答を登録しておく
      admobFree.on(admobFree.events.INTERSTITIAL_LOAD).subscribe(()=>{
        admobFree.interstitial.show();//広告表示
      });
      admobFree.on(admobFree.events.INTERSTITIAL_LOAD_FAIL).subscribe(()=>{
        インタースティシャルがロードできなかった時の処理;
      });
      admobFree.on(admobFree.events.INTERSTITIAL_CLOSE).subscribe(()=>{
        インタースティシャル広告を閉じた時の処理;
      });

解説していきます。

admobFree.on().subscribe

admobFreeのonメソッドは、Observableを返します。Observableとは、RxJSライブラリを読み込むと使えるようになる、Promiseみたいなものです。IonicやAngularでは必須となっています。

Promiseの場合は.thenにその後の処理を書きますが、Observableの場合は.subscribeの中にその後の処理を書きます。

今回は、「広告のロード完了時」「広告のロード失敗時」「広告を閉じた時」の3つのタイミングで処理を登録しておきたいので、3つ書いてあります。

別にこの順に実行されるとかいうわけではないです。各イベントに対する応答を登録しておくイメージ。

イベントの名前

実は一番困ったのがここです。

創出されるイベントの一覧はどこにあるの???ということ。

で、ここにあるのを見つけました。

https://github.com/ionic-team/ionic-native/blob/master/src/%40ionic-native/plugins/admob-free/index.ts

はい。完全にソースコードです。時には見なきゃいけないですね〜〜〜。

ここの124行目から書いてあります。(2018年10月15日現在)

ここを参考にイベントの名前を突き止めれば、

admobFree.on(admobFree.events.INTERSTITIAL_LOAD).subscribe(()=>{
  admobFree.interstitial.show();
});

みたいに書けますね。これでOKです。

ということで、この記事は以上です。

結局、なんでprepare().then(()=>show())という形では駄目なんでしょうね…。

agajo
あんなに勉強して、親に高い予備校代も出してもらって東大に入り、卒業したのに、今では家と食事を親に頼りながら、年金と住民税を払うためにトイレ掃除をしている者です。
https://portal.oka-ryunoske.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした