> For the complete documentation index, see [llms.txt](https://docs.nubrick.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nubrick.app/experment_menu/embed/embedding_guide.md).

# 実装ガイド

`Nubrick` のエディタで作成された埋め込みエクスペリメントを、アプリ内の特定の場所に埋め込むことができます。

{% hint style="info" %}
コード側では、エクスペリメントIDまたは任意のカスタムIDを設定し、使用できます。\
場所ごとにカスタムIDを事前に設定しておくことをお勧めします。これにより、コードを編集せずに、`Nubrick` の管理画面で柔軟にエクスペリメントを変更できます。
{% endhint %}

## 基本的な使い方

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
    .frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
view.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
self.addSubview(view)
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import app.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>")
```

{% endtab %}

{% tab title="Flutter" %}
`height` も指定することを推奨しています。

```dart
import 'package:flutter/material.dart';
import 'package:nubrick_flutter/embedding.dart';

Widget build(BuildContext context) {
  return Column(
    children: [
      NubrickEmbedding("<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>", height: 200),
    ],
  );
}
```

{% endtab %}
{% endtabs %}

## イベントハンドラーの追加

埋め込みタイプのエクスペリメントに、イベントハンドラーを追加することができます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding("<EXPERIMENT_ID>", onEvent: { event in
    print(event)
})
.frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID>", onEvent: { event in
    print(event)
})
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import app.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>",
    onEvent = { event ->
        println("Event: ${event.name}, deepLink: ${event.deepLink}")
    }
)
```

{% endtab %}

{% tab title="Flutter" %}

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  height: 200,
  onEvent: (event) {
    print("Nubrick Embedding Event: ${event.payload}");
  },
),
```

{% endtab %}
{% endtabs %}

## 埋め込みサイズの取得

`onSizeChange` を使うと、埋め込みコンポーネントの実サイズを受け取れます。\
このコールバックは、実際の埋め込みページが表示されたときだけ呼ばれます。読み込み中や `not found` の状態では呼ばれません。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding(
    "<EXPERIMENT_ID>",
    onSizeChange: { width, height in
        print(width, height)
    }
)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView(
    "<EXPERIMENT_ID>",
    onSizeChange: { width, height in
        print(width, height)
    }
)
```

{% endtab %}

{% tab title="Android" %}

```kotlin
NubrickSDK.Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>",
    onSizeChange = { width, height ->
        println("width=$width, height=$height")
    }
)
```

{% endtab %}
{% endtabs %}

`fill` / `Fill` は、その軸に固定サイズを適用しないことを表します。\
ホスト側のレイアウトや `Modifier` / `.frame(...)` でサイズを決めてください。

## ローディング状態のカスタマイズ

読み込み中、失敗、完了の各フェーズでビューをカスタマイズできます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}
`SwiftUIEmbeddingPhase` を使って各フェーズをハンドリングします。

```swift
NubrickSDK.embedding("<EXPERIMENT_ID>", onEvent: nil) { phase in
    switch phase {
    case .loading:
        Text("loading")
    case .notFound:
        Text("not found")
    case .failed:
        Text("error")
    case .completed(let view):
        view.frame(height: 200)
    }
}
```

{% endtab %}

{% tab title="iOS (UIKit)" %}
`UIKitEmbeddingPhase` を使って各フェーズをハンドリングします。

```swift
let view = NubrickSDK.embeddingUIView("<EXPERIMENT_ID>", onEvent: nil) { phase in
    switch phase {
    case .loading:
        return UIActivityIndicatorView()
    case .notFound:
        return UILabel()
    case .failed:
        return UILabel()
    case .completed(let component):
        return component
    }
}
```

{% endtab %}

{% tab title="Android" %}
`content` パラメータを使って `EmbeddingLoadingState` をハンドリングします。

```kotlin
import app.nubrick.nubrick.NubrickSDK
import app.nubrick.nubrick.component.EmbeddingLoadingState

NubrickSDK.Embedding("<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>") { state ->
    when (state) {
        is EmbeddingLoadingState.Loading -> CircularProgressIndicator()
        is EmbeddingLoadingState.Completed -> state.view()
        is EmbeddingLoadingState.NotFound -> Text("Not found")
        is EmbeddingLoadingState.Failed -> Text("Error")
    }
}
```

{% endtab %}

{% tab title="Flutter" %}
`builder` を使って各フェーズをハンドリングします。

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  builder: (context, phase, child) {
    case ExperimentPhase.loading:
      return const SizedBox(height: 200, child: Center(child: CircularProgressIndicator()));
    case ExperimentPhase.completed:
      return const SizedBox(height: 200, child: child);
    case ExperimentPhase.notFound:
      return const SizedBox(height: 200, child: Center(child: Text("Experiment not found.")));
    default:
      return const SizedBox.shrink();
  },
),
```

{% endtab %}
{% endtabs %}

## 引数の渡し方

`arguments` としてパラメータを渡すと、コンポーネント内で展開される動的な変数として利用することができます。

{% tabs %}
{% tab title="iOS (SwiftUI)" %}

```swift
NubrickSDK.embedding(
    "<EXPERIMENT_ID>",
    arguments: ["item_id": itemId]
)
.frame(height: 200)
```

{% endtab %}

{% tab title="iOS (UIKit)" %}

```swift
let view = NubrickSDK.embeddingUIView(
    "<EXPERIMENT_ID>",
    arguments: ["item_id": itemId]
)
```

作成後に `arguments` を更新する場合は、返された `UIView` を `NubrickEmbeddingUpdatable` にキャストして `update(arguments:)` を呼び出します。

```swift
(view as? NubrickEmbeddingUpdatable)?.update(arguments: ["item_id": itemId])
```

{% endtab %}

{% tab title="Android" %}

```kotlin
import app.nubrick.nubrick.NubrickSDK

NubrickSDK.Embedding(
    "<EXPERIMENT_ID> or <EXPERIMENT_CUSTOM_ID>",
    arguments = mapOf("item_id" to itemId)
)
```

{% endtab %}

{% tab title="Flutter" %}

```dart
NubrickEmbedding(
  "<EXPERIMENT_ID> or <EXPERIMENT_ID_ALIAS>",
  height: 200,
  arguments: {
    'item_id': itemId,
  },
),
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.nubrick.app/experment_menu/embed/embedding_guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.