Jetpack Compose x AdMob

1. Jetpack Compose x AdMob kkkkan(@kkkkan_git) International Women's Day 2024 at GDG Shikoku
2. 自己紹介 kkkkan 　 @kkkkan_git 　　https://github.com/kkkkan https://play.google.com/store/apps/developer?id=kkkkan 2017~ Androidアプリエンジニア 2022/06 ~ ライフログテクノロジー株式会社所属 健康管理アプリ「カロミル」　　 のAndroid版の開発を担当しています
3. 「カロミル」とは - 手軽に食事等の記録が出来る健康づくりサポートアプリです。 - 現在ユーザー数330万超!
4. 「カロミル」とは よければダウンロードしてみてください！ Android iOS
5. アジェンダ
6. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
7. 環境 今回の発表は - Compose compose-bom:2023.03.00 - AdMob v22.6.0 の環境で作成されています。
8. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
9. AdMobとは Google製の、スマホアプリ向けネットワーク広告 https://admob.google.com/intl/ja/home/
10. Androidネイティブ、iOSネイティブ、FlutterなどのSDKが 用意されている
11. バナー ネイティブ インタース ティシャル リワード ・バナー型の広告 ・実装が楽 ・1つの広告がパーツに分かれ てやってくる。 ・それで自分でUIを組む ・故に一番自然な形で広告を 組み込めるが実装が大変。 ・全画面広告 ・ユーザー体験は損ないや すいが収益はよい。 ・実装は楽。 ・全画面広告 ・唯一、ユーザーが能動的に表示する 用の広告。(漫画アプリで「広告を見て 一話無料！」とかはこれ ) ・ユーザーが望んで出す広告なので表 示時間の長く報酬も一番よい傾向。 何種類か広告が用意されている ※今回は触れないですが、これら以外にもリワードイン タースティシャルやアプリ起動時広告もあり
12. Android版SDKの問題 現時点で、広告のコンポーネントにCompose verがない 公式ドキュメントのバナー広告の実装例 https://developers.google.com/admob/andr oid/banner?hl=ja →特にバナー広告・ネイティブ広告は自分で Viewを作ってaddViewするつくりなので フルComposeのアプリに組み込むのはちょっ と面倒
13. 実際に最近Composeで作ったアプリにバナー広告を組み 込んだ時に、最初失敗したのが今回の発表の動機 ちなみにこちらのアプリです (ちょっと宣伝 )👉 「配当利回り計算アプリ」 https://play.google.com/store/apps/details?id=com. kkkkan.dividendcalculationapp
14. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
15. バナー広告 実装手順＠公式ドキュメント https://developers.google.com/admob/android/banner? hl=ja
16. Composeで使うなら... 🤔 AndroidViewを使いそうだな..
17. Composeで使うなら... 🤔 こんな感じ！
18. Composeで使うなら... 🤔 こんな感じ！
19. なにがイマイチか ・loadAdをfactoryでやってしまっているのでrecomposeのたびに loadAdが走ってしまう →必要のないリロードは収益に× & ちらついてUI的にも×
20. じゃあ.... 😀 ActivityでAdViewインスタンスは作成 &loadAdは済ませておいて、AndroidView ではそれを表示するだけにすれば！
21. 😀 こんな感じ！ @Composable外でAdViewを作成して AndroidViewでは表示するだけ！
22. 😀 こんな感じ！ @Composable外でAdViewを作成して AndroidViewでは表示するだけ！
23. なにがダメか ・同じバナーを、Stateの変更に応じて使い分ける複数の Composableで、共通で使いまわしている場合などに「別の親にadd されたままのViewを別の親に追加しようとしているよ」と例外が発生 する
24. じゃあ.... 😎👌 AndroidViewでは ・AdViewを入れる親のViewGroupを作成 してそこにaddView ・加えてaddView前にAdViewにparentが あればremoveAllViews してやればよさそう
25. 最終形 😎👌 @Composable外でAdViewを作成して (ここまでは先程と 同じ) ・AdViewを入れる親の ViewGroupを作成してそこに addView ・加えてaddView前にAdViewに parentがあれば removeAllViews
26. 😎👌 表示成功！
27. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
28. インタースティシャル広告 実装手順＠公式ドキュメント https://developers.google.com/admob/android/interstiti al?hl=ja
29. Composeで使う場合 ・ViewModelに広告読み込み機構を作成
31. ・UI側で、広告を読み込み始めたいタイミングで読み込み メソッドを呼び出し ここでは仮にテキスト をクリックした時に、読 み込み開始 UI内の処理
32. ・ViewModelのUiStateに広告表示フラグを作成 ViewModel内の設定
33. ・読み込み済み広告の表示メソッドも作成 ViewModel内の設定
34. ・また別ファイルでActivityを取得するCompositionLocalも 作成 参考 : https://stackoverflow.com/questions/64675386/how-to-get-activity-in-compose その他の場所の設定
35. ・ActivityのsetContentで自身をprovideしておく Activity内での処理
36. ・UI側で、広告を表示したいタイミングで表示フラグを立て る ここでは仮にテキスト をクリックした時に、表 示 UI内の処理
37. ・Screenのトップなど、適切な位置で広告表示フラグの監 視&広告表示メソッドの呼び出し このときLocalActivity が必要になってくる UI内の処理
38. 😎👌 表示成功！
39. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
40. ネイティブ広告 基本的なポイントはバナー広告時と同様 ・Activityで広告インスタンス(NativeAdView)作成+表示調整+loadAdは済ませておい て、Compose内ではAndroidViewでそれを表示するだけ ・AndroidViewのfactoryでは、広告(NativeAdView)を入れる親のViewGroupを作成し て広告はそこにaddView ・加えてaddView前に広告にparentがあればremoveAllViews
41. ・Activityで広告インスタンス(NativeAdView)作成+表示調 整+loadAdは済ませておく
42. ・AndroidViewのfactoryでは、広告(NativeAdView)を入 れる親のViewGroupを作成して広告はそこにaddView ・加えてaddView前に広告にparentがあれば removeAllViews
43. 😎👌 表示成功！
44. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
45. リワード広告 基本的なポイントはインタースティシャル広告時と同様 ・ViewModelに広告読み込み機構・読み込み済み広告の表示メソッド・UiStateに広告 表示フラグを作成 ・UI側では、広告を読み込み始めたいタイミングで読み込みメソッド・表示したいタイミン グで表示フラグを立てる・Screenのトップなど、適切な位置で広告表示フラグの監視& 広告表示メソッドの呼び出し ・(インタースティシャル広告と共通 : 現在のActivityを取得するCompositionLocalを用 意する)
46. ・ViewModelに広告読み込み機構・読み込み済み広告の 表示メソッド・UiStateに広告表示フラグを作成
48. 広告を見たリワード(例 : 一話無料の権利)を 付与する処理を出来るよ うにすることが必要
49. ・UI側では、広告を読み込み始めたいタイミングで読み込 みメソッド・表示したいタイミングで表示フラグを立てる ・Screenのトップなど、適切な位置で広告表示フラグの監 視&広告表示メソッドの呼び出し
52. 😎👌 表示成功！
53. 1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~ 6.まとめ
54. ・バナー広告とネイティブ広告の「広告Viewを画面に追加」して使用する広告では Compose外で広告Viewを作成して使いまわす。 ・AndroidViewで表示するときは、ViewGroupにくるんで親Viewがあるように制御&表示 前に親Viewがあればremoveする。 ・インタースティシャル広告とリワード広告は「今のActivityをCompose内で取得する機 構」を作成 ・ViewModelで広告読み込み&表示フラグを用意してUI側でハンドリング＆監視
55. ・以上、この発表が他の方の AndroidやJetpack ComposeやAdMobへの興味喚起/使 用時に助けに少しでもなれたらうれしいです。 ・スライドで使用したコードは全てGithubにアップロードしてあります。 https://github.com/kkkkan/AdMobWithComposeSampleApp (・いつの日かAdMob SDKがCompose対応することを祈ります...🙏) ・スライド内のQRコードの作成に当たっては「QRのススメ」様を利用いたしました。あり がとうございます。https://qr.quel.jp/ ※QRコードは(株)デンソーウェーブの登録商標です