知識ゼロでも動くプログラ厶が作りたいなら、AI「Claude」とJavaScriptライブラリーを使うのがオススメ
2024年08月23日 13時00分更新
Chart.jsで描けるチャートを調べる
試しに、JavaScriptライブラリーのひとつ「Chart.js」で何かを作ってみよう。チャートとは「データや情報を視覚的に表現する図表の総称」だ。円グラフや棒グラフなどの一般的なものだけではなく、フローチャート、マインドマップ、ガントチャートなど様々な形式が含まれる。
と言われても「何を描いてもらえばいいのかわからない」と思うかもしれないが、そんなときはまずプロンプトで「できることを」聞いてしまおう。
なお、今回使用しているAIモデルはすべて「Claude 3.5 Sonnet」だが、「Claude 3 Opus」や「Claude 3 Haiku」でもArtifactsの利用は可能だ。
プロンプト:Chart.jsを使っていろいろなチャートを描画してみてください
このプロンプトを送信すると、Claudeは回答とともに、画面右側にArtifactを作成。3つのグラフを描画したHTMLファイルを作成してくれた。
ソースを見ると、Chart.jsライブラリをCDNから読み込んでいることがわかる。
チャートはブラウザーのサイズに応じて自動的にリサイズされる、レスポンシブデザイン仕様になっている。
実際にCSV形式などでデータを与えれば、そのデータを元にチャートを描画してくれるだろう。
こうして作成したArtifactを自分以外の人にも見せたいときは、右下にある「Publish」をクリックする。
確認ウィンドウの「Publish & Copy Link」をクリックすることで、Artifactがサーバーにアップロードされる。コピーしたリンクにアクセスすると、他人にClaudeで作成したArtifactを見てもらうことができるのだ。これはChatGPTやGeminiにはできないClaudeの大きな利点だ。
発行されたArtifact(HTMLファイル)はこのように公開することができる。ウィンドウの大きさを変更してレスポンシブデザインを確認してみよう。
![](/img/blank.gif)
この連載の記事
-
第25回
AI
チャットAI「Claude」すごい新機能「Artifacts」の使い方、全部教えます -
第24回
AI
めちゃ便利になった 無料版「ChatGPT」新機能の使い方まとめ【最新版】 -
第23回
AI
最新の生成AI使うなら「Perplexity Pro」がお得です -
第22回
AI
AI検索「Perplexity」がかなり便利だったので紹介します -
第21回
AI
ChatGPTのライバル「Claude 3」の使い方 良い点、悪い点まとめ -
第20回
AI
「ExcelでChatGPTを再現するシート」が想像以上に素晴らしかった -
第19回
AI
ChatGPTで画像生成するならコレ! おすすめGPTs紹介 -
第18回
AI
ChatGPTおすすめGPT 科学的根拠に基づき質問に答える「Consensus」 -
第17回
AI
ChatGPT「GPT Store」公式おすすめGPTラインアップ -
第16回
AI
ChatGPT「GPT Store」ついに開店 自作GPTs公開方法まとめ -
第15回
AI
自分専用のAI英語教師が、レッスンした英単語で歌詞を作って歌にしてくれるという夢のような環境ができました - この連載の一覧へ