この記事は Android チームによる Android Developers Blog の記事 " Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。また過去に本内容について詳しく解説いただいた動画はこちらからご覧いただけます。
2020 年、Mercari チームはアプリの技術的なインフラストラクチャを更新するという大きな取り組みを実施しました。当時、そのコードベースは 7 年前のもので、大きなアーキテクチャ更新を受けていませんでした。これは、チームが新しい機能を開発し、タイムリーなアプリアップデートをリリースするということに支障をきたしていました。この技術的負債を解決するために、Mercari は GroundUP プログラムと呼ばれる、Android を含むプラットフォーム全体のアプリケーションを完全に書き直す取り組みをリリースしました。
その目標は、拡張可能な設計で完全に近代化されたアプリケーションを作成することでした。アプリをリツールしている間、Mercari のデベロッパーは、ネイティブ UI を作成するための Android の最新の宣言ツールキットである Jetpack Compose に目を向けました。評価中、チームは Jetpack Compose で書き換えるとコードベースが整理され、アプリの見た目をよりコントロールするのに役立つことを学びました。
Mercari チームは、Jetpack Compose を使用して Android アプリのアーキテクチャと技術スタックを完全に書き換えました。Mercari のデベロッパーは新しいデザインシステムを作り、Compose を使って完全に統合し、新しい機能を簡単にテストして実装できるようにしました。この新しいデザインシステムを使用して、Mercari チームは 130 以上の UI 画面をマーケットプレイス用に書き換え、多くのコンポーネントの見た目を近代化しました。
Jetpack ライブラリの助けを借りて、Mercari のチームは書き換え中にレガシーコードをすべて削除し、コードベースを大幅に削減し、デベロッパーにとって管理しやすくしました。「コードは大幅に少なくなりましたが、実際には同じアプリです」と Mercari の Android テクノロジーリーダー、Allan Conda は述べます。「書き換えられたアプリのコード行数は約 35 万 5000 行少なく、これは以前よりも約 69% 少なくなっています。」
Mercari チームが最初に GroundUP プログラムを開始したとき、Jetpack Compose はデベロッパープレビューでのみ利用可能でした。UI を作成するための新しい宣言的なアプローチのために、Mercari チームは Jetpack Compose で完全にアプリを作成することにしました。しかし、それはまだ非常に新しいので、２つのツールキットを併用するためにはこれまでになかったエッジケースを解決する必要があることに気付きました。
例えば、Mercari の出品フォーム画面ではユーザーは出品したい商品の詳細を入力するように求められます。その後、ユーザーはデバイスのギャラリーから写真を選択し、ドラッグ ジェスチャーを使用してこの画面で並べ替えることができます。当時、ジェスチャー API は Jetpack Compose では利用できなかったため、チームは Compose の AndroidView を利用することで、ジェスチャーを扱える View を出品フォーム画面にシームレスに統合しました。これによって、この機能が Jetpack Compose で利用できるようになるまで、安定しているとはいえ一時的な形でドラッグ ジェスチャーを実装することができました。
Mercari チームは、2 つのツールキットのスイッチがいかに簡単であるかに感銘を受け、Compose と一緒に Views を使用することで、このようなエッジケースをよりうまくコントロールできるようになりました。Compose は現在、Gesture API をサポートしており、それ以来 Mercari デベロッパーは Compose のみを使用してドラッグ ジェスチャー コンポーネントを完全に作成し統合しています。
Jetpack Compose は Mercari が最初にこれを採用した当初に比べ非常に成熟し、今では Android デベロッパーのほとんどは、Android アプリが Compose で完全に書き込めるようになったため、両方のツールキットと相互運用する必要がなくなりました。
Mercari チームは Compose を使用して、アプリの安定版リリースに対する ベースライン プロファイル の生成を自動化し、それが非常に有益だと感じていました。標準の Compose ベースラインプロファイルを使用すると、使用しない場合に比べ、ホーム画面は最大 2 倍速くフレームをレンダリングします。さらにカスタムプロファイルを提供すると、標準のベースラインプロファイルを持つだけと比較して、最大 20％メルカリユーザーがスクロールする際に追加で高速化されます。
チームは、Android Macrobenchmark でのアプリのコア シナリオに基づいて、自動化されたパフォーマンス テストも作成しました。「Android Macrobenchmark を使用すると、起動、スクロール、および画面の読み込み時間のパフォーマンスを自動的にテストできます」と Allan は述べています。「現在、検索結果や商品の閲覧など、このようなテストでカバーされているコア シナリオが 6 つあります」
また、Mercari のデベロッパーは、リアルタイムアプリのパフォーマンスモニタリングツールである Firebase Performance Monitoring とカスタムコードを統合し、Compose 画面のスクロールパフォーマンスを計算しました。Firebase Performance Monitoring を使用して、Mercari チームは検索結果画面でのパフォーマンスの問題を検出しました。Mercari デベロッパーは Android Profiler を使用して問題を調査し、検索結果のスクロール時のフレーム レートが低いことがわかりました。これにより、レンダリングが遅くなる場面が約 23.6% 減少しました。
Mercari チームは Google の Compose のパフォーマンスのベスト プラクティス と Compose の安定性 (英語) を参照して、このフレーム レートの問題を解決しました。Mercari のデベロッパーは、アプリが Composables (英語) をスキップするように、 検索画面上の未使用の状態を外に取り出すことで、フレームレートを大幅に向上しました。
管理するコードが少ないため、Mercari デベロッパーは機能のテストと実装がはるかに簡単になりました。「新しい基盤を使って、ようやく多くのテストができます。ユーザーは Mercari アプリの新機能をより速い速度で期待できるでしょう。」と Allan 氏は述べています。
Mercari のデベロッパーはさらに Animation API を使用するアプリを開発できることを楽しみにしています。Compose を使用すると、コンポーネントのアニメーション化がはるかに簡単になり、Android UX の大幅に改善できる可能性があります。
Jetpack Compose で UI 開発を最適化しましょう。
Reviewed by Mari Kawanishi - Developer Marketing Manager, Google Play
この記事は Jolanda Verhoef による Android Developers Blog の記事 "Android Dev Challenge Finale: Weather app" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
#AndroidDevChallenge の最終週は、皆さんの創造性を輝かせましょう！先週はスピードの勝負でしたが、最終週となる今回で全力を出し切ってください。
UI はすべて Compose で構築する必要があります。気象データはダミーのもので構いません。提出するアプリは、最低でも英語をサポートする必要があります。
皆さんの作品は、以下の 4 つのカテゴリに基づいて審査します。
レイアウト、テーマ、グラフィックに関する Compose ドキュメントを確認し、美しいデザインの実装の参考にしてみましょう。アニメーションやジェスチャーの斬新な使用法も考えてみてください。コードの質は、アーキテクチャとテストによって改善できます。また、動作全般については、ユーザー補助機能を忘れずに確認するようにしましょう。
回答は、パブリック GitHub リポジトリで実装する必要があります。Github リポジトリ テンプレートのコピーを作成し、README の手順に従ってください。テンプレートには、Compose による基本的な Hello World! と継続的インテグレーション設定が含まれています。
Hello World!
※1 応募に関する詳細は必ず公式ルールをご確認ください。
今週も究極の 5G Google スマートフォン、Google Pixel 5 を獲得するチャンスです！4 つのカテゴリそれぞれの勝者と、最も優秀な作品に、Google Pixel 5 を進呈します。
Jetpack Compose の中核はデベロッパー コミュニティです。プロダクトをさらに使いやすく改善するために、皆さんのフィードバックをお寄せください。
この記事は Jolanda Verhoef による Android Developers Blog の記事 "Android Dev Challenge: Week 3 - Speed round" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
位置について... 用意… ちょっと待ってください！#AndroidDevChallenge 第 3 週の予定を空けておきましょう。本日 3 月 13 日に、同じタイムゾーンのデベロッパーとのスピード競争を開催します。日本の皆さんは、午前 10 時からのスタートです。Compose スキルが一番速い人が勝者ですので、ぜひチャレンジしてください。第 1 週と第 2 週の創造性あふれる作品はすべてすばらしいものでしたが、次に求められるのはスピードです。
UI はすべて Compose で構築する必要があります。また、課題のデザインで指定されるすべてのガイドラインに厳密に一致しなければなりません。実装にあたっては、テーマ、レイアウト、ナビゲーションに関する Compose ドキュメントを参考にしてください。ハンズオンの学習教材として Compose Pathway を試すこともできます。このチャレンジに役立つトピックを説明した Codelabs が含まれています。
回答は、GitHub リポジトリで実装する必要があります。こちらの Github リポジトリ テンプレートをコピーし、README に記載された手順に従ってください。テンプレートには、Compose による基本的な Hello World! と継続的インテグレーション設定が含まれています。
今週のチャレンジの賞品は、究極の 5G Google スマートフォン、Google Pixel 5 です。アジア太平洋地域タイムゾーンからの応募者の中で、課題のチャレンジを最速で実装して送信したデベロッパー 1 名に贈呈します。
この記事は Florina Muntenescu による Android Developers Blog の記事 "Android Dev Challenge: Week 2 - Countdown timer" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
3...2...1… 次のチャレンジの時間です！#AndroidDevChallenge の第 2 週にようこそ。第 1 週は、創造性あふれるたくさんの作品が寄せられ、とても楽しく見せていただきました。第 2 週の作品も楽しみにしています。では早速、今週のチャレンジを出題します。
UI はすべて Compose で作成する必要があります。実装にあたっては、状態とアニメーションに関する Compose ドキュメントを参考にしてください。ハンズオンの学習教材として Compose Pathway を試すこともできます。このチャレンジに役立つトピックを説明した Codelabs が含まれています。
チャレンジに参加するためには、GitHub リポジトリで実装する必要があります。こちらの Github リポジトリ テンプレートをコピーし、README に記載された手順に従ってください。テンプレートには、Compose による基本的な Hello World! と継続的インテグレーション設定が含まれています。
2 週目の賞品は、皆さんと一緒に作り上げるアート作品です。このチャレンジを成功させた最初の 500 名の方に、Jetpack Compose ポスターと Android ペン一式を差し上げます。ストレス解消のために皆さんだけの塗り絵を作りましょう。さらに、チーム Jetpack が悪しき UI から宇宙を救う物語が描かれた Jetpack Compose の限定マンガポスターもついています。
Reviewed by Hidenori Fujii - Google Play Developer Marketing APAC
この記事は The Jetpack Compose Team による Android Developers Blog の記事 "Android Dev Challenge: lift off with Jetpack Compose" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Jetpack Compose は、Android でネイティブ UI を作成する最新のツールキットです。強力なツールと直感的な Kotlin API によって、少ないコードですばやくアプリを作成できます。
本日 Jetpack Compose ベータ版をリリースしました。そこで、Jetpack Compose を使い始める皆さんのお役に立てるように、新たに #AndroidDevChallenge を開催します。Compose の機能を学び、導入する準備を始める絶好のチャンスです。
#AndroidDevChallenge では、Jetpack Compose で優れたアプリをすばやく作成する技術を身につけられるよう、これから 4 週間にわたって週単位のチャレンジを出題します。各チャレンジでは、「インサイトを開放する」をテーマに、アニメーションやマテリアル テーマ、Composable やリストなど、毎回 Compose の新しい領域を扱います。毎回のチャレンジの勝者に新しい賞品があり、Pixel 5 を含む 1000 個以上の賞品を準備しています*。最初のチャレンジは本日より始まります。
毎週提示される新しいチャレンジには、それぞれのルールとタスクがあります。本日より、毎週水曜日（日本時間木曜日）に、課題と締め切りについての詳しい説明を含むブログ投稿を公開します。いずれのチャレンジも、Text や List などの基本的な Composable から状態やアニメーションまで、Compose のメンタルモデルやさまざまな Compose API に親しむために役立ちます。
Text
List
チャレンジに参加するためには、GitHub リポジトリで実装する必要があります。すぐにスタートできるよう、Compose による基本的な Hello World! と継続的インテグレーション設定を含む Github リポジトリのテンプレートを作成していますのでご利用ください。
#AndroidDevChallenge 初回のチャレンジは、子犬の里親探しアプリの作成です。このアプリでは、概要画面で子犬の一覧を、詳細画面でそれぞれの子犬の詳細を表示する必要があります。エントリは、太平洋標準時 3 月 2 日 23 時59 分（日本時間 3 月 3 日 16 時 59 分）までにこちらから送信してください。
UI はすべて Compose で作成する必要があります。審査対象はアプリの UI レイヤーのみです。実装にあたっては、レイアウト、リスト、テキスト、ナビゲーションに関する Compose ドキュメントを参考にしてください。ハンズオンの学習教材として Compose Pathway を試すこともできます。このチャレンジに役立つトピックを説明した Codelabs が含まれています。
🐶 よりも 🐱 のほうが好きな方も大丈夫です。ペットの里親探しアプリであれば、どんな種類でも歓迎します。
多数のご応募をお待ちしています。
最初のチャレンジの賞品は、Compose で飛び回る際の相棒としてぴったりな、LEGO ブロックの Jetpack Compose スーパーヒーロー限定トロフィーです。チャレンジを成功させてエントリを送信した最初の 500 名には #AndroidDevChallenge 初週の勝者である証として、Android フィギュアのコレクションにこのトロフィーを追加できます。
*毎週のチャレンジに新しい賞品が設定されています。Google Pixel 5 が賞品になる週で、Google Pixel 5 が利用できない国にお住まいの方には、同程度の価値がある電子ギフトカードをお送りします。詳しくは公式ルールをご覧ください。
Reviewed by Yuichi Araki - Developer Relations Team and Hidenori Fujii - Google Play Developer Marketing APAC
