HTMLでアプリ内メッセージをデザインする

概要

OneSignalは2つのアプリ内メッセージエディターを提供しています：

非技術的なクリエーター向けのDrag & Drop GUI
レイアウト、動作、レスポンシブ性をピクセル単位で完全に制御したい開発者向けのHTMLエディター

HTMLエディターでできること：

レイアウト： 複雑なレスポンシブレイアウトを構築します（例：並列CTA）。
フォーム： インラインで入力を収集します（メール、フィードバック、アンケート）。
フォントとブランド： カスタムWebフォントとCSS変数を使用します。
JSアクション： クリックのトラッキング、ユーザーのタグ付け、アウトカムの送信などを行います。

要件

iOS: 3.9.0+
Android: 4.6.3+
- アプリが古いSDKを使用している場合、アプリ内メッセージは代わりにCenter Modalレイアウトでレンダリングされます。

HTMLアプリ内の作成とプレビュー

Messages > New In-Appに移動して、アプリ内メッセージを作成、編集、テスト、一時停止、複製、または削除します。

HTMLテンプレート

事前構築済みのテンプレートですばやく開始できます。

アプリ内JavaScriptライブラリ

JavaScriptライブラリを使用して、インタラクションをトラッキングし、アプリ内の動作をトリガーします。

左側にHTMLコードを入力して、ライブでプレビューします。Send Test In-Appを使用して、レスポンシブ性とデザインをテストします。

トラッキング可能なラベルを追加

インタラクティブな要素にdata-onesignal-unique-labelを追加して、クリックがトラッキングされ、アクション可能になるようにします。

<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

JavaScriptでクリックアクションをバインド

// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};

詳細については、In-App JS Library documentationを参照してください。

アセットサポート

アセットは、提供されたURLからレンダリング時に読み込まれます。

<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />

パーソナライゼーション

Liquid構文を使用してユーザーデータ値を動的に挿入します：

<div>Hi there {{ name | default: 'you' }}!</div>

サポートされているコンテキスト：

div、p、liなどの要素内のテキスト
<style>ブロック内
href、src、action、data属性内

サポートされていないもの：

<script>タグ内
解析があいまいになる複雑なネストされたコンテンツ全体、例：

<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>

アクセシビリティとレスポンシブデザイン

CSSメディアクエリとプラットフォームタイポグラフィを使用して、デバイスサイズとOSテキスト設定に適応します。

@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respect dynamic text sizes on iOS */
:root { font: -apple-system-body; }

セーフエリア（ノッチ、ホームバー）

最新のデバイスにはセーフエリア（ノッチやホームバーなど）があります。safe-area-inset-*変数を使用してレイアウトをパディングします：

body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}

動画の埋め込み

<iframe>を使用して、アプリ内メッセージに動画（YouTube、Vimeoなど）を直接埋め込むことができます。これは、デモ、プロモーション、またはオンボーディングフローに役立ちます。ほとんどのブラウザは動画がミュートで開始される場合にのみ自動再生を許可するため、常に埋め込みURLに&mute=1を含めてください。

自動再生動画はパフォーマンスに影響を与える可能性があります。動画を短くし、1つのアプリ内で複数の自動再生埋め込みを避けてください。

例：自動再生YouTube埋め込み

以下のスニペットは、固定サイズ（560×315）でアプリ内の中央にYouTube動画を配置する方法を示しています：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* center horizontally */
        align-items: center;     /* center vertically */
        background: #f0f0f0;     /* optional background */
      }
      .video-box {
        width: 560px;  /* fixed width */
        height: 315px; /* fixed height (16:9 ratio) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>

自動再生動作の理解

埋め込みURL（/embed/VIDEO_ID）は自動再生に必要です — 通常のwatch?v=リンクは機能しません。
?autoplay=1&mute=1を追加すると、動画が自動的に再生され、ブラウザの自動再生ルールに準拠します。
allow=“autoplay; encrypted-media”属性は、自動再生の許可を付与します。
.video-boxは固定の560×315pxサイズ（YouTubeのデフォルトの16:9）を使用するため、動画はフルスクリーンに引き伸ばされる代わりに収容されて表示されます。
bodyはjustify-content: centerとalign-items: centerを備えたflexコンテナとして設定され、ビデオボックスを画面の正確な中央に配置します。

パフォーマンスのヒント

クリティカルなCSSをインライン化し、重いスクリプトを延期します。
画像を最適化します（object-fitを使用したサイズ指定の<img>）、可能な場合は最新のフォーマットを使用します。
HTMLペイロードを簡潔に保ち、大きなbase64 blobを避けます。
システムフォントを使用するか、font-display: swapでパフォーマンスの高いWebフォントをホストします。
ファイルサイズを削減し、適切な解像度を使用します：
- Appleの画像ガイドライン
- Androidの画像概要
- OneSignalはimagekit.ioと提携関係はありませんが、最適化に役立つツールです。

デバイス間でテスト

デバイスタイプ間で動作とレイアウトを確認するために、テストメッセージを頻繁に送信します。Find & set Test Usersを参照してください。

FAQ

バナースタイルのアプリ内から灰色の背景やドロップシャドウを削除できますか？

はい。上部/下部のバナーについては、SDKを更新して次のように設定します： iOS 5.1.5+

<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>

Android 5.1.9+

<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

他のプロバイダーのアプリ内テンプレートを再利用できますか？

はい。HTMLをエディターに貼り付けて、分析/アクションをOneSignal In-App JSメソッドに置き換えます。

テンプレートがありません。どのように開始すればよいですか？

提供されたスターターテンプレートを使用するか、利用可能なテンプレートを参照してください。HTML/CSSの経験がいくらかあることをお勧めします。

必要なSDKバージョンは何ですか？

iOS: 3.9.0+
Android: 4.6.3+

古いSDKは、Center Modalレンダリングにフォールバックします。

アプリ内メッセージはオフラインで機能しますか？

いいえ。メッセージは、コンテンツを取得してレンダリングするためにアクティブなインターネット接続が必要です。

はじめに & 設定

メッセージングチャネル

ジャーニー

オーディエンス & カスタムイベント

分析 & 統合

プライバシー & セキュリティ

HTMLでアプリ内メッセージをデザインする

概要

要件

HTMLアプリ内の作成とプレビュー

HTMLテンプレート

アプリ内JavaScriptライブラリ

トラッキング可能なラベルを追加

JavaScriptでクリックアクションをバインド

アセットサポート

パーソナライゼーション

アクセシビリティとレスポンシブデザイン

セーフエリア（ノッチ、ホームバー）

動画の埋め込み

例：自動再生YouTube埋め込み

自動再生動作の理解

パフォーマンスのヒント

デバイス間でテスト

FAQ

バナースタイルのアプリ内から灰色の背景やドロップシャドウを削除できますか？

他のプロバイダーのアプリ内テンプレートを再利用できますか？

テンプレートがありません。どのように開始すればよいですか？

必要なSDKバージョンは何ですか？

アプリ内メッセージはオフラインで機能しますか？

​概要

​要件

​HTMLアプリ内の作成とプレビュー

HTMLテンプレート

アプリ内JavaScriptライブラリ

​トラッキング可能なラベルを追加

​JavaScriptでクリックアクションをバインド

​アセットサポート

​パーソナライゼーション

​アクセシビリティとレスポンシブデザイン

​セーフエリア（ノッチ、ホームバー）

​動画の埋め込み

​例：自動再生YouTube埋め込み

​自動再生動作の理解

​パフォーマンスのヒント

​デバイス間でテスト

​FAQ

​バナースタイルのアプリ内から灰色の背景やドロップシャドウを削除できますか？

​他のプロバイダーのアプリ内テンプレートを再利用できますか？

​テンプレートがありません。どのように開始すればよいですか？

​必要なSDKバージョンは何ですか？

​アプリ内メッセージはオフラインで機能しますか？

概要

要件

HTMLアプリ内の作成とプレビュー

トラッキング可能なラベルを追加

JavaScriptでクリックアクションをバインド

アセットサポート

パーソナライゼーション

アクセシビリティとレスポンシブデザイン

セーフエリア（ノッチ、ホームバー）

動画の埋め込み

例：自動再生YouTube埋め込み

自動再生動作の理解

パフォーマンスのヒント

デバイス間でテスト

FAQ

バナースタイルのアプリ内から灰色の背景やドロップシャドウを削除できますか？

他のプロバイダーのアプリ内テンプレートを再利用できますか？

テンプレートがありません。どのように開始すればよいですか？

必要なSDKバージョンは何ですか？

アプリ内メッセージはオフラインで機能しますか？