Software Overview

花ちゃん Hana-chan

感情豊かなAIキャラクター「花ちゃん」と
チャット・音声・表情で交流できる
インタラクティブAIアシスタントです。

💕
😊 7種類の表情
🎤 音声対応
💬 チャット AI
About

花ちゃんってなんだろう?

Hana-chanは、テキスト・音声・表情アニメーションを組み合わせたインタラクティブAIキャラクターアプリです。

会話のたびに表情が変わり、返答を声で読み上げ、マイクで話しかけることもできます。 単一のHTMLファイルで動作し、インターネット接続不要・インストール不要で使えます。

できること6つ

💬
テキストチャット

入力欄にメッセージを書いて送信すると、花ちゃんがキャラクターらしい返答をしてくれます。Enterキーでも送信可能。

ルールベース応答
😊
7種類の豊かな表情

普通・嬉しい・怒る・泣く・驚く・照れ・眠いの7表情。会話内容に応じて自動で切り替わります。ボタンで手動変更も可。

自動 & 手動切替
🔊
テキスト読み上げ

花ちゃんの返答はWeb Speech APIで自動的に声に出して読み上げます。日本語女性音声を優先使用。口パクアニメーション連動。

SpeechSynthesis API
🎤
マイク音声入力

マイクボタンで話しかけると、音声を認識してテキストに変換。認識後に自動で花ちゃんへ送信されます。

SpeechRecognition API
🎵
音声ファイル再生

MP3・WAVなどの音声ファイルを読み込んで再生できます。再生中は花ちゃんの口が動くリップシンクアニメーションを表示。

ローカルファイル対応
豊かなアニメーション

頭ふりふり・瞬き・口パク・涙・怒りマーク・ハートなど多彩なエフェクト。表情ごとに専用のアニメーションが付きます。

CSS アニメーション
Expressions

花ちゃんの表情一覧

😊
Normal
普通
🥰
Happy
嬉しい
😠
Angry
怒る
😢
Crying
泣く
😲
Surprised
驚く
😳
Shy
照れ
😴
Sleepy
眠い
各表情は 目・眉・口・ほっぺの色・頭の動き・特殊エフェクト の組み合わせで表現されます。
会話の内容から感情を自動判定し、適切な表情へ切り替わります。

使い方のフロー

1
HTMLファイルをブラウザで開く

hana-chan.html をダブルクリックするだけ。インストール不要・サーバー不要で即起動します。Chrome / Edge 推奨。

2
テキストまたは音声で話しかける

テキスト入力して送信するか、🎤マイクボタンで話しかけます。Enterキーでも送信できます。

3
花ちゃんが返答・表情変化・読み上げ

会話内容に合わせた返答が表示され、自動的に声で読み上げます。表情も返答の感情に合わせて変わります。

4
音声ファイルを読み込んで口パク再生

🎵ボタンで音声ファイルを選択すると読み込んで再生。再生中は口パクアニメーションが連動します。

Technical Specs

技術仕様

構成・動作環境

  • 単一HTMLファイル(HTML + CSS + JavaScript)
  • 外部ライブラリ・フレームワーク 不使用
  • インターネット接続 不要(完全オフライン動作)
  • 推奨ブラウザ:Chrome / Edge(最新版)
  • モバイルブラウザでも動作可

使用Web API

  • SpeechSynthesis API(テキスト読み上げ)
  • SpeechRecognition API(音声認識)
  • File API / Blob URL(音声ファイル読込)
  • requestAnimationFrame(リップシンク)
  • SVG インライン描画(キャラクターグラフィック)

キャラクター描画

  • インラインSVGでキャラクターを直接描画
  • 目・眉・口をJavaScriptで動的に差し替え
  • CSSアニメーションで頭・体の動きを表現
  • 表情ごとに専用パーツセットを用意
  • 画像ファイル不使用(ベクターのみ)

AI会話エンジン

  • 外部APIは一切使用しない完全ローカル処理
  • キーワードマッチングによるルールベース応答
  • 22カテゴリ・複数パターンのランダム返答
  • 返答テキストから感情を自動判定し表情連動
  • タイピング演出で自然な会話感を演出