シミュレーターにトースト通知を表示させる方法
見積太郎では、特定の条件を選んだときに、画面上に一時的な注意メッセージ(トースト通知)を表示させることもできます。
トースト通知を追加する3ステップ
どの条件を選んだときに通知を表示させたいかを決めます。
表示したい通知(短いメッセージ)の内容を決めます。
AIに条件と通知内容を伝えて、PRODUCTSコードを修正してもらいます。
トースト通知とは
トースト通知とは、画面の端や下部などに、数秒だけ表示される短いメッセージのことです。
これは常に表示しておく説明文とは違って、ある選択をされたときに、その場で短く注意しておきたいときなどに使います。
どんなときに使うとよいか
トースト通知は、ユーザーの誤解を避ける目的で使うのがおすすめです。
| 修理・点検系 | 高所作業、壁内・床下作業、部品取り寄せ、現地確認が必要な症状などを選んだとき。 |
|---|---|
| 清掃・クリーニング系 | 汚れが強い、特殊素材、作業範囲が広い、追加作業の可能性がある条件を選んだとき。 |
| 制作・法人向けサービス | 要件定義が必要、素材支給状況で費用が変わる、数量が多い、納期が短い条件を選んだとき。 |
| 見積りが変動しやすい業種 | 電話やフォームで事前確認しておきたい重要条件を、ユーザーが選択したタイミングで伝えたいとき。 |
トースト通知とは、「ある条件を選んだ際に」、その場で伝えたいメッセージを表示するためのオプション機能です。
トースト通知を使わない方がよいケース
トースト通知は便利ですが、あまり多用すべきではありません。
次のような内容は、トースト通知ではなく、選択肢の説明文や補足欄に入れる方が自然です。
- サービス全体の詳しい説明
- 料金体系の長い説明
- キャンセル規定や利用規約のような重要な長文
- すべての選択肢に対する補足説明
- あとから何度も読み返してほしい内容
長文の説明には向きません。
トースト通知は数秒で消えるため、長く読んでほしい内容には向いていません。長い説明は、選択肢の説明文、結果画面の注意文、PDFの備考欄などに入れる方が適しています。
トースト通知の追加をAIに依頼する方法
トースト通知を追加する際には、そのシミュレーター用のPRODUCTSコード全文をAIに渡し、次の3つの内容を伝えてください。
例:「室外機が高所にある」を選んだとき、「汚れがかなり強い」を選んだとき、など。
長文はトースト通知には向きません。長くても50文字程度までの短いメッセージにしてください。
テンプレートをコピー&ペーストし、「条件」と「表示したいメッセージ」だけを書き換えればOKです。
なお、通常のプロダクトコード出力時には、基本的にトースト通知は実装されません。
トースト通知を追加したい場合は、完成後のPRODUCTSコードに対して 「この条件のときにトースト通知を追加したい」とAIへ修正依頼してください。
選択肢を選んだとき用のAI指示文テンプレート
以下のテンプレートは、「急ぎで受け取りたい」「室外機が高所にある」など、特定の選択肢を選んだときにトースト通知を表示したい場合に使います。
「条件:」と「表示したいメッセージ:」のところだけ、希望の内容に書き換えてください。
このテンプレートの対象:
このテンプレートは、主に「特定の選択肢を選んだとき」に通知を出すためのものです。
「数量が10個以上になったとき」など、数量による条件でトースト通知を表示させたい場合は、このあとに案内している「数量条件用テンプレート」を用いるようにしてください。
今のPRODUCTSコードを次の内容に沿って修正してください。
目的:
下記の条件を選んだときに、画面上にトースト通知を表示したい。
条件:
(ここに条件を記述してください:(例)「急ぎで受け取りたい」が選択されたとき)
表示したいメッセージ:
(ここにメッセージを記述してください:(例)急ぎ受け取りは税込100円加算されます)
【ここから下は共通指示文(プロンプト)】
今回の目的は、上記で指定した条件が成立したときに、画面上にトースト通知を表示することです。
重要:
通常の説明文を追加するのではなく、必ず type:"toast" の actions を追加してください。
desc、help、result_note、result_info などに文章を追加して代用しないでください。
今回の修正範囲:
・今回の修正で行ってよい変更は、原則として「指定された条件に該当する選択肢への actions 追加」だけです。
・既存の steps、sections、options の構造や並び順を作り変えないでください。
・visible_if、rules、dependency_rules、stepの表示条件、sectionの表示条件を新しく追加しないでください。
・既存の visible_if、rules、dependency_rules がある場合も、今回のトースト通知追加に不要であれば変更しないでください。
修正方針:
1. まず、上に書かれた「条件」に該当する選択肢をPRODUCTSコード内から探してください。
2. 条件が「〇〇を選んだとき」のような選択肢の場合は、その選択肢オブジェクトの中に actions 配列を追加してください。
3. 既に actions 配列がある場合は、その中に toast アクションを1件追加してください。
4. actions 配列がない場合は、新しく actions 配列を作成してください。
5. 既存の price、monthly、taxRate、desc、help、id、label、default などは、必要がない限り変更しないでください。
6. トースト通知は今回指定した1件だけ追加してください。指定されていない通知を増やさないでください。
7. 今回の修正では、type:"toast" の使用を例外的に許可します。
追加する toast アクションの形式:
actions: [
{
type: "toast",
key: "内容に合う短い英数字の識別子",
cooldown_ms: 6000,
message: "上に書かれた表示したいメッセージ"
}
]
key のルール:
・英数字とアンダースコアのみで作成してください。
・同じPRODUCTSコード内で重複しない名前にしてください。
・例:urgent_notice、large_quantity_notice、onsite_check_notice など。
注意:
・once:true は付けないでください。
・選択されたときに表示し、選択解除時には表示しない構成にしてください。
・同じ通知が表示中または直後に何度も重ならないよう、cooldown_ms:6000 を付けてください。
・desc、help、result_note、result_info に注意文を書き足して、トースト通知の代わりにしないでください。
・必ず actions の中に type:"toast" を追加してください。
・トースト通知を追加するために、visible_if、rules、dependency_rules を新しく作らないでください。
・条件に該当する場所が分からない場合は、推測で大きく作り変えず、もっとも近い label / id を探して最小限の修正にしてください。
・PRODUCTSコード全体の構造を壊さないでください。
・関数、class、import/export は使わないでください。
・説明文や補足文を前後に付けず、修正後の var PRODUCTS = [ ... ]; を全文で出力してください。
出力前に必ず確認してください:
・指定された条件に対応する選択肢へ actions が追加されているか
・actions の中に type:"toast" があるか
・message が、上に書かれた「表示したいメッセージ」と一致しているか
・cooldown_ms:6000 が入っているか
・once:true が入っていないか
・key が入っているか
・desc、help、result_note、result_info で代用していないか
・visible_if、rules、dependency_rules を新しく追加していないか
・既存の料金計算、選択肢、表示条件、ステップ構造を不要に変更していないか
数量条件で通知を出したい場合のAI指示文テンプレート
「数量が10個以上になったとき」「参加人数が30名以上になったとき」のように、数量条件にもとづいてトースト通知を出したい場合は、 選択肢の中に actions を追加するのではなく、 dependency_rules を使う形になります。
数量条件の例:
「ミネラルウォーターが10本以上になったとき」
「参加人数が30名以上になったとき」
「印刷枚数が1,000枚以上になったとき」
など
数量による条件でトースト通知を表示させたいときは、下記の数量条件用テンプレートを使ってください。
以下のテンプレートをコピーして、AIに貼り付けてください。
「条件:」と「表示したいメッセージ:」のところだけ、希望の内容に書き換えて使います。
今のPRODUCTSコードを次の内容に沿って修正してください。
目的:
下記の数量条件を満たしたときに、画面上にトースト通知を表示したい。
条件:
(ここに数量条件を記述してください:(例)「ミネラルウォーター」の数量が10本以上になったとき)
表示したいメッセージ:
(ここにメッセージを記述してください:(例)ミネラルウォーターが10本以上の場合、在庫状況によって受け取り時間が変わる場合があります)
【ここから下は数量条件用の共通指示文(プロンプト)】
今回の目的は、上記で指定した数量条件が成立したときに、画面上にトースト通知を表示することです。
重要:
この修正では、選択肢オブジェクトの中に actions を追加するのではなく、PRODUCTSの商品オブジェクト直下に dependency_rules を追加してください。
desc、help、result_note、result_info などに文章を追加して代用しないでください。
今回の修正範囲:
・今回の修正で行ってよい変更は、原則として「指定された数量条件に対応する dependency_rules の追加」だけです。
・既存の steps、sections、options の構造や並び順を作り変えないでください。
・visible_if、rules、stepの表示条件、sectionの表示条件を新しく追加しないでください。
・既存の price、monthly、taxRate、desc、help、id、label、default などは、必要がない限り変更しないでください。
・トースト通知は今回指定した1件だけ追加してください。指定されていない通知を増やさないでください。
・今回の修正では、type:"toast" の使用を例外的に許可します。
修正方針:
1. まず、上に書かれた数量条件に該当する数量項目をPRODUCTSコード内から探してください。
2. 通常の kind:"quantity" の数量項目の場合は、その section.id を field にしてください。
3. qoptions 内の type:"qty" の数量項目の場合は、field を "section_id.option_id" の形式にしてください。
4. 条件は gte を使って指定してください。たとえば「10個以上」の場合は gte: 10 としてください。
5. PRODUCTSの商品オブジェクト直下に dependency_rules が既にある場合は、その配列にルールを1件追加してください。
6. dependency_rules がない場合は、PRODUCTSの商品オブジェクト直下に新しく dependency_rules 配列を作成してください。
7. dependency_rules は steps の中ではなく、商品オブジェクト直下に追加してください。
8. 数量が条件未満に戻ったときには、トースト通知を表示しない構成にしてください。
追加する dependency_rules の形式:
dependency_rules: [
{
when: {
field: "対象の数量項目ID",
gte: 10
},
actions: [
{
type: "toast",
key: "内容に合う短い英数字の識別子",
cooldown_ms: 6000,
message: "上に書かれた表示したいメッセージ"
}
]
}
]
※ gte の数値は、上に書かれた数量条件に合わせて変更してください。たとえば「30名以上」の場合は gte: 30 としてください。
field の指定例:
・kind:"quantity" で id:"water_qty" の場合
field: "water_qty"
・kind:"qoptions" で section id:"drink_options"、option id:"water_qty" の場合
field: "drink_options.water_qty"
key のルール:
・英数字とアンダースコアのみで作成してください。
・同じPRODUCTSコード内で重複しない名前にしてください。
・例:water_qty_10_notice、large_quantity_notice、participant_30_notice など。
注意:
・once:true は付けないでください。
・条件を満たしたときに表示し、条件未満に戻ったときには表示しない構成にしてください。
・同じ通知が表示中または直後に何度も重ならないよう、cooldown_ms:6000 を付けてください。
・desc、help、result_note、result_info に注意文を書き足して、トースト通知の代わりにしないでください。
・必ず actions の中に type:"toast" を追加してください。
・トースト通知を追加するために、visible_if や rules を新しく作らないでください。
・PRODUCTSコード全体の構造を壊さないでください。
・関数、class、import/export は使わないでください。
・説明文や補足文を前後に付けず、修正後の var PRODUCTS = [ ... ]; を全文で出力してください。
出力前に必ず確認してください:
・PRODUCTSの商品オブジェクト直下に dependency_rules が追加されているか
・dependency_rules の when に、指定された数量条件が入っているか
・通常の quantity では field が section.id になっているか
・qoptions 内の数量では field が "section_id.option_id" 形式になっているか
・actions の中に type:"toast" があるか
・message が、上に書かれた「表示したいメッセージ」と一致しているか
・cooldown_ms:6000 が入っているか
・once:true が入っていないか
・key が入っているか
・desc、help、result_note、result_info で代用していないか
・visible_if や rules を新しく追加していないか
・既存の料金計算、選択肢、表示条件、ステップ構造を不要に変更していないか
テンプレートは使い分けてください。
「特定の選択肢を選んだとき」にトースト通知を表示させたい場合は、選択肢用テンプレートを使ってください。
一方、「数量が10個以上になったとき」のような条件で表示させたい場合は、数量条件用テンプレートを使ってください。
使いすぎを防ぐための注意点
トースト通知は便利ですが、多用するとユーザーにとって少しうるさい画面になります。
たとえば、選択するたびに通知が何度も出ると、見積もりを進める邪魔になってしまいます。
そのため、トースト通知は次のような場合に絞って使うのがおすすめです。
- 正式見積りで金額が変わりやすい条件
- 現地確認や個別確認が必要な条件
- ユーザーが誤解しやすい条件
- 問い合わせ前に必ず知っておいてほしい注意点
トースト通知は、1つのシミュレーターにつき1〜5個程度までに抑えるのがおすすめです。
通常の説明は画面内の説明文に入れ、トースト通知は重要な注意喚起だけに使いましょう。
よくある質問
Q トースト通知とは何ですか?
Q 購入者が自分で追加できますか?
Q 通常のPRODUCTSコード出力時に、トースト通知は自動で入りますか?
Q 数量が10個以上になったときにもトースト通知を出せますか?
Q トースト通知はたくさん入れてもよいですか?
Q 同じ通知が何度も出ないようにできますか?
トースト通知を使うと、ユーザーが特定の選択肢を選んだときや、数量が一定以上になったときに、短いメッセージを画面上に表示できます。
ただ、すべての説明をトースト通知にするのではなく、誤解を防ぐ一言、正式見積りで変動しやすい条件、問い合わせ前に知っておいてほしい注意点に絞って使うのがおすすめです。
PRODUCTSコードの修正の際には、「選択肢を選んだとき」なのか「数量条件を満たしたとき」なのかを分けて、対応するテンプレートを使ってAIに依頼してください。
見積もり中の不安を、その場で一言フォロー。
トースト通知を上手に使うと、ユーザーが迷いやすい条件や、正式見積りで変動しやすい条件を、その場で分かりやすく案内できます。