はじめに：キーボードもスマホも触れない現場
ITエンジニアがAIチャットを作るとき、画面の真ん中に「テキスト入力ボックス」と「送信ボタン」を置きがちです。
しかし、自宅ガレージでのDIY整備、家庭菜園、調理中、あるいは倉庫での機材ピッキング といった作業環境を想像してみてください。
- 作業用手袋をしていて手が汚れている・濡れている
- 両手に工具や重い機材ボックスを持っている
- 濡れた手でスマホのタッチパネルを触っても誤タップするか反応しない
このような現場では、テキスト入力は**「100%不可能」です。
現場の作業員が本当に求めているのは、「作業しながら大声で話しかけたら、AIが耳元やスピーカーから声で答えてくれるスマートスピーカーのようなUI」** です。
かといって、サーバー側にWhisper（音声認識モデル）やVOICEVOX（音声合成）を詰め込むと、GPUリソースを喰い潰してサーバーが高負荷で悲鳴を上げます。
そこで、ブラウザ標準の「Web Speech API」だけを使い、外部ライブラリ一切なし（Vanilla JS）で、Dify Chat APIと音声対話できる超軽量Webフロントエンド を作りました。
1. なぜサーバー側Whisperではなく「Web Speech API」なのか？
| 比較項目 | サーバー側 Whisper / TTS | ブラウザ標準 Web Speech API |
|---|---|---|
| サーバー負荷 | 激重: 音声処理でGPU/CPUを大量消費 | ゼロ: クライアント端末側のOS機能で処理 |
| レスポンス速度 | 音声ファイルアップロードの遅延がある | 発話終了と同時にテキスト化完了（爆速） |
| ライブラリ依存 | PythonやFFmpegの重い環境構築が必要 | 外部ライブラリ不要（Pure JavaScript） |
| コスト | 高価なGPUサーバーが必要 | 完全無料（0円） |
現場のタブレット（iPadやAndroid、Windowsタブレット）のChrome/Edgeブラウザで動かすだけで、追加コストゼロで高品質な音声認識と読み上げが手に入ります。
2. 音声認識とDify連携のコア実装（pure JavaScript）
外部ライブラリを一切使わず、わずか数十行のシンプルなJavaScriptで実装できます。
💻 コア実装・設定スニペット（抜粋）
# (要点抜粋)
// app.js: Web Speech API と Dify API の連携コア
const DIFY_API_URL = "http://dify-server.local/v1/chat-messages";
const DIFY_API_KEY = "app-xxxxxxxxxxxxxxxxxxxxxxxx";
// 1. Web Speech API (音声認識) の初期化
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition = null;
if (SpeechRecognition) {
recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';
recognition.continuous = false; // 1回の発話ごとに終了
recognition.interimResults = false;
// 音声認識が完了したときのイベント
recognition.onresult = async (event) => {
const queryText = event.results[0][0].transcript;
console.log("認識された音声:", queryText);
// Dify へ問い合わせ実行
await askDify(queryText);
};
recognition.onerror = (event) => {
console.error("音声認識エラー:", event.error);
speakText("音声をうまく聞き取れませんでした。もう一度お話しください。");
};
}
// 2. Dify Chat Messages API への問い合わせ
async function askDify(query) {
try {
const response = await fetch(DIFY_API_URL, {
method: "POST",
headers: {
"Authorization": `Bearer ${DIFY_API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
inputs: {},
query: query,
response_mode: "blocking",
user: "factory-worker-01"
})
});
const data = await response.json();
const answer = data.answer || "回答が見つかりませんでした。";
console.log("Difyからの回答:", answer);
// 3. 回答を音声で読み上げ
speakText(answer);
} catch (err) {
console.error("APIエラー:", err);
speakText("サーバーとの通信に失敗しました。");
}
}
// 3. Web Speech API (音声合成・発話)
function speakText(text) {
if (!('speechSynthesis' in window)) return;
// 前の発話をキャンセル
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'ja-JP';
utterance.rate = 1.0; // 速度
utterance.pitch = 1.0; // ピッチ
window.speechSynthesis.speak(utterance);
}
3. 現場で使えるようにするための「UI/UXの工夫」
PC用のUIをそのまま現場に置いても使われません。以下の3つの泥臭い改善を行いました。
-
マイクボタンを超巨大化（直径120px以上）:
肘や手の甲、ビニール越しでも押せるように画面の半分を占める巨大な円形ボタンを配置。 -
状態を色で全画面フィードバック:
- 待機中: 🟢 グリーン
- 聞き取り中: 🔴 レッド点滅
- AI思考中: 🟡 イエロー
騒音の大きい現場でも、今AIが聞き取っているのかどうかが遠くから一目で分かります。
-
発話の自動中断:
マイクボタンを押した瞬間、前のAIの読み上げをwindow.speechSynthesis.cancel()で即座に止め、次の質問をすぐ聞き取れるように制御。
まとめ：現場ファーストのAIとは「画面を見なくても使えること」
デスクワーク向けのAIツールは「いかにリッチなテキストやグラフを出すか」が競われますが、肉体労働・一次産業・製造現場におけるAIの真価は「画面を触らず、見なくても業務が進むこと」 です。
- 重いライブラリを入れず、ブラウザの標準機能を使い倒す
- サーバー負荷をゼロにし、端末側のリソースで爆速処理する
- DifyのRAGナレッジと音声をつなぐ
このシンプルな構成だけで、過酷な現場の作業員を劇的に助ける「喋るAI相棒」が完成します。現場向けDXを検討中の方は、ぜひWeb Speech APIの活用を試してみてください！
📚 さらに詳しいアーキテクチャ設計・パラメータ表・トラブルシューティング
最後までお読みいただきありがとうございます！
本記事が少しでも「役に立った」「あとで試したい」と感じていただけましたら、ぜひQiitaの 「いいね（♡）」 と 「ストック」、および アカウントのフォロー をいただけると今後の検証・執筆の大きな励みになります！
また、本記事のさらに踏み込んだ 「深層アーキテクチャ解説」「主要パラメータの技術的根拠」「現場アンチパターン・トラブルシューティング対応表」 は、以下のGitHub技術リファレンスにて公開しています。
👉 【第13弾 詳細技術リファレンス (QIITA_ARTICLE_DETAIL_13.md)】
⭐ 全14層・200パターンの自立型インフラ＆オンプレAIリファレンス集（おじさんの武器庫）を順次公開中です。ぜひGitHubリポジトリへの Star (★) と X (@OjisanTechnical) のフォローもお願いいたします！
👉 GitHub リポジトリ: ojisantech/ojisan-arsenal
💡 【検証環境・個人研究（PoC）に関する注記】
本記事は、筆者個人の自宅検証環境（ホームラボ／仮想環境）において、公開情報およびOSS（オープンソースソフトウェア）を用いて独自に構築・検証した個人研究（PoC）の記録です。特定の企業・団体の実環境や業務上の非公開情報とは一切関係ありません。