Rails: Hotwire Nativeで作るネイティブモバイルアプリ: Android編（2）パス構成（翻訳）

前回: Android編（1）セットアップ

Rails: Hotwire Nativeで作るネイティブモバイルアプリ: Android編（2）パス構成（翻訳）

パス構成（path configuration）は、おそらくiOS/Androidプラットフォームの両方でHotwire Nativeを学ぶうえで知っておくべき最も基本的な概念です。パス構成を使うことで、モーダルの表示、セッションのリセット、さらにはネイティブ画面への移動が可能になります。

前回の記事【要リンク更新】では、アプリを起動して実行するところまで行いました。リンクをクリックしてみると、特にフォームの保存操作でアプリがネイティブではないことが感じられます。

ここを変えましょう。

🔗 ローカルのパス構成ファイルを作成する

Androidの場合、起動して実行するまでの作業がiOSの場合よりも少し増えます。

最初に、アプリにアセットフォルダを作成します。

これを行うには、Android Studioでappディレクトリを右クリックして、New > Folder > Assets Folderをクリックします。

次に、 json/というサブフォルダを作成し、path-configuration.jsonという新しいファイルを以下の内容で作成します。

{
  "settings": {},
  "rules": [
    {
      "patterns": [
        ".*"
      ],
      "properties": {
        "context": "default",
        "uri": "hotwire://fragment/web",
        "pull_to_refresh_enabled": true
      }
    },
    {
      "patterns": [
        "/new$", "/edit$"
      ],
      "properties": {
        "context": "modal",
        "uri": "hotwire://fragment/web/modal/sheet",
        "pull_to_refresh_enabled": false
      }
    }
  ]
}

ここからもう2つステップがあります。

HotwireApplication.kt（もしくは自分のアプリの名前）という新しいファイルを作成しましょう。

// 【コード修正済】
// ./app/src/main/java/com/example/hotwireexample/HotwireApplication.kt
package com.example.hotwireexample.main

import android.app.Application
import dev.hotwire.core.config.Hotwire
import dev.hotwire.core.turbo.config.PathConfiguration

class HotwireApplication: Application() {
  override fun onCreate() {
    super.onCreate()
    configureApp()
  }

  private fun configureApp() {
    Hotwire.loadPathConfiguration(
      context = this,
      location = PathConfiguration.Location(
        assetFilePath = "json/path-configuration.json"
      )
    )
  }
}

🔗 ヒント

上を以下のように書くことで、ローカルのファイルよりも優先されるパス構成ファイルをサーバーからダウンロードすることも可能です。

Hotwire.loadPathConfiguration(
    context = this,
    location = PathConfiguration.Location(
      assetFilePath = "json/configuration.json",
      remoteFileUrl = "https://example.com/configurations/android_v1.json"
    )
)

こうしておくと、appストアの承認を得なくても変更をデプロイできるので便利です。

🔗 Android Manifestを設定する

次に、AndroidManifest.xmlファイルでアプリ名を以下のように変更して、上のクラスに対応するようにします。

<application
+   android:name=".main.HotwireApplication"
    android:allowBackup="true"
    ....
    </application

これでCtrl + Rでアプリを実行すれば、/editまたは/newで終わるルーティングに移動するたびにモーダルが表示されるようになります。

これらはカスタムコンポーネントを作成せずに行えます。

🔗 次回

本記事の冒頭で既に述べたように、パス構成はHotwireネイティブで理解しておくべき最も重要な概念です。これにより、appストアの承認を得なくてもアプリに簡単な変更を加えられるようになり、ネイティブ画面に移動することも可能になります。

Androidでは、ネイティブ画面をレンダリングする方法が 2 つあります。これについては次回の記事で説明します。

それまでHappy hacking！

次回: Android編（3）ネイティブ画面

関連記事

Rails: Hotwire Nativeで作るネイティブモバイルアプリ: Android編（1）セットアップ（翻訳）

Rails: Hotwire Nativeでネイティブモバイルアプリを作ろう: iOS編（1）（翻訳）

Rails: Hotwire Nativeで作るネイティブモバイルアプリ: iOS編（2）ネイティブ画面（翻訳）

Rails: Hotwire Nativeで作るネイティブモバイルアプリ: iOS編（3）ブリッジコンポーネント（翻訳）