🔰

ARcoreのサンプルコードをJetpackComposeで使う

2024/04/15に公開

Android

はじめに

Android歴一年に満たない素人である私がARアプリを開発することがありJetpackComposeで実装を行ったのでその時に詰まったことをまとめておきます。

準備

まずARcoreのサンプルコードをダウンロードしていきます。

↑ここからARcoreのSDKをgit cloneするかzipでダウンロードしたものを展開します。

samplesの中にあるhello_ar_kotlinをAndroidStudioで開きます。
なんかたくさんフォルダがあると思いますが大体がAR描画に関わっているところです。
~~ディレクトリが見づらくなるからパッケージ化してくれGoogle~~
src->main->java->com.google.ar.core.examples->kotlin->helloarの中にあるHelloArActivityを見てみると...

HelloArActivity.kt

class HelloArActivity : AppCompatActivity() {
  companion object {
    private const val TAG = "HelloArActivity"
  }

  lateinit var arCoreSessionHelper: ARCoreSessionLifecycleHelper
  lateinit var view: HelloArView
  lateinit var renderer: HelloArRenderer

  val instantPlacementSettings = InstantPlacementSettings()
  val depthSettings = DepthSettings()

  ~以下略~

見ての通りAppCompatActivity()を使用しておりJetpackComposeで使用されるComponentActivity()を継承していません。

ボタン等ならxmlを見ながらComposeに頑張って書き換えれば実装はできますが、ARのサンプルコードでは上手く置き換えができませんでした。

対策

なぜ置き換えられなかったのか

まずなぜ上手く置き換えられなかったかについて簡単に説明していきます。

まずレイアウトファイルを見てみましょう。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.google.ar.core.examples.java.helloar.HelloArActivity">

  <android.opengl.GLSurfaceView
      android:id="@+id/surfaceview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_gravity="top"/>

  <ImageButton
      android:id="@+id/settings_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true"
      android:layout_alignParentTop="true"
      android:layout_margin="25dp"
      android:src="@drawable/ic_settings"
      android:background="@android:color/transparent"/>

</RelativeLayout>

GLSurfaceViewという要素があることがわかると思います。
これはAndroidでOpenGLを使用するためのものでカメラやARの描画がこの中で行われています。
実はこの要素JetPackComposeに対応したものがなくそのままでは置き換えることができません。

実装

ではどのように実装を行なったかというと、AndroidViewというCompose関数を使用します。
AndroidViewを使用すると、Compose内で既存のAndroidビューを表示できます。これにより、Composeとxml方式のビューを組み合わせることができ、Composeでは使用できなかったものを組み込むことができます。
今回のサンプルコードでは以下のようになります。

kotlin

 AndroidView(factory = {
                    view.surfaceView
            })

hello_ar_kotlinではHelloArViewというクラス内でARの描画を行なっています。
そのため描画部分をAndroidViewに組み込むことでComposeに埋め込むことができます。

注意点としてはアクティビティの形式をComponentActivity()にしないといけないところです。
おそらく新しくComposeのプロジェクトを作成し、AR部分に必要なファイルをコピーして作成したほうが早いと思います。
そのためComposeに置き換えるというよりは前述した通りComposeのアプリの中にARcoreの描画部分を埋め込むイメージになると思います。

終わりに

今回はARcoreのサンプルをJetpackComposeに置き換える方法について素人なりにまとめてみました。
Sceneformが無くなった後のARcore自体が情報が少ないため少しでも参考になればと思います。

はじめに

準備

対策

なぜ置き換えられなかったのか

実装

終わりに

Discussion