美しくレスポンシブな Wear OS 向けアプリを作るための最新の宣言型 UI ツールキットである Compose for Wear OS のバージョン 1.1 をリリースしました。
昨年の最初の安定版リリース (英語) 以来、多くのデベロッパーの皆さんがこの強力なツールと直感的な API を活用して、アプリの開発を簡素化、効率化しています。Todoist や Outdooractive などのデベロッパーは、Compose を使って Wear アプリを再構築し、新しく機能的なユーザー エクスペリエンスを短時間で提供しています。
Wear 3 向けアプリを再構築して以来、Todoist の成長率は 50% アップしました。Outdooractive は開発時間を 30% 削減でき、デベロッパーの生産性やデザインとデベロッパーとの間のコラボレーションも大幅に向上しています。
「Compose を使うと、UI コードを直感的に読み書きできるようになります。デザイン フェーズでのプロトタイピングが迅速になり、コードでのコラボレーションもしやすくなりました。数日かかっていたことが、今は数時間でできるようになっています」
Compose for Wear OS 1.1 リリースは UX とユーザー補助に重点を置いており、新機能と既存コンポーネントの機能改善が含まれています。サンプル、Codelab、Horologist ライブラリはすでに更新されており、Compose for Wear OS 1.1 で動作するようになっています。
新機能と API
Compose for Wear OS 1.1 リリースには、以下の新機能が含まれています（新しいコンポーネントのベースライン プロファイルはすでに追加済みです）。
アウトライン付きスタイルの Chip と Button
ユーザー インターフェースのカスタマイズ性を向上するため、Chip と Button にアウトライン付きスタイルを追加しました。新しい OutlinedChip (英語) コンポーザブルと OutlinedButton (英語) コンポーザブルを使うと、細い境界線がついた透明なコンポーネントを利用できます。これは、適度に強調したいアクションに使うことができます。コンパクト版で使えるものとして、OutlinedCompactChip (英語) と OutlinedCompactButton (英語) もあります。
OutlinedChip コンポーザブルと OutlinedButton コンポーザブル
Chip と Button の形状の変更
バージョン 1.1 より、新しくオーバーロードされた関数を使って Chip (英語) / ToggleChip (英語) や Button (英語) / ToggleButton (英語) の各コンポーネントの形状も変えられるようになります。
Chip と Button のさまざまな形状
プレースホルダ API
プレースホルダの実装をサポートするための新しい試験運用版 API が追加されています。これは、3 つの視覚効果を実現するために使用できます。それぞれの効果は、別々に使うことも、組み合わせて使うこともできます。
プレースホルダ背景のブラシ効果 : Chip や Card などのコンテナで、コンテンツが読み込まれるのを待つ間に通常の背景の上に描画するために使用します。
Modifier.placeholder() (英語) : 読み込まれるコンテンツの上にスタジアム型のプレースホルダ ウィジェットを描画するために使用します。
Modifier.placeholderShimmer() (英語) : 現在の状態がデータの読み込み待ちであることを示すために、他の効果の上にグラデーションや点滅効果を描画する場合に使用します。
プレースホルダ API の使用例
これらの効果は協調して動作するように設計されており、連動して点滅やワイプオフするようになっています。一般的なユースケースにプレースホルダを適用する方法については、リファレンス ドキュメント (英語) と Horologist のサンプルをご確認ください。たとえば、アイコンとラベルを含み、個々のコンテンツ スロットの上にプレースホルダを配置して、データ読み込み待ちの間は上部が点滅する Chip などについて紹介しています。
Modifier.scrollAway
バージョン 1.1 では、Horologist の fadeAway 修飾子の正式版として scrollAway 修飾子 (英語) が導入されています。Modifier.scrollAway は、項目を垂直にスクロールさせ、scroll 状態に応じてビューから出入りします。Column、LazyColumn、ScalingLazyColumn と連携して動作するためのオーバーロードも含まれています。
ユーザーが項目のリストを上にスクロールし始めたときにビューから TimeText をフェードアウトさせたい場合は、この修飾子を使います。
TimeText と ScrollAway 修飾子の使用例
CurvedTextStyle の追加パラメータ
CurvedTextStyle (英語) が追加パラメータ（fontFamily、fontWeight、fontStyle、fontSynthesis）をサポートし、曲線テキスト スタイルを作成するときにフォントの詳細を指定できるようになります。拡張曲線テキスト スタイルは、curvedText (英語) と basicCurvedText (英語) の両方で利用できます。
曲線テキストに異なるフォントを適用
UX とユーザー補助の改善
1.1 リリースでは、ユーザー エクスペリエンスの微調整、TalkBack サポートの改善、全般的なユーザー補助機能 (英語) の向上も行っています。
ToggleChip (英語) と SplitToggleChip (英語) で、アニメーション付きトグル コントロール (Checkbox、Switch、RadioButton) の使用がサポートされます。ToggleChipDefaults が提供する静的なアイコンの代わりに使うことができます。
Chip / ToggleChip、Card のデフォルトのグラデーション カラーを調整し、最新の UX 仕様に一致するようにしました。
MaterialTheme (英語) のデフォルト カラーの数を更新し、ユーザー補助を改善しました。これは、もともとの色に十分なコントラストがなかったために行いました。
Picker (英語) のユーザー補助機能を改善します。これにより、スクリーン リーダーでマルチピッカー画面を操作したり、コンテンツの説明にアクセスしたりできるようになります。
InlineSlider (英語) と Stepper (英語) がボタンロールを持つようになり、TalkBack がこれらをボタンと認識できるようになります。
Scaffold (英語) の PositionIndicator の位置とサイズを決める際に、必要なスペースだけが確保されるようになります。これにより、TalkBack が画面上で境界線を正しく認識できるようになるので、PositionIndicator に意味的な情報を追加する際に役立ちます。
⌚ でアプリを手首に届けよう！
スタートガイド
Compose for Wear OS の開発を始めたい方は、Codelab の実習を試すことから始めてみましょう。ドキュメントとサンプルも忘れずにチェックしてください。バージョン 1.1 の完全な変更リストは、Compose for Wear OS リリースノートをご覧ください。
Compose for Wear OS バージョン 1.1 を使うには、androidx.compose ライブラリのバージョン 1.3 が必要です。そのため、Kotlin 1.7.10 も必要になります。詳しくは、Compose と Kotlin の互換性マップをご覧ください。
フィードバックの提供
Compose for Wear OS は、皆さんから寄せられた要望をもとに進化し続けます。ぜひ今後も Issue Tracker (英語) でフィードバックをお寄せください。また、Kotlin Slack #compose-wear チャンネルに参加して Google チームや開発コミュニティとつながりましょう。
本番環境で Compose for Wear OS を使うアプリが増えていくのはうれしいことです。このツールキットを改善するための問題報告やリクエストは大歓迎です。
Wear OS 向けの開発を始める
さらに詳しい情報は、Android Dev Summit (英語) のテクニカル セッション (動画/日本語字幕あり) で公開されています。アプリのアーキテクチャ、テスト、ロータリー入力の処理、メディアやフィットネスに関する横断的なセッションなどのガイダンスをご覧ください。
