How It Works

「AIに相談」ボタンの中身。

画面右下のボタンは、サーバーもAPIキーも使いません。X（Twitter）のシェアボタンと同じ「URLリンク方式」で、普段使っているAIにその場で質問を渡しています。

01 ― Link Method

リンク方式の説明

「https://x.com/intent/tweet?text=…」で投稿内容を事前入力できるXのシェアリンクと、考え方はまったく同じです。質問文をURLのパラメータに載せて、AIサービスのチャット画面をその状態で開くだけ。バックエンドは存在せず、ブラウザだけで完結します。

① 質問を選ぶ／編集する

ページごとに用意した3つの質問チップから選ぶか、テキストエリアで自由に書き換えます。

② プロンプトを組み立てる

現在のページURLと質問文を、決まったテンプレートに差し込んで1つの文章にします。

③ サービスを選ぶ

ChatGPT・Claude・Gemini・Perplexityから、普段使っているものをタップします。

④ 新しいタブで開く

質問入り・またはコピー済みの状態でAIサービスが開き、そのまま送信・貼り付けできます。

02 ― Service Mapping

サービス別URL対応表

3つのサービスはURLのクエリパラメータに質問を渡せますが、Geminiだけは対応するパラメータがないためクリップボードコピー方式にしています。

サービス	方式	ベースURL・パラメータ	備考
ChatGPT	URLクエリ	`chatgpt.com/?q=質問&hints=search`	`hints=search`で検索寄りの応答モードのヒントを付与
Claude	URLクエリ	`claude.ai/new?q=質問`	新規チャットを、質問が入力された状態で開始
Perplexity	URLクエリ	`perplexity.ai/search?q=質問`	検索結果ページを質問付きで直接オープン
Gemini	クリップボードコピー	`gemini.google.com/app`（パラメータ非対応）	質問文をコピーしてからアプリを開き、トーストで貼り付けを案内

03 ― Per-page Config

ページごとに質問を変える設定JSON

各HTMLファイルに、<script type="application/json" id="ai-consult"> を1つ置くだけで、そのページ専用の質問チップに切り替わります。JSONが無いページや壊れているページでは、既定の質問にフォールバックするので壊れません。

page ― このページの名前

パネル内に「このページ：〇〇」として表示される、ページの呼び名です。プロンプト本文には含まれず、利用者への表示専用です。

questions ― 質問例3つ

配列の先頭がパネルを開いた時点の初期選択になります。4つ以上渡しても先頭3つだけ表示します。

見つからない・壊れている場合

JSONが存在しない、パースに失敗する、questionsが空、といったケースはすべて既定の質問（宿の概要を聞く3問）に自動で切り替わります。

04 ― Copy & Paste

コピーできるコードスニペット

このページ専用の質問例を、自分のページにそのまま貼り付けられます。

設定JSON + 読み込みスクリプト（</body>直前に設置）

<script type="application/json" id="ai-consult">
{"page":"お部屋","questions":["露天風呂付きの部屋の料金は？","3人で泊まるならどの部屋？","部屋タイプの違いを表でまとめて"]}
</script>
<script src="/assets/ask-ai.js" defer></script>

プロンプト生成テンプレート（ask-ai.js 内部の処理）

湯宿つきのわ（架空の旅館のデモサイト）の公式サイトを見ています。
このページ {location.href} をブラウジングで開いて内容を確認したうえで、次の質問に答えてください。

質問：{テキストエリアの内容}

サービスごとのリンク生成（抜粋）

function buildHref(service, prompt) {
  if (!service.promptParam) return service.baseUrl; // Gemini はコピー方式
  const url = new URL(service.baseUrl);
  url.searchParams.set(service.promptParam, prompt); // 例: "q"
  if (service.extraParams) {
    Object.entries(service.extraParams).forEach(([k, v]) => url.searchParams.set(k, v));
  }
  return url.toString();
}
// window.open せず  の
// 通常クリックに任せることで、ポップアップブロックを回避しています。