Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Compose x AdMob
Search
kkkkan
April 19, 2024
Technology
1
590
Jetpack Compose x AdMob
kkkkan
April 19, 2024
Tweet
Share
More Decks by kkkkan
See All by kkkkan
DroidKaigi2022 Jetpack Composeを用いて、Canvasを直接触るようなコンポーネントを作成する方法
kkkkan
1
1.8k
Other Decks in Technology
See All in Technology
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
130
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
370
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
エラーとアクセシビリティ
schktjm
1
1.2k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
4
1.5k
2025年夏 コーディングエージェントを統べる者
nwiizo
0
160
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
390
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
ガチな登山用デバイスからこんにちは
halka
1
240
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Typedesign – Prime Four
hannesfritz
42
2.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Balancing Empowerment & Direction
lara
3
620
Transcript
Jetpack Compose x AdMob kkkkan(@kkkkan_git) International Women's Day 2024 at
GDG Shikoku
自己紹介 kkkkan @kkkkan_git https://github.com/kkkkan https://play.google.com/store/apps/developer?id=kkkkan 2017~ Androidアプリエンジニア 2022/06 ~
ライフログテクノロジー株式会社所属 健康管理アプリ「カロミル」 のAndroid版の開発を担当しています
「カロミル」とは - 手軽に食事等の記録が出来る健康づくりサポートアプリです。 - 現在ユーザー数330万超!
「カロミル」とは よければダウンロードしてみてください! Android iOS
アジェンダ
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
環境 今回の発表は - Compose compose-bom:2023.03.00 - AdMob v22.6.0 の環境で作成されています。
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
AdMobとは Google製の、スマホアプリ向けネットワーク広告 https://admob.google.com/intl/ja/home/
Androidネイティブ、iOSネイティブ、FlutterなどのSDKが 用意されている
バナー ネイティブ インタース ティシャル リワード ・バナー型の広告 ・実装が楽 ・1つの広告がパーツに分かれ てやってくる。 ・それで自分でUIを組む
・故に一番自然な形で広告を 組み込めるが実装が大変。 ・全画面広告 ・ユーザー体験は損ないや すいが収益はよい。 ・実装は楽。 ・全画面広告 ・唯一、ユーザーが能動的に表示する 用の広告。(漫画アプリで「広告を見て 一話無料!」とかはこれ ) ・ユーザーが望んで出す広告なので表 示時間の長く報酬も一番よい傾向。 何種類か広告が用意されている ※今回は触れないですが、これら以外にもリワードイン タースティシャルやアプリ起動時広告もあり
Android版SDKの問題 現時点で、広告のコンポーネントにCompose verがない 公式ドキュメントのバナー広告の実装例 https://developers.google.com/admob/andr oid/banner?hl=ja →特にバナー広告・ネイティブ広告は自分で Viewを作ってaddViewするつくりなので フルComposeのアプリに組み込むのはちょっ と面倒
実際に最近Composeで作ったアプリにバナー広告を組み 込んだ時に、最初失敗したのが今回の発表の動機 ちなみにこちらのアプリです (ちょっと宣伝 )👉 「配当利回り計算アプリ」 https://play.google.com/store/apps/details?id=com. kkkkan.dividendcalculationapp
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
バナー広告 実装手順@公式ドキュメント https://developers.google.com/admob/android/banner? hl=ja
Composeで使うなら... 🤔 AndroidViewを使いそうだな..
Composeで使うなら... 🤔 こんな感じ!
Composeで使うなら... 🤔 こんな感じ!
なにがイマイチか ・loadAdをfactoryでやってしまっているのでrecomposeのたびに loadAdが走ってしまう →必要のないリロードは収益に× & ちらついてUI的にも×
じゃあ.... 😀 ActivityでAdViewインスタンスは作成 &loadAdは済ませておいて、AndroidView ではそれを表示するだけにすれば!
😀 こんな感じ! @Composable外でAdViewを作成して AndroidViewでは表示するだけ!
😀 こんな感じ! @Composable外でAdViewを作成して AndroidViewでは表示するだけ!
なにがダメか ・同じバナーを、Stateの変更に応じて使い分ける複数の Composableで、共通で使いまわしている場合などに「別の親にadd されたままのViewを別の親に追加しようとしているよ」と例外が発生 する
じゃあ.... 😎👌 AndroidViewでは ・AdViewを入れる親のViewGroupを作成 してそこにaddView ・加えてaddView前にAdViewにparentが あればremoveAllViews してやればよさそう
最終形 😎👌 @Composable外でAdViewを作成して (ここまでは先程と 同じ) ・AdViewを入れる親の ViewGroupを作成してそこに addView ・加えてaddView前にAdViewに parentがあれば
removeAllViews
😎👌 表示成功!
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
インタースティシャル広告 実装手順@公式ドキュメント https://developers.google.com/admob/android/interstiti al?hl=ja
Composeで使う場合 ・ViewModelに広告読み込み機構を作成
None
・UI側で、広告を読み込み始めたいタイミングで読み込み メソッドを呼び出し ここでは仮にテキスト をクリックした時に、読 み込み開始 UI内の処理
・ViewModelのUiStateに広告表示フラグを作成 ViewModel内の設定
・読み込み済み広告の表示メソッドも作成 ViewModel内の設定
・また別ファイルでActivityを取得するCompositionLocalも 作成 参考 : https://stackoverflow.com/questions/64675386/how-to-get-activity-in-compose その他の場所の設定
・ActivityのsetContentで自身をprovideしておく Activity内での処理
・UI側で、広告を表示したいタイミングで表示フラグを立て る ここでは仮にテキスト をクリックした時に、表 示 UI内の処理
・Screenのトップなど、適切な位置で広告表示フラグの監 視&広告表示メソッドの呼び出し このときLocalActivity が必要になってくる UI内の処理
😎👌 表示成功!
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
ネイティブ広告 基本的なポイントはバナー広告時と同様 ・Activityで広告インスタンス(NativeAdView)作成+表示調整+loadAdは済ませておい て、Compose内ではAndroidViewでそれを表示するだけ ・AndroidViewのfactoryでは、広告(NativeAdView)を入れる親のViewGroupを作成し て広告はそこにaddView ・加えてaddView前に広告にparentがあればremoveAllViews
・Activityで広告インスタンス(NativeAdView)作成+表示調 整+loadAdは済ませておく
・AndroidViewのfactoryでは、広告(NativeAdView)を入 れる親のViewGroupを作成して広告はそこにaddView ・加えてaddView前に広告にparentがあれば removeAllViews
😎👌 表示成功!
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
リワード広告 基本的なポイントはインタースティシャル広告時と同様 ・ViewModelに広告読み込み機構・読み込み済み広告の表示メソッド・UiStateに広告 表示フラグを作成 ・UI側では、広告を読み込み始めたいタイミングで読み込みメソッド・表示したいタイミン グで表示フラグを立てる・Screenのトップなど、適切な位置で広告表示フラグの監視& 広告表示メソッドの呼び出し ・(インタースティシャル広告と共通 : 現在のActivityを取得するCompositionLocalを用
意する)
・ViewModelに広告読み込み機構・読み込み済み広告の 表示メソッド・UiStateに広告表示フラグを作成
None
広告を見たリワード(例 : 一話無料の権利)を 付与する処理を出来るよ うにすることが必要
・UI側では、広告を読み込み始めたいタイミングで読み込 みメソッド・表示したいタイミングで表示フラグを立てる ・Screenのトップなど、適切な位置で広告表示フラグの監 視&広告表示メソッドの呼び出し
None
None
😎👌 表示成功!
1. 導入 2. 実装ポイント~バナー広告~ 3. 実装ポイント~インタースティシャル広告~ 4. 実装ポイント~ネイティブ広告~ 5. 実装ポイント~リワード広告~
6.まとめ
・バナー広告とネイティブ広告の「広告Viewを画面に追加」して使用する広告では Compose外で広告Viewを作成して使いまわす。 ・AndroidViewで表示するときは、ViewGroupにくるんで親Viewがあるように制御&表示 前に親Viewがあればremoveする。 ・インタースティシャル広告とリワード広告は「今のActivityをCompose内で取得する機 構」を作成 ・ViewModelで広告読み込み&表示フラグを用意してUI側でハンドリング&監視
・以上、この発表が他の方の AndroidやJetpack ComposeやAdMobへの興味喚起/使 用時に助けに少しでもなれたらうれしいです。 ・スライドで使用したコードは全てGithubにアップロードしてあります。 https://github.com/kkkkan/AdMobWithComposeSampleApp (・いつの日かAdMob SDKがCompose対応することを祈ります...🙏) ・スライド内のQRコードの作成に当たっては「QRのススメ」様を利用いたしました。あり がとうございます。https://qr.quel.jp/
※QRコードは(株)デンソーウェーブの登録商標です