ICT・生成AI × 中国語
90分で作る
90分で作る
中国語学習アプリ
生成AIに頼めば、プログラミングの知識がなくても自分だけの中国語学習アプリが作れます。今日は実際に手を動かして、AIへの「頼み方」を身につけ、作った作品をみんなで共有します。「使う人」から「つくる人」へ。
このサイト
生成AIに頼めば、プログラミングの知識がなくても自分だけの中国語学習アプリが作れます。今日は実際に手を動かして、AIへの「頼み方」を身につけ、作った作品をみんなで共有します。「使う人」から「つくる人」へ。
このサイト
このサイトは情報が多いので、体験授業では下の順番に進みます。各ステップのボタンを押すと、その場所へジャンプします。
実際にAIや各種技術で作った中国語学習アプリの例です。タイピング、モーションキャプチャ、カメラ＋画像認識など、今日紹介した技術がどんな作品になるか見てみましょう。
作りたいものに合わせてキーワードを選び、上の「基本の型」に当てはめて頼みましょう。技術を表すキーワード（赤）を入れると、AIがより的確なアプリを作ってくれます。
何を作るときも、最初にこの条件をつけて頼むと失敗が減ります。AIがファイルを分けず、1枚で完結する・iPadで動くものを作ってくれます。
呪文の「◯◯◯」には、何を・何で・どう動くかを書きます。下のカテゴリ集に、作りたいものの種類ごとに「使えるキーワード」と「注文の例」を用意しました。これをそのままコピーして呪文の後ろにつなげれば、注文が完成します。
「こういうアプリを作りたいけど、どんな技術（キーワード）を使えばいいか分からない」――そんなときは、作る前にAIに相談します。出てきたキーワードを、呪文の注文に足せばOKです。
→ AIが「Web Speech APIの音声認識（SpeechRecognition）」などを教えてくれます。
HTMLに画像を表示するには、HTMLファイルと画像ファイルを同じ場所に置いて動かす必要があります。本来これは、次のような環境で行います。
でも、iPad1台だけだとこれが難しい。そこでこのサイトが、疑似的にアップロードして動かせるサーバの代わりになります。下の手順でZIPにまとめて投稿すれば、画像つきアプリでもその場で動きます。
panda.png<img src="panda.png">で読みに行く形になります。あとでHTMLと画像を同じフォルダに置けば表示されます。index.html（メイン）＋ panda.png（画像）＋ style.css などindex.html という名前にするindex.html が自動で表示され、同じフォルダの画像も正しく出ます。カメラを使うアプリで、撮った瞬間にいきなり保存されると使いにくいもの。撮影 → いったん画面で確認 → 「保存」か「撮り直し」を選ぶ、という流れにするようGeminiに頼みましょう。
getUserMedia（カメラ取得）／canvas + drawImage（1コマを取り込む）／toBlob（画像ファイル化）／プレビュー → 保存確認の流れ。この「確認をはさむ」指示が、使いやすさの分かれ目です。同じ漢字でも、日本語フォントと中国語フォントでは形が少し違います（例：「骨」「直」「今」の細部）。何も指定しないと日本語の字形で出ることが多いので、中国語の文を見せたいときはフォントを指定すると本格的になります。Geminiに次のように頼みます。
"PingFang SC"（iPad/Mac標準）, "Noto Sans SC""PingFang TC", "Noto Sans TC""Hiragino Sans", "Yu Gothic"今日作るのは「1ファイルのHTML」で完結するアプリです。これは手軽で安全な代わりに、できないこともあります。先に知っておくと、無理なものに挑んで詰まらずにすみます。できないものには「どうすれば実現できるか」も添えました。
同じ「会話・ロールプレイ」でも、中身が2種類あって動作がまったく違います。
会話の流れ（質問と返事の選択肢）をあらかじめデータで用意しておき、それをたどる方式。HTML1枚で完結します。
生徒が自由に入力した文にAIがその場で返事を作る方式（ChatGPTのような会話）。裏でAIのAPIを呼ぶので、HTML1枚だけでは動きません。
入力に応じてAIがその場で文章を作る・採点する。AIのAPIが必要で、1枚では不可。
みんなの記録を1か所にためる、ランキングを全員で共有する等。HTMLはファイルに書き込めません。
離れた相手と対戦、同じ画面をリアルタイム共有。サーバとの常時通信が要る。
ユーザー登録してログイン、個人ごとにデータ管理。認証のしくみが要る。
結果をメール送信、決済する等。外部サービスとのサーバ連携が必須。
音声合成・音声認識・カメラ・3D・地図・グラフ・タイマー・端末内の保存（localStorage）は1枚でOK。
迷ったらAIに「これはHTML1枚（サーバなし）でできますか？できないなら何が必要ですか？」と聞くのが確実です。できない場合は理由と必要なものを教えてくれます。
iPadのSafariでもカメラ（撮影・映像）とマイク（録音・音声認識）は使えます。ただし、動かすには次の条件があります。当日つまずきやすいので先に確認しておきましょう。
学習アプリの質は、中に入れる例文（データ）で決まります。AIは「テーマ・レベル・場面・数」を指定すると、練習に使える例文セットを作ってくれます。まずデータを作り、それをアプリに読み込ませる、という2段構えがコツです。
「何について」「どのレベルで」「どんな場面で」「いくつ」を伝えます。出力形式（JSON）も指定すると、そのままアプリに使えます。
①で作ったJSONを渡して、それを使うアプリを作らせます。「このデータを使って」と添えるのがポイントです。
最初から思いどおりに動くことは少ないです。できたものを見て、具体的に「どこを」「どう変えたいか」を伝えると、AIが直してくれます。これを何度かくり返して仕上げます。
AIが作る中国語の例文は便利ですが、たまに不自然だったり間違っていたりします。声調・漢字・言い回しは、辞書（cntango など）や先生に確認しましょう。「便利な道具に頼る」ことと「自分の力で確かめる」ことの両方が大事です。
教科書や本の例文・イラスト・キャラクターをそのままコピーして使わないでください。例文はAIに新しく作ってもらう、画像も生成したものや自分で描いたものを使う、が基本です。人の作品を勝手に使うとトラブルのもとになります。
自分のクラスのプロジェクトを選び、合言葉を入れて中に入ります。中で「コード貼り付け」か「ZIPアップロード」で作品を投稿でき、みんなの作品も見られます。