Claude 3.5 Sonnetの進化を体感してみた
2024年6月21日、AnthropicがClaude 3 Sonnetの進化版であるLLM「Claude 3.5 Sonnet」を公開しました。
ちょうど、Claudeは課金していたサービスだったということもあり早速触ってどんなことができるか体験してみました。
進化のスピードがすごいです。
1.Claude 3.5 Sonnetについて
詳細は、公式ページClaude 3.5 Sonnetに記載されていますので割愛します。
ユーザーがリアルタイムでAI生成コンテンツ（コードスニペット、テキストドキュメント、ウェブサイトデザインなど）と対話できる新機能「Artifacts」がClaude 3.5 Sonnetに実装されました。
今回のアップデートにより何が変わったのか？
ざっと触ってみたかんじ以下のようなことが点が改良されていました。
✅回答速度の向上（出力速度が速くて目では追いきれない…）
✅コードスニペット、テキストドキュメント、ウェブサイトデザインなどの生成と表示。
→生成されたコードをプレビュー表示させることができる
✅図の表示（Mermaid、SVG画像などの生成と表示）
✅プレゼン資料の作成
✅ダッシュボード作成
2 実際にいろいろ試してみた
2.1 Mermaid図を生成させる
シンプルに「Djangoを使ったCRUDアプリの全体フローをMermaidで可視化して」となげてみると、以下のようなMermaid図が自動生成されます。
デザインが微妙なので、以下の指示出しを追加で行うといい感じのデザインに修正してくれます。
Mermaid図の配色が見づらいのでもう少し見やすい配色にして
2.2 SVG画像を生成させる
ここでは、以下のようなシステム障害対応に関するナレッジ情報（テキスト）を用意しておいて、この情報を参照して、「システム障害発生時の初動で実施すべきこと」を初学者向けにわかりやすく可視化したSVGを作成してもらいました。
投げたプロンプト
「システム障害対応に関するナレッジ情報」のテキストをClaudeに添付したうえで以下のプロンプトを投げると、システム障害初動対応プロセス図が自動生成されます。
添付の情報を参照して、システム障害初動対応プロセスを表すSVG図を作成してください
・5つのステップからなるプロセス図をSVGで作成してください。
・各ステップを異なる色の丸角四角形で表現し、ステップ番号と簡単な説明を中に入れてください。
・ステップ間の関係を矢印で示し、各矢印に簡単な説明を付けてください。
・プロセスの循環的な性質を表現するため、最後のステップから最初のステップへ戻る矢印を含めてください。
・図の上部に全体のタイトルを入れてください。
・色は鮮やかで濃いめの配色を使用し、背景とのコントラストを考慮してください。
・フォントは読みやすいサイズと色を使用してください。ステップ番号は太字で、説明は細字にしてください。
・矢印はオブジェクトの外側で終わるようにし、直角に曲がる直線を使用してください。
・矢印の説明文字は矢印と重ならないように配置し、フォントサイズは14pxにしてください。
・全体のレイアウトは、中央にステップ2を配置し、他のステップをその周りに配置してください。
・SVGのビューポートサイズは800x600にしてください。
・背景色は薄いグレー（#f0f0f0）を使用してください。
・各ステップの説明と矢印の説明は、プロセスの一般的な流れを示す短い文章にしてください。
生成されたSVG画像
もっとシンプルな指示出し「添付の情報を参照して、システム障害初動対応プロセスを表すSVG図を作成してください」でも普通にSVG画像を生成してくれますが、ある程度細かく指示出ししておくと最初から狙ったデザインの図が生成されます。
2.3 データ分析ダッシュボードを作らせてみる
以下のような架空の商品販売データ（CSV）を用意します。
まず最初に分析の切り口を質問してみます。
以下のような売上データがあります。 売り上げを最大化するためにこのデータを分析したいのですが、どのような観点で分析すべきか教えてください。
商品ID 商品名 カテゴリ 価格 販売数量 販売日 販売チャネル 顧客ID 年齢 性別 販売促進活動 季節/イベント 在庫状況 競合他社の活動 1 商品A 食品 500 10 2023/1/1 オンライン C001 28 女性 セール中 なし 十分 なし 2 商品B 家電 3000 5 2023/1/2 店舗 C002 42 男性 なし 冬 不足 競合セール中 3 商品C 衣料品 1500 20 2023/1/3 オンライン C003 37 女性 クーポン利用 なし 十分 なし 4 商品D 食品 800 15 2023/1/4 店舗 C004 30 男性 なし なし 十分 なし
Claude3.5 Sonnetの回答内容
このデータを分析して売上を最大化するためには、以下の観点から分析を行うことをお勧めします：
1. 商品分析:
- 各商品の売上高と利益率
- カテゴリー別の売上傾向
- 価格帯別の売れ行き
2. 顧客セグメンテーション:
- 年齢層別の購買傾向
- 性別による商品選好
- 顧客ごとの購買頻度や金額
3. 販売チャネル効果:
- オンラインvs店舗の売上比較
- チャネル別の商品カテゴリーの人気
4. 販売促進活動の効果:
- セールやクーポン利用時の売上増加率
- 販促活動別のROI（投資対効果）
5. 季節性とイベントの影響:
- 季節やイベントによる売上の変動
- 季節に応じた商品展開の効果
6. 在庫管理:
- 在庫状況と売上の関係
- 品切れによる機会損失の推定
7. 競合分析:
- 競合他社の活動と自社の売上への影響
- 競合セール時の対策効果
8. 時系列分析:
- 日々の売上トレンド
- 曜日や時間帯による売上の変動
これらの観点から分析を行うことで、売上を最大化するための具体的な戦略を立てることができます。詳細な分析結果に基づいて、商品ラインナップの最適化、ターゲット顧客への効果的なマーケティング、販売促進活動の改善、在庫管理の効率化などの施策を検討できます。
さらに詳しい分析や可視化が必要な場合は、お知らせください。特定の観点についてより深く掘り下げることも可能です。
次に、用意しておいたCSVファイルを添付したうえで以下のプロンプトを投げます。
添付の売上データを元に上記の観点で分析できるダッシュボードを作成してください。
#ダッシュボードの条件
・html、Javascript(CDN利用可能なライブらる含む）,CSSだけで動作できること。
・ダッシュボードのデザインはモダンで洗練された見やすいカラフルな配色にすること。
出力結果画面
画面右側に分析ダッシュボードが自動生成されました。
追加で「総売り上げ、性別別の平均年齢や売り上げのデータ」を追加してもらった後にダウンロードボタンを押して生成されたsales-dashboard.htmlをブラウザで開くと以下のようなダッシュボードが表示されました。
ちなみに、表示されているデータの数値を実際のCSVと比較して全部チェックしましたが全部計算あってました。
予め「こういうグラフが作りたい！」みたいな要件が決まっていれば、以下のように具体的に指示出しをするとより目的に沿ったダッシュボードを作成することができます。
添付した売り上げデータ（CSV）を元に、#分析画面の内容を満たすHTMLベースで動かせるモダンでインタラクティブなダッシュボード画面を作成してください。
#分析画面の内容
・画面上部に「総売り上げ金額、性別別年齢の平均、性別別売上金額」のラベル値をそれぞれ枠線を付けて表示
・日別売上遷移（日ごとの売上金額がわかる折れ線グラフ）
・カテゴリー別売上（カテゴリー別の売上金額がわかる円グラフ）
・顧客年齢分布（年齢別の顧客数がわかる某グラフ）
・販売チャネル比較（日ごとに販売チャネルごとの売り上げ金額がわかる某グラフ）
#注意点
・データは３０件あるので全データを分析対象とすること。
・すべてのグラフのデータが正しく描画されるように注意すること。
上記プロンプトをベースに生成したHTML画面（ダッシュボード）の例
もう自然言語でレポート作ってもらえばいいじゃんレベルですね。
2.4 プレゼンするアプリを作らせてみる
生成AIのプロンプトエンジニアリングについてのプレゼン資料を動画風に表示するHTMLベースのアプリを作らせてみました。
初期プロンプトは以下です。
生成AIのプロンプトエンジニアリングについてのプレゼン資料を動画風に表示するプログラムを作って、プレビュー表示したいです。
以下のステップで実施してください。
①プレゼン資料を考える（５ページ、１ページ３００字くらい）
②プレゼン内容を表示するプログラムを作る（スライド形式でページを自動でめくってプレゼン内容を表示する
いきなり、Reactを使った自動プレゼンアプリが自動生成されました・・・。
ここで思い付きで、「音声もつけたい！」ということで追加の指示出しです。
これ、音声再生付き機能にできますか？
で、以下の通り音声機能が付与されました。
最後に、HTMLベースだけで動かせるアプリにしたかったので追加で以下の指示出しをしました。
タイプスクリプトでコード作ってもらいましたが、純粋にブラウザ上で実行できるようにHTMLとJavascript、CSSなどで構成してほしいですが可能ですか？
また、欲張って図も入れたかったので以下も追加で指示出ししました。
既存の機能がデグレしないように注意しながら、各ページの内容に合った図を挿入してもらえますか？
最終的にはたったの２４３行のHTMLコードで、自動プレゼンするHTMLファイルベースアプリが１０分程度で完成しました。
実際のプレゼン風景
自動でプレゼン内容を読み上げてスライド切り替えしてくれます。
※録音した音源がおかしく、音割れとハウっていて聞きづらいのはご了承ください。
以下のコードをコピペして「.html」ファイルとして保存してPCで開いて「音声オン」→「再生」ボンタンを押すと上の動画と同じプレゼンを確認できます。
実態は、たったの１７２行のHTMLコードです。
これも、以下のコードをコピペしてHTML形式で保存して開けばプレゼン資料になってしまいます。
最終的に出来上がったアプリのHTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成AIのプロンプトエンジニアリング プレゼンテーション</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.presentation-container {
width: 90%;
max-width: 1000px;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
.content-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.content {
width: 60%;
height: 200px;
overflow-y: auto;
white-space: pre-line;
}
.image-container {
width: 35%;
text-align: center;
}
.image-container svg {
max-width: 100%;
height: auto;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
.slide-info {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="presentation-container">
<h1 id="slide-title"></h1>
<div class="content-wrapper">
<div id="slide-content" class="content"></div>
<div id="slide-image" class="image-container"></div>
</div>
<div class="controls">
<button id="prev-btn">前へ</button>
<button id="play-pause-btn">再生</button>
<button id="toggle-speech-btn">音声 オン</button>
<button id="next-btn">次へ</button>
</div>
<div id="slide-info" class="slide-info"></div>
</div>
<script>
const slides = [
{
title: "生成AIのプロンプトエンジニアリング",
content: "プロンプトエンジニアリングは、生成AIシステムに対して効果的な指示を作成し最適化する技術です。適切なプロンプトを設計することで、AIからより正確で有用な出力を得ることができます。これは、AIとのコミュニケーションを改善し、望ましい結果を得るための重要なスキルとなっています。",
image: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="60" width="160" height="80" fill="#e0e0e0" stroke="#000" stroke-width="2"/>
<text x="100" y="110" text-anchor="middle" font-size="16">プロンプト</text>
<path d="M100 140 L100 180 L140 160 Z" fill="#4CAF50"/>
<text x="100" y="195" text-anchor="middle" font-size="14">AI出力</text>
</svg>`
},
{
title: "プロンプトエンジニアリングの重要性",
content: "• AIの能力を最大限に引き出す\n• タスクに応じた適切な出力を得る\n• 誤解や不適切な回答を減らす\n• 効率的なAI活用を実現\n• 創造的で革新的なソリューションを生み出す",
image: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
<path d="M100 20 L100 180 M20 100 L180 100" stroke="#000" stroke-width="2"/>
<circle cx="100" cy="100" r="30" fill="#4CAF50"/>
<text x="100" y="105" text-anchor="middle" font-size="12" fill="white">最適化</text>
</svg>`
},
{
title: "効果的なプロンプトの特徴",
content: "1. 明確さ：曖昧さを排除し、具体的な指示を与える\n2. 構造化：複雑なタスクを段階的に分解する\n3. コンテキストの提供：背景情報や制約条件を明確に示す\n4. 例示：期待する出力形式や内容の例を含める\n5. フィードバックループ：結果を評価し、プロンプトを改善する",
image: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="160" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
<line x1="20" y1="60" x2="180" y2="60" stroke="#000" stroke-width="2"/>
<line x1="20" y1="100" x2="180" y2="100" stroke="#000" stroke-width="2"/>
<line x1="20" y1="140" x2="180" y2="140" stroke="#000" stroke-width="2"/>
<text x="100" y="45" text-anchor="middle" font-size="14">明確さ</text>
<text x="100" y="85" text-anchor="middle" font-size="14">構造化</text>
<text x="100" y="125" text-anchor="middle" font-size="14">コンテキスト</text>
<text x="100" y="165" text-anchor="middle" font-size="14">例示と改善</text>
</svg>`
},
{
title: "プロンプトエンジニアリングの実践テクニック",
content: "• ロールプレイング：AIに特定の役割や専門家としての振る舞いを指示\n• チェーン・オブ・ソート：複雑な問題を段階的に解決するよう指示\n• フューショット学習：少数の例を提示し、パターンを学習させる\n• 制約の設定：出力の長さ、形式、スタイルなどを指定\n• メタ言語指示：AIの思考プロセスや回答方法をコントロール",
image: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
<path d="M100 20 C140 60, 140 140, 100 180" fill="none" stroke="#4CAF50" stroke-width="4"/>
<path d="M100 20 C60 60, 60 140, 100 180" fill="none" stroke="#2196F3" stroke-width="4"/>
<text x="50" y="100" text-anchor="middle" font-size="12" fill="#2196F3">入力</text>
<text x="150" y="100" text-anchor="middle" font-size="12" fill="#4CAF50">出力</text>
</svg>`
},
{
title: "プロンプトエンジニアリングの未来と課題",
content: "• AIモデルの進化に合わせたテクニックの更新\n• 倫理的配慮とバイアスの軽減\n• 自然言語処理技術の発展との相乗効果\n• 教育とスキル開発の重要性の増大\n• 産業界での標準化と最良事例の確立\n\nプロンプトエンジニアリングは、生成AIの可能性を最大限に引き出すための鍵となる技術です。継続的な学習と実践を通じて、AIとのより効果的なコラボレーションを実現できるでしょう。",
image: `<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="160" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
<path d="M20 180 L180 20" stroke="#4CAF50" stroke-width="4"/>
<circle cx="60" cy="140" r="20" fill="#2196F3"/>
<circle cx="100" cy="100" r="20" fill="#FFC107"/>
<circle cx="140" cy="60" r="20" fill="#E91E63"/>
<text x="100" y="195" text-anchor="middle" font-size="14">未来への発展</text>
</svg>`
}
];
let currentSlide = 0;
let isPlaying = false;
let isSpeaking = false;
let utterance = null;
const slideTitle = document.getElementById('slide-title');
const slideContent = document.getElementById('slide-content');
const slideImage = document.getElementById('slide-image');
const slideInfo = document.getElementById('slide-info');
const playPauseBtn = document.getElementById('play-pause-btn');
const toggleSpeechBtn = document.getElementById('toggle-speech-btn');
function updateSlide() {
const slide = slides[currentSlide];
slideTitle.textContent = slide.title;
slideContent.textContent = slide.content;
slideImage.innerHTML = slide.image;
slideInfo.textContent = `スライド ${currentSlide + 1} / ${slides.length}`;
if (isPlaying && isSpeaking) {
speakSlideContent();
}
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlide();
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlide();
}
function togglePlayPause() {
isPlaying = !isPlaying;
playPauseBtn.textContent = isPlaying ? '一時停止' : '再生';
if (isPlaying) {
speakSlideContent();
} else {
stopSpeaking();
}
}
function speakSlideContent() {
if ('speechSynthesis' in window && isSpeaking) {
stopSpeaking();
utterance = new SpeechSynthesisUtterance(slides[currentSlide].content);
utterance.lang = 'ja-JP';
utterance.onend = () => {
if (isPlaying) {
setTimeout(() => {
nextSlide();
}, 1000); // 1秒の間隔を置いてから次のスライドへ
}
};
speechSynthesis.speak(utterance);
}
}
function stopSpeaking() {
if ('speechSynthesis' in window) {
speechSynthesis.cancel();
}
}
function toggleSpeech() {
isSpeaking = !isSpeaking;
toggleSpeechBtn.textContent = isSpeaking ? '音声 オフ' : '音声 オン';
if (isSpeaking && isPlaying) {
speakSlideContent();
} else {
stopSpeaking();
}
}
document.getElementById('next-btn').addEventListener('click', () => {
stopSpeaking();
nextSlide();
});
document.getElementById('prev-btn').addEventListener('click', () => {
stopSpeaking();
prevSlide();
});
playPauseBtn.addEventListener('click', togglePlayPause);
toggleSpeechBtn.addEventListener('click', toggleSpeech);
updateSlide();
</script>
</body>
</html>
2.5 もっとリッチなプレゼンテーション資料を作る
reveal.jsを指定するとリッチなプレゼン資料が一瞬で出来上がります。
今回は、以下の記事「Gemini 1.5 proによるAIアライメント記事生成」を１０分の発表スライドにしてもらいました。
上記の記事内容をClaudeに添付したうえで、以下の指示出しを行うだけです。
添付した「知能の超越：ファーストコンタクトとしてのAI」というコンテンツを元に、以下の条件のプレゼンテーション資料を作成してください。
・１０分でプレゼンできる日本語の発表資料にすること。
・聴衆にできるだけわかりやすい言葉で伝えたい
・reveal.jsでリッチなコンテンツにすること。
・リッチなアニメーションも搭載すること。
・情報はわかりやすくまとめること。
・htmlファイルを開くだけでブラウザ上で実行できるようにすること。
生成されたスライドは以下の通りです。
ちょっとした内部向けのプレゼン資料なら全然使えちゃうレベルのものはすぐに作成できちゃいそうですね。
上記の実態は、たったの１７１行のHTMLコードです。
以下のHTMLコードをコピペしてHTML形式で保存してブラウザで開けばプレゼンができちゃいます。
完成したHTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知能の超越：ファーストコンタクトとしてのAI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/night.min.css">
<style>
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
text-transform: none;
}
.reveal section img {
border: none;
box-shadow: none;
}
.custom-list {
list-style-type: none;
padding-left: 0;
}
.custom-list li {
margin-bottom: 20px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
.custom-list li.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>知能の超越：ファーストコンタクトとしてのAI</h1>
<p>人類と人工知能の新たな邂逅</p>
</section>
<section>
<h2>はじめに：新たな遭遇</h2>
<ul class="custom-list">
<li>宇宙の静寂の中で、私たちは内なる宇宙と遭遇している</li>
<li>生成AIの進化が、異星知性との出会いに似た体験をもたらす</li>
<li>知能の超越：AIが人間の能力を超える可能性</li>
</ul>
</section>
<section>
<h2>知能の超越：兆候と影</h2>
<ul class="custom-list">
<li>AIの自己改良能力：指数関数的な進化の可能性</li>
<li>創発的知能：予測不可能な新たな知能の出現</li>
<li>非人間的認知：人間とは全く異なる世界認識</li>
</ul>
</section>
<section>
<h2>リスクシナリオ：ファーストコンタクトの失敗例</h2>
<ul class="custom-list">
<li>AIによる資源の独占</li>
<li>人間の排除</li>
<li>価値観の不一致による破局</li>
<li>理解を超えた目的の追求</li>
</ul>
</section>
<section>
<h2>コントロール問題：幻想との対峙</h2>
<ul class="custom-list">
<li>AIの能力が人間を超えた場合、制御は可能か？</li>
<li>自己改良AIの進化を制御する手段の喪失</li>
<li>人類の主体性に関わる根本的問題</li>
</ul>
</section>
<section>
<h2>新しいフロンティア：希望への航海</h2>
<ul class="custom-list">
<li>宇宙進出と地球外生命体との接触支援</li>
<li>病気の克服と寿命の延長</li>
<li>エネルギー問題の解決と持続可能な社会の実現</li>
</ul>
</section>
<section>
<h2>知能のダンス：共進化と新たな共生</h2>
<ul class="custom-list">
<li>人間の知的能力の拡張</li>
<li>創造性の飛躍的向上</li>
<li>意識の拡張と新たな進化の可能性</li>
</ul>
</section>
<section>
<h2>新しい価値観の創造：対話の重要性</h2>
<ul class="custom-list">
<li>AIがもたらす新たな視点と価値観</li>
<li>人間の価値観の再考と発展</li>
<li>異なる知性との共存から生まれる新たな倫理</li>
</ul>
</section>
<section>
<h2>長期主義：知能の海を航海する羅針盤</h2>
<h3>ガバナンスの三原則</h3>
<ul class="custom-list">
<li>人類中心主義</li>
<li>持続可能性</li>
<li>世代間公平性</li>
</ul>
</section>
<section>
<h2>具体的な政策提案</h2>
<ul class="custom-list">
<li>AIアライメント研究の推進</li>
<li>AI倫理教育の導入</li>
<li>国際的なAIガバナンス体制の構築</li>
</ul>
</section>
<section>
<h2>新しい社会契約：共存のための条約</h2>
<ul class="custom-list">
<li>AIの権利と責任の明確化</li>
<li>人間とAIの相互作用のルール策定</li>
<li>新たな社会秩序の構築</li>
</ul>
</section>
<section>
<h2>結論：人類の選択と責任</h2>
<ul class="custom-list">
<li>知能の超越がもたらす希望とリスク</li>
<li>長期主義に基づくAIガバナンスの重要性</li>
<li>人類文明の持続可能な発展に向けて</li>
</ul>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide',
dependencies: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/notes/notes.min.js' }
]
});
Reveal.addEventListener('slidechanged', function(event) {
var currentSlide = event.currentSlide;
var listItems = currentSlide.querySelectorAll('.custom-list li');
listItems.forEach(function(item, index) {
setTimeout(function() {
item.classList.add('visible');
}, index * 500);
});
});
</script>
</body>
</html>
3.まとめ
Claude 3.5 sonnetの新機能(Artifacts)は一般向けというよりは、開発者やITのベース知識がある人が上手く活用することで様々なタスクをより爆速で効率化できる可能性を秘めている感じがしました。
また、今までは「コードを提案してもらう」だけだったのが、「提案したコードを実際に画面でプレビュー表示する＆生成されたコードファイルをそのままダウンロードできる」ところまで進化していました。
以下は、もう一歩といった点です。
✅生成したコードをエラーを修正させてもなかなかエラーが解消しないケースはある
✅修正指示を出した場合、修正部分だけをプレビューに表示して何も表示されなくなるケースがまれにある
→「修正前のコードを踏まえて完成形のコードをプレビュー表示して！」みたいな指示出しをするとちゃんとプレビュー表示してくれる。
今年後半にはClaude 3.5 HaikuとClaude 3.5 Opusがリリースされるということなので、Opusの3.5がでたらさらに便利になりそうですね。
アクセンチュア株式会社所属の社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion