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
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
110
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
「Linux」という言葉が指すもの
sat
PRO
4
140
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
960
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
200
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
150
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Music & Morning Musume
bryan
46
6.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Making Projects Easy
brettharned
117
6.4k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Documentation Writing (for coders)
carmenintech
74
5k
Designing for Performance
lara
610
69k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
RailsConf 2023
tenderlove
30
1.2k
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コードは(株)デンソーウェーブの登録商標です