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