AIにコーディングさせてみる
画像生成・JavaScriptコーディング:ChatGPT
VOICEVOX:雨晴はう
AIに2コマアニメーションと音声の再生のコーディングをお願いしました。
MacのChromeでは、それなりに安定して再生されるのですが、
スマホのブラウザだとアニメーションや音声再生が不安定みたいです。
スマホのブラウザでも安定させる方法がないか相談してみる
「 audio.onended がスマホブラウザで発火しない／遅延する」
らしいので、改善してもらいました。
しかし、Androidで微妙に止まるようになっただけで、あまり改善せず。
残念。
画像生成・JavaScriptコーディング:ChatGPT
VOICEVOX:雨晴はう
さらに相談してガッツリ直してもらう
ChatGPTと会話を重ねて、ついに完全対応のコードを書いてもらいました!!(笑)
ここまでPCとスマホで挙動が変わって大変だとは思いませんでした(笑)。
画像生成・JavaScriptコーディング:ChatGPT
VOICEVOX:雨晴はう
回転表示を使って筋トレアニメーションを表現してみる
今度は画像の回転機能を使ってアニメーションしてみることにしました。
腕の画像をある程度回転させて、ループさせることでアニメーションを実現しました。
が、PCブラウザではうまく行くものの、今回もスマホで見るとうまく行きませんでした。
現在、AIに相談して対応中。
JavaScriptコード
<style>
.container {
position: relative;
}
#body {
width: 500px;
position: relative;
top: 0;
left: 0;
}
#arm {
width: 200px;
position: absolute;
top: 120px;
left: 5px;
transform-origin: 80px 270px; /* 回転の起点を調整可能 */
transition: transform 0.05s linear;
}
</style>
<body>
<div class="container">
<img id="body" src="https://mugenkai.biz/wp-content/uploads/2025/06/body.png" alt="体">
<img id="arm" src="https://mugenkai.biz/wp-content/uploads/2025/06/arm.png" alt="腕">
</div>
<script>
const arm = document.getElementById('arm');
const u_angle=370;
const d_angle=300;
let angle = d_angle;
let increasing = true; // trueなら上昇、falseなら下降
setInterval(() => {
if (increasing) {
angle += 2; // 上げる
if (angle >= u_angle) {
angle = u_angle;
increasing = false; // 方向を切り替える（下げる）
}
} else {
angle -= 2; // 下げる
if (angle <= d_angle) {
angle = d_angle;
increasing = true; // 方向を切り替える（上げる）
}
}
arm.style.transform = `rotate(${angle}deg)`;
}, 10); // 速度調整
</script>
</body>筋トレアニメーション・スマートフォン対応版
AIと相談したところ、どうやらピクセル単位で画像に対して指定しまっていたのがまずく、画面が小さいデバイスでは補正が悪く働いて変になってしまっていたようです。
ということで、パーセントで指定して対応してみました。
これでなんとか、小さい画面のデバイスでもうまくアニメーションするようになりました。
JavaScriptコード
<style>
.container2 {
position: relative;
left: 10%;
}
#body2 {
width: 100%;
top: 0;
left: 0;
}
#arm2 {
width: 40%;
position: absolute;
top: 15.5%;
left: 1%;
transform-origin: 48% 97%; /* 回転の起点を調整可能 */
transition: transform 0.05s linear;
}
</style>
<body>
<div class="container2">
<img id="body2" src="https://mugenkai.biz/wp-content/uploads/2025/06/body.png" alt="体">
<img id="arm2" src="https://mugenkai.biz/wp-content/uploads/2025/06/arm.png" alt="腕">
</div>
<script>
const arm2 = document.getElementById('arm2');
const u_angle2=370;
const d_angle2=300;
let angle2 = d_angle2;
let increasing2 = true; // trueなら上昇、falseなら下降
setInterval(() => {
if (increasing2) {
angle2 += 2; // 上げる
if (angle2 >= u_angle2) {
angle2 = u_angle2;
increasing2 = false; // 方向を切り替える（下げる）
}
} else {
angle2 -= 2; // 下げる
if (angle2 <= d_angle2) {
angle2 = d_angle2;
increasing2 = true; // 方向を切り替える（上げる）
}
}
arm2.style.transform = `rotate(${angle2}deg)`;
}, 10); // 速度調整
</script>
</body>
コメント