DiagnosticDock

1) まずは触る（デモ）

右下の診断ボタン（ランチャー）を押した場合でも、以下のボタンを押した場合でも同じモーダルが開きます。

このページで試せること

Yes/No 分岐（option.next）
ルール分岐（step.next の条件）
複数選択（multi）＋選択必須チェック
進捗（bar/text）
結果画面（items / payload / CTA）
hooksログ（onStepChange / onResult / onCtaClick）

イベントログ（hooks）

2) サーバー不要

診断の状態管理・結果生成はブラウザ内で完結します。
既存の問い合わせフォーム等に ctaUrl でつなぐだけで運用可能です。

3) 導入手順（初心者向け）

ステップA：ファイルを置く

diagnosticdock.js をサイト内に配置します（例：/assets/diagnosticdock.js）。

ステップB：script 1行で読み込む

<script src="/assets/diagnosticdock.js" defer></script>

導入のメリット

工数削減：スクラッチ開発不要。設定を書くだけで診断が完成します。
既存サイトを壊さない：既存の HTML/CSS に干渉しにくい独立設計です。
メンテナンス性：JSON ライクな設定で質問の追加・修正が容易です。

ステップC：初期化コードを書く

<script>
diagnosticDock({
  title: "簡易診断",
  steps: [
    { id: "q1", question: "質問ですか？", options: [
      { label: "はい", value: "はい" },
      { label: "いいえ", value: "いいえ" }
    ]}
  ],
  result: function (answers) {
    return { title: "結果", description: "…", ctaLabel: "問い合わせ", ctaUrl: "/contact" };
  }
});
</script>

mount を指定しない場合は「右下起点ボタン → modal」で動くため、既存レイアウトを崩しにくい導入が可能です。

4) 設定（制作会社・開発者向け）

主な設定キー（よく使うもの）：

mode: "modal" launcherLabel: "診断" showProgress progressStyle: "bar|text|both" theme: density / radius / fontSize hooks: onStepChange / onResult

カスタマイズのヒント

既存フォームへの自動入力：onResult や onCtaClick フックを使い、回答内容を URL パラメータとして付与したり、hidden フィールドにセットしたりできます。
デザインの微調整：CSS カスタムプロパティ（--dd-accent-color など）やテーマ設定で、サイトのトーン＆マナーに合わせられます。

グローバル上書き

<script>
window.DIAGNOSTICDOCK_CONFIG = {
  ctaTarget: "_blank",
  showProgress: true,
  theme: { density: "compact", radius: 14 }
};
</script>

注意：このページではデモのため init スクリプトが複数あります。実運用では「1回だけ初期化」してください。

5) 条件分岐の書き方（重要）

A. 選択肢ごとの分岐（option.next）

{
  id: "need_lp",
  question: "LPは必要ですか？",
  options: [
    { label: "はい", value: "はい", next: "lp_detail" },
    { label: "いいえ", value: "いいえ",  next: "end" }
  ]
}

B. ルール分岐（step.next）

回答済みの answers を参照して次のステップを決めます。

{
  id: "budget",
  question: "ご予算感は？",
  options: [
    { label: "〜30万円", value: "〜30万円" },
    { label: "30〜100万円", value: "30〜100万円" },
    { label: "100万円〜", value: "100万円〜" }
  ],
  next: [
    { when: { id: "budget", eq: "〜30万円" },  goto: "light_plan" },
    { when: { id: "budget", eq: "30〜100万円" },  goto: "standard_plan" },
    { goto: "end" }
  ]
}

multi の場合でも option.next を使えます（選択された value のうち最初にマッチした next を採用する設計）。

6) CSP / セキュリティ制約（重要）

DiagnosticDock は eval / new Function を使いません（CSPに配慮）。
ただし スタイルは <style> を注入するため、CSP設定によっては見た目が崩れる可能性があります。

動かない / 見た目が崩れる主因

script-src が外部URLを拒否
style-src が 'unsafe-inline' を拒否
WAF/セキュリティ製品が DOM 注入を強く制限

推奨（例）

Content-Security-Policy:
  script-src 'self' https://YOUR-CDN-OR-PAGES-DOMAIN;
  style-src 'self' 'unsafe-inline';

7) 制作・開発の依頼

このスクリプトは門王（https://monou.jp）が制作しています。
診断・分岐ウィジェットの開発、既存サイトへの組み込み、要件に合わせたカスタマイズなどのご相談を受け付けています。

門王（monou.jp）へ開発相談はこちら

例：制作会社向けに「案件種別に応じてヒアリング項目を出し分け」「概算帯と提案文を自動生成」「フォームに自動転記」など。

利用できる用途

Web・マーケティング

営業・サポート

採用・社内活用