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
280
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.4k
Other Decks in Technology
See All in Technology
How CERN serves 1EB of data via FUSE
ennael
PRO
0
15k
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
2
210
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
140
MLOpsの「あるある」課題の解決と、そのためのライブラリgokart
mski_iksm
1
150
REST API Design Pitfalls
victorrentea
1
500
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
280
仮想化って何だろう
shkoga
0
140
Hazard pointers with reference counter
ennael
PRO
0
100
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
260
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
2.9k
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
12k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
KATA
mclloyd
27
13k
Clear Off the Table
cherdarchuk
91
320k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Music & Morning Musume
bryan
46
6.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Being A Developer After 40
akosma
84
590k
The Invisible Side of Design
smashingmag
297
50k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Embracing the Ebb and Flow
colly
83
4.4k
Code Review Best Practice
trishagee
62
16k
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コードは(株)デンソーウェーブの登録商標です