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
570
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.7k
Other Decks in Technology
See All in Technology
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
220
Wasmで社内ツールを作って配布しよう
askua
0
150
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
190
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
5
540
ファインディにおける Dataform ブランチ戦略
hiracky16
0
220
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
760
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
290
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
260
robocopy の怖い話/scary-story-about-robocopy
emiki
0
410
[MIRU2025]Preference Optimization for Multimodal Large Language Models for Image Captioning Tasks
keio_smilab
PRO
0
120
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
280
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Thoughts on Productivity
jonyablonski
69
4.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Making Projects Easy
brettharned
117
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Docker and Python
trallard
45
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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コードは(株)デンソーウェーブの登録商標です