学習アプリ制作中

しゃべチャイナ

趣味の合う中国人の友達と、片言や日本語混じりでも会話を続けながら、添削・ピンイン・音声・語彙復習で中国語を身につけるブラウザ完結型の学習PWAです。

現在地
制作中
分野
学習アプリ
使っているもの
React 19・TypeScript (Strict)・Vite 8・Tailwind CSS v4・Cloudflare Workers (Hono)・Web Speech API・OpenRouter API・PWA
しゃべチャイナのノベル画面で、中国人の友達の立ち絵とピンインつき会話文を表示している

どんな作品か

中国語を机に向かって「勉強する」のではなく、趣味の合う友達とおしゃべりしながら身につけるブラウザ完結型の中国語会話学習 PWA です。

  • 文法が間違っていても、片言でも、日本語が混じっていても会話は止まりません。友達が意図をくみ取って中国語で返し、その後で優しく添削してくれます。
  • ヘッダーの会話モードで フリー / 学習 / 特訓 を切り替えられます。学習は自然な会話の中で HSK 級相当の表現を一つずつ促し、特訓は 1 対 1 の家庭教師のように単語と作文を一問ずつ練習します。
  • 中国語が出てこないときは日本語で言えば、「かんたん/自然に/流暢に」の 3 段階の中国語下書が出ます。聞いて、まねして中国語で言い直すのが基本の流れです。
  • HSK 1〜6 級の範囲で語彙と文法をコントロールするので、背伸びせずに続けられます。
  • 会話画面はチャットではなく サウンドノベル風の立ち絵つきステージ。立ち絵とテキスト枠は重ならないよう左右(狭い画面では上下)に分けて配置します。
  • 会話は DeepSeek V4.1 Flash、声は Fish Audio S2.1 Pro(どちらも OpenRouter 経由)。利用者が用意するのは OpenRouter の API キー 1 つ です。
  • API キー・会話履歴・語彙帳はすべてブラウザ内(IndexedDB / LocalStorage)にのみ保存されます。Cloudflare Workers 側はリクエストの転送に徹し、ユーザーデータを保持しません。

しゃべチャイナのノベル画面。左に友達の立ち絵、右にピンイン、中国語、日本語訳、新出表現をまとめた会話枠を表示

画面ギャラリー

ノベル画面 — 立ち絵と会話する

立ち絵を左、テキスト枠を右に置くので、会話中も相手の顔が隠れません。ピンイン・中国語本文・日本語訳・新出語彙が 1 枚のテキスト枠にまとまり、添削は折りたたみで控えめに添えられます。返答の感情は名前の横にラベルで表示されます。

ノベル画面

20人の立ち絵

爽やかなアニメ調のイラスト立ち絵です。男女 10 人ずつ、計 20 体すべてに通常・微笑み・喜び・笑い・照れ・驚き・哀しみ・怒り・考え中・ウインクの 10 表情があり、会話の感情に合わせて切り替わります。趣味・職業・居住地に合わせた背景まで描き込まれています。

20体の立ち絵一覧

レスポンシブ — 縦画面と横画面

スマートフォン縦画面 スマートフォン横画面
スマホ縦画面で、立ち絵の上に会話枠を表示 スマホ横画面で、立ち絵と会話枠を左右に表示

横長の画面(PC・タブレット横・スマホ横)では立ち絵を左カラム・テキスト枠を右カラムに分け、縦長の画面では上下に分けます。タイトル・画面モード・HSK は常時表示し、友達・語彙・趣味・音声・設定・履歴削除は「その他」メニューから利用できます。

スマートフォン横画面は縦の余白が最も貴重なため、約 4 秒の無操作でアプリのヘッダーごと畳み、その高さを立ち絵へ譲ります。立ち絵は画面の下端まで届き、テキスト枠と入力欄は右カラムにまとまります。PWA としてインストールするとスタンドアロン表示になります。

チャット画面 — 履歴を振り返る

ヘッダーの「ノベル / チャット」で切り替えられます。時系列で過去のやり取りを一覧でき、吹き出し形式で表示されます。

チャット画面

友達の選択

管理済みの 20 人から、趣味や性格の合う会話相手を選べます。選ぶと立ち絵横の ⚙️ から 声の高さ を「低め〜高め」で調整できます。

友達一覧

設定

設定画面では OpenRouter API キーと、会話モデルと音声モデルは固定です。自動読み上げ・無音の待機時間・声調カラー・サンプル回答モードを切り替えます。

設定画面

主な機能

1. 片言・不完全な発話ウェルカム設計

文法が間違っていても AI が意図を理解して会話を続けます。返答の下に控えめな 添削 が 1 行のチップで出るため、スマホでも返答が追いやられません。チップを開くと元の表現と自然な中国語・ピンイン・解説をカードで比較できます(次の返答でまた 1 行に折りたたまれます)。日本語と中国語を淡ぜた発話にも対応し、意味・読み方を尋ねる自然な質問や意図的な言語切り替えは誤り扱いしません。日本語の会話発話には、まず内容へ答えたうえで中国語での言い方を案内します。

日本語で話したときは、すぐには送らず 日本語下書(JapaneseDraft) を挟みます。言ったことを学習者本人が話すための中国語に「かんたん/自然に/流暢に」の 3 段階で訳し、ピンインと読み上げ付きで見せます。「中国語で言ってみる」を押すとマイクが中国語で開くので、下書きを見ながら自分の声で言い直せます。日本語のまま送る道も残しています。

2. HSK 1〜6 級の難易度コントロール

ヘッダーからいつでも HSK 級を切り替えられます。級内の語彙・文法を軸にしつつ、不自然に硬くならないよう平易な言い換えを優先します。趣味分野の固有表現(作品名・料理名など)は、その趣味が現在の話題に直接関係するときに限り、級を超えて自然に使われます。

会話モード として フリー / 学習 / 特訓 が用意されています。フリーは自由に会話、学習は HSK 級相当の表現を自然に促し、特訓は 1 対 1 の家庭教師のように単語と作文を一問ずつ練習します。

3. 立ち絵によるサウンドノベル体験

  • 立ち絵: バストアップ(腰から頭まで)のイラスト。趣味・職業・居住地に合わせた背景まで描き込まれています。
  • 配置: テキスト枠と重ならないよう左右(狭い画面では上下)に分割。会話中も顔が隠れません。
  • 感情: LLM が返答ごとに指定した感情を、名前の横にラベルで表示します(指定がない場合は返答テキストから推定)。
  • 演出: 友達を切り替えたときのフェードイン、本文のタイプライター表示(タップでスキップ)。
  • 待機中: 返答を待っている時は「考え中」の表情に切り替わり、微細な呼び出しモーションが再生されます。
  • OS の「動きを減らす」設定を有効にしている場合、アニメーションは自動的に停止します。

4. 常時ピンイン & 声調カラーハイライト

すべての中国語にピンインを常時併記します。ピンインは pinyin-pro の辞書から決定的に生成し、LLM ごとの表記揺れを抑えています。第 1 声(赤)・第 2 声(橙)・第 3 声(緑)・第 4 声(青)・軽声(灰)の色分けをワンタップで ON/OFF できます。自分の発話にもピンインが付きます。

5. サンプル回答モード(シャドーイング)

サンプル回答モードは初期状態で ON です。友達の返答に対して学習者が次に言える中国語を 「短く返す」「自然に返す」「話を広げる」 の 3 種類で表示します。各案にはピンインと発音ボタンが付き、音声を聞いてそのまま繰り返すシャドーイング練習に使えます。通常の返答を先に表示し、3 案は別リクエストで後から追加するため、会話の返答速度を妨げません。設定から OFF にできます。

6. Fish Audio S2.1 Pro による音声合成 (TTS)

会話画面の読み上げは Fish Audio S2.1 Pro(OpenRouter 経由) に固定しています。20 人それぞれに Fish の話者 ID と調整値を割り当て、同じ友達はいつも同じ声で話します。

項目 内容
モデル fish-audio/s2.1-pro(固定)
課金 UTF-8 バイト課金(中国語 1 文字 = 3 バイト)。利用者の OpenRouter 残高から使われる
声の高さ 利用者が友達ごとに 0.85〜1.20 の範囲で変えられる

読み上げは返答全体の生成を待たず、文章を句点で分けて 1 文目から再生しながら次の文を先読みします。表示用の中国語とは別に読み上げ用テキストを持ち、算用数字を一桁ずつ読む問題を漢数字化などで補正します。

7. 音声入力 (STT)

ブラウザの音声認識で、話している途中から文字を表示し、確認してから送信します。マイクは常に中国語で開き、言語モードの切り替えはありません。言い方が分からないときだけ、マイクの隣の 日 ボタンで日本語を 1 回分だけ聞き取り、送信後は自動で中国語に戻ります。文字入力は仮名の有無で言語を見分けます。ブラウザが認識を開き直したときに確定済みの文字列を再掲しても、蓄積済みテキストと内容で突き合わせて重複を落とし、同じ並びの隣接反復を畳むため、同じ文が 2 回入りません。

自動読み上げを ON にすれば、音声通話のように練習できます。入力欄の HF を押すとハンズフリー会話を開始し、中国語では発話の最後に「发送(fāsòng)」、日本語では「送って」と言うと発信します(沈黙では送信されません)。友達の返答を読み上げた後はマイクが自動で再開します。

8. 語彙帳 & 復習

会話で出た新出表現や添削フレーズを栞アイコン(🔖)で語彙帳に保存し、フラッシュカードと 4 択クイズで復習できます。覚えた言葉を実際の会話で使えると「👏 使えました」の小さなバッジが表示され、使用回数が記録されます。

9. おでかけ(場面・景勝地・お泊り旅行)

ヘッダーの おでかけ から、タピオカ屋・夜市・レストラン・コンビニ・空港・地下鉄・宿の 7 つの 場面 と、17 地域の 景勝地(杭州は名所・駅・競技場・デパート・飲食店まで 30 か所)を選べます。選ぶと専用の背景に切り替わり、Friend の固定の導入文が入り、入力欄の上の 実用フレーズ チップからその場で使える中国語をピンイン・日本語・発音付きで出します。

対応する名所・場面は 前の視点へ / 次の視点へ ボタンで写真・映像の視点を切り替えられるほか、会話の流れに応じて自動で進みます。他地域の名所を選ぶと お泊り旅行 が始まり、「宿に戔る → 翌日へ進む」で日付が進み、「帰る」と旅行の思いでが Friend の長期記憶に残ります。

10. 復習ターゲット・音読チャレンジ・豆知識

語彙帳と直近の添削から Friend が復習ターゲットを自然に振り、自分で使える表現があると発話に小さな印が付きます。実用フレーズやサンプル回答、日本語下書の中国語は 言ってみる で声に出して言え、発音チェックに合格すると Friend が褒めて、そのまま会話を進められます。若者言葉や中国特有の習慣が出たときだけ、返答の下に短い 豆知識 が添えられます。

11. おしゃべり日記・朋友圈・親密度

8 発話ごと、または旅行から帰ったとき、Friend に 今日の日記 を書いてもらえます。話したテーマ、自分が使えた表現(ピンイン付き)、Friend からのひとこと(読み上げ可)が 1 枚のカードになります。タイトル画面には Friend の 朋友圈(日替わりのつぶやき) が出て、タップするとその話題から会話が始まります。話した回数に応じて 親密度 が「知り合い」→「友達」→「親友」と進み、話し方の距離感が少し近づきます。

12. 完全 BYO-AI & プライバシー保護

会話と読み上げの費用は利用者自身の OpenRouter キーから支払われ、アプリ運営側に費用は回りません。API キー・会話履歴・語彙帳はすべてブラウザ内(IndexedDB / LocalStorage)にのみ保存され、Cloudflare Workers はリクエスト転送に徹しユーザーデータを保持しません。共有端末では利用後に設定・履歴を削除し、API キーを残さないようにしてください。

13. バッジ・実績(328種)

会話やおでかけで集める実績バッジ。 料理(200)・名所訪問(92)・友達との対話(20)・場面クリア(7)・語彙登録・クイズ(12)・グッズの集合達成(8) の 6 カテゴリ、合計 328 種。バッジを獲得すると立ち絵エリアの中央に 4 秒間アニメーションが出ます。

使い方

STEP 1: OpenRouter API キーを登録する(任意/必須)

会話と読み上げには OpenRouter の API キーが必要です。タイトル画面のメニューに「APIキー(任意)」があり、未設定 · はじめる前に登録してください のように状態が出ます。キーがないまま会話を始めようとすると、理由つきでキー入力の画面が開きます。

  1. openrouter.ai/settings/keys でキー(sk-or-v1-...)を作成し、少額($5 程度)をチャージします。
  2. タイトル画面の APIキー(任意) 、または設定画面からキーを貼り付け、「確認」で有効か調べてから「保存」します。

公開テスト中 は、キーを登録せずとも運営が用意した共有の検証用キーで会話・音声を体験できます(「友人テスト用の共有枠を使用中」)。使えるモデルや音声はテスト用に固定され、利用量は共有枠に対してカウントされます。

キーの状態は 未設定 / 有効 / 無効 / 残高切れ で表示されます。会話や音声が残高切れ(402)で返ると、その場で「残高切れ」になって会話が止まります。チャージ後にバッジから「確認」し直してください。

STEP 2: 会話相手(友達)を選ぶ

  1. ノベル画面の友達アイコン、またはヘッダーの 友達 を押します。
  2. 20 人の中から趣味や性格の合う相手を選んで 話す を押します。
  3. 立ち絵横の ⚙️ から、その友達の 声の高さ を「低め〜高め」で調整できます。

STEP 3: 会話を楽しむ

  1. 画面下部の入力欄に入力するか、マイクボタン(🎙️)で話しかけます。
    • 日本語でも中国語でも OK: 中国語が出てこないときは 日 ボタンを押して日本語で言えば、中国語の下書が 3 段階で出ます。
    • 片言でも OK: 「我想 去 上海」のような途切れた文でも通じます。
    • ハンズフリー: HF を押して中国語で「发送」、日本語で「送って」と言うと発信します。
  2. 返答を待ちます。感情ラベル・ピンイン・中国語本文・日本語訳・添削・新出表現が確認できます。
  3. 本文はタイプライター表示されます。テキスト枠をタップすると全文が出ます。

STEP 4: 復習する

ヘッダーの 語彙 から保存した単語一覧を確認し、復習クイズを始める でフラッシュカードと 4 択クイズに進みます。

STEP 5: おでかけと日記

ヘッダーの おでかけ で場面か景勝地を選びます。実用フレーズチップを押して聞き、「言ってみる」で発音チェックをクリアすると Friend が褒めます。たくさん話したら 日記 から今日の日記を書いてもらえます。

登場する友達(20 人)

立ち絵・声・出身地・職業・趣味がそれぞれ異なります。

女性

名前 居住地・職業 趣味
陈美玲 (Chen Meiling) 杭州・大学生(浙江大学) 三国志、映画鑑賞、台湾料理
李雪 (Li Xue) 成都・グラフィックデザイナー 四川料理・火鍋、アート、猫、旅行
林子汉 (Lin Zihan) 上海・写真家 / 旅行ブロガー 風景写真、中国茶、歴史文化・漢服
苏雨辰 (Su Yuchen) 厦門・ヨガ / ランニングコーチ ヨガ、海辺の散歩、健康料理
周暖 (Zhou Nuan) 昆明・パティシエ見習い お菓子作り、花・植物、パンダ
何静怡 (He Jingyi) 深圳・金融アナリスト 読書、ジャズ、都市・建築、語学学習
唐小雨 (Tang Xiaoyu) 重慶・バンドのベーシスト 音楽、ライブハウス、夜景、バイク
郭珊珊 (Guo Shanshan) 西安・大学院生(西北大学・考古学) 歴史・遺跡、バックパック旅行、西安グルメ
顾安琪 (Gu Anqi) 大連・通訳者 インテリア、映画音楽、静かなカフェ
沈若熙 (Shen Ruoxi) 長沙・家庭料理店の若女将 湖南料理、市場めぐり、ドラマ鑑賞

男性

名前 居住地・職業 趣味
王浩 (Wang Hao) 北京・IT エンジニア テクノロジー・AI、ゲーム、SF小説
张伟 (Zhang Wei) 広州・フィットネスインストラクター ランニング、広東飲茶、スポーツ観戦
陈宇 (Chen Yu) 蘇州・造園職人 庭園・盆栽、園芸、二十四節気
李俊 (Li Jun) 深圳・ストリートダンサー / DJ ダンス、ヒップホップ、スニーカー
赵浩然 (Zhao Haoran) 武漢・大学生(武漢大学・eスポーツ部) eスポーツ、アニメ、武漢グルメ
孙天佑 (Sun Tianyou) 北京・大学講師(北京大学・中国史) 中国史、書道、古典詩、茶館
吴一帆 (Wu Yifan) 青島・海鮮レストランのシェフ 海鮮料理、釣り、ビール、市場めぐり
徐世勋 (Xu Shixun) 杭州・ゲーム開発者 ゲーム開発、SF映画、ボードゲーム
高光耀 (Gao Guangyao) 新疆・ツアーガイド シルクロード、羊肉料理、砂漠の星空
郑志远 (Zheng Zhiyuan) 天津・ジャズ喫茶のマスター コーヒー、ジャズ・レコード、古い映画

技術構成

スタック

領域 技術 詳細
Frontend React + TypeScript React 19, Strict Mode, any 不使用
Build Vite Vite 8, vite-plugin-pwa(オフライン / インストール対応)
Styling Tailwind CSS Tailwind CSS v4 + 素の CSS(アニメーション・レイアウト)
キャラクター イラスト画像 + インライン SVG プリセット 20 体はイラスト立ち絵。カスタム友達は SVG をパラメータで生成
Backend Cloudflare Workers Hono、エッジ実行、Static Assets で SPA も同居
AI Hub OpenRouter API Chat Completions + 音声合成 + 文字起こし
認識・読み上げ Web Speech API STT(音声入力)、ブラウザ標準音声(読み上げフォールバック)
保存先 Web Storage LocalStorage / IndexedDB(完全クライアント保持)

最新アップデート

最新は T-160(フードバッジ画像 50 枚) および バッジ実績システム(T-156〜T-170, 328種) です。詳細は GitHub リポジトリの CHANGELOG.md を参照できます。

  • バッジ実績 328 種を実装(料理 200・名所訪問 92・対話 20・場面クリア 7・語彙 12・グッズ 8)
  • 景勝地・場面のマルチシーン(複数の写真・視点・会話連動移動)を追加
  • 未インストール時のホーム画面追加バナー、PWA の theme-color 統一、ストレージ永続化

公開について

try-chinese.molkz.com で開発中の公開版を試せます。インストールやアカウント作成は不要です。会話生成を使う場合は、利用者自身の OpenRouter API キーを設定してください。

プライバシー

API キー・会話履歴・語彙帳・設定は利用しているブラウザ内に保存されます。Cloudflare Workers 側は会話生成と音声合成のリクエストを中継するだけで、利用者の会話履歴や語彙帳を保管しません。共有端末では利用後にブラウザ内の設定や履歴を削除し、API キーを残さないようにしてください。

プロジェクトのロードマップ

ここまでと、これから

  1. 片言でも続く中国語会話

    完了

    文法間違い・日本語混じり・片言発話から意図をくみ取り、会話を止めずに自然な表現を添えるウェルカム設計と HSK 1〜6 級の難易度制御を実装しました。

  2. 20人の友達とサウンドノベル画面

    完了

    趣味・職業・居住地の異なる男女 20 人の立ち絵(10 表情ずつ)と、横幅・高さに応じて左右または上下に分割して立ち絵が隠れないノベルステージを完成しました。

  3. 音声対話と語彙の復習

    完了

    Web Speech APIによるSTT、Fish Audio S2.1 ProによるTTS、語彙帳、フラッシュカード、4択クイズを実装しました。

  4. おでかけと日記

    完了

    7 つの場面と 17 地域の景勝地(お泊り旅行対応)、日記・朋友圈・親密度システムを実装しました。

  5. 実績バッジ(328種)

    完了

    料理・名所訪問・対話・場面クリア・語彙・グッズの 6 カテゴリ、328 種のバッジ実績を実装しました。

  6. 公開版の調整

    進行中

    公開版を使いながら、会話の自然さ、音声、スマートフォンでの操作性を継続して改善しています。

開発日記

この作品に紐づく記録

記録を絞り込む

この作品に紐づく開発日記は、まだありません。

記録を追加すると、ここへ日付順に並びます。