Jetpack Compose Glimmer は Jetpack Compose をベースに構築されており、ディスプレイ付きの AI グラス向けに設計されたコンポーザブル、コンポーネント、動作、テーマが含まれています。Glimmer を使用すると、Compose を使用して AI グラス用のネイティブ UI を構築できます。少ないコード、パワフルなツール、直感的な Kotlin API を使用して、アプリのエクスペリエンスをすぐに実現できます。
Jetpack Compose Glimmer コンポーザブル
Jetpack Compose Glimmer は、AI グラスのディスプレイ向けに調整された @Composable 関数（Text、Button、ListItem など）を提供します。Jetpack Compose Glimmer コンポーザブルには、次のような独自の特性があります。
- 簡素化されたスタイル設定:
Surfaceコンポーネントは、光学ディスプレイの最適化のために、デフォルトで黒または透明の背景になります。 - 最適化されたデフォルトの色: Jetpack Compose Glimmer は、デフォルトで背景色に基づいてコンテンツの色を計算するため、デベロッパーがテキストの色を手動で設定する必要はほとんどありません。追加の作業なしで視認性を高めることができます。
差別化されたフォーカス: フォーカスは、リップル効果ではなくアウトラインベースの視覚的なフィードバックで示されるため、視認性が向上します。
図 1. Jetpack Compose Glimmer の 3 つのフォーカス状態。アウトラインベースの視覚的フィードバックを使用して区別されます。 最適化された高度: Jetpack Compose Glimmer では、視覚的な分離のためにボックスシャドウが限定的に使用されています
図 2. Jetpack Compose Glimmer の 5 つの高度レベル。限られた box-shadow を使用して区別されます。
Jetpack Compose Glimmer コンポーネント
Jetpack Compose Glimmer には、Jetpack Compose のコンポーネントと同様に、独自に設計されたコンポーネントのセットが用意されていますが、AI グラスの独自の視覚的およびインタラクティブなニーズに合わせて特別に最適化されています。Jetpack Compose Glimmer コンポーネントは、Jetpack Compose Glimmer のテーマでカスタマイズできます。また、下位レベルの Compose 機能に基づいて構築されており、タップやスワイプなどのユーザー入力メソッドをデフォルトでサポートしています。
特定のコンポーネントの使用方法については、次のガイドをご覧ください。
これらの高レベル コンポーネントのいずれかがユースケースに適合しない場合は、surface を使用してカスタム コンポーネントを構築できます。サーフェスは、Jetpack Compose Glimmer の最も基本的なビルディング ブロックです。これは、作成する特定のカスタム デザインやインタラクションのための空白のキャンバスです。
Jetpack Compose の Glimmer 修飾子
Jetpack Compose Glimmer の修飾子は Compose の修飾子とまったく同じように機能します。レイアウト、外観、動作をカスタマイズして、コンポーザブルを拡張できます。Jetpack Compose Glimmer では、メガネ専用の視覚フィードバックとパフォーマンスのために、特定の修飾子を導入したり、独自のデフォルトを適用したりする可能性があります。
Jetpack Compose の Glimmer の奥行き
Jetpack Compose Glimmer コンポーネントは、階層を表すために深度を使用します。これにより、他のカードの上に表示される要素を視覚的に区別できます。AI グラスの奥行きは、z 空間での配置と影の組み合わせです。リスト項目などのほとんどの上位レベルのコンポーネントでは、フォーカス状態に基づいて奥行きが自動的に適用されます。コンポーネントにフォーカスが当たると、奥行きが増し、フォーカスが外れると、通常の状態に戻ります。ただし、カスタム コンポーネントを操作する場合は、Modifier.surface または Modifier.depth で深さパラメータを使用できます。
Jetpack Compose Glimmer のテーマ
Jetpack Compose Glimmer には、AI グラス専用のテーマ設定システムが搭載されています。Jetpack Compose Glimmer のテーマは、簡略化され最適化された色、タイポグラフィ、シェイプのパレットを実装しています。これにより、AI グラスの視認性と簡潔性が最大限に高まります。すべての Jetpack Compose Glimmer コンポーネントは、AI グラスの特定の入力メソッドとの自動統合を目的として設計されています。Jetpack Compose Glimmer のテーマは、GlimmerTheme クラスを使用して公開されます。
他の Jetpack Compose のテーマと同様に、GlimmerTheme には、色、シェイプ、タイポグラフィ、アイコン（シンボログラフィ）などの複数のサブシステムが含まれています。Jetpack Compose Glimmer のテーマには、カスタマイズ可能な Jetpack Compose Glimmer コンポーネントも含まれています。
色
Jetpack Compose Glimmer のカラーシステムには、最適化されたパレットに 7 色が含まれています。このパレットは、黒の値がレンダリングされない AI グラスのディスプレイで、視認性と簡潔性を最大限に高めるように設計されています。
GlimmerTheme の色の概要。「On ...」の色は GlimmerTheme を通じて公開されません。これらの色は、背景色に基づいてシステムによって自動的に計算されます。
これらの色は GlimmerTheme.colors.primary を通じて公開され、各色の役割の値は次の表のとおりです。
カラーロール |
デフォルト |
|---|---|
primary |
#A8C7FA |
secondary |
#4C88E9 |
高評価 |
#4CE995 |
否定的な |
#F57084 |
surface |
#000000 |
アウトライン |
#606460 |
outlineVariant |
#42434A |
surface、outline、outlineVariant はカスタマイズ可能とマークされていますが、これらの値はカスタマイズしないことを強くおすすめします。
シェイプ
Jetpack Compose Glimmer のシェイプ システムは、コンポーネントの一連の標準的な角の処理と幾何学的形状を定義します。これは、AI グラスの UI で一貫性のあるミニマルなビジュアル言語を作成するように設計されており、すべてのシェイプは GlimmerTheme.shapes を通じて公開されます。
タイポグラフィ
Jetpack Compose Glimmer のタイポグラフィ システムには、AI グラスのディスプレイで読みやすさと簡潔さを実現するための 6 つのタイポグラフィ スタイルが含まれています。これらのスタイルは、コントラストを最大化し、太字のウェイト、広い文字間隔、適切な行の高さでテキストの可読性を高めるように設計されています。これらのスタイルは GlimmerTheme.typography を介して公開されます。
アイコン
Jetpack Compose Glimmer のアイコン システムは、AI グラスの UI の簡素化されたビジュアル言語と一貫して統合されるように設計されています。多くの場合、最適な読みやすさを実現するために、マテリアル シンボル ラウンドのような丸みを帯びた形状が活用されています。