01 GA4 — 海外流入の検知 TRIGGER

リアルタイムで北米ユーザー28人を確認。first_visit 27件。上位ページは技術ログ。ブラウザ翻訳で読んでいると判断——記事コンテンツは触らず、チャット対応のみに絞る。

02 Dify — language 変数を追加 BACKEND

開始ノードに変数を追加。LLMプロンプトに1行だけ追記する。

// 開始ノード
変数名: language
タイプ: String
デフォルト値: 日本語
非表示: ON

// システムプロンプトに追加
- 必ず {{language}} で回答すること
- フォローアップマーカーは言語に関わらず
  必ず [次の質問] を使うこと

03 クエリプレフィックス方式 KEY DECISION

inputs変数はDifyの会話開始時にしか参照されない。途中切り替えには使えなかった。クエリ自体に言語指示を埋め込む方式が確実。

// NG — 会話途中では反映されない
inputs: { language: ptmLang },

// OK — 毎回確実に伝わる
query: ptmLang === 'English'
  ? '[Respond in English] ' + input
  : input,

04 ENボタン — UIに切り替えを追加 FRONTEND

白背景・黒テキスト。ホバーでイエローに変化。ヘッダー右端に配置。

<button id="ptm-lang-btn"
        onclick="ptmToggleLang()">EN</button>

#ptm-lang-btn {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #0a0a0a;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
}
#ptm-lang-btn:hover {
  background: #e8ff00;
  border-color: #e8ff00;
}

05 切り替え時チャットリセット UX

言語フラグを変えるだけでは、日英混在の画面が残る。切り替えのタイミングでチャット全体をリセットし、言語に合った挨拶とサジェストを表示し直す。

function ptmToggleLang() {
  ptmLang = ptmLang === '日本語'
    ? 'English' : '日本語';
  ptmConvId = ''; // 会話IDもリセット

  // チャットをまるごとリセット
  document.getElementById('ptm-messages')
    .innerHTML = '';

  if (ptmLang === '日本語') {
    ptmAppendMsg('ai', 'ハコブくんにまかせて！...');
    ptmAppendSuggestions([...日本語サジェスト]);
  } else {
    ptmAppendMsg('ai', "Hi! I'm Hakobu...");
    ptmAppendSuggestions([...英語サジェスト]);
  }
}