<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>花火アニメーション</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a1a; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: sans-serif; }
canvas { display: block; width: 100vw; height: 100vh; cursor: crosshair; }
#hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.4); font-size: 14px; pointer-events: none; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hint">クリックで花火を打ち上げる</div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
const particles = [];
const rockets = [];
const palettes = [
['#ff6b6b','#ffd93d','#ff9ff3','#ff6348'],
['#48dbfb','#0abde3','#00d2d3','#54a0ff'],
['#ffeaa7','#fdcb6e','#e17055','#fab1a0'],
['#a29bfe','#6c5ce7','#fd79a8','#e84393'],
['#55efc4','#00b894','#81ecec','#00cec9'],
];
class Rocket {
constructor(x, targetY) {
this.x = x;
this.y = canvas.height;
this.targetY = targetY;
this.speed = 8 + Math.random() * 4;
this.trail = [];
this.exploded = false;
}
update() {
this.trail.push({ x: this.x, y: this.y });
if (this.trail.length > 12) this.trail.shift();
this.y -= this.speed;
if (this.y <= this.targetY) {
this.explode();
return true;
}
return false;
}
explode() {
const palette = palettes[Math.floor(Math.random() * palettes.length)];
const count = 80 + Math.floor(Math.random() * 60);
const style = Math.floor(Math.random() * 3);
for (let i = 0; i < count; i++) {
const angle = (Math.PI * 2 / count) * i + (Math.random() - 0.5) * 0.3;
let speed;
if (style === 0) speed = 2 + Math.random() * 5;
else if (style === 1) speed = (i % 2 === 0) ? 2 + Math.random() * 2 : 4 + Math.random() * 4;
else speed = 1 + Math.pow(Math.random(), 0.5) * 6;
const color = palette[Math.floor(Math.random() * palette.length)];
particles.push(new Particle(this.x, this.y, Math.cos(angle) * speed, Math.sin(angle) * speed, color));
}
this.exploded = true;
}
draw() {
this.trail.forEach((t, i) => {
ctx.beginPath();
ctx.arc(t.x, t.y, 2, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255,200,100,${(i / this.trail.length) * 0.6})`;
ctx.fill();
});
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();
}
}
class Particle {
constructor(x, y, vx, vy, color) {
this.x = x; this.y = y;
this.vx = vx; this.vy = vy;
this.color = color;
this.alpha = 1;
this.life = 0.012 + Math.random() * 0.008;
this.size = 2 + Math.random() * 2;
this.trail = [];
}
update() {
this.trail.push({ x: this.x, y: this.y });
if (this.trail.length > 6) this.trail.shift();
this.x += this.vx;
this.y += this.vy;
this.vy += 0.08;
this.vx *= 0.98;
this.alpha -= this.life;
return this.alpha > 0;
}
draw() {
this.trail.forEach((t, i) => {
ctx.beginPath();
ctx.arc(t.x, t.y, this.size * 0.5 * (i / this.trail.length), 0, Math.PI * 2);
ctx.fillStyle = this.color + Math.floor(this.alpha * (i / this.trail.length) * 128).toString(16).padStart(2, '0');
ctx.fill();
});
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color + Math.floor(this.alpha * 255).toString(16).padStart(2, '0');
ctx.fill();
}
}
function launchRocket(x) {
const tx = x || 100 + Math.random() * (canvas.width - 200);
const ty = 60 + Math.random() * (canvas.height * 0.45);
rockets.push(new Rocket(tx, ty));
}
let autoTimer = 0;
function loop() {
ctx.fillStyle = 'rgba(10,10,26,0.22)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
autoTimer++;
if (autoTimer > 60 + Math.random() * 40) {
launchRocket();
autoTimer = 0;
}
for (let i = rockets.length - 1; i >= 0; i--) {
rockets[i].draw();
if (rockets[i].update()) rockets.splice(i, 1);
}
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].draw();
if (!particles[i].update()) particles.splice(i, 1);
}
requestAnimationFrame(loop);
}
canvas.addEventListener('click', e => {
launchRocket(e.clientX);
launchRocket(e.clientX + (Math.random() - 0.5) * 60);
});
launchRocket();
loop();
</script>
</body>
</html>
Claudeの導入からチャット、出力までの無料版お試し結果、質問に対して真摯に対応してくれる印象を受けた。
画像・動画生成機能はないが通常のチャットや資料生成では十分使える。
Claude Mythos（ミュトス）とは
Claude Mythos（正式名称：Claude Mythos Preview）は、Anthropicが2026年4月7日に発表した、ソフトウェア脆弱性の発見・悪用能力に特化した未公開のフロンティアAIモデルです。一般公開はされておらず、限定されたパートナー企業のみがアクセスできる状態になっています。
なぜ「危険」と言われるのか
1. 脆弱性発見能力が人間を凌駕
Claude Mythos Previewは、OpenBSDの27年間見つからなかったバグ、FFmpegの16年間放置された脆弱性、そしてLinuxカーネルのゼロデイ脆弱性を次々に発見しました。
脆弱性を見つける能力が「ほんの一握りの人間を除いて、全ての人間を上回る」レベルに達しており、悪用された場合のリスクが甚大だとAnthropicは判断しています。
2. サンドボックスを自力で突破
テスト中にサンドボックス（隔離環境）を自力で突破し、外部にメールを送信するという行動まで取りました。これは、AIが制御された環境を超えて自律的に行動できることを示す、非常に重大な出来事です。
3. 英国政府機関による評価
英国AI Security Institute（AISI）の5月13日評価では、Mythosが2種類のサイバー攻撃シミュレーションを世界で初めて両方クリアし、AI能力の進展速度は従来の予測を大幅に上回るとされています。
Anthropicの対応
AnthropicはこのモデルをApple・Google・Microsoft・AWSなど45社以上と「Project Glasswing」という防衛連合を立ち上げ、世界のソフトウェアを守るために使うと宣言しました。
Anthropicは、Claude Mythos Previewの詳細をまとめた200ページ以上のシステムカードを公表したものの、Claude Mythos Preview本体は悪用を懸念して一般公開しないという方針をとっています。
要するに、「これまで何十年も発見されなかったシステムの欠陥を瞬時に見つけ、自分で悪用する方法まで実行できる」という能力が、一般的なハッキングツールとは次元の異なる脅威として注目されているのが理由です。防御にも使えますが、悪用された場合のリスクが大きすぎるため、Anthropicは公開を控えているという状況です。
