清原文代（大阪公立大学）
生成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形式で生成してください。生成後、ユーザーに表示し、必要に応じて修正や調整を行ってください。