ClaudeでシュタインズゲートのツンデレAIチャットアプリ”アマデウス”開発記

<input type=”file”> → Artifact 環境で無効

Claude の Artifact（プレビュー環境）ではファイル選択ダイアログが動作しない。

URL 入力方式 → CORS エラー

画像 URL を入力して読み込む方式に切り替えたが、外部ドメインの画像は CORS 制限で表示できないケースが多発。

ドラッグ&ドロップ → Android 非対応

PC では動くが、メインの使用環境である Android ブラウザではドラッグ操作自体がほぼ使えない。

画像を base64 で直接埋め込む

最終的な解決策は「画像をコードに直接埋め込む」こと。Python で画像をリサイズ・圧縮して base64 文字列に変換し、JSX の定数として埋め込んだ。

Step 4 ── React に移行

HTML 版を動かしていたのはダウンロードしたファイルをブラウザで開く形だったが、その場合 Claude API のキーが存在しないため「通信エラー」になることが判明。

Claude の Artifact 環境（claude.ai）上で動かすと API キーが自動で注入されるため、React JSX コンポーネントとして作り直した。

Step 5 ── 感情連動の画像切り替え

返答テキストを解析してキャラクターの「感情」を推定し、対応する画像を表示する仕組みを実装した。

JSfunction detectEmotion(text) {
  const tsunKeywords = ['っ///', 'べ、別に', 'ないわよ', 'バカ', 'うるさい'];
  const dereKeywords = ['うれしい', 'ありがとう', '落ち着く', 'かも', 'えっと'];
  const tScore = tsunKeywords.filter(k => text.includes(k)).length;
  const dScore = dereKeywords.filter(k => text.includes(k)).length;
  if (tScore > dScore) return 'tsun';
  if (dScore > tScore) return 'dere';
  return 'normal';
}

Step 6 ── 著作権を考慮してオリキャラへ

当初は既存の版権キャラ画像を使っていたが、著作権リスクを考慮してオリジナルキャラクター「アカネ・リンドウ」の AI 生成イラストに差し替えた。ChatGPTに作っもらったが、思いのほか良いキャラクターができたと思う。

通常・ツン・デレの3パターンを用意し、それぞれ埋め込んだ。

詰まったポイントまとめ（前半）

配布を考えて気づいたこと

アプリが完成した後、「これを人に配りたい」と考えたところから新たな問題が始まった。

自分の API キーを入力する形式のスタンドアロン HTML 版を作り、ダウンロードしてブラウザで開いて画像アップロードを試したところ、ボタンを押しても反応しない不具合に遭遇した。原因は Claude のプレビュー（Artifact パネル）内ではファイル選択ダイアログがサンドボックスでブロックされているためで、ダウンロードして直接ブラウザで開けば正常に動作することが分かった。

クレジット不足という壁

ダウンロード版で API キーを設定して話しかけてみると、次のようなエラーが返ってきた。

Your credit balance is too low to access the Anthropic API.
Please go to Plans & Billing to upgrade or purchase credits.

これは API キー自体は正しく認識されているものの、Anthropic API の利用に必要なクレジットが入っていないために起きるエラーだった。

ここで重要な事実に気づいた。claude.ai の契約（無料・Pro・Max プラン）と API の利用料金は完全に別の課金システムだということだ。claude.ai 上で普通に Claude と話せていても、それとは別に API 用のクレジットを購入しないと、自作アプリから API を呼び出すことはできない。

「無課金で配布」の答え

ここで方針を再考した。スタンドアロン HTML 版は自由度が高い代わりに課金が必須になる。一方、最初に作っていた React Artifact 版（claude.ai 上でそのまま動くコード）は、開いた人自身の Claude ログイン状態を使って API にアクセスする仕組みのため、配布された側が無料アカウントを持っているだけで動かせることが分かった。

つまり「ファイルとして単独配布できるか」と「無料で使えるか」はトレードオフの関係にあり、両方を同時に満たす方法は今のところ存在しない。配布のハードルを下げたいなら、Artifact 版を「コードとして共有し、相手の Claude 上で実行してもらう」のが最も現実的な選択肢だった。

詰まったポイントまとめ（配布編）

システムプロンプトのポイント

キャラクターの再現度はシステムプロンプトの質に大きく左右される。効果的だったのは以下の構成。

【基本設定】具体的なプロフィール（年齢・職業・IQなど）
【口調・性格】口癖や感情表現のパターンを具体例で列挙
【返答ルール】文字数・言語・文脈の扱い方を明示

特に「会話の文脈を必ず踏まえて答える」と明示したことで、前の発言を自然に拾う返答が増えた。