🏁 「やる気」「頑張り」定量的評価が難しい
「挨拶って大事。でも、やる気や元気さを定量的に評価するのって難しい…」
そんな現場の声をきっかけに、今回はTeachable MachineとCodePenを使って「あいさつエネルギーチェッカー」 を作ってみましたが、実装できずGoogle AI Studioに頼りました！
- 声の大きさや張り・勢いで「やる気」を判定
- 管理職が定性的な評価をしやすくなる
- 店舗や学校、イベントのアイスブレイクにも使える🎤
🎯 解決したかった課題
- 「元気な挨拶」を評価したいが、主観に頼りがち
- モチベーションの高さが見えづらい
- 人事評価・新人教育などで、具体的な指標がほしい
- CS調査結果が壊滅的改善したい
💡 使用技術・ツール
| ツール | 目的 |
|---|---|
| Teachable Machine | 音声モデル作成 |
| Webアプリのプロトタイピング | |
| Google AI Syudio | Webアプリのプロトタイピング |
| JavaScript / HTML / CSS | 録音・診断処理 |
🧪 作ったもの
🔗 CodePenデモ
👉 [あいさつエネルギーチェッカー (試作)]
📦 機能概要：
- マイクで「おはようございます」と挨拶
- Teachable MachineがHigh / Normal / Low Energyを判定
- 結果に応じてスコア（30〜100点）を表示
🔗 Google AI Studioデモ
👉 [あいさつエネルギーチェッカー (試作)]
↓↓できたツール
📦 機能概要：
- マイクで「おはようございます」と挨拶
- Teachable MachineがHigh / Normal / Low Energyを判定
- 結果に応じてスコア（比率）を表示
- 判定後、AIがコメント表示
🛠 制作手順ver1（Code Pen）
① Teachable Machineで音声モデルを作成
-
クラス例：
- High_Energy（元気な挨拶）
- Normal_Energy（普通の挨拶）
- Low_Energy（小さな声・ぼそぼそ）
-
各クラスで複数の音声サンプルを録音（10件以上が望ましい）
-
学習 → エクスポート → モデルURL取得
② CodePenで録音・判定Webアプリを実装
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/audio@0.8.4/dist/teachablemachine-audio.min.js"></script>
<h1>🎤あいさつエネルギーチェッカー</h1>
<button onclick="startRecording()">録音スタート</button>
<p id="result">診断結果がここに表示されます</p>
CSS・JSコード
CSSbody {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: #f0f0f5;
color: #333;
}
h1 {
font-size: 24px;
margin-bottom: 15px;
}
button {
padding: 8px 16px;
margin: 5px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
transition: background 0.3s;
}
button:hover {
background-color: #0056b3;
}
#webcam-container {
margin-top: 15px;
}
#status-label {
margin-top: 10px;
font-size: 18px;
color: #444;
}
#result-label {
margin-top: 15px;
font-size: 18px;
font-weight: bold;
color: #333;
}
#snapshot-container {
margin-top: 15px;
}
JS(JavaScript)
let recognizer;
let audioChunks = [];
let mediaRecorder;
async function loadModel() {
recognizer = await tmAudio.create("https://teachablemachine.withgoogle.com/models/6Y71g1nJwg/model.json");
await recognizer.ensureModelLoaded();
console.log("モデル読み込み完了");
}
loadModel();
function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then((stream) => {
mediaRecorder = new MediaRecorder(stream);
audioChunks = [];
mediaRecorder.ondataavailable = (e) => {
audioChunks.push(e.data);
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks);
const arrayBuffer = await audioBlob.arrayBuffer();
const audioBuffer = await new AudioContext().decodeAudioData(arrayBuffer);
const prediction = await recognizer.predict(audioBuffer);
const top = prediction.sort((a, b) => b.probability - a.probability)[0];
let score = 0;
if (top.className === "High_Energy") score = 100;
else if (top.className === "Normal_Energy") score = 70;
else if (top.className === "Low_Energy") score = 30;
document.getElementById("result").innerText =
`診断結果：${top.className}（${Math.round(top.probability * 100)}%） → スコア：${score}点`;
};
mediaRecorder.start();
console.log("録音開始");
// ⏱️ 2秒後に自動ストップ＆診断
setTimeout(() => {
mediaRecorder.stop();
console.log("録音停止");
}, 2000);
})
.catch((err) => console.error("マイクの使用に失敗", err));
}
🗞️実装かなわず
「CodePen」は「JS」の設定で躓き、原因の追究ができませんでした。
そこで「Teachable Machine」のモデルを「Google AI Studio」と連携させ、アプリを作成することに切り替えました。
🛠 制作手順ver2（Google AI Studio）
Teachable Machineで音声モデルを作成→Google AI Studioと連携
1.左のBuildタブよりプロンプト作成
2.プロンプト入力で簡単にアプリ作成（ほんの2.3分で！）
🐞 詰まったところ・エラー
・音声の精度が不安定 ノイズが多い環境では誤判定しやすいため、なるべく静かな場所で録音推奨(ほぼノイズが勝ってしまう)
・サンプルデータは50ぐらいずつ、声色は多人数が良い
・録画時間が2秒だと判断ができない
・日本語音声での分類が弱い 同一ワード（例：「おはようございます」）で音量・トーンのみ変えて学習すると精度が改善
🚀 今後の展望
LINE Botとの連携：診断結果を管理者へ自動通知（Messaging API連携予定）→時間がなく対応できず
スプレッドシート記録：個人別の診断履歴を蓄積＆可視化→時間がなく対応できず
画像認識：笑顔判定+文書読み取りで文脈判断で心の状態を判断
📝 まとめ
・挨拶の元気さ（やる気）の見える化
・手軽なWebアプリで診断可能、スコア化できる
・Teachable MachineとGoogle AI Studioを組み合わせることで、簡単に音声モデルをWebアプリ化できました！
・挨拶の元気さ＝「やる気」や「モチベーション」のひとつの指標。
これを見える化することで、ポジティブなコミュニケーションを増やす仕組みとして活用できそうです✨
↓↓参考文献