display-ai-glasses-with-jetpack-compose-glimmer

用語集

用語	定義
AI Glasses	情報にアクセスできる、終日着用可能なハンズフリーデバイスです。ディスプレイを搭載したものと、音声のみのものがあります。スピーカー、カメラ、マイクを備えています。
Display AI Glasses	音声出力と調和する、ひと目で確認できるビジュアルを表示する小型のプライベートディスプレイを追加した AI Glasses です。
Jetpack Compose Glimmer	拡張 Android XR エクスペリエンスを構築するための Compose UI ツールキットで、Display AI Glasses 向けに最適化されています。透過ディスプレイ向けのコンポーネント、テーマ設定、動作を提供します。
Projected Activity	ホストデバイス（スマートフォン）上で動作しますが、UI と操作が接続された AI glasses デバイスに投影される Android Activity です。
Projected Device	Android 搭載デバイス（ホスト）に接続された XR デバイスです。ホストはアプリケーションのコンテンツを Projected デバイスに投影し、ユーザーが操作できるようにします。
GlimmerTheme	GlimmerColors、GlimmerTypography、GlimmerShapes などのスタイル設定トークンを提供するルートプロバイダーです。
Additive Display	黒（#000000）が 100% 透明として表示されるディスプレイ技術です。環境に光を加えることで UI を構築します。Display AI Glasses には加算型ディスプレイが搭載されています。
Augmented Experiences	現実世界でのユーザーの集中と存在感を高める Android XR エクスペリエンスです。軽量で環境に要素を加えるもので、移動中のユーザーを支援します。
Visual Angle	XR における知覚上のサイズを測る単位です。読み取り可能なテキストの最小サイズは 0.6 度（1 m の距離で約 18sp）です。

前提条件

• モバイルプロジェクトの minSDK は 37 以上を対象にする必要があります。対象 SDK が 37 未満の場合は、SDK を 37 に引き上げてください。AI Glasses は API 36 以上を対象にする必要があります。

主な制約

• 禁止： MaterialTheme や Material Components を使用しないでください。
• 推奨： GlimmerTheme と Jetpack Compose Glimmer コンポーネントを使用してください。

制限事項

• 特定のハードウェアデバイスのモデルや、それぞれに固有の機能については詳しく説明していません。
• Elevation： 標準の Material 3 の影または elevation 修飾子はサポートされていません。Jetpack Compose Glimmer の ShadowScope または Depth トークンを使用する必要があります。
• 最小サイズ： 読み取り可能なテキストの絶対最小サイズは 18sp（0.6°）です。これより小さいサイズは可読性チェックに合格しません。
• テキストのウェイト： 「Thin」や「Hairline」のウェイトは避けてください。加算型 AR レンズでちらつきやエイリアシングが発生します。

1. 依存関係のセットアップ

• Projected Activity のセットアップ： まず、AI メガネアプリ用の新しい Projected Activity を作成する必要があります。プロジェクトにまだ存在しない場合は、AI メガネ用の最初のアクティビティを作成するを参照してください。references/projectedcontext-source.mdを使って、Projected Device 上で Glasses Projected Activity を起動してください。
• モバイルアプリとの統合： プロジェクトに既存のモバイルアプリが含まれている場合は、Glimmer UI のレンダリング専用の新しい Glasses Activity を作成する必要があります。詳細な設定については、AI メガネ用の最初のアクティビティを作成する を詳しく参照してください。Glasses Activity を起動する方法がまだない場合は、既存のモバイルアプリの UI に「Launch on Glasses」というラベルのボタンを追加し、ProjectedContextを使ってメガネ上で Glasses Activity を起動してください。ユーザーが投影機能を見つけられるよう、このボタンはオーバーレイのフローティングアクションボタン（FAB）や上部のナビゲーションバーなど、常に目立つ場所に配置してください。メガネが接続されていない場合は、ボタンを無効にしてください。Glasses Activity はスマートフォンではなく、AI メガネ上でのみ起動してください。明示的な起動ボタンなしで Glasses Activity を自動的に起動するのが適切な場合は、そのようにしてください。
• UI ライブラリ： プロジェクトにandroidx.xr.glimmer:glimmerライブラリがあるか確認し、なければ追加する必要があります。最新の依存関係バージョンを取得するには、Jetpack Compose Glimmer の依存関係を宣言するを参照してください。
• テーマ設定： トークンが正しく解決されるよう、すべての Glimmer コンポーネントをGlimmerThemeコンポーザブルでラップしてください。
• 必須の黒い背景： AI メガネでは加算型ディスプレイを使用します。背景に黒以外の色があると、現実世界が遮られます。Projected Activity のルートコンテナには、必ず純粋な黒の背景（Modifier.background(Color.Black)）を設定してください。
• フォント： デフォルトのフォントは Google Sans Flex です。特に指定がない限り、デフォルトのテキストスタイルとともにandroidx.xr.glimmer.googlefontsライブラリを使用してください。createGoogleSansFlexTypographyを使って、Google Sans Flex の設定を含むTypographyインスタンスを作成してください。このTypographyインスタンスは、通常どおりGlimmerThemeに渡してください。設定については、references/glimmersansflextypography-source.mdを参照してください。
• ハードウェア機能： AI メガネの種類によって、利用できる機能は異なります。実行時に機能を確認する方法については、AI メガネのデバイス機能を実行時に確認するを参照してください。
• ハードウェア権限： マイクやカメラなどのハードウェア権限をリクエストする方法については、AI メガネのハードウェア権限をリクエストするを参照してください。
• ハードウェアへのアクセス： メガネのカメラやセンサーの使用、またはスマートフォンのハードウェアへのアクセスについては、ProjectedContext を使用して AI メガネのハードウェアにアクセスするを参照してください。

2. UI を最小限にし、翻訳する

• Display AI Glasses では、Jetpack Compose Glimmer フレームワークのコンポーネントを使用して UI を構築します。
• 奥行きを使って、要素の優先度と階層を伝えます。
• 下から積み上げるようにデザインし、実世界を覆う範囲をできるだけ小さくします。UI は常にメガネのディスプレイの下端に揃えます。
• 一度にひとつだけ： ユーザーが実世界を認識できることを優先します。ユーザーの視野を遮る範囲を最小限にするため、一度に表示する主要な情報はひとつだけにします（たとえば、Stack を使用します）。複数のカードを同時に表示しないでください。
• 色のコントラスト： HCT 色空間を使用して、前景色と背景色のトーン差を 70％以上にします。計算指標については、references/material-hct-source.md を参照してください。

3. 入力コントロールを割り当てる

• タップやスワイプなどのアプリ操作を、タッチパッドなどのメガネで利用できるハードウェアコントロールに割り当てます。
• 入力はより一次元的であり、ユーザーは通常、一度にひとつのコントロール入力を行います。
• スクロール可能なコントロールを入れ子にしないでください。
• Jetpack Compose Glimmer コンポーネントは、AI メガネのタッチパッドでのタップやスワイプなど、標準的な入力方法に対応するよう設計されています。
• System Back を使用して、一時的な状態や詳細ビューを閉じます。
• メガネ UI に入力、フォーカス、タップ、スワイプを追加するには、Jetpack Compose Glimmer のフォーカスに従ってください。
  • ハードウェア入力の詳細については、Display AI Glasses のハードウェアコントロールを参照してください。

4. Jetpack Compose Glimmer で構築する

Jetpack Compose Glimmer は、Display AI Glasses 向けの拡張体験を構築するための UI ツールキットです。

主な機能

• Glimmer テーマ設定： 最適な視認性を実現する、メガネ専用のシンプルなテーマです。
• 入力への事前対応： タップとスワイプにデフォルトで対応します。
• 事前構築済みコンポーネント： Card、ListItem、Button など、最適化されたコンポーザブルを提供します。

Glimmer でのフォーカス管理

• Jetpack Compose Glimmer では、一次元のフォーカス検索を使用します。
• スクロール可能なコンテナ内ではフォーカスが連続的に移動し、ボタンの行などの要素間では離散的に移動します。
• システムが初期フォーカスを自動的に設定できるようにするには、アクティビティの onCreate メソッドで isInitialFocusOnFocusableAvailable フラグを true に設定する必要があります。実装方法について詳しくは、Jetpack Compose Glimmer のフォーカスを参照してください。

Glimmer スタイルの実装

Glimmer スタイルには、GlimmerTheme オブジェクトからアクセスできます。参考資料として references/glimmertheme-source.md を使用してください。

カテゴリ	トークン	値／役割
色	primary	#9BBFFF（焦点色）
色	secondary	#4C88E9（焦点色）
色	surface	#262626（透明なベース — 透明として描画）
色	outline	#606460（3.dp の境界線の色）
形状	標準	RoundedCornerShape(36.dp)
形状	小	RoundedCornerShape(12.dp)

タイポグラフィのスケール（Google Sans Flex）

厳守するデフォルト設定： Glimmer UI を作成する際は、カスタムブランド書体が明示的に指定されていない限り、Google Sans Flex を使用する必要があります。 可変フォントの設定： Google Sans Flex は可変フォントであるため、次の軸を設定する必要があります。

• 丸み（ROND）： 特徴的な丸みのある外観にするため、常に 100f に設定します。
• 幅（wdth）： 100f に設定します。
• オプティカルサイズ（opsz）： 9f に設定します。
• ウェイト（wght）： 役割ごとに指定された値を使用します（タイトル：725f、本文：520f、キャプション：650f）。

スタイル名	サイズ / 行の高さ	ウェイト軸	幅	丸み	オプティカルサイズ
大タイトル	30.sp / 36.sp	725	100	100	9
中タイトル	24.sp / 32.sp	725	100	100	9
小タイトル	20.sp / 28.sp	725	100	100	9
大本文	30.sp / 36.sp	520	100	100	9
中本文	24.sp / 32.sp	520	100	100	9
小本文	20.sp / 28.sp	520	100	100	9
キャプション	18.sp / 28.sp	650	100	100	9

深度レベル

影を使って AI グラス上の深度を表現し、強調の度合いを変えることで階層感を作り出します。Jetpack Compose Glimmer のコントロールでは、5 つのプリセット DepthEffectLevels を含む DepthEffect を使用します。参考資料として、references/deptheffect-source.md と references/deptheffectlevels-source.md を使用してください。

使用例：

レベル	用途
level1	カードや常時表示される背景 UI の標準的な通常状態です。
level2	ボタンやインタラクティブなカードの標準的なフォーカス時／押下時の状態です。
ExtraSmall	4.dp

Jetpack Compose Glimmer コンポーネントの実装

カード

カードは Glimmer の基本となるサーフェスベースのコンテナで、テキスト、画像、アイコン、アクションなどの関連コンテンツをまとめ、ひとつの焦点として表示します。Glasses 環境で明確な深度面（Z 軸）を作り、テキスト、画像、アイコンの安定した背景を提供します。カードを List Item の中に配置しないでください。

実装の基本ロジック

• サーフェス階層： カードはベースサーフェス上、またはリスト内に配置するよう設計されています。onClick ラムダが指定されている場合、フォーカス時に自動で視覚的なフィードバックを提供します。
• インタラクション：
  • IF カード全体が単一のトリガーとして機能する場合（例：メディア項目や設定）：フォーカス効果を有効にするため、THEN onClick ラムダを指定します。
  • ELSE： カードに個別のボタンやスイッチなど、複数の内部インタラクティブ要素が含まれる場合は、フォーカスの競合を避けるため、onClick を null のままにします。

技術ドキュメントのリンク

Glimmer Card コンポーネントを作成する場合は、以下を参照してください。

• 開発者向けガイダンス： Jetpack Compose Glimmer: Cards
• API ソースコード： references/card-source.md を使用してください。
• 実装サンプル： references/card-samples-source.md を使用してください。（基本的なカードとインタラクティブなカードの使用方法）

ボタン

ボタンは Glimmer で個別のアクションを実行するための主要なトリガーです。AI グラスのフォーカスモデルに合わせて最適化されており、タッチパッドなどの方法でボタンにフォーカスを移動すると、フォーカスハイライトが表示されます。

実装の基本ロジック

• Glimmer には、次の 2 種類のボタンがあります。
  • 標準ボタン（必須のテキストラベルと、任意の先行アイコンまたは末尾アイコン）。UI に余裕がある場合や、テキストがないとボタンの意味が明確でない場合に使用します。
  • アイコンボタン（アイコンのみ）。アイコンの意味が明確に伝わる場合にのみ使用してください。
• アイコンボタンと標準ボタンには、デフォルト版とトグル版があります。
  • デフォルト（「購入」や「移動」など、単一のアクションに使用します）
  • トグル（ミュートボタンなど、選択状態があるものに使用します）

技術ドキュメントへのリンク

Glimmer Button コンポーネントを作成する場合は、以下をお読みください。

• 開発者向けガイダンス： Jetpack Compose Glimmer: Buttons
• API ソースコード： references/button-source.md を参照してください。
• 実装サンプル： references/button-samples-source.md を参照してください。

タイトルチップ

チップは、Card またはコンテンツのグループの上に配置してタイトルを示す、ピル型の専用ラベルコンポーネントです。短いタイトル、名前、ステータスなどの簡潔な情報を表示するには、タイトルチップを使用します。

ガイドラインと使用方法

• 空間的な間隔： コンテンツの上に単独の TitleChip を配置する場合は、視覚的な階層を保つために TitleChipDefaults.AssociatedContentSpacing（8.dp）を使用する必要があります。
• インタラクティブ性： タイトルチップは情報表示のみを目的としており、ナビゲーションの対象にしたり、アクティブ化したりすることはできません。
• レイアウト： タイトルチップ内のテキストは常に中央揃えにしてください。タイトルチップを2行にせず、余分な単語は省略してください。ラベルは3語以内にしてください。

技術ドキュメントへのリンク

Glimmer Title Chip コンポーネントを作成する場合は、以下をお読みください。

• 開発者向けガイダンス： Jetpack Compose Glimmer: Title Chips
• API ソースコード： references/titlechip-source.md を参照してください。
• 実装サンプル： references/titlechip-samples-source.md を参照してください。（コンテンツのグループの上に配置するタイトルチップ）

アイコン

アイコンは、概念、アクション、ステータスを簡潔に表す視覚的なシンボルです。Glimmer では、アイコンとアイコンボタンが XR 環境向けに最適化されており、加算型ディスプレイでの明瞭な表示と、インタラクティブ要素への視線に反応するフィードバックを提供します。

ガイドラインと使用方法

• サイズ： 定義済みの IconSizes（Standard、Large など）を使用し、アイコンの視認性を保ち、XR 環境に必要な最小タッチターゲット要件を満たしてください。
• インタラクティブ性：
  • アイコンがトリガーとして機能する場合： 自動的な視覚フィードバックと必要なタップターゲットのパディングを提供するため、IconButton を使用する必要があります。
  • それ以外の場合： インタラクティブでないインジケーターやステータスシンボルには、単独の Icon を使用してください。
• コントラスト： アイコンの色合いに純粋な黒（#000000）を絶対に使用しないでください。暗い背景や実環境の背景でもアイコンが見えるよう、常にテーマカラーまたは Glimmer の標準コンテンツカラーを使用してください。
• アイコンライブラリ： 特に指定がない限り、デフォルトのアイコンライブラリには、600 のウェイト、Rounded、Unfilled の Material Symbols を使用します。

技術ドキュメントへのリンク

Glimmer Icon コンポーネントを作成する場合は、以下をお読みください。

• 開発者向けガイダンス： Jetpack Compose Glimmer: Icons
• API ソースコード（Icon）： references/icon-source.md を参照してください。
• API ソースコード（IconButton）： references/iconbutton-source.md を参照してください。
• API ソースコード（IconSizes）： references/iconsizes-source.md を参照してください。

リスト

リストは、メガネ上で複数の項目間を移動し、一覧できるコンテナです。一度にリスト内の1項目だけを表示するユースケースでは、Glimmer Stack を使用してください。リスト項目の種類が似ている場合は、タイトルチップとともにリストを使用してください。項目の種類が異なる場合も、Glimmer Stack を使用してください。

ガイドラインと使用方法

• ListItem スロット： 行には ListItem コンポーザブルを使用します。定義済みのスロットが用意されています。参考資料として references/listitem-source.md を使用してください。
• 視覚的一貫性： 類似した項目のリストを作成する場合は、すべての項目で背景色（通常は GlimmerTheme.colors.surface）と角丸（標準は 36.dp）を統一してください。異なる種類のコンテンツを視覚的にグループ化する場合を除き、これらを変えないでください。
• 統合タイトルチップ： Glimmer Lists は統合タイトルチップに対応しています。リスト内にセクション見出しが必要な場合： 空間的一貫性を保つため、独立した TitleChip を追加するのではなく、統合タイトルチップを有効にしてください。
• 垂直方向の配置： メガネのディスプレイ上で項目間の視覚的な間隔を確保するため、VerticalList では必ず verticalArrangement = Arrangement.spacedBy(20.dp) を使用してください。
• 特に指定がない限り、リスト項目間のデフォルトの間隔である 20 dp を必ず使用してください。

技術ドキュメントへのリンク

Glimmer List コンポーネントを作成する場合は、以下をお読みください。

• API ソースコード（List）： references/list-source.md を使用してください。
• API ソースコード（ListItem）： references/listitem-source.md を使用してください。
• API ソースコード（ListState）： references/liststate-source.md を使用してください。

スタック

スタックは、カードのように重なって表示され、一度に 1 つのコンテンツのみを表示する折りたたまれたリストです。一度に複数の項目を表示する場合は、Glimmer List コントロールを使用してください。スタックにはタイトルチップを使用しないでください。項目の種類が異なる場合は、スタックを使用して表示してください。項目の種類が同じ場合は、リストを使用してください。

ガイドラインと使用方法

レイアウトのヒント

• スタックでは、高さが異なる項目を使用できます。
• スタックコントロールをディスプレイの下端に合わせてください。
• スタックコントロールの高さは、スタック内で最も高い項目より 66 dp 高くする必要があります。これにより、スクリーン効果のためのスペースを確保し、項目間の移動時の動きを最小限に抑えられます。
• クリッピングとレイヤリング： 最上部の項目の背後にある項目が適切にクリップされ、非表示になるように、すべての item ブロック内の Card（または該当するコンテナ）に .itemDecoration(CardDefaults.shape) 修飾子を適用する必要があります。
• 奥行きのシャドウ： 空間的な分離と要素の優先度を維持するには、Glimmer の ShadowScope、DepthEffect、または指定された DepthEffectLevels を利用して、奥行きの平面をスケーリングしてください。

技術ドキュメントへのリンク

Glimmer Stack コンポーネントを作成する場合は、以下をお読みください。

• API ソースコード（Stack）： references/stack-source.md を使用してください。
• API ソースコード（StackState）： references/stackstate-source.md を使用してください。
• API ソースコード（StackItemScope）： references/stackitemscope-source.md を使用してください。

テキスト

Jetpack Compose Glimmer の Text コンポーネントは、Compose のテキストコンポーネントを基にしており、さまざまなテキストプロパティを設定できます。テキストには GlimmerTheme のスタイルを選択してください。独自のタイポグラフィを使用する場合は、アプリケーションのテーマを変更してください。

Surface

Surface は Glimmer の基本的な構成要素です。参考資料として references/surface-source.md を使用してください。

サーフェスは、ボタンやカードなどのコンポーネントにおける、独立した視覚領域または「物理的な」境界を表します。カスタムコンポーネントを作成する必要がある場合に使用してください。

5. システム UI と統合する

• AI メガネの通知について詳しくは、AI メガネの通知動作を理解するを参照し、通知からディスプレイ AI メガネでアクティビティを開始する方法をご確認ください。