アプリの起動時間短縮は簡単な作業ではなく、起動に影響するさまざまなことを深く理解する必要があります。今年、Google の Android チームと Facebook のアプリチームは、アプリの起動を高速化するために、共同で指標を検討したり、アプローチを共有したりしています。Google による Android の公式ドキュメントには、アプリ起動の最適化に関するたくさんの情報が掲載されています。ここではさらに、それがどのように Facebook アプリに当てはまり、何がアプリ起動の高速化に役立ったかをお伝えしたいと思います。
現在、毎月 29 億人以上の人々が Facebook を使っています。Facebook はコミュニティを形成する力や、世界をより身近にする力を人々に与えます。また、Facebook は人生の思い出の瞬間を共有したり、今起きていることを知って議論したり、つながりを作って育んだり、協力してビジネス チャンスを生み出したりする場所です。
Facebook アプリの開発チームは、どんなデバイスや国、ネットワーク環境であっても、シームレスにアプリを動作させて可能な限り最高の体験を提供できるように、努力を重ねています。Google の Android チームと Facebook のチームは、合同でアプリ起動に関する指標の定義とベスト プラクティスについて検討しました。この記事では、その内容について説明します。
まずは起動時間の測定です。そこから、ユーザーの起動時のエクスペリエンスがどのくらい優れているかがわかり、リグレッションが発生すれば追跡できます。さらに、改善にどのくらいの手間をかけるべきかもわかります。最終的には、作業の優先順位を決めるために、起動時間をユーザーの満足度やエンゲージメント、ユーザーベースの拡大の度合いと紐付ける必要があります。
Android では、アプリの起動時間を測定する指標として、完全表示までの時間(Time-To-Full-Display; TTFD)と初期表示までの時間(Time-To-Initial-Display; TTID)という 2 つの指標が定義されています。さらにコールド スタートとウォーム スタートに分けることができますが、この投稿では、この 2 つは明確に区別しません。Facebook のアプローチでは、アプリを使うすべてのユーザーの起動時間を測定して最適化します(その一部はコールド、その他はウォームです)。
TTFD は、アプリがレンダリングを終え、ユーザーが操作や閲覧を行える状態になるまでの時間を表します。このときレンダリングされる内容には、ディスクやネットワークにあるコンテンツが含まれているはずです。遅いネットワークの場合、この処理にしばらく時間がかかるかもしれません。また、ユーザーがどのページを開くかによって異なる可能性もあります。そのため、すぐに何かを表示して、処理が進行中であることをユーザーに知らせる方法も有効でしょう。そこで登場するのが TTID です。
TTID は、アプリが背景やナビゲーション、高速に読み込めるローカル コンテンツ、読み込みに時間がかかるローカル コンテンツに代わるプレースホルダ、またはネットワーク コンテンツを描画する時間を表します。TTID は、ユーザーがナビゲーションを行って目的の場所に行けるようになるタイミングである必要があります。
変更しすぎない: 注意すべき点の 1 つは、TTID と TTFD の間での、アプリのコンテンツの位置の視覚的な変化です。たとえば、キャッシュしたコンテンツを表示し、ネットワーク コンテンツを取得できたタイミングで入れ替えるような場合、視覚的な変化が発生することがあります。ユーザーはこれを不快に感じるかもしれません。そのため、TTID では、できる限り TTFD に近く、十分に意味のあるコンテンツを描画するようにします。
ユーザーはコンテンツを求めてアプリを開きます。そのコンテンツの読み込みには、しばらく時間がかかる可能性がありますが、皆さんはできるだけ早くコンテンツを提供したいと思うはずです。
Facebook アプリの開発チームは、すべてのコンテンツとイメージを含む完全表示までの時間(TTFD)に基づいた指標に注目しています。TTFD こそ、ユーザーがアプリを開いた目的である完全な体験を表すものだからです。コンテンツやイメージを取得するためのネットワーク呼び出しに時間がかかったり、失敗したりする場合は、デベロッパーがそれを把握することで、起動処理の全体を改善できます。
Facebook の起動指標は、「悪い」と見なされるアプリ起動の割合です。「悪い」と見なされるのは、TTFD が 2.5 秒を超えた場合、または起動処理のいずれかが失敗した場合(イメージの読み込み失敗、アプリのクラッシュなど)です。Facebook は、この「悪い」起動の割合を減らすことに重点的に取り組んでいます。具体的には、起動が成功したとしても時間が 2.5 秒を超えた場合はその処理を改善し、起動が失敗した場合はその原因を修正します。2.5 秒という数値は、この数値が Facebook ユーザーにとって有意義であるという調査結果に基づいて選ばれました(これは、ウェブサイト向けの Web Vitals 推奨事項の Largest Contentful Paint(LCP)指標とも一致します)。
すべての処理、とりわけ最新コンテンツを取得するネットワーク呼び出しを含めれば、TTFD 起動指標は TTID よりもかなり遅いと感じるかもしれません。これは、実際には好ましいことであり、ユーザーがアプリで実際に体験することを表しています。Facebook でそうであるように、これを改善することでアプリの利用が増加したり、ユーザーの間でアプリのパフォーマンスに関する認知度が高まったりする可能性があります。
アプリによっては、TTFD を測定するのが難しい場合もあります。難しすぎる場合は、初期表示までの時間(TTID)から始めても問題ありません。プレースホルダやイメージがある場合は、一部のコンテンツを読み込む際のパフォーマンスが見逃されてしまう可能性がありますが、たとえそれがアプリを毎日使うユーザーが見るものの一部でしかなくても、できるところから始めることが重要です。
Android 4.4(API レベル 19)以降の logcat では、プロセスが起動してから、対応するアクティビティの最初のフレームが画面に描画されるまでの経過時間が、“Displayed” 値として取得されます。
報告されるログの行は、次の例のようになります。
ActivityManager: Displayed com.android.myexample/.StartupTiming: +3s534ms
TTFD のインストルメンテーションを行うには、画面にすべてのコンテンツが表示されてから、アクティビティで reportFullyDrawn() (英語) を呼びます。プレースホルダを置き換えるすべてのコンテンツと、レンダリングするすべてのイメージを含めるようにしてください(プレースホルダだけでなく、表示されるイメージ自体もカウントします)。reportFullyDrawn() を呼ぶと、logcat に次の内容が表示されます。
ActivityManager: Fully drawn {package}/.MainActivity: +1s54ms
Facebook アプリ開発チームは、さまざまなデバイス、プラットフォーム、国の膨大なユーザーのために、長年にわたってアプリの最適化を行っています。このセクションでは、Facebook アプリ開発チームがアプリの起動を最適化するために活用したいくつかの重要な教訓について説明します。
Google の Android チームは、アプリの起動時間を測定して最適化する際の推奨事項を、アプリの起動時間というドキュメントで公開しています。このセクションには、一部の重要なポイントを記載します。その内容は上記の Facebook の推奨事項とも結びついており、すべての Android アプリ デベロッパーが考慮すべきことです。
この記事では、起動に関するいくつかの重要な測定項目に加えて、起動時のエクスペリエンスを高めてユーザー エンゲージメントを向上させたり、Facebook Android アプリを普及させたりするためのベスト プラクティスについて説明しました。さらに、Google の Android チームがおすすめする指標やライブラリ、ツールも紹介しました。ドキュメントに記載されている戦略を適用すれば、どんな Android アプリにでもメリットが生じるはずです。アプリを測定して、ユーザーにとって心地よい高速な起動を実現しましょう。
本日、2021 年に日本で人気を集めた Google Play のコンテンツを紹介する Google Play ベスト オブ 2021 のアプリ、ゲームにおける部門賞の最優秀賞および大賞を発表しました。
2021 年は、新型コロナウイルス感染症の長期的な影響を受け、オンラインでの過ごし方をより工夫し楽しくなるようなエンターテイメントアプリや、地震や集中豪雨など天候が気になる日も重なったことで、状況をリアルタイムに把握することを助ける天気予報アプリなどに関心が高まりました。また、社会情勢の影響もあり、国内に対する興味の高まりも見られ、日本の食や文化に対する興味が高まったユーザーから、お取り寄せやフードロスなどの食に関連するアプリも耳目を集めました。
ゲームにおいては、気軽に遊べるカジュアルゲームから高度な戦略性を求められるシミュレーションゲームまで、幅広い作品が喜びや発見を与えてくれた一年となりました。新たなゲーム性で今までとは違った経験をユーザーに提供した IP や、モバイルゲームに初登場した IP が市場を盛り上げたことも印象的です。また、インディー部門では日本ならではの発想から生まれたゲームが人気を集め、テーマやジャンルの多様化が垣間見られました。そしてゲーム開発技術の結晶とも言えるリアルな世界観が魅力の臨場感あふれる作品が多くのユーザーの心を掴み、盛り上がった 1 年でした。
それでは、各賞の受賞作品をご紹介します。受賞された皆さま、おめでとうございます!
アプリ
この記事は Nick Butcher による Android Developers Blog の記事 " #AndroidDevSummit: Jetpack Compose now with Material You " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
先月の Android Dev Summit (英語) では、Jetpack Compose にたくさんのエキサイティングなアップデートが追加されたことをお知らせしました。その 1 つに、Google の新しいデザイン言語である Material You (英語) が Compose で利用できるようになったことがありました。ここでは、見逃してしまった方のために、すべてのお知らせをまとめて紹介します。
*日本語字幕は、YouTube の自動字幕機能から日本語を選択してください
Jetpack Compose 1.1 ベータ版がリリースされました。これによって 1.1 の新しい API が安定版になり、新機能が利用できるようになったほか、パフォーマンスが改善されています。1.1 には、フォーカス処理の改善、タッチ ターゲットのサイズ調整、`ImageVector` のキャッシュ、Android 12 のストレッチ オーバースクロールのサポートなどの新機能が含まれています。さらに、Compose 1.1 では、これまで試験運用版だったたくさんの API が安定版になっているほか、より新しいバージョンの Kotlin もサポートされています。既にサンプル、Codelab、Accompanist ライブラリもアップデートしており、Compose 1.1 と合わせて使えるようになっています。
compose-material3 もリリースされました。これは、Jetpack Compose で Material You の UI を作るためのまったく新しいアーティファクトです。ユーザーの壁紙から好みにあったカラーパレットを作成するダイナミック カラーのサポートを含め、コンポーネントやカラーシステムがアップデートされています。これが最初のアルファ版で、API への新機能の追加や改善作業を繰り返しているところなので、皆さんのフィードバックは大歓迎です。マテリアル デザイン 3 の詳細については、新しい m3.material.io (英語) ウェブサイトをご覧ください。Material Theme Builder (英語) など、ダイナミック カラーを使ってデザインや開発を行う際に役立つツールも公開しています。
Jetpack Compose のレイアウトや、アニメーションと状態について詳しく解説したたくさんのトークを公開しました。また、Wear OS、ホーム画面ウィジェット、大画面で Compose を使う方法を紹介し、3 つの code-along(初めての Compose アプリ、既存アプリの移行、Wear OS での Compose の使用について、ライブ コーディングで説明します)も公開しました。パネル ディスカッションを開催して、Jetpack Compose やマテリアルに関する皆さんからの熱い質問にもお答えしています。
Compose のドキュメントも充実させています。Jetpack Compose のフェーズ、アダプティブ レイアウトを作成するなどの新しいガイドを作成したほか、テーマ設定に関するガイドを拡充してマテリアル デザイン 3 などのガイドを追加しました。
Android Dev Summit では、Android Studio Bumblebee (英語) がベータ版になり、以下のような高度な Jetpack Compose サポートが追加されたことをお知らせしました。
Android Studio Chipmunk のカナリア版には、Compose 用のマテリアル デザイン 3 アプリのテンプレートも新しく追加されています(ビューベースのテンプレートもあります)。
最後になりますが、デザインのハンドオフに利用できる新ツールを一足先に紹介 (英語) しました。これは、Figma でデザインしたコンポーネントをエクスポートして、Jetpack Compose らしいコードを生成できるツールです。デザインの修正を繰り返したり、新しい変更を取り込んだり、生成されたコードを安全に編集したりできます。このツールについて私たちと直接やり取りできる小規模なチームを探しています。興味がある方は登録してください。(英語)
Jetpack Compose は安定版になっており、本番環境で利用できます。私たちは、本番環境で何万ものアプリが Jetpack Compose を使い始めているのを見て感激しています。Compose を使って、皆さんがさまざまなデバイスで動作する優れたアプリを作れるようにするために、機能のロードマップに基づいて開発を続けてまいります。
Reviewed by Tamao Imura - Developer Marketing Manager, Google Play
この記事は Vitaldevara による Android Developers Blog の記事 " Launching Data safety in Play Console: Elevating Privacy and Security for your users " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
ユーザーは、自分のデータをコントロールできている時に、オンラインを安全だと感じることができます。私たちが日々、データの取り扱いに関して、ユーザーが高度なセキュリティやプライバシーの管理 (英語) を行えるようにし、ユーザーの主体性を高めることに取り組んでいるのはそのためです。新しいデータ セーフティ セクションは、アプリがユーザーデータの収集、共有、保護を行うかどうか、またどのように行うかを、ユーザーがアプリをインストールする前に、デベロッパーが透明性の高い形で示せるようにするものです。
2021 年 10 月 18 日 (日本時間: 10 月 19 日)より、Google Play Console データ セーフティ フォームが導入されました。また、皆さんからのフィードバックを踏まえて、デベロッパー向けの追加のガイダンスを提供するため、ヘルプセンター、デベロッパー ガイド、Play アカデミーのコースなどで有用な情報を共有します。通常の慣例に従い、段階的な展開を開始し、2 週間以内にすべての人がアクセスできるようになる予定です。
Google Play Console で [アプリのコンテンツ] に移動し、[データ セーフティ] という新しいセクションを探してみてください。ガイドラインを確認して、早めにフォームを提出することをお勧めします。早めに対応をすることで、フォームが却下されてもフィードバックを確認して変更できるので、新しいアプリのアップデートの公開が妨げられることがありません。デベロッパーの皆さんからは、2022 年 2 月にデータ セーフティ セクションがユーザーに表示される前にフォームに正しく入力できるように、早い段階でフィードバックがほしいという声をお寄せいただきました。フォームの承認を受けていないアプリに制限が課されるのは、2022 年 4 月からです。
フォームへの入力には、それなりの作業が必要になることは認識しています。そこで、デベロッパーの皆さんからのフィードバックを踏まえてプロダクトやスケジュールを作成し、プロセスをできる限り効率化しました。さらに、複数のアプリがある場合に、簡単に情報をインポートできるようにしてほしいという声もありました。そこで、あらかじめ作成しておいたファイルからインポートするオプションを追加しました。
ストア掲載情報では、アプリのストア掲載情報ページに、新しいサマリー欄が表示されます。そこには、アプリが収集または共有するデータについてのデベロッパーによる説明のほか、安全性に関連する以下のような情報が表示されます。
ユーザーがサマリーをタップすると、次のような詳細情報が表示されます。
ユーザーからは、この情報によってアプリがユーザー情報をどのように扱うのかを理解しやすくなった、特定のアプリに安心感を覚えるようになったという声をお寄せいただきました。
日程は変更される可能性があります
デベロッパーの皆さんが、早期レビューのフィードバックを受けるために、Google Play Console 上で、データ セーフティ フォームの送信ができるようになりました。なお、セーフティ プロファイルを提出するために、アプリのアップデートを行う必要はありません。
2022 年 2 月には、この機能を Google Play ストアにリリースします。情報が承認されると、ストア掲載情報は自動的に更新され、データ セーフティ情報が反映されます。情報が送信されていない場合や却下された場合は、公開されている情報がない旨がユーザーに表示されます。
2022 年 4 月までに、すべてのアプリがデータ セーフティ セクションの承認を受ける必要があります。できるだけ多くのアプリが 2022 年 2 月のユーザーへのローンチに対応していただきたいと考えていますが、アプリの評価や複数のチームにまたがる調整が必要になるため、アプリの確認を行ったり、複数のチームと調整を行う関係で、さらに準備に時間が必要になるデベロッパーもいらっしゃると思います。
また、すべてのアプリは、4 月までにプライバシー ポリシーを提供する必要もあります。これまでは、個人データや機密性の高いユーザーデータを収集するアプリのみがプライバシー ポリシーを共有する必要がありました。データ セーフティ セクションまたはプライバシー ポリシーが承認されていない場合、新しいアプリの送信やアプリのアップデートは拒否される可能性があります。今後、以上の内容に従っていないアプリには、追加の制限が課される可能性があります。
最後になりましたが、Google Play が誰にとっても安全で、信頼できるアプリとゲームの提供元であり続けるため、ご協力いただきますよう、お願いします。
この記事は Eric McCleve による Android Developers Blog の記事 " Driving app and career growth with Google Play Academy’s Store Listing Certificate " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Google Play のゴールは、デベロッパーやマーケターの皆さんが、 Google Play のプラットフォームにアクセスして高品質なコンテンツやサービスを毎月探している 2 億人以上のユーザーにアプローチし、共感してもらえるようにすることです。Google Play ストア上に、より良い情報を掲載できれば、アプリやゲームユーザーを獲得するうえで、大きなメリットになります。
ストア掲載情報に関連するツールや機能を最大限に活用していただけるよう、Google Play アカデミーに新たに導入するストア掲載情報認定制度についてお知らせします。この認定制度は、Google Play でアプリやゲームを公開しており、ストア掲載情報の改善方法を学びたい方と、求められるモバイル マーケティングのスキルを身につけようとしている向上心のあるアプリやゲームのデベロッパーの両方を対象としています。トレーニングと試験の対象は以下のとおりです。
トレーニングと認定試験の詳細はこちらの動画をご覧ください
認定を受けるために、Google Play アカデミーのオンライン トレーニングを受講し、アプリやゲームのストーリーを最適な形で伝えるベスト プラクティスを学ぶことができます。ポリシーに準拠した質の高いストア掲載情報を通して成長させるための重要なスキルを学ぶことができます。トレーニングを受講した後に、試験を受験すると有用な認定を得ることができます。また、Google 認定デベロッパーのネットワークである Google Developer Certification Directory にも招待されます。
女性向けヘルスケアの刷新したヘルスケア分野のスタートアップ企業である InovCares を創業した Mohamed Kamara さんは、Google Play アカデミーでアプリストアの掲載情報のベスト プラクティスを学びました。
Google Play でアプリのストーリーを伝えるうえで Google Play アカデミーのトレーニングがどう役立ったかを、Mohamed さんが説明しています
トレーニングをスタートし、認定を受けましょう。ぜひお楽しみください!
この記事は Jeremy Walker による Android Developers Blog の記事 " Watch out for Wear OS at Android Dev Summit 2021 " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
今年の Android Dev Summit (英語) では、Wear OS プラットフォームのいくつかの主要なアップデートなど、Android デベロッパー期待のお知らせがたくさんありました。Google I/O では、新しい Wear OS のリリースを発表しました。その後、Galaxy Watch4 シリーズに Wear OS Powered by Samsung が搭載されました。Strava、Spotify、Calm などの多くのデベロッパーが、既に最新バージョンの Wear OS 向けに便利なエクスペリエンスを作成しています。今後、デベロッパーの皆さんがスマートウォッチにどんな新しいエクスペリエンスをもたらしてくれるのか、とても楽しみです。詳細な情報を入手してスマートウォッチ向けの優れたアプリを作成したい方は、このままお読みください。API やデザインツール、Google Play ストアのアップデートについて説明します。
Jetpack Compose ライブラリを使うと、短時間で簡単に UI を開発できます。(英語) そして今回 Wear OS に Compose のサポートを追加します。皆さんは、スマートウォッチ向けになったおなじみの UI コンポーネントを使ってアプリをデザインできます。こういったコンポーネントには Material You が含まれているので、少ないコードで美しいアプリを作成できます。
Compose for Wear OS は、現在デベロッパー プレビュー段階です。詳しく知りたい方や試してみたい方は、以下を参考にしてください。
お試しいただき、こちらでフィードバックを共有、もしくは、Jetbrains Slack の #compose-wear チャンネルに参加して感想をお聞かせください。ベータ版で API が確定する前にお願いします!
ウォッチフェイスは、ユーザーがスマートウォッチで自分を表現する方法の中でも、特に特徴的なものものの 1 つです。ウォッチフェイスを作成すると、Wear OS のユーザーに皆さんのブランドをアピールできます。私たちは Samsung と連携し、ウォッチフェイス作成のツールを改善して、Wear OS エコシステムでのウォッチフェイスのデザインを簡単にしました。
Samsung が作成したデザインツール Watch Face Studio (英語) を使うと、コーディングなしで独自のウォッチフェイスを作成、配布できます。直感的なグラフィックス ツールが搭載されているので、簡単にウォッチフェイスをデザインできます。個人で使うためのウォッチフェイスを作ることも、Google Play Console にアップロードして API レベル 28 以上をサポートする Wear OS デバイスのユーザーと共有することもできます。
先日、たくさんの Android Jetpack Wear OS ライブラリ (英語) をリリースしました。これらは、ベスト プラクティスに従い、ボイラープレートを減らし、ユーザーが一目でわかる高パフォーマンスなアプリを作るうえで役立ちます。
現在、タイルはマーケットのほとんどのデバイスで有効で、予測どおりに動作し、一目で情報にアクセスしたりクイック アクションに使用したりできます。API は現在ベータ版です。ぜひお試しください!(英語)
ウォッチフェイスを(Watch Face Studio 以外の方法で)もっと細かく調整したいデベロッパーの皆さんのために、ゼロから Kotlin で開発した新しい Jetpack Watch Face API のベータ版をリリースしました。
新しい API では、たくさんの新機能が提供されます。
今こそ古い Watch Face Support Library から今回の新バージョンに移行を始める絶好のチャンスです。
Google Play ストアで、皆さんの Wear OS アプリを見つけやすくする取り組みも進めています。今年は既にウォッチフェイスを検索できるようにしたほか、ユーザーが Wear カテゴリのアプリを簡単に探せるようにもしました。さらに、スマートフォンの Google Play ストアから直接アプリをスマートウォッチにダウンロードする機能もリリースしました。この変更点の詳細は、こちら (英語) からご確認いただけます。
また、皆さんがユーザーの期待に応えることができるように、Wear OS 品質ガイドラインの更新版 (英語) も公開しました。合わせて、ユーザーがアプリの外見を深く理解できるように、新しいスクリーンショット ガイドライン (英語) も公開しています。2022 年には、フォーム ファクタと国に固有の評価を導入し、アプリがどのようなデバイスや国で利用され、どのように動作しているかを深く理解できるようにする予定です。
Wear OS の開発に関する詳しい情報は、デベロッパー ウェブサイト (英語)をご覧ください。
この記事は Jeremy Walker による Android Developers Blog の記事 " Compose for Wear OS now in Developer Preview! " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
今年の Google I/O では、Jetpack Compose の最高の機能を Wear OS に導入することを発表しました。そして本日、好評だった数々のアルファ版リリースを経て、Compose for Wear OS がデベロッパー プレビュー版になりました。
Compose を使うと、UI 開発がシンプルになり、時間も短縮できます。Material You をビルトインでサポートした Compose for Wear OS も同様で、少ないコードで美しいアプリを作成できます。
さらに、Jetpack Compose で学んだモバイルアプリの開発手法は、Wear OS 版でもそのまま利用できます。モバイル版と同じように、ぜひ早速試してみてください。ベータ版のリリース前に、ライブラリの反復作業の早い段階で、皆さんのフィードバックを組み込みたいと考えています。
この記事では、私たちが作成した主な Composable を確認するとともに、実際に利用する際に役立つリソースをお知らせします。
それでは始めましょう。
Wear 関連の変更の大半は、アーキテクチャ レイヤーの上層部で行われます。
つまり、Jetpack Compose で既に使っている多くの依存関係は、Wear OS をターゲットにしても変更する必要はないということです。たとえば、UI、Runtime、Compiler、Animation の依存関係は同じです。
ただし、Wear OS の適切な Material、Navigation、Foundation ライブラリを使う必要があります。これらは、モバイルアプリで使っていたライブラリとは異なります。
その違いを明らかにするため、次に比較表を示します。
Wear OS の依存関係
(androidx.wear.*)
関係
モバイルの依存関係
(androidx.*)
androidx.wear.compose:compose-material
置換
androidx.compose.material:material ₁
androidx.wear.compose:compose-navigation
androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation
追加
androidx.compose.foundation:foundation
1.マテリアル リップルやマテリアル アイコンなどの他のマテリアル関連のライブラリは、Wear Compose Material ライブラリで拡張されているので、今後も使い続けることができます。
厳密には、Wear OS でモバイルの依存関係を使うことも可能ですが、最適な操作ができるように、Wear 専用のバージョンを使うことを常にお勧めしています。
注: 今後のリリースで、Wear 用の Composable をさらに追加する予定です。足りないものがあると感じた方は、ぜひお知らせください。
build.gradle
// Example project in app/build.gradle filedependencies { // Standard Compose dependencies... // Wear specific Compose Dependencies // Developer Preview starts with Alpha 07, with new releases coming soon. def wear_version = "1.0.0-alpha07" implementation "androidx.wear.compose:compose-material:$wear_version" implementation "androidx.wear.compose:compose-foundation:$wear_version" // For navigation within your app... implementation "androidx.wear.compose:compose-navigation:$wear_version" // Other dependencies...}
// Example project in app/build.gradle file
dependencies {
// Standard Compose dependencies...
// Wear specific Compose Dependencies
// Developer Preview starts with Alpha 07, with new releases coming soon.
def wear_version = "1.0.0-alpha07"
implementation "androidx.wear.compose:compose-material:$wear_version"
implementation "androidx.wear.compose:compose-foundation:$wear_version"
// For navigation within your app...
implementation "androidx.wear.compose:compose-navigation:$wear_version"
// Other dependencies...
}
適切な Wear の Material、Foundation、Navigation の依存関係を追加すれば、開発の準備が整います。
すぐに使い始めることができる Composable をいくつか紹介しましょう。
原則として、多くの Wear の Composable はモバイル版と同等で、同じコードで利用できます。MaterialTheme (英語) で色、タイポグラフィ、形状のスタイルを設定するコードも、モバイル版と同一です。
MaterialTheme
たとえば、Wear OS でボタンを作るコードは次のようになります。
Button( modifier = Modifier.size(ButtonDefaults.LargeButtonSize), onClick = { /*...*/ }, enabled = enabledState) { Icon( painter = painterResource(id = R.drawable.ic_airplane), contentDescription = "phone", modifier = Modifier .size(24.dp) .wrapContentSize(align = Alignment.Center), )}
Button(
modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
onClick = { /*...*/ },
enabled = enabledState
) {
Icon(
painter = painterResource(id = R.drawable.ic_airplane),
contentDescription = "phone",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
上のコードは、モバイル版ととてもよく似ています。ただし、作成されるのは、Wear OS に最適化されたバージョンのボタンです。つまり、Wear OS マテリアル ガイドラインに沿うため、円形で ButtonDefaults (英語) によってサイズが決まるボタンになります。
ButtonDefaults
次に示すのは、ライブラリに含まれるいくつかの Composable の例です。
*以下のリンクは全て英語です。
Button
Card
Icon
Text
加えて、Wear の操作性を改善できる新しい Composable もたくさん導入しています。
Chip
ToggleChip
BasicCurvedText
TimeText
さらに、Wear に最適化されたリスト用の Composable として、ScalingLazyColumn (英語) も提供します。これは LazyColumn を拡張したもので、丸いウォッチフェイスに合うように、スケーリングや透明度が変更されています。下のアプリでは、画面の上下の部分でコンテンツが縮んだりフェードしたりして、読みやすくなっていることがわかります。
ScalingLazyColumn
LazyColumn
コードを見ると、LazyColumn と同じであることがわかります。ただ名前が違うだけです。
val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState() ScalingLazyColumn( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(6.dp), state = scalingLazyListState,) { items(messageList.size) { message -> Card(/*...*/) { /*...*/ } } item { Card(/*...*/) { /*...*/ } }}
rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(6.dp),
state = scalingLazyListState,
items(messageList.size) { message ->
Card(/*...*/) { /*...*/ }
item {
Wear には専用のバージョンの Box である SwipeToDismissBox (英語) が搭載されています。これにより、スワイプして消す操作(モバイルの戻るボタンや戻るジェスチャーと同じ)が追加され、すぐに使うことができます。
SwipeToDismissBox
次に示すのは、簡単なコードの例です。
// Requires state (different from Box).val state = rememberSwipeToDismissBoxState() SwipeToDismissBox( modifier = Modifier.fillMaxSize(), state = state) { swipeBackgroundScreen -> // Can render a different composable in the background during swipe. if (swipeBackgroundScreen) { /* ... */ Text(text = "Swiping Back Content") } else { /* ... */ Text( text = "Main Content") }}
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
state = state
) { swipeBackgroundScreen ->
// Can render a different composable in the background during swipe.
if (swipeBackgroundScreen) {
/* ... */
Text(text = "Swiping Back Content")
} else {
Text( text = "Main Content")
次に示すのは、もう少し複雑な動作の例です。
ついに、Navigation Composable の SwipeDismissableNavHost(英語) が提供されます。これは、モバイル版の NavHost と同じように動作しますが、スワイプして消す操作がすぐに使えるようになっています(実際には、内部的に SwipeToDismissBox (英語) が使われています)。
SwipeDismissableNavHost
次に例を示します(コード)。
Scaffold(英語) は、モバイル版と同じように、画面によく使われるパターンを適用する際に役立つレイアウト構造を提供します。ただし、アプリバー、FAB、ドロワーの代わりに、Time、Vignette、スクロールと位置のインジケーターなどのトップレベルのコンポーネントを含む Wear 専用のレイアウトがサポートされます。
Scaffold
Vignette
PositionIndicator
コードは、モバイル版とほとんど同じです。
Jetpack Compose を Wear OS に導入し、時計での開発が迅速かつ簡単になるのがとても楽しみです。早速アプリを作ってみたい方は、クイック スタートガイド (英語)をご覧ください。実際に動作する例(簡単なものから複雑なものまで)を見てみたい方は、サンプル リポジトリをご覧ください。
デベロッパー プレビューは、API に皆さんの要望を反映させるチャンスです。ぜひ、こちらからフィードバックを共有するか、Slack の #compose-wear チャンネルに参加して (英語)お知らせください!