# モーダルを表示する

クイックスタートへようこそ！

{% hint style="info" %}
SDKのインストールがまだの方は、最初に下記を参考の上、作成をお願いします。

<https://docs.nativebrik.com/start/install>
{% endhint %}

ここからは、日常的に使用するNubrickの使い方を紹介します。まずは、モーダル（アプリ内メッセージ）を作成し、ユーザーに新しい機能を通知する方法を学びます。

{% hint style="success" %}
このセクションで学ぶこと

アプリ全体のうち10%のユーザーに向けて、新しい機能を通知するモーダル（アプリ内メッセージ）を作成できるようになる。
{% endhint %}

***

### Step 1. やりたいことを思い浮かべる <a href="#step-1-design-what-you-want-to-do" id="step-1-design-what-you-want-to-do"></a>

ここでは、アプリの新しい機能をユーザーに知らせたいと仮定します。この目的のために、アプリ内メッセージを使ってユーザーに通知する方法を検討します。メッセージの内容は次のようにデザインします：

* 新機能のお知らせ
  * 「新機能が追加されました！」というメッセージ
  * 「今すぐチェック」などのボタン

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2FEWplJnQw8ywTTiBFBev1%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-08%2018.16.04%201.png?alt=media&#x26;token=5a69d972-485e-4864-8bce-3e5f849d07bc" alt="" width="188"><figcaption></figcaption></figure>

また、すべてのユーザーにメッセージを表示するのではなく、10%のユーザーに表示するように設定します。これにより、メッセージの効果を小さなユーザーグループでテストし、必要に応じて改善を加えることができます。

***

### Step 2. エクスペリメントを作成・設定する <a href="#step-2-create-and-configure-an-experiement" id="step-2-create-and-configure-an-experiement"></a>

ログイン後、ダッシュボードページにアクセスし、以下の手順に従ってエクスペリメントを作成します。

1. **「エクスペリメント」ページに移動**します。
2. **「新規作成」ボタン**をクリックし、「アプリ内メッセージ」を選択します。
3. エクスペリメント設定ページが表示されるので、以下の設定を行います：
   * エクスペリメント名に「新機能のお知らせメッセージ（10%のユーザー）」と入力
   * トリガーを「一度だけ」に設定し、「アプリ起動時」を選択
   * 配信割合を「10%」に設定

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2F9jJ9kk0PceQuJPv3G3Br%2FFrame%201854%20(1).png?alt=media&#x26;token=cb7c6e44-a432-4445-b1a8-7863bd130030" alt=""><figcaption></figcaption></figure>

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2FyxSiSGiyHbGEGtQKe1WX%2FFrame%201855.png?alt=media&#x26;token=95aae4a8-20d4-4989-b045-083d0085e935" alt=""><figcaption></figcaption></figure>

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2FHONUkZamvcW58N8NhfaR%2FFrame%201856.png?alt=media&#x26;token=9784237d-ca69-447f-af02-ee7d5778d1b5" alt=""><figcaption></figcaption></figure>

次に、`「バリアント」`の「モーダルを新規作成」をクリックし、メッセージのデザインを行います。

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2Fd2ehqajgA1LfWJfhtd1R%2FFrame%201857.png?alt=media&#x26;token=b3d2acc2-8d89-415e-8af3-c00843f0cc9d" alt=""><figcaption></figcaption></figure>

最後に、「Confirm」ボタンをクリックしてデザインを保存し、「保存」ボタンをクリックして設定を完了します。

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2FknqJZ8t1yMjKW0ykxZrX%2FFrame%201858.png?alt=media&#x26;token=6e0e1b3a-40f8-484c-adc4-831cd7db07d9" alt=""><figcaption></figcaption></figure>

***

### Step 3. エクスペリメントを実行する <a href="#step-3-run-the-experiment" id="step-3-run-the-experiment"></a>

エクスペリメント設定ページに戻ると、作成したエクスペリメントの設定内容とそのアナリティクスが表示されます。

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2Fd2a4YmOwJINELJWyrmzF%2FFrame%201859.png?alt=media&#x26;token=54ef784f-eaff-4713-bcec-ac266297526f" alt=""><figcaption></figcaption></figure>

**「配信する」ボタン**をクリックすると、エクスペリメントが開始され、数秒後にアプリに反映されます。

***

### Step 4. iOS/Androidアプリで確認する <a href="#step-4-check-it-on-your-iosandroid-app" id="step-4-check-it-on-your-iosandroid-app"></a>

エクスペリメントが反映されたら、実際にiOSまたはAndroidのアプリでメッセージが表示されるか確認します。アプリを起動すると、新機能のお知らせモーダルが表示されるはずです。

<figure><img src="https://704027648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FouUUZyXNgJiPZy4Uq6k8%2Fuploads%2FKpYIZ79BnCx3PKj022WN%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-08%2018.48.35%201.png?alt=media&#x26;token=054bd76b-112c-4fbc-b2d2-ec6bf788d92f" alt="" width="375"><figcaption></figcaption></figure>
