Jetpack XR SDK を使用して Androidify を XR に対応させる

Android XR を搭載した Samsung Galaxy XR がリリースされました。このブログ投稿は、 Android XR Spotlight Week の一環として公開されています。このイベントでは、Android XR 向けにアプリを学習、構築、準備するのに役立つリソース（ブログ投稿、動画、サンプルコードなど）を提供しています。

Android XR を搭載した初のデバイス、Samsung Galaxy XR がリリースされました。ユーザーは、Google Play ストアのお気に入りのアプリをまったく新しい次元、つまり 3 次元で楽しめるようになりました。

3 次元は広々としており、アプリを配置するのに十分なスペースがあります。アプリに適したツールを使用して、今すぐ始めましょう。たとえば、Jetpack XR SDK を使用すると、Kotlin や Compose などの最新の Android 開発ツールを使用して、没入型の XR エクスペリエンスを構築できます。

このブログ投稿では、Google が愛用している Androidify アプリの気まぐれな要素を XR に取り入れた過程と、アプリを XR に対応させるために必要な基本事項について説明します。

Androidify の概要

Androidify は、Gemini、CameraX、Navigation 3、Jetpack Compose などの最新テクノロジーを使用して Android ボットを作成できるオープンソース アプリです。Androidify は、アダプティブ レイアウトを作成することで、スマートフォン、折りたたみ式デバイス、タブレットで美しく表示されるように設計されました。

Androidify はさまざまなフォーム ファクタで美しく表示されます。

アダプティブ レイアウトの重要な柱は、再利用可能なコンポーザブルです。Jetpack Compose を使用すると、ユーザーが使用しているデバイスの種類に関係なく、直感的なユーザー エクスペリエンスを実現するためにさまざまな方法でレイアウトできる、小さな UI コンポーネントを作成できます。実際、Androidify はアプリを変更することなく Android XR と互換性があります。

Androidify は、コードを変更することなく、大画面対応のレスポンシブ レイアウトを使用して XR に適応します。

Android XR の特別な処理を行っていないアプリは、適切なサイズのウィンドウでマルチタスク処理でき、大画面での動作とほぼ同じように動作します。このため、Androidify は追加の作業なしで Android XR で完全に機能します。しかし、Google はここで止めたくなかったので、XR ユーザーに楽しいエクスペリエンスを提供するために、XR に特化したアプリを作成することにしました。

XR での方向の把握

Android XR の基本的なコンセプトについて説明します。まず、アプリを実行できる 2 つのモード（ホームスペースとフルスペース）から始めましょう。

ホームスペースでは、複数のアプリを並べて実行できるので、ユーザーはさまざまなウィンドウでマルチタスクを行うことができます。その意味では、大画面の Android デバイスでのデスクトップ ウィンドウ処理とよく似ていますが、仮想空間で行われます。

フルスペースでは、アプリにスペースの境界がなく、空間 UI や仮想環境の制御など、Android XR の空間機能をフル活用できます。

アプリをフルスペースでのみ実行するようにしたくなるかもしれませんが、ユーザーはアプリでマルチタスクを行いたい場合があるため、両方をサポートすることでユーザー エクスペリエンスが向上します。

Androidify の新しい次元に対応した設計

楽しいアプリは優れたデザインから始まります。Android DevRel のシニア デザイン アドボケートである Ivy Knight は、Androidify の既存のデザインを XR 向けに新しいデザインに作り直すというタスクに取り組みました。Ivy、どうぞ。

XR 向けのデザインには独自のアプローチが必要でしたが、実際にはモバイル デザインと多くの共通点がありました。まず、包含について考えました。境界を明確に示すか、微妙に暗示することで、サブスペース内の UI 要素を整理してグループ化する方法です。また、ユーザーに応じて調整して移動する空間 UI 要素のさまざまなサイズに対応することも学びました。Androidify の場合と同様に、アダプティブ レイアウトを使用して構築することで、空間 UI のレイアウトをパーツに分割できます。

ホームスペースからデザインを開始する

幸いなことに、Android XR では、ホームスペースで現在のアプリをそのまま使用できるため、ウィンドウ ツールバーとフルスペースへの移行ボタンを追加するだけで、拡張された XR デザインに移行できました。

また、考えられるハードウェア機能と、ユーザーがそれらを操作する方法についても検討しました。Androidify のモバイル レイアウトは、さまざまな姿勢、クラスサイズ、カメラの数に合わせて調整され、写真のオプションが増えます。このモデルに従って、ヘッドセット デバイスのカメラ レイアウトも調整する必要がありました。また、UI とユーザーの距離を考慮して、テキストを調整する必要もありました。

フルスペースへの大きな移行に対応した設計

フルスペースは最大の移行でしたが、デザインを調整するための創造的な余地が最も大きくなりました。

Androidify では、視覚的な包含（ペイン）を使用して、「写真の撮影または選択」ペインのように、背景とアウトラインで機能をグループ化します。また、トップ アプリバーなどのコンポーネントを使用して、他のペインを囲むことで自然な包含を作成しました。最後に、特定の要素間の近接性によって、本質的な包含が示されます。たとえば、「変換を開始」の下部ボタンは「ボットの色を選択」ペインの近くにあります。

空間パネルを使用すると、簡単に分離できます。モバイル デザインを空間パネルに適応させる方法を決定するには、最も奥にあるサーフェスから順にサーフェスを削除してみてください。削除できる背景の数と残りの背景を確認します。Androidify でこの操作を行った後、残ったのは大きな緑色の Android の曲線でした。この曲線は、ブランディングの瞬間と背景としてだけでなく、3D 空間のコンテンツのアンカーとしても機能しました。

このアンカーを設定することで、要素がどのように移動するかを想像しやすくなり、近接性を使用して残りのユーザー エクスペリエンスを分離して変換する方法を把握しやすくなりました。

アプリを空間化するためのその他の設計のヒント

• 包含しない: コンポーネントを分離して、実際の（空間）スペースを与えます。UI 要素に余裕を持たせる必要があります。
• サーフェスを削除する: 背景を非表示にして、デザインにどのような影響があるかを確認します。
• モーションで動機付ける: アプリでトランジションをどのように使用していますか？そのキャラクターを使用して、アプリが VR に移行する様子を想像します。
• アンカーを選択する: ユーザーが空間で迷わないようにします。UI を収集または固定する要素を用意します。

XR UI デザイン パターンの詳細については、Android デベロッパーの Android XR 向けのデザインをご覧ください。

空間 UI の基本

Ivy が Androidify を XR 向けに設計する際に考え方をどのように適応させたかについて説明したので、空間 UI の開発について説明します。最新の Android ツールとライブラリの使用に慣れている場合は、Jetpack XR SDK を使用した空間 UI の開発は簡単です。Compose でレイアウトを作成するなど、すでに慣れているコンセプトが見つかります。実際、空間レイアウトは、行、列、スペーサーを使用した 2D レイアウトとよく似ています。

これらの要素は、SpatialRows と SpatialColumns に配置されます。

ここに示されている空間要素は SpatialPanel コンポーザブルで、テキスト、ボタン、動画などの 2D コンテンツを表示できます。

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

SpatialPanel はサブスペース コンポーザブルです。サブスペース コンポーザブルはサブスペース内に含める必要があり、SubspaceModifier オブジェクトによって変更されます。サブスペースはアプリの UI 階層内の任意の場所に配置でき、サブスペース コンポーザブルのみを含めることができます。SubspaceModifier オブジェクトは Modifier オブジェクトとよく似ており、サイズや位置などのパラメータを制御します。

Orbiter  は SpatialPanel にアタッチして、アタッチ先のコンテンツと一緒に移動できます。多くの場合、アタッチ先のコンテンツに関するコンテキストに応じたコントロールを提供するために使用され、コンテンツが主な焦点となります。コンテンツの 4 辺のいずれかに、設定可能な距離で配置できます。

他にも 多くの空間 UI 要素がありますが、Androidify の空間レイアウトを作成するために使用した主な要素はこれらです。

XR 開発を始める

まず、プロジェクトの設定から始めましょう。Jetpack XR の依存関係ページにある Jetpack XR Compose の依存関係を追加しました。

ユーザーをフルスペースに移行するボタンのコードを追加しました。まず、その機能があるかどうかを検出します。

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

次に、既存のレイアウトに [コンテンツを展開] アイコンを使用する新しいボタン コンポーネントを作成し、onClick 動作を設定しました。

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

これで、そのボタンをクリックすると、フルスペースに中サイズのレイアウトが表示されます。空間機能を確認して、空間 UI を表示できるかどうかを判断できます。その場合は、新しい空間レイアウトを表示します。

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

ホーム画面のデザインを実装する

フルスペースのホーム画面の空間デザインに戻って、どのように実装されたかを見てみましょう。

ここでは、2 つの SpatialPanel 要素を特定しました。1 つは右側の動画カードが入っているパネル、もう 1 つはメイン UI が入っているパネルです。最後に、上部に Orbiter がアタッチされています。まず、動画プレーヤー パネルから始めましょう。

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

通常のレイアウトの 2D VideoPlayer コンポーネントを SpatialPanel に再利用しただけで、追加の変更は行っていません。単独で表示すると次のようになります。

メイン コンテンツ パネルも同様です。中サイズのパネル コンテンツを SpatialPanel で再利用しました。

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

このパネルには ResizePolicy を設定しました。これにより、パネルの端にハンドルが表示され、ユーザーがパネルのサイズを変更できます。また、MovePolicy も設定されているため、ユーザーはパネルをドラッグして移動できます。

同じサブスペースに配置すると、互いに独立するため、VideoPlayer パネルをメイン コンテンツ パネルの子にしました。これにより、メイン コンテンツ パネルがドラッグされると、親子関係によって VideoPlayer パネルが移動します。

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

これが最初の画面の作成方法です。

他の画面に移行する

他の画面についても簡単に説明し、それぞれの画面で考慮した点を紹介します。

ここでは、SpatialRow コンポーザブルと SpatialColumn コンポーザブルを使用して、推奨される表示スペースに収まるレイアウトを作成しました。ここでも、中サイズのレイアウトのコンポーネントを再利用しています。

フルスペースの結果画面: プロンプトで生成されたボット: 赤い野球帽、アビエイター サングラス、水色の T シャツ、赤と白のチェック柄のショートパンツ、緑色のビーチサンダルを履き、テニスラケットを持っています。

結果画面には、フェザリング効果を使用して補完的な引用が表示され、画面の端に近づくとフェードアウトします。また、使用した入力を表示する際には実際の 3D トランジションを使用し、空間内で画像を反転させます。

Google Play ストアに公開する

空間レイアウトを使用してアプリを XR に対応させたので、Google Play ストアにリリースしました。アプリの AndroidManifest.xml ファイルに最後に行った重要な変更は次のとおりです。

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

これにより、Google Play ストアは、このアプリに XR に特化した機能があることを認識し、ユーザーにアプリが XR を念頭に置いて作成されたことを知らせるバッジを表示します。

[]

リリースをアップロードする際に、XR 向けにリリースするための特別な手順は必要ありません。モバイル トラックのユーザーと XR デバイスのユーザーに同じアプリが通常どおり配信されます。 ただし、アプリの XR 固有のスクリーンショットを追加したり、空間動画アセットを使用してアプリの没入型プレビューをアップロードしたりすることもできます。Android XR デバイスでは、Google Play ストアに没入型の 3D プレビューとして自動的に表示されるため、ユーザーはアプリをインストールする前にコンテンツの奥行きとスケールを体験できます。

今すぐ独自のコンテンツの構築を始めましょう

Androidify は、既存の 2D Jetpack Compose アプリを空間化する方法を示す優れた例です。今回は、Androidify の空間 UI を設計からコード、公開まで開発する全プロセスを紹介しました。既存のデザインを変更して空間パラダイムに対応させ、SpatialPanel コンポーザブルと Orbiter コンポーザブルを使用して、ユーザーがフルスペースに入ったときに表示される空間レイアウトを作成し、最後にアプリの新しいバージョンを Google Play ストアにリリースしました。

このブログ投稿が、独自のアプリを Android XR に対応させる方法を理解するのに役立つことを願っています。以下に、役立つリンクをいくつか紹介します。

• Androidify のソースコードを確認し、Google Play の Androidify を使用して独自のボットを作成します。
• デベロッパー向けドキュメントから始め、Jetpack Compose for XR について詳しく学びます。
• Android XR エミュレータをダウンロードして、独自のアプリを試してみましょう。