【アーティファクト編⑩】三・千・世・界！奥義炸裂！アナログ時計ジェネレータ生成！ーGoogleサイトで作るグループウェア(161)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
企業DXや校務DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
①Claude3.5ソネットにアナログ時計ジェネレータを作らせた
みなさんこんにちは。
アーティファクト使ってますか？
引き続き、いろいろなユースケースを探っていますが、今回は、「アナログ時計を作らせるアプリ」の作成です。
ん？意味が分からない？以前作ったのと同じやん！と思った方、ちょっと待った！
もう一度言いますね。このアプリは「アナログ時計をつくるコードを吐き出すアプリ」なのです。
②アナログ時計ジェネレータ
つくったHTMLアプリは、いつものCloudTopのサイトに置いておきます。
まず、サイトを開いてください。
設定、プレビュー、出力コードの３つのタブが出てきます。
設定は、アナログ時計を作る時の設定です。ここを調整することで、アナログ時計のデザインを変更できます。設定後にコード生成を押してください。
プレビューでは、生成されたアナログ時計のプレビューが見れます。
出力コードは、今回のアプリのキモですが、必要なSVGとJavascriptだけを抽出して「埋め込み用アナログ時計に必要なコードだけ」を生成します。
この出力コードを、Googleサイトにコピペで埋め込むだけで、時計が表示され、動きます。
③実際に作ってみる
以前作ったアナログ時計と同じものをジェネレータで作ってみましょう。
設定は以下のとおりです。設定後にコード生成ボタンを押して、プレビューで確認しましょう。
出力コードの中をコピーして、Googleサイトに埋め込みHTMLで貼り付けてください。
実際にGoogleサイトに埋め込むと以下のように同じ時計（右側）ができました。
さらに、コードの量も4060文字から2945文字に約30%減少しています。
④プロンプト奥義炸裂！
じつは、このアナログ時計ジェネレータを作るときに、奥義を使いました。
それは、「コードを圧縮して短くしてください」というプロンプトです。
Claude Artifactsの場合、コードが長くなってくると、途中で途切れて、動かなくなることがたびたび発生しますが、この呪文で、「可読性を犠牲」にして、かなり圧縮することができます。
変数名やファンクション名を短くしたり、改行コードや空白などを削除してコードを圧縮してくれます。
今回のアナログ時計ジェネレータは、この奥義を使うことで、１回のコード生成内（だいたい10000文字程度）でアプリを作りました。
そのため、画面の装飾を極力省いています。
UI画面をデコレートすることが、かなりの負担になっていることが分かりますね。
また、コードが短くなることで、それだけ、Claudeの制限ストップまでの回数を稼ぐことができます。
⑤おわりに
いかがでしたでしょうか？
まだまだ、可能性を大いに秘めているClaude Artifactsですが、多数のプロンプト奥義が開発されつつあります。
こんかいの奥義は、ちょっと聞いてみたら出来ちゃったレベルです。
何でも聞いてみることが大事ですね。
AIは質問能力が試されるツールです。