生成AIと合成音声でミニ教材を作る(2)

iPhone用の成语大词典というアプリには每日成语というコーナーがあり、ランダムに成語が表示されます。そこで出ていた成語をもとに生成AIに会話と聞きとり用の選択問題を作ってもらいました。更に職場で若い男女が話し合っているというテーマで絵を1枚出力してもらいました。その静止画と合成音声を使ってミニ動画教材を作ってみました。

使ったものは以下の通りです。生成AIがどれくらい会話や問題を作れるのかを見てもらうために、生成AIの出力は基本的にはそのままです。実際に教材として使用するには検証が必要です。

  • ChatGPT GPT4o(会話の作成、聞きとり問題の作成、会話に合わせた静止画の作成)
  • Clipchamp(静止画を読み込んで、合成音声で台詞と聞きとり問題を生成し、動画として出力)

生成AIが作ったスクリプト

会话

♂:小李,我听说你负责的那个项目做得非常好,客户很满意。
♀:谢谢你的夸奖!不过我觉得还有一些地方可以改进,所以我打算再花点时间优化一下。
♂:你真是精益求精啊!项目已经做得很好了,还想继续改进,真是让人佩服。
♀:其实,我总觉得工作不能只满足于及格,而是要做到最好。只有精益求精,才能不断提高自己的能力。
♂:你说得对!我们在工作中也应该追求更高的标准,不断进步。
♀: 是啊,一起努力吧! 

听力题

问题一: “精益求精”的意思是什么?
(1)满足于现在的成绩
(2)不断努力,使原本好的变得更好
(3)做事情不求完美
(4)只关注眼前的问题

问题二: 小李为什么想再花时间优化项目?
(1) 她觉得项目已经做得很好了
(2) 她觉得还有改进的地方
(3)她不满意客户的反馈
(4)她有更多的时间和精力

生成AIと合成音声でミニ教材を作る(1)

iPhone用の成语大词典というアプリには每日成语というコーナーがあり、ランダムに成語が表示されます。そこで出ていた成語をもとに生成AIに会話と聞きとり用の選択問題を作ってもらいました。更に職場で若い男女が話し合っているというテーマで絵を1枚出力してもらいました。その静止画と合成音声を使ってミニ動画教材を作ってみました。

使ったものは以下の通りです。生成AIがどれくらい会話や問題を作れるのかを見てもらうために、生成AIの出力は基本的にはそのままです。実際に教材として使用するには検証が必要です。

  • ChatGPT GPT4o(会話の作成、聞きとり問題の作成、会話に合わせた静止画の作成)
  • Claude 3.5 Sonnet(会話の修正)
  • Clipchamp(静止画を読み込んで、合成音声で台詞と聞きとり問題を生成し、動画として出力)

生成AIが作ったスクリプト

会话

♂:小王,你最近很忙吧,经常加班,真辛苦。 
♀:是啊,公司给了我个新项目,需要花很多时间。不过,我相信只要努力,就能做好。
♂:你这么努力,肯定能成功。不过,听说有些人喜欢坐享其成,根本不努力。
♀:确实有这种人。他们总是想不劳而获。但我觉得,自己努力得到的东西才最有意义。
♂:我完全同意。所以我们要继续努力,不要想着坐享其成。 
♀:没错!我们一起加油吧!

听力题

问题一: “坐享其成”的意思是什么?
(1) 自己努力工作并成功
(2)不做任何努力,只享受别人的成果
(3)一起合作完成任务
(4)努力追求自己的梦想

问题二: “不劳而获”的意思是什么?
(1)努力工作后获得成功
(2)不付出劳动却想获得收获
(3)与别人合作完成工作
(4)通过辛勤劳动获得成果

2音節の声調の練習

以前、以下のようなブログをnoteというブログサイトに書いたことがあります。以下のブログの中には合成音声を使って作った動画も入っています。そこから一部再録します。

声調の組み合わせ練習

中国語の声調の組みあわせを学ぶ時の表、わたしは数詞と量詞の組みあわせを使います。使う音の種類を減らして、声調に注意を集中するためです。使う音を減らすといってもmaだけで声調を練習するのはつまらないですから。
初級教科書によくある声調の組みあわせの表は、地名で作っていたり、重要単語で作っていたりするのですが、それだと発音がたいへんで声調に集中できないことがあります。ということで、数詞+量詞を使います。

第3声始まりの2音節の練習

私が授業でよく使う第3声始まりの2音節の発音練習です。
第3声の声調符号は下がって上がる形に書いてありますが、第3声の本質は低く押さえることです。教科書の付属音声でよくあるような、第3声だけを単独で非常にゆっくり発音すると、声調符号の通り下がって上がりますが、実際の会話ではあのような発音は聞かれません。第3声で文が終わる場合は、喉の緊張が緩んだ後、少しだけ上がる「尻尾」が付きますが、この「尻尾」は意識してやる必要はありません。第3声はとにかく低く!が基本です。

声調を聞きとるWebアプリ

生成AIのClaude 3.5 SonnetのArtifactsを使って、上記の2つの練習で使ったフレーズの声調を聞きとる練習を作ってみました。私はプログラミングができるわけではなく、Claudeに日本語で指示を出しながらWebアプリを作ってもらい、少しだけ自分で修正して作りました。不具合があったらご容赦ください。
また、読み上げる合成音声は使用している機器に依存していますので、うまく読み上げられなかったり、声の品質が良くなかったり、不正確だったりします。あくまでおまけとして考えてください。

声調を聞きとるWebアプリ

ClipchampとChatGPT(有料版)で音声付き教材を作る

Webベースで動画編集ができるClipchampと生成AIのChatGPT(有料版)を使って教材を1つ作ってみました。まずはできた短い動画を見て下さい。

手順(1)ChatGPTで中国語の対話を1つ作る

まず自分で中国語の対話の下書きをしました。それをChatGPTに自然な中国語になるように添削してもらいました。ChatGPTが添削した結果、できた対話は以下のようなものです。なお、以下の文章はChatGPTが添削したもので、添削後の文章に私は一切手を入れていません。

母亲:你的房间总是这么乱,你赶快打扫打扫。
儿子:好了好了,你说几遍了?别再说了。我马上就打扫,不就行了吗?

手順(2)ChatGPT(有料版)に対話に基づいた絵を描いてもらう

この対話をChatGPT(有料版)に与えて、この対話を元に1枚絵を描いてもらいました。漫画風の画風にするように指定しました。
ChatGPT(有料版)は指示に基づいて絵を描くのですが、絵の中に入った文字が苦手です。アルファベットはまだしも、漢字や平仮名はこの世に存在しない「嘘の字」を描いてしまいます。今回「嘘の字」が描かれたいた部分は、後で私が塗りつぶして消しました。

手順(3)上記の対話に基づいてChatGPTに問題を作ってもらう

ChatGPTに「HSK听力题のような選択問題を作ることができますか?問題文も選択肢も全て中国語で書いてください。選択肢は1問につき3つ作ってください。」と指示したところ、以下のような問題を作ってきました。なお、以下の問題はChatGPTが作ったままで、私は一切手を入れていません。実際に問題として使うには検証が必要です。

1.母亲为什么生气?
1.儿子不做作业。
2.儿子的房间很乱。
3.儿子不听话。

2.儿子对母亲的要求有什么反应?
1.马上开始打扫。
2.不理会母亲。
3.觉得母亲说得太多。

3.儿子最后决定做什么?
1.不打扫房间。
2.马上打扫房间。
3.请别人帮忙打扫。

答案:
2
3
2

手順(4)Clipchampで画像に合成音声の台詞をつける

ClipchampはWebブラウザで使える動画編集サービスです。元々ベンチャー企業のサービスでしたが、後にMicrosoftの傘下に入りました。
ClipchampはMicrosoftのアカウントで無料で使えますが、有料版もあります

Clipchampの無料版は有料版に比べるといくつか機能制限がかかっています。
Clipchampは今はMicrosoft365の中にも入っていますので、勤務先がMicrosoft365と契約しているのであれば、その中に入っているClipchampを使う方がよいかもしれません。

まず先ほどChatGPT(有料版)が作った絵を、Clipchampの「メディア」からアップロードしておきます。

次ぎに合成音声で台詞を読ませます。Clipchamp、Microsoftの傘下に入ったので、Microsoftの持っている多種多様な合成音声が使えるようになりました。
合成音声を作る場所が少しわかりづらくて、「録画と作成」というところにある「音声変換」を選び、文章を入力して音声を合成します。

合成音声の速度調整はもちろんできますし、声の種類によっては、フラットに読む以外に、怒り・不満・悲しみ・快活といったような感情を込めることもできます。上記の動画でも感情を込めるように設定してあります。感情を込めたい時は「詳細設定」を開けて設定します。

Clipchampはそもそもが動画編集サービスなので、タイムライン上で画像、動画、音声などのメディアを組み合わせて編集することができます。合成音声もそれぞれタイムラインを持っているので、セリフの「かぶり」(誰ががしゃべっているところに割り込んでかぶせてしゃべる)もできます。

Claudeを使って中国語の短い童話教材を作ってみる

生成AIのClaude 3.5 sonnetを使って、中国語で短い童話を作らせ、それを教材に加工できるか試してみました。

Claudeに中国語で短い童話を作らせる

Claudeに「中国語初級者向けに200字くらいの童話を書いてください。語彙はHSK4級以下でお願いします。主人公はパンダです。」と指示したところ、以下のような童話を書いてきました。
以下はClaudeがどれくらい作れるのかを見てもらうために、Claudeが出力したものをそのままペーストしていて、私は一切手を加えていません。実際に教材として使う場合は、検証が必要です。

  从前,有一只可爱的大熊猫叫小白。它住在一片美丽的竹林里。小白最喜欢吃新鲜的竹子。有一天,小白发现竹林里的竹子都不见了。它很伤心,不知道该怎么办。突然,小白看到一只小鸟。小鸟告诉小白,在山的另一边有很多竹子。小白谢谢小鸟,然后开始了长途旅行。经过两天两夜,小白终于找到了新的竹林。从此以后,小白在新家过着幸福的生活。它永远记得要帮助别人,就像小鸟帮助了它。

ClaudeにSSMLタグを作らせて、「音読さん」で音声を合成する。

教材には音声も必要ということで、「音読さん」という合成音声を作るサービスを使用して合成音声を作りました。
初級の学習者には聞きとりやすいように適宜ポーズを入れた音声が必要です。「音読さん」はSSMLという音声マークアップ言語を使ってをポーズを入れることができるのですが(「音読さんの読み上げで、間合い・空白時間を調整する方法【2種類】」)、自分でタグを打つのが面倒なので、ClaudeにSSMLを使って適宜ポーズを入れたSSMLを出力してもらい、それを使用しました。ポーズを入れる場所もポーズの秒数もClaudeが指定してものをそのまま使っています。

この音声は音読さんを使用しています。

Claudeに拼音と日本語訳を付けさせる

拼音と日本語訳をつけるように指示すると、以下のようなものを作ってきました。
以下はClaudeがどれくらい作れるのかを見てもらうために、Claudeが出力したものをそのままペーストしていて、私は一切手を加えていません。実際に教材として使う場合は、検証が必要です。

小白的故事 (Xiǎo Bái de gùshì) – 小白の物語

  1. 从前,有一只可爱的大熊猫叫小白。它住在一片美丽的竹林里。小白最喜欢吃新鲜的竹子。
    Cóngqián, yǒu yī zhī kě’ài de dà xióngmāo jiào Xiǎo Bái. Tā zhù zài yī piàn měilì de zhúlín lǐ. Xiǎo Bái zuì xǐhuan chī xīnxiān de zhúzi.
    昔々、小白という可愛いパンダがいました。彼は美しい竹林に住んでいました。小白は新鮮な竹を食べるのが大好きでした。
  2. 有一天,小白发现竹林里的竹子都不见了。它很伤心,不知道该怎么办。
    Yǒu yī tiān, Xiǎo Bái fāxiàn zhúlín lǐ de zhúzi dōu bú jiàn le. Tā hěn shāngxīn, bù zhīdào gāi zěnme bàn.
    ある日、小白は竹林の竹が全て消えてしまったことに気づきました。彼はとても悲しくなり、どうすればいいか分かりませんでした。
  3. 突然,小白看到一只小鸟。小鸟告诉小白,在山的另一边有很多竹子。
    Tūrán, Xiǎo Bái kàn dào yī zhī xiǎo niǎo. Xiǎo niǎo gàosu Xiǎo Bái, zài shān de lìng yī biān yǒu hěn duō zhúzi.
    突然、小白は小鳥を見つけました。小鳥は小白に、山の向こう側にたくさんの竹があると教えてくれました。
  4. 小白谢谢小鸟,然后开始了长途旅行。经过两天两夜,小白终于找到了新的竹林。
    Xiǎo Bái xièxie xiǎo niǎo, ránhòu kāishǐ le chángtú lǚxíng. Jīngguò liǎng tiān liǎng yè, Xiǎo Bái zhōngyú zhǎo dào le xīn de zhúlín.
    小白は小鳥に感謝し、長い旅を始めました。二日二晩かかって、小白はついに新しい竹林を見つけました。
  5. 从此以后,小白在新家过着幸福的生活。它永远记得要帮助别人,就像小鸟帮助了它。
    Cóngcǐ yǐhòu, Xiǎo Bái zài xīn jiā guòzhe xìngfú de shēnghuó. Tā yǒngyuǎn jìde yào bāngzhù biérén, jiù xiàng xiǎo niǎo bāngzhù le tā.
    それ以来、小白は新しい家で幸せに暮らしました。小白は小鳥が自分を助けてくれたように、他人を助けることを忘れませんでした。

Claudeに単語表を作らせる

更にClaudeに「では、HSK2級レベルの学生には理解できない単語を取りだして、単語表を作ってください。単語表は、簡体字、拼音、日本語訳の3列の表にしてください。」と指示をして単語表を作らせました。
以下はClaudeがどれくらい作れるのかを見てもらうために、Claudeが出力したものをそのままペーストしていて、私は一切手を加えていません。実際に教材として使う場合は、検証が必要です。

簡体字拼音日本語訳
竹林zhúlín竹林
发现fāxiàn発見する
伤心shāngxīn悲しむ
突然tūrán突然
告诉gàosu教える、伝える
另一边lìng yī biān向こう側
长途chángtú長距離の
旅行lǚxíng旅行
经过jīngguò経過する
终于zhōngyúついに、やっと
幸福xìngfú幸せ
永远yǒngyuǎn永遠に
记得jìde覚えている
帮助bāngzhù助ける
単語表

Claudeに内容理解を問う選択問題を作らせる

Claudeに「この文章の内容を理解しているかを問う選択問題を4問作ってください。選択肢は1問につき4つずつ作ってください。学生の中国語レベルを考えると、中国語の問題文や選択肢はまだ無理ですから、問題文も選択肢も日本語でお願いします。」と指示して、内容理解を問う選択問題も作ってもらいました。
以下はClaudeがどれくらい作れるのかを見てもらうために、Claudeが出力したものをそのままペーストしていて、私は一切手を加えていません。実際に教材として使う場合は、検証が必要です。

パンダの物語 理解度確認クイズ

  1. 小白はどんな動物ですか?
    a) ウサギ
    b) パンダ
    c) クマ
    d) 鳥
  2. 小白が悲しんだ理由は何ですか?
    a) 友達がいなくなったから
    b) 家を失ったから
    c) 竹林の竹が全て消えてしまったから
    d) 病気になったから
  3. 小白はどのようにして新しい竹林の場所を知りましたか?
    a) 地図を見て
    b) 他のパンダに聞いて
    c) 自分で探して
    d) 小鳥が教えてくれて
  4. 物語の最後で、小白は何を学びましたか?
    a) 竹を育てる方法
    b) 他の動物と仲良くする方法
    c) 他人を助けることの大切さ
    d) 長距離を旅する方法

Claudeにプロンプトをまとめさせる

上記の作業はその都度、Claudeとやりとりをしてます。1回でClaudeに指示を出せるように、Claude自身にプロンプトを書きなおさせてみました。
Claudeには「今回、何度もあなたとやりとりをしました。この一連の作業を実行するためのプロンプトをまとめて書いてください。あなたが一番理解しやすく、正確に全ての作業を実行できるように書いてくれますか?」と指示したところ、以下のようなプロンプトを出力してきました。

中国語初級者向け童話作成と関連教材開発のプロンプト

以下の手順に従って、中国語初級者向けの童話と関連教材を作成してください:

  1. 中国語童話の作成:
  • 約200字の中国語童話を書いてください。
  • 語彙レベルはHSK4級以下に抑えてください。
  • 主人公はパンダにしてください。
  1. SSML タグの追加:
  • 作成した童話にSSMLタグを追加してください。
  • 適切な箇所にポーズを入れ、初級者の理解を助けてください。
  1. 中国語原文の抽出:
  • SSMLタグを除去し、中国語の原文のみを抽出してください。
  1. 拼音と日本語訳の追加:
  • 中国語原文に拼音(ピンイン)を追加してください。
  • 各段落ごとに日本語訳を追加してください。
  1. HSK2級以上の単語リスト作成:
  • HSK2級レベルの学生が理解できない単語を抽出してください。
  • 抽出した単語を、簡体字、拼音、日本語訳の3列からなる表にまとめてください。
  1. 内容理解確認のための選択問題作成:
  • 童話の内容理解を確認するための選択問題を4問作成してください。
  • 各問題に4つの選択肢を用意してください。
  • 問題文と選択肢は日本語で作成してください。

各ステップにおいて、以下の点に注意してください:

  • 初級学習者向けの教材であることを常に意識し、適切な難易度を維持してください。
  • 各成果物(童話、単語リスト、選択問題など)は独立したアーティファクトとして作成し、再利用可能な形式で提供してください。
  • 必要に応じて、教師向けのアドバイスや学習者向けのヒントを追加してください。

このプロンプトの最後にClaudeはこう付け加えています。「このプロンプトに従うことで、中国語初級者向けの総合的な学習教材セットを作成することができます。」私はChatGPTも使っていますが、ClaudeはChatGPTと比べて一言多い印象がありますね(苦笑)。

ポイントはClaudeと対話を繰り返しながら、望むものを作っていくことです。そして最後に一連の作業を、Claude自身に1つのプロンプトにまとめさせておくと、次回はこのClaude自身がまとめたプロンプトを使って作業をすることができます。今度の童話の主人公はパンダではなく、子猫にしたいのなら、その部分を書き換えて使います。字数を増やしたい、語彙のレベルを変更したいという時は、その部分を適宜変更してみてください。

中国語の数字の聞きとり

中国語の数字の聞きとりは案外難しいです。99までは漢字で書けば日本語と同じ漢字になるのですが、発音を憶え、聞きとるのはたいへんです。

Quizlet「中国語の数字0〜10」(簡体字-pinyin)

0〜9の聞きとりの練習をするためのゲーム「中国語数字リスニングゲーム」を作りました。4桁の数字を粒読み(位の数字無し)で読んだものを当てる聞きとりゲームです。1000なら一千 yì qiānではなく、一零零零 yī líng líng língと読みます。

次ぎは2桁の数字です。間に挟まったは軽声になります。十五はshíwǔですが、二十五はèrshiwǔです。

Quizlet「中国語の数字11〜30」(簡体字-pinyin)

鬼門は3桁以上の数字の言い方です。日本語と同じ漢字にはならない数字があります。『東京外大言語モジュール中国語』を見て、言い方の概略を把握しましょう。

東京外大言語モジュール中国語「数の言い方」解説

以下のことに注意しましょう。

  • 100は“一百”、1,000は“一千”。
  • 間に挟まった0は読む。
    (例1)108 一百零八
    (例2)1,008 一千零八
  • 3桁以上に入った10は“”をつける。
    (例)1,111 一千一百一十
  • ”の声調については、一番大きな桁にある“一”は声調変化させる。
    (例1)1,000 一千 yì qiān
    (例2)1,0000 一万 yí wàn

Quizlet「中国語の数字100以上」(簡体字-pinyin)

氷野善寛先生(目白大学)が作った「ATM残高当てゲーム」は、最初に中国語で「あなたの口座の残高は…」という言葉があり、その後に中国語で数字を言います。数字には位の数がついています。1,000であれば一千 yì qiānと読みます。

氷野先生が作った「ATM残高当てゲーム」も私(清原文代)が作った「中国語数字リスニングゲーム」も、発想の元になるゲームがあります。北海道大学の田邉鉄先生が作った「パンダ銀行」というゲームです。今は亡きFlashで作られたゲームでした。授業で随分使わせてもらいました。
私はプログラミングはできないのですが、今回生成AIのClaude 3.5 sonnetと対話しながら、「中国語数字リスニングゲーム」を作ってみました。私は一行もコードを書いていません。

3×3の中国語の例文表(性格を描写する文)

生成AIのClaude 3.5 sonnetが作った中国語の例文表です。与えたキーワードは自己紹介での性格描写です。

使用したプロンプトなどについては、以下の記事をご覧ください。

初級レベル向け

CEFR A2以下のレベルの単語で、1文あたり20文字以下でと指示した場合

https://qingyuan.sakura.ne.jp/wp/wp-content/uploads/2024/07/chinese-vocabulary-table-v3.html

https://qingyuan.sakura.ne.jp/wp/wp-content/uploads/2024/07/chinese-vocabulary-table-v4.html

中級レベル向け

CEFR B1以下のレベルの単語で、1文あたり30文字以下でと指示した場合

https://qingyuan.sakura.ne.jp/wp/wp-content/uploads/2024/07/chinese-vocabulary-table.html

https://qingyuan.sakura.ne.jp/wp/wp-content/uploads/2024/07/chinese-vocabulary-table-v2.html

3×3の中国語の例文表

清原文代(大阪公立大学)

生成AIのClaude 3.5 sonnetの新機能であるArtifactsを利用して、自然言語でやりとりしながら、HTML、CSS、JavaScriptを使って音の出る中国語の例文表を作ってみました。

Claude 3.5 sonnetの新機能については、開発元Anthropicによる以下のページをご覧ください。
https://www.anthropic.com/news/claude-3-5-sonnet

実例

Claudeに“就业”というキーワードを与えました。
CEFR B1レベル以下の語彙で、1文あたり30文字以下を標準として欲しいという指示をClaudeに与えて、8つの例文を作ってもらいました。
例文には拼音と日本語訳を添えてありますが、これもClaudeが作成しました。
セルをクリックすると、中国語の合成音声で読み上げるはずです。

https://qingyuan.sakura.ne.jp/wp/wp-content/uploads/2024/07/employment-vocabulary-table.html

制作方法

Claude 3.5 sonnetに対して、新機能のArtifactsをONにした上で以下のプロンプトを与えました(Artifactsは最初はOFFになっています)。
なお、私はClaudeの有料契約ユーザーです。無料ユーザーの場合、同じことができるかどうかは未検証です。

以下のプロンプトを与えると、Claudeが質問をしてきますので、それに答えてください。
質問に答え終わると、HTML書類の生成が始まります。
新機能のArtifactsをONにしていると、2画面になります。
左側はプロンプト画面、右側が実行画面になります。
実行画面はコード画面とプレビュー画面がトグルになっています。
右側のプレビュー画面で見て修正したい所があれば、左側のプロンプト画面で更に修正指示を出します。

プロンプト

中国語学習用の3×3単語表をHTML形式で作成します。以下の手順に従って進めてください:
1. ユーザー入力の取得: a. ユーザーにキーワード(テーマ)を尋ねてください。 b. キーワードが中国語でない場合、中国語に翻訳し、ユーザーに確認してください。 c. 8つの例文に使う単語のレベルをユーザーに尋ねてください。(例:CEFR A2以下、HSK4級以下) d. 8つの例文の最大字数をユーザーに尋ねてください。(例:20字以下)
2. 単語表の構成:
   * 中央のセルに主要テーマ(ユーザーが確認したキーワード)を配置
   * 周囲の8つのセルに、指定されたレベルと字数制限に従った関連例文を配置
3. 各セルの内容:
   * 中国語: <span>タグで囲み、lang="zh"属性とclass="chinese-text"を設定
   * ピンイン: <div>タグでclass="pinyin"を設定
   * 日本語訳: <div>タグでclass="japanese"を設定
   * 例: <span lang="zh" class="chinese-text" aria-label="zǎo cān">早餐</span> <div class="pinyin">zǎo cān</div> <div class="japanese">(朝食)</div>
4. スタイリング:
   * body: フォントを明朝体系に設定、中央揃え
   * table: 白背景、影付き
   * td: 幅と高さ200px、中央揃え、境界線
   * .center: 中央セルの背景色を薄い青に
   * .chinese-text: 中国語フォント("SimSun", "Microsoft YaHei", "STXihei", sans-serif)、24pxサイズ
   * .pinyin, .japanese: 14pxサイズ、適切な色
5. 音声機能:
   * 中国語テキストをクリック可能に
   * クリックで中国語音声を再生するJavaScriptを追加
6. 使用説明:
   * テーブル下に「中国語のテキストをクリックすると、その部分が中国語で読み上げられます。」と表示
7. HTML構造:
   * 適切なDOCTYPE、meta tags、title、外部リソースなしの完全なHTML文書として作成
以上の要件に基づいて、3×3の中国語単語表をHTML形式で生成してください。生成後、ユーザーに表示し、必要に応じて修正や調整を行ってください。