iOS対応
Update: 2026/9/18
iOSでの適用には2つの設定が必要です。
WEBプッシュ通知をiOSに送付するためには？
設定方法
1. PWA設定
こちらをご確認ください。
2. ブラウザプッシュタグの設定
- 管理画面トップのサイドメニューの「ブラウザプッシュタグ設定」をクリックします。
- ブラウザプッシュタグ・モジュールファイルのスクリプトタグの項目の「iOS対応」の「あり」を選択します。
3. プレオプトイン・ブロック解除バーオプションタグの項目を入力します。
- V1（旧デザイン）は将来的に廃止予定です。（既にV1を設置済みの場合はV2への載せ替えをご検討ください）
- V2（新デザイン）では、画像・タイトル・説明文などのサイズや色などをより自由にカスタマイズすることで、サイトイメージに合った表示が可能です。
※ V2のオプションタグを設置しない場合、V1（旧デザイン）のデフォルト表示が適用されます。
「プレオプトイン対応」「iOS対応」「ブロック解除バー対応」を使用する際は、必ずV2（新デザイン）のオプションタグを設置をお願い致します。
※ 「プレビュー」ボタンをクリックすると、実際にサイトに表示されるイメージを見ながら位置やデザインの確認が可能です。
| 設定項目 | 説明 |
|---|---|
| 大型画像 | ダイアログ上部に横幅いっぱいで表示される画像（省略可） 形式: PNG / JPEG / GIF、容量: 256KB以下。 スマホ（画面の横幅が430px以下）では表示されません。 |
| アイコン画像 | 左側に表示されるアイコン（省略可） 形式: PNG / JPEG、192×192px 推奨、容量 8KB以下。 正方形以外、または容量超過時は自動でトリミング・圧縮されます。 |
| タイトル | ダイアログのタイトル文言（省略可） |
| 説明文 | タイトルの下の案内文言（省略可） |
| ボタンラベル | 拒否ボタン／許可ボタンの表示文言（省略不可） 空欄の場合はそれぞれ「今はしない」／「受け取る」が表示されます。 |
| 次回表示までの間隔 | 拒否ボタンを押されて次に表示するまでの日数（1〜90日） |
| スタイル設定 | 表示位置・色・フォントサイズ・ボーダーなどの詳細設定ができます。 「スタイル設定を開く」ボタンでプレオプトインスタイル設定ダイアログが開きます。  |
| オプションタグ | 上記の設定項目を元に自動生成されるスクリプトタグ。 コピーして WEB ページに貼り付けます（詳細は下記手順4を参照）。 |
※ V1 オプションタグを設置しない場合、V1（旧デザイン）のデフォルト表示が適用されます。
※ 「プレビュー」ボタンをクリックすると、実際にサイトに表示されるイメージを見ながら位置やデザインの確認が可能です。
| 設定項目 | 説明 |
|---|---|
| アイコン画像URL | 左側に表示するアイコン設定。 ※サイトデザインに沿ったアイコンを推奨。 正方形であれば、自動圧縮につき画像容量制限はなし。 |
| ダイアログテキスト | 案内文言。自由に編集可。どちらでも適応できる名称を推奨。 |
| ボタンテキスト | 通知を許可するボタン。自由に編集可。どちらでも適応できる名称を推奨。 |
| 次回表示までの間隔 | ×印で消した場合の次回までの間隔。3日以上の指定は直接interval数値を変更。 |
| 表示のカスタマイズ | 「あり」を選択すると表示位置・サイズ・デザイン・ボタンタイプ・ポップアップの閉じ方を選択出来る。サイトデザインに応じたカスタマイズを推奨。 |
| オプションタグ | 上記の設定項目を元に自動生成されるスクリプトタグ。 コピーして WEB ページに貼り付けます（詳細は下記手順4を参照）。 |
4. 生成された2つのスクリプトタグをコピーして、WEBページに貼り付けます。
- ※ブラウザプッシュタグなどのスクリプトタグは各種タグ管理ツール（GoogleTagManagerなど）で設置可能です。
- 詳しくはGTMでタグを設置する方法をご確認ください。
<!-- プレオプトイン・ブロック解除バーオプションタグ(V2) -->
<script>
var pushonePreOptinDialogConfig = {
version: 'v2',
iconUrl: "https://cdn.webpush.jp/（画像URL）",
title: "最新情報をいち早くお届け！",
description: "サイトを訪れなくても通知で受け取れます（いつでも解除できます）",
interval: 86400,
style: {
left: "50%",
right: "auto",
translate: "-50% 0"
}
};
</script>
<!-- ブラウザプッシュタグ（iOS対応） -->
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="（AccessTokenの値が反映されます）"
data-iosdialog="on"></script>
<!-- プレオプトイン・ブロック解除バーオプションタグ(V1) -->
<script>
var CoinsOptinDialogOption = {
icon: 'https://cdn.webpush.jp/（画像URL）',
message: 'お得なクーポンを受け取りませんか？',
button: '受け取る',
interval: 259200,
customStyle: {
vertical: 'top',
horizontal: 'left',
size: 'small',
design: 1,
buttonType: 1,
close: {
type: 'cross'
}
}
}
</script>
<!-- ブラウザプッシュタグ（iOS対応） -->
<script src="https://cdn.webpush.jp/js/pushone.js" charset="utf-8" data-bptoken="（AccessTokenの値が反映されます）"
data-iosdialog="on"></script>
5. iOSで通知を受け取れるようにするためには、PWA設定も行う必要がございます。
詳細は、PWA設定 をご参照ください。