> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# HTMLでアプリ内メッセージをデザインする
> 最大限の柔軟性、レスポンシブ性、ブランディングのために、OneSignalのHTMLエディターを使用してアプリ内メッセージをデザインおよびカスタマイズします。
## 概要
OneSignalは2つのアプリ内メッセージエディターを提供しています：
* 非技術的なクリエーター向けの[Drag & Drop](./design-your-in-app-message) GUI
* レイアウト、動作、レスポンシブ性をピクセル単位で完全に制御したい開発者向けのHTMLエディター
**HTMLエディターでできること：**
* **レイアウト：** 複雑なレスポンシブレイアウトを構築します（例：並列CTA）。
* **フォーム：** インラインで入力を収集します（メール、フィードバック、アンケート）。
* **フォントとブランド：** カスタムWebフォントとCSS変数を使用します。
* **JSアクション：** クリックのトラッキング、ユーザーのタグ付け、アウトカムの送信などを行います。
### 要件
* **iOS:** 3.9.0+
* **Android:** 4.6.3+
* アプリが古いSDKを使用している場合、アプリ内メッセージは代わりにCenter Modalレイアウトでレンダリングされます。
***
## HTMLアプリ内の作成とプレビュー
**Messages > New In-App**に移動して、アプリ内メッセージを作成、編集、テスト、一時停止、複製、または削除します。
事前構築済みのテンプレートですばやく開始できます。
JavaScriptライブラリを使用して、インタラクションをトラッキングし、アプリ内の動作をトリガーします。
左側にHTMLコードを入力して、ライブでプレビューします。**Send Test In-App**を使用して、レスポンシブ性とデザインをテストします。
### トラッキング可能なラベルを追加
インタラクティブな要素に`data-onesignal-unique-label`を追加して、クリックがトラッキングされ、アクション可能になるようにします。
```html theme={null}
```
### JavaScriptでクリックアクションをバインド
```js theme={null}
// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```
詳細については、[In-App JS Library documentation](./in-app-message-api)を参照してください。
### アセットサポート
アセットは、提供されたURLからレンダリング時に読み込まれます。
```html theme={null}
```
### パーソナライゼーション
[Liquid構文を使用](./using-liquid-syntax)してユーザーデータ値を動的に挿入します：
```html theme={null}
Hi there {{ name | default: 'you' }}!
```
**サポートされているコンテキスト：**
* `div`、`p`、`li`などの要素内のテキスト
* `