概要
OneSignalのドラッグアンドドロップエディターを使用すると、モジュール式のブロック要素を使用してアプリ内メッセージを構築できます — コーディングは不要です。マークアップを好む場合は、Design In-App Messages with HTMLを参照してください。
IAMドラッグアンドドロップエディター
前提条件
- アプリにOneSignal SDKがインストールされ、初期化されている。
- 最新機能の推奨SDK：iOS 5.1.5+、Android 5.1.9+。以下の特定の機能の最小要件を参照してください。
- パフォーマンスの高いCDNでホストされている画像（自己ホストの場合は推奨）と適切にサイズ設定されている。
メッセージタイプ（レイアウト）
メッセージが画面に表示される方法：| メッセージタイプ | 説明 |
|---|---|
| Top（上部） | 上部からスライドダウンします。スリムなお知らせや確認に最適です。 |
| Center（中央） | 中央から展開し、画面の一部を埋めます。ほとんどのユースケースでバランスが取れています。 |
| Bottom（下部） | 下部からスライドアップします。スナックバーと同意プロンプトに最適です。 |
| Full（フル） | 画面を埋めるように展開します。マージンありまたはなしで使用します。マルチ画面フローの場合はCarousel（カルーセル）を追加します。 |
作成できるアプリ内のタイプを示す画像
カルーセル
カルーセルを使用すると、マルチ画面フロー（オンボーディング、機能ツアー、またはマルチステップオファー）を作成できます。 Fullメッセージタイプを選択して、Create Carouselボタンをクリックします。最大10枚のカード（画面）を追加できます。各カードは、カスタマイズ可能なブロックの任意の組み合わせを持つことができます。
カルーセルの例
向きのサポート
アプリ内メッセージは、ポートレートモードとランドスケープモードの両方をサポートしています。
ポートレートとランドスケープの向きを示す画像
ブロックとレイアウト設定
すべてがBackgroundブロック（キャンバス）内に配置されます。外側のスペーシングには背景の**Padding（パディング）を使用し、要素間のスペーシングには個々のブロックのMargin（マージン）**を使用します。 一貫したレイアウトのための簡単なルール- Paddingを使用して、メッセージの端からの距離を制御します。
- Marginを使用してブロックを分離します（例：見出し → ボタン）。
- 同じ側に大きなパディングとマージンを積み重ねないでください。
- 絶対配置よりも中央揃えのフローベースのレイアウトを優先します。
- 公開前に常にさまざまなデバイスでプレビューします。
Backgroundブロック（キャンバス）
テキスト
見出し、説明、またはパーソナライズされたコピーに使用します。- レスポンシブサイジング：パーセンテージでの幅/高さ。
- フォント：Google Fonts。
- 書式設定：太字、斜体、下線。
- 色：HexまたはRGBA（透明度をサポート）。
- 配置：左、中央、右。
- サイズ：調整可能なフォントサイズ。
- マージン：ブロックの周囲のスペース。
- 言語ベースのセグメントまたはLiquid構文の使用でローカライズします。
- データタグでパーソナライズします。
テキストブロック
画像
機能またはオファーを説明するための画像を追加します。フォーマット：.jpg、.png、.gif（最大5MB）。パフォーマンスのためにホストされたURLを優先します。
- アスペクト比：16:9、4:3、3:2を推奨。
- クリックアクション：オプション（リンク、ディープリンク、タグ、アウトカム、プロンプト）。
- クリック時に閉じる
- マージン：ブロックの周囲のスペース。
- タグに基づいてサーバー上の異なる画像を参照します。Dynamic URLsを参照してください。
- 画像URLの例：
https://example.com/images/{{ tag_key }}.png
- 画像URLの例：
画像ブロック
ボタン
ナビゲーション、フィードバック、または権限プロンプトなどのアクションを促進します。- テキストとフォント：CTAコピーとスタイルをカスタマイズします。
- 色とサイズ：ボタンのビジュアルをカスタマイズします。
- 画像：オプションのアイコン/画像。
- 角の半径：丸みを設定します。
- クリックアクション：タグ付け、アウトカム、プロンプト、ディープリンクをサポートします。
- クリック時に閉じる
- マージン：ブロックの周囲のスペース。
- 境界線と影：完全にカスタマイズ可能。
- データタグでボタンのコピーまたはリンクをパーソナライズします。
- 背景のopacity = 0を設定して、画像のみのボタンを作成します。
- 微妙な影（低い不透明度、高いぼかし）を使用して、プライマリCTAを持ち上げます。
ボタンブロック
閉じるボタン
閉じる（X）アイコンの表示とスタイルを制御します。- トグル：有効/無効。
- カスタムアイコン：
.jpg、.png、.svg、.gif。推奨サイズ：10x10px。 - クリックアクション：オプション。
- マージン：ブロックの周囲のスペース。
- 閉じるボタンを無効にする場合は、ユーザーが終了できるように閉じるアクションまたは閉じる時間を設定してください。
- ユーザーがすべてのカードを進めるようにする場合、カルーセルに役立ちます。
閉じるボタン
背景
レイアウトとブランディングの基礎を設定します。- 画像サポート：
.jpg、.png、.gif - 色：RGBAをサポート
- クリックアクション：オプション
- パディング：コンテンツとメッセージの端の間のスペース（デフォルト24px）
- クリック時に閉じる
背景エディター
パーソナライゼーションとローカライゼーション
データタグを使用して、ユーザーごとにアプリ内をパーソナライズします。 ローカライゼーションについては、詳細はMulti-langauge messagesを参照してください。FAQ
フルスクリーンのアプリ内を作成する方法は？必要なSDKバージョンは何ですか？
マージンなしでアプリ内メッセージを作成するには：- iOS SDK 3.9.0+
- Android SDK 4.6.3+