Claude3.5・Artifactsで生成したコードをコピペで簡単アップロード！

✅create（今回アップロードに用いたサービス）
www.create.xyz
※本来のcreateの使い方はClaude3.5のアーティファクトと同じで、AIがコード生成し、直ぐにコードをその場で実行できる、というものです。現状、Claudeに生成したアプリを公開する機能がないため、createを使う、という趣旨です。
📣今回作成したオリジナル読み上げアプリ
mbbs-ai.jimdof...
📓Note記事
note.com/mbbs/...
👉クロードで生成したコードを公開する手順
1. クリエイトを使用する
クロードで生成したコードをコピーし、クリエイトに貼り付けます。
AIがコードに基づいてアプリケーションを自動生成します。
アプリケーションがうまく動作しない場合は、プロンプトを調整して修正します。
2. 生成されたアプリケーションをテストする
アプリケーションが正常に機能することを確認します。
必要に応じて、プロンプトをさらに調整します。
3. アプリケーションを共有する
アプリケーションの共有ページにアクセスし、URLをコピーします。
コピーしたURLを共有することで、誰でもアプリケーションにアクセスできます。
4. （オプション）ホームページに埋め込む
アプリケーションの表示をカスタマイズしたい場合、自分のホームページに埋め込むことができます。
ChatGPTなどを使用して、埋め込み用のHTMLコードを生成できます。
生成されたHTMLコードをホームページに貼り付けます。
このプロセスにより、クロードで生成したコードを簡単に公開し、他の人と共有できます。
📗Claude3.5生成コード公開手順解説動画 - 詳細目次📗
動画URL: • Claude3.5・Artifactsで生成...
00:05 はじめに
Claude3.5で作成したアプリケーションを外部公開する方法の解説
簡単な公開方法として、"Creat"というサービスを紹介
手順に加え、ホームページへの公開方法まで解説
00:40 音声読み上げアプリの紹介
既に作成済みの音声読み上げアプリを例に解説
今回の例では「こんにちは」と入力すると音声で読み上げるアプリを紹介
多様な音声カスタマイズ機能を紹介（速度変更、性別変更など）
01:12 Creatを使用した公開手順
1. Claude3.5で作成したコードをコピー
2. Creatの画面にコードを貼り付け
3. AIがコードを解釈し、Creat上で動作するアプリケーションを生成
02:15 生成時のトラブルシューティング
アプリが正常に動作しない場合、プロンプトで調整が可能
具体例として、生成されたアプリが2つ表示される問題を紹介
自然言語で「2つあるから1つにして」と指示することで問題解決
03:24 アプリの動作確認と公開URL取得
"デモ"ボタンでアプリの動作確認が可能
"共有"ボタンを押すと公開URLが表示
取得したURLを共有するだけでアプリを公開
04:28 ホームページへの埋め込み方法
公開ページにはプロンプトが表示されるため、非表示にしたい場合はHTML埋め込みを推奨
ChatGPTを使用して埋め込み用HTMLコードを取得する方法を紹介
取得したコードを自身のホームページに貼り付けることで、プロンプトを非表示にできる
05:36 埋め込み後の動作確認
作成者のホームページに埋め込まれた音声読み上げアプリを紹介
埋め込み後も問題なく動作することを確認
入力欄に自由に文章を入力し、音声で読み上げが可能
06:41 まとめ
Claude3.5でアプリを作成し、Web上に公開する方法を紹介
Creatを使用することで、コードのコピペだけで簡単に公開可能
ホームページへの埋め込みも、ChatGPTを活用することで容易に実現