{"id":8969,"date":"2025-10-10T23:14:38","date_gmt":"2025-10-10T23:14:38","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=8969"},"modified":"2025-10-10T23:14:38","modified_gmt":"2025-10-10T23:14:38","slug":"rails-hotwire-native%e3%81%a7%e4%bd%9c%e3%82%8b%e3%83%8d%e3%82%a4%e3%83%86%e3%82%a3%e3%83%96%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%82%a2%e3%83%97%e3%83%aa-android%e7%b7%a8%ef%bc%884%ef%bc%89","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/8969\/","title":{"rendered":"Rails: Hotwire Native\u3067\u4f5c\u308b\u30cd\u30a4\u30c6\u30a3\u30d6\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea: Android\u7de8\uff084\uff09\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u7ffb\u8a33\uff09\uff5cTechRacho by BPS\u682a\u5f0f\u4f1a\u793e"},"content":{"rendered":"\n<\/p>\n
\n

Rails: Hotwire Native\u3067\u4f5c\u308b\u30cd\u30a4\u30c6\u30a3\u30d6\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea: Android\u7de8\uff084\uff09\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u7ffb\u8a33\uff09<\/h2>\n

\u524d\u56de\u306e\u8a18\u4e8b<\/a>\u3067\u306f\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u753b\u9762\u306b\u79fb\u52d5\u3057\u3066 Android Views\u307e\u305f\u306fJetpack Compose\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u3057\u304b\u3057\u30cd\u30a4\u30c6\u30a3\u30d6\u753b\u9762\u306b\u306f\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u304c\u3042\u308a\u307e\u3059\u3002\u540c\u3058\u30cd\u30a4\u30c6\u30a3\u30d6\u753b\u9762\u3092\u300ciOS\u7528\u300d\u300cAndroid\u300d\u7528\u306b\u305d\u308c\u305e\u308c\u4f5c\u6210\u3059\u308b\u3068\u3001\u8907\u96d1\u306b\u306a\u3063\u3066\u30b3\u30b9\u30c8\u304c\u304b\u3055\u307f\u307e\u3059\u3002<\/p>\n

\u3057\u304b\u3057\u3001\u30e2\u30d0\u30a4\u30eb\u30cd\u30a4\u30c6\u30a3\u30d6\u306a\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u6a5f\u80fd\u3092\u6d3b\u7528\u3057\u305f\u3044\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u672c\u65e5\u306f\u3001Web\u753b\u9762\u3067\u30cd\u30a4\u30c6\u30a3\u30d6\u306e\u6a5f\u80fd\u3092\u6d3b\u7528\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n

\ud83d\udd17<\/a> \u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n

\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08bridge component\uff09<\/a><\/strong>\u306fStimulus\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u62e1\u5f35\u3067\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u30a2\u30d7\u30ea\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n

\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n

    \n
  1. \u30cd\u30a4\u30c6\u30a3\u30d6\u30a2\u30d7\u30ea\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u53d7\u4fe1\u3067\u304d\u308bJavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/li>\n
  2. Web\u30a2\u30d7\u30ea\u304b\u3089\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3057\u3066\u8fd4\u4fe1\u3067\u304d\u308b\u30cd\u30a4\u30c6\u30a3\u30d6\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/li>\n
  3. Android\u30a2\u30d7\u30ea\u306eHotwire\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30ec\u30b8\u30b9\u30bf\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3059\u308b<\/li>\n<\/ol>\n

    \u30d6\u30ea\u30c3\u30b8\u3067\u91cd\u8981\u306a\u30e1\u30bd\u30c3\u30c9\u306fsend<\/code><\/a>\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u3001\u300c\u30a4\u30d9\u30f3\u30c8\u300d\u300c\u30c7\u30fc\u30bf\u300d\u300c\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u300d\u3092\u53d7\u3051\u53d6\u308a\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u8fd4\u4fe1\u3057\u305f\u3068\u304d\u306b\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n

    \ud83d\udd17<\/a> \u6700\u521d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b<\/h3>\n

    \u30d5\u30a9\u30fc\u30e0\u306e\u30e2\u30fc\u30c0\u30eb\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u306eSubmit\uff08\u9001\u4fe1\uff09\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u69cb\u7bc9\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n

    \"\"<\/a><\/p>\n

    \u6700\u521d\u306bRails\u30a2\u30d7\u30ea\u5074\u3067\u4f5c\u696d\u3057\u307e\u3059\u3002<\/p>\n

    \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30d6\u30ea\u30c3\u30b8\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n

    .\/bin\/importmap pin @hotwired\/stimulus @hotwired\/hotwire-native-bridge\n<\/code><\/pre>\n
    \u6b21\u306b\u3001app\/javascript\/controllers\/bridge\/form_controller.js<\/code>\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u4ee5\u4e0b\u306e\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
    import { BridgeComponent, BridgeElement } from \"@hotwired\/hotwire-native-bridge\"\n\nexport default class extends BridgeComponent {\n  static component = \"form\"\n  static targets = [ \"submit\" ]\n\n  submitTargetConnected(target) {\n    const submitButton = new BridgeElement(target)\n    const submitTitle = submitButton.title\n\n    this.send(\"connect\", { submitTitle }, () => {\n      target.click()\n    })\n  }\n}\n<\/code><\/pre>\n
    \u6700\u5f8c\u306b\u3001todos\/_form.html.erb<\/code>\u30d5\u30a1\u30a4\u30eb\u306b\u3042\u308b\u30d5\u30a9\u30fc\u30e0\u306bStimulus\u7528\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
    -\n+\n  \n    
    \n      
     prohibited this todo from being saved:<\/h2>\n\n      \n    <\/div>\n  \n\n  \n\n  \n\n  
    \n-   \n+   \n  <\/p>\n\n<\/code><\/pre>\n
    Rails\u5074\u306e\u4f5c\u696d\u306f\u3053\u308c\u3067\u3059\u3079\u3066\u304a\u3057\u307e\u3044\u3067\u3059\u3002<\/p>\n
    \ud83d\udd17<\/a> Android\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u69cb\u7bc9\u3059\u308b<\/h3>\n
    \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u4ee5\u4e0b\u3092\u884c\u3044\u307e\u3059\u3002\u3053\u308c\u306fiOS\u306e\u5834\u5408<\/a>\u3068\u4f3c\u3066\u3044\u307e\u3059\u3002<\/p>\n
      \n
    1. \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b<\/li>\n
    2. \u53d7\u4fe1\u3057\u305f\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u5fdc\u7b54\u3059\u308b<\/li>\n
    3. WebView\u3078\u306e\u8fd4\u4fe1\u306bAndroid\u30a2\u30d7\u30ea\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u542b\u3081\u308b<\/li>\n<\/ol>\n
      \u65b0\u3057\u3044\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u69cb\u7bc9\u3059\u308b\u3068\u304d\u306f\u3001\u53ef\u52d5\u90e8\u5206\u304c\u591a\u6570\u3042\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u6bb5\u968e\u7684\u306b\u69cb\u7bc9\u3059\u308b\u306e\u304c\u666e\u901a\u3067\u3059\u3002<\/p>\n
      \u6700\u521d\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63a5\u7d9a\u3057\u307e\u3059\u3002
      \u6b21\u306b\u3001\u6a5f\u80fd\u306e\u69cb\u7bc9\u3092\u6bb5\u968e\u7684\u306b\u958b\u59cb\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u8a66\u884c\u932f\u8aa4\u304c\u4f55\u5ea6\u3082\u7e70\u308a\u8fd4\u3055\u308c\u307e\u3059\u3002<\/p>\n
      bridge<\/code>\u3068\u3044\u3046\u540d\u524d\u3067\u65b0\u3057\u3044\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u3001\u305d\u3053\u306bFormComponent<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
      \/\/ app\/src\/main\/java\/bridge\/FormComponent.kt\npackage bridge\n\nimport android.util.Log\nimport dev.hotwire.core.bridge.BridgeComponent\nimport dev.hotwire.core.bridge.BridgeDelegate\nimport dev.hotwire.core.bridge.Message\nimport dev.hotwire.navigation.destinations.HotwireDestination\n\nclass FormComponent(\n  name: String,\n  private val formDelegate: BridgeDelegate\n) : BridgeComponent(name, formDelegate) {\n\n  override fun onReceive(message: Message) {\n    when (message.event) {\n      \"connect\" -> handleConnectEvent(message)\n      else -> Log.w(\"FormComponent\", \"Unknown event for message: $message\")\n    }\n  }\n\n  private fun handleConnectEvent(message: Message) {\n\n    Log.w(\"FormComponent\", \"connected\")\n  }\n}\n<\/hotwiredestination><\/hotwiredestination><\/code><\/pre>\n
      \u6b21\u306f\u3001HotwireApplication<\/code>\u30d5\u30a1\u30a4\u30eb\u306b\u30d6\u30ea\u30c3\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n
      \/\/ \u4ee5\u4e0b\u306eimport\u3082\u8ffd\u52a0\u304c\u5fc5\u8981\nimport dev.hotwire.navigation.config.registerBridgeComponents\nimport dev.hotwire.core.bridge.BridgeComponentFactory\nimport bridge.FormComponent\n\nHotwire.registerBridgeComponents(\n BridgeComponentFactory(\"form\", ::FormComponent)\n)\n<\/code><\/pre>\n
      \u30a2\u30d7\u30ea\u3092\u30ea\u30d3\u30eb\u30c8\u3057\u3001\u30a8\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3067\u30d5\u30a9\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u3066\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n
      Android Studio\u306e\u30ed\u30b0\uff08\u5de6\u30c4\u30fc\u30eb\u30d0\u30fc\u306eLogcat\uff09\u3092\u78ba\u8a8d\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n
      \"\"<\/a><\/p>\n
      \u3053\u3053\u307e\u3067\u69cb\u7bc9\u3057\u305f\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u6613\u3057\u3044\u90e8\u5206\u3067\u3059\u3002<\/p>\n
      \u6b21\u306b\u3001Android\u306e\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306b\u304a\u3051\u308b\u3044\u304f\u3064\u304b\u306e\u7570\u306a\u308b\u5074\u9762\u3092\u7406\u89e3\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
      \u307e\u305a\u3001WebBottomSheetFragment<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u3066\u3001Hotwire Native\u5099\u3048\u4ed8\u3051\u306e\u4e0b\u90e8\u30b7\u30fc\u30c8\u3092\u4f7f\u3046\u4ee3\u308f\u308a\u306b\u3001\u72ec\u81ea\u306e\u30b7\u30fc\u30c8\u3092\u4f7f\u3046\u3088\u3046\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
      \/\/ app\/src\/main\/java\/com\/example\/hotwireexample\/WebBottomSheetFragment.kt\npackage com.example.hotwireexample\n\nimport dev.hotwire.navigation.destinations.HotwireDestinationDeepLink\nimport dev.hotwire.navigation.fragments.HotwireWebBottomSheetFragment\nimport android.view.LayoutInflater\nimport android.view.ViewGroup\nimport android.os.Bundle\n\n@HotwireDestinationDeepLink(uri = \"hotwire:\/\/fragment\/web\/modal\/sheet\")\nclass WebBottomSheetFragment : HotwireWebBottomSheetFragment() {\n  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {\n    return inflater.inflate(R.layout.fragment_web_bottom_sheet, container, false)\n  }\n}\n<\/code><\/pre>\n
      \u6b21\u306b\u3001res\/layout\/<\/code>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u3067\u3001fragment_web_bottom_sheet<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
      \n\n\n    \n\n        \n\n        \n        <\/com.google.android.material.appbar.materialtoolbar>\n\n    <\/com.google.android.material.appbar.appbarlayout>\n\n    \n\n<\/linearlayout>\n<\/code><\/pre>\n
      \u518d\u3073FormComponent<\/code>\u306b\u623b\u308a\u307e\u3057\u3087\u3046\u3002
      Web\u304b\u3089\u53d7\u4fe1\u3057\u305f\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u89e3\u6790\u53ef\u80fd\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
      @Serializable\nclass FormExampleComponent(\n    name: String,\n    private val formDelegate: BridgeDelegate\n) : BridgeComponent(name, formDelegate) {\n\n    ...\n\n    private fun handleConnectEvent(message: Message) {\n        val data = message.data() ?: return\n        Log.w(\"FormComponent\", \"connected\")\n    }\n}\n\n@Serializable\ndata class MessageData(\n    @SerialName(\"submitTitle\") val title: String\n)\n<\/messagedata><\/hotwiredestination><\/hotwiredestination><\/code><\/pre>\n
      \u3053\u3053\u3067Serializable\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u3067\u3057\u3087\u3046\u3002\u3053\u308c\u306f\u3001\u6b63\u3057\u3044\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u69cb\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/p>\n
      libs.versions.toml<\/code>\u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
      [versions]\n...\nserialization = \"1.5.0\"\n\n[libraries]\n...\nkotlin-serialization-json = { module = \"org.jetbrains.kotlinx:kotlinx-serialization-json\", version.ref = \"serialization\"}\n\n[plugins]\n...\njetbrains-serialization = {id = \"org.jetbrains.kotlin.plugin.serialization\", version.ref = \"kotlin\"}\n<\/code><\/pre>\n
      \u6b21\u306b\u3001\u30a2\u30d7\u30ea\u306ebuild.gradle.kts<\/code>\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
      plugins {\n   ...\n    alias(libs.plugins.jetbrains.serialization)\n\n}\n\nandroid {\n  ....\n}\n\ndependencies {\n.   ...\n    implementation(libs.kotlin.serialization.json)\n\n}\n<\/code><\/pre>\n
      “Sync Now”\u304c\u8868\u793a\u3055\u308c\u305f\u3089\u30af\u30ea\u30c3\u30af\u3057\u3066gradle\u30d5\u30a1\u30a4\u30eb\u3092\u540c\u671f\u3059\u308b\u3053\u3068\u3002<\/p>\n
      \u3053\u308c\u3067BridgeComponent<\/code>\u306e\u69cb\u7bc9\u306b\u5fc5\u8981\u306a\u3082\u306e\u304c\u3059\u3079\u3066\u63c3\u3063\u305f\u306e\u3067\u3001\u3044\u3088\u3044\u3088FormComponent<\/code>\u306e\u4ed5\u4e0a\u3052\u306b\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n
      \ud83d\udd17<\/a> FormComponent<\/code>\u3092\u4ed5\u4e0a\u3052\u308b<\/h3>\n
      \u9aa8\u7d44\u307f\u304c\u3067\u304d\u305f\u306e\u3067\u3001\u6700\u521d\u306f\u64cd\u4f5c\u3059\u308bAndroid View\u306b\u3064\u3044\u3066\u30af\u30e9\u30b9\u306b\u4f1d\u3048\u307e\u3057\u3087\u3046\u3002<\/p>\n
      class FormComponent(\n    name: String,\n    private val formDelegate: BridgeDelegate\n) : BridgeComponent(name, formDelegate) {\n\n+   private val fragment: Fragment\n+       get() = formDelegate.destination.fragment\n+\n+   private val toolbar: MaterialToolbar?\n+       get() = fragment.view?.findViewById(R.id.toolbar)\n+   private var submitMenuItem: android.view.MenuItem? = null\n  ....\n<\/hotwiredestination><\/hotwiredestination><\/code><\/pre>\n
      \u3053\u306ehandleConnectEvent<\/code>\u95a2\u6570\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30c7\u30fc\u30bf\u3092\u89e3\u6790\u3057\u3001\u305d\u306e\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u3066\u30c4\u30fc\u30eb\u30d0\u30fc\u306e\u69cb\u7bc9\u3092\u958b\u59cb\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
        private fun handleConnectEvent(message: Message) {\n        val data = message.data() ?: return\n        Log.w(\"FormComponent\", \"connected\")\n        showToolbarButton(data)\n    }\n\n  private fun showToolbarButton(data: MessageData) {}\n<\/messagedata><\/code><\/pre>\n
      \u3053\u3053\u307e\u3067\u6765\u308c\u3070\u3001\u69cb\u7bc9\u304c\u5fc5\u8981\u306a\u30d1\u30fc\u30c4\u306f\u3042\u30682\u3064\u3060\u3051\u3067\u3059\u3002<\/p>\n
      private fun showToolbarButton(data: MessageData) {\n    val menu = toolbar?.menu ?: return\n\n    \/\/ Find the ComposeView by ID in the fragment's view hierarchy\n    val composeView: ComposeView = fragment.view?.findViewById(R.id.compose_view) ?: return\n\n    \/\/ Set the Compose content in the ComposeView\n    composeView.setContent {\n        SubmitButton(\n            title = data.title,\n            onSubmitClick = {\n                Log.d(\"FormComponent\", \"FormComponent button pressed\")\n                replyTo(\"connect\")\n            }\n        )\n    }\n\n    \/\/ Add the ComposeView as the actionView for the menu item\n    submitMenuItem = menu.add(Menu.NONE, 20, 999, data.title).apply {\n        actionView = composeView\n        setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS)\n    }\n\n    Log.d(\"FormComponent\", \"FormComponent showToolbarButton with ComposeView from layout\")\n}\n\n@Composable\nfun SubmitButton(title: String, onSubmitClick: () -> Unit) {\n    TextButton(onClick = onSubmitClick) {\n        Text(text = title)\n    }\n}\n<\/code><\/pre>\n
      \u306a\u304a\u300120<\/code>\u3068999<\/code>\u3068\u3044\u3046\u6570\u5b57\u3092\u9078\u3093\u3060\u7279\u5225\u306a\u7406\u7531\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n
      \u5b8c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
      \/\/ app\/src\/main\/java\/bridge\/FormComponent.kt\npackage bridge\n\nimport android.util.Log\nimport dev.hotwire.core.bridge.BridgeComponent\nimport dev.hotwire.core.bridge.BridgeDelegate\nimport dev.hotwire.core.bridge.Message\nimport dev.hotwire.navigation.destinations.HotwireDestination\nimport com.google.android.material.appbar.MaterialToolbar\nimport androidx.fragment.app.Fragment\nimport com.example.hotwireexample.R\nimport android.view.Menu\n\nclass FormComponent(\n  name: String,\n  private val formDelegate: BridgeDelegate\n) : BridgeComponent(name, formDelegate) {\n\n  private val fragment: Fragment\n    get() = formDelegate.destination.fragment\n\n  private val toolbar: MaterialToolbar?\n    get() = fragment.view?.findViewById(R.id.toolbar)\n  private var submitMenuItem: android.view.MenuItem? = null\n\n  override fun onReceive(message: Message) {\n    when (message.event) {\n      \"connect\" -> handleConnectEvent(message)\n      else -> Log.w(\"FormComponent\", \"Unknown event for message: $message\")\n    }\n  }\n\n  private fun handleConnectEvent(message: Message) {\n    val data = message.data() ?: return\n    Log.w(\"FormComponent\", \"connected\")\n    showToolbarButton(data)\n  }\n\n  private fun showToolbarButton(data: MessageData) {\n    val menu = toolbar?.menu ?: return\n\n    \/\/ Find the ComposeView by ID in the fragment's view hierarchy\n    val composeView: ComposeView = fragment.view?.findViewById(R.id.compose_view) ?: return\n\n    \/\/ Set the Compose content in the ComposeView\n    composeView.setContent {\n      SubmitButton(\n        title = data.title,\n        onSubmitClick = {\n          Log.d(\"FormComponent\", \"FormComponent button pressed\")\n          replyTo(\"connect\")\n        }\n      )\n    }\n\n    \/\/ Add the ComposeView as the actionView for the menu item\n    submitMenuItem = menu.add(Menu.NONE, 20, 999, data.title).apply {\n      actionView = composeView\n      setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS)\n    }\n\n    Log.d(\"FormComponent\", \"FormComponent showToolbarButton with ComposeView from layout\")\n  }\n\n  @Composable\n  fun SubmitButton(title: String, onSubmitClick: () -> Unit) {\n    TextButton(onClick = onSubmitClick) {\n      Text(text = title)\n    }\n  }\n}\n<\/messagedata><\/hotwiredestination><\/hotwiredestination><\/code><\/pre>\n
      \u4ee5\u4e0a\u3067\u304a\u3057\u307e\u3044\u3067\u3059\u3002<\/p>\n
      \u6b21\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001iOS\u30b7\u30ea\u30fc\u30ba\u3067\u884c\u3063\u305f\u306e\u3068\u540c\u69d8\u306b\u3001\u3059\u3079\u3066\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u30ab\u30b9\u30bf\u30e0Trix\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n
      \u3067\u306f\u305d\u308c\u307e\u3067Happy hacking\uff01<\/p>\n
      \u95a2\u9023\u8a18\u4e8b<\/h2>\n
      \n
      Rails: Hotwire Native\u3067\u4f5c\u308b\u30cd\u30a4\u30c6\u30a3\u30d6\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea: Android\u7de8\uff081\uff09\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\uff08\u7ffb\u8a33\uff09<\/a><\/p>\n<\/blockquote>\n