Android 15 でウィジェットピッカーのプレビュー画像をGlanceで魅せたい/nikkei-tech-talk-27-1

2024/11/21開催 NIKKEI Tech Talk #27 「日経電子版モバイルアプリ特集 iOS・Android 技術で報道を進化させる開発の現場」
日本経済新聞社 小倉さんの発表スライドです。

Transcript

1. 2024/11/21 日本経済新聞社　アプリチーム 小倉悠里 Android 15 で ウィジェットピッカーの プレビューを Jetpack Glance で魅せたい NIKKEI TECH TALK #27 魅せたかったけど一旦見送った話
2. ハッシュタグ #nikkei_tech_talk • デジタル編成ユニット アプリチーム • 小倉悠里 （おぐら ゆり） • 2023年2月 キャリア入社 • DroidKaigi 2023, 2024では日経での開発経験を元に登壇 ◦ できる！アクセシビリティ向上 https://2023.droidkaigi.jp/timetable/495062/ ◦ 分析に裏打ちされたアプリウィジェット開発 - Jetpack Glanceとともに https://2024.droidkaigi.jp/timetable/694104/ 自己紹介 2 外部登壇を後押しして もらえるチームです！
3. ハッシュタグ #nikkei_tech_talk DroidKaigi 2024 「分析に裏打ちされたアプリウィジェット 開発 - Jetpack Glanceとともに」 の Ask the Speakerにて 話題に上がった2テーマを セッション1, 2に分けてお話しします 何の話？ 3 https://2024.droidkaigi.jp/timetable/694104/
4. ハッシュタグ #nikkei_tech_talk DroidKaigi 2024でもウィジェットピッカーのプレビューについて 触れましたが、今回は Android 15の新機能 にフォーカスして紹介します 1. 前提おさらい 2. Android 15で登場した動的なプレビュー生成 - generated previews 3. 日経電子版での対応検討 セッション1 ： Android 15 で ウィジェットピッカーの プレビューを Jetpack Glance で魅せたかったけど一旦見送った話 4
5. ハッシュタグ #nikkei_tech_talk • Jetpack Glance Jetpack Composeの宣言的UIのアプローチを ウィジェットに取り入れたフレームワーク • ウィジェットピッカー （右スクショ） ウィジェット設置時に出てくるもの ※ なかでも赤枠で囲った部分を本発表では「プレビュー」と呼ぶ 前提おさらい 5
6. ハッシュタグ #nikkei_tech_talk • ウィジェットピッカーの表示方法は大きく3通り存在 前提おさらい 6 ホーム画面長押し アプリアイコン長押し アプリ内導線
7. ハッシュタグ #nikkei_tech_talk 😀 Jetpack Glanceのプレビュー これまで 7 Glanceでウィジェットを実装できた！ ウィジェットもXMLのレイアウトが 不要の時代が到来〜〜！ さてウィジェットピッカーの プレビューはどうやって指定するのかな〜 ワクワク
8. ハッシュタグ #nikkei_tech_talk 😢 Jetpack Glanceのプレビュー これまで 8 せっかくGlanceでウィジェットを実装したのに プレビュー用の 画像 or XMLレイアウトが必要... ユーザーの表示・文字サイズ設定や、ライト/ダークモード、 ダイナミックカラーに従ったプレビューを 表示するためにはXMLレイアウトが必要... 現実
9. ハッシュタグ #nikkei_tech_talk • generated previews ◦ https://developer.android.com/about/versions/15/features#gen-previews • GlanceウィジェットからRemoteViewsを生成し、プレビューとして使用可能 • 実装はDroidKaigiの資料（p.80）をチェック ✅ Android 15で登場した 動的なプレビュー生成 9
10. ハッシュタグ #nikkei_tech_talk • Glanceウィジェットからプレビューを生成できる → XMLレイアウト不要 💪 • ユーザーが実際にウィジェットを設置した時の見た目に忠実 ◦ 表示・文字サイズ設定、ライト/ダークモード、ダイナミックカラー ◦ レスポンシブデザイン ◦ ユーザー固有の情報や最新情報の表示 動的なプレビュー生成の強み 10
11. ハッシュタグ #nikkei_tech_talk • プレビュー更新はプッシュ型 適切なタイミングでプレビュー更新が必要 ユーザーのプレビュー表示タイミングを検知できない • 更新回数には上限あり Pixel7では1時間に2回まで • 引き続きXMLでの実装も必要 Android15をminSdkにするのは当分先... 動的なプレビュー生成の注意点 11
12. ハッシュタグ #nikkei_tech_talk 日経電子版での対応検討 - 検索&メニューウィジェット • 検索・メニューへのショートカットを提供 • 実装イメージ 静的な情報 → アプリ初回起動時に１度のみ、プレビュー更新 12
13. ハッシュタグ #nikkei_tech_talk 日経電子版での対応検討 - 検索&メニューウィジェット • 対応検討 プレビューと実際の設置後の見た目がほぼ同じ → 既存のプレビューはレスポンシブには対応していないが、影響があるケースは少ない 13 設置後 プレビュー 実装コストは低いが、実装のメリットが見込めず対応は見送った
14. ハッシュタグ #nikkei_tech_talk 日経電子版での対応検討 - 記事一覧ウィジェット • 日経電子版の主要記事の一覧を提供 14
15. ハッシュタグ #nikkei_tech_talk AppWidgetManager.getInstance(context).setWidgetPreview( ComponentName(context, NewsWidgetProvider::class.java), AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN, NewsWidgetForPreview().compose(context), ) 日経電子版での対応検討 - 記事一覧ウィジェット • 実装イメージ アプリ内の主要記事一覧更新時に、プレビューも更新 　 → 同じ情報が表示されるため プレビュー専用のGlanceAppWidgetを実装 　→ ウィジェット本体とデータ取得ロジックを切り離すため UIパターンが異なるため （プレビューではローディングUIが不要、など） 15 ウィジェット 本体と共通 プレビュー専用
16. ハッシュタグ #nikkei_tech_talk 日経電子版での対応検討 - 記事一覧ウィジェット • 対応検討 記事一覧は更新のある情報 → 動的なプレビュー更新と相性が良い✨ しかし現状のプレビューのままでも大きな不都合はない → 古見えしない工夫をしているため 16 相性は良いが、ウィジェット設置率への貢献が見込めず対応は見送った • 年情報を入れない • マーケット情報を入れない プレビュー
17. ハッシュタグ #nikkei_tech_talk 日経電子版での対応検討 - 今後...？ 既存ウィジェットを置き換えるほどの効果を見込めなかったため対応を見送った 17 既存ウィジェットのリニューアルや新規ウィジェット開発の際には取り入れたい 💪 が
18. ハッシュタグ #nikkei_tech_talk • 固定のUIだと設置後のイメージがしにくいウィジェット • パーソナライズされた表示を行うウィジェット ◦ 連絡先 ◦ カレンダー ◦ ユーザーのブックマークを利用したもの どのようなウィジェットと相性が良さそう？ 18 ※ 実装されていそうなアプリを探してみましたが、見当たりませんでした これからが楽しみです😀
19. 19 NEXT → セッション2： Android でウィジェットサイズを 固定したい時の困りごととその対処法