# アナログ時計をTOPページに追加しました.ソースコードはこちら.

おはようございます.アナログ時計をTOPページに追加しました.ソースコードはこちらに記載していきます.尚、ソースコードは生成AI、Grokを使用して制作しました.

```
<div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
    <div class="center-clock"></div>
</div>
```



```
.clock {
  /* width: 200px;
  height: 200px;
  border: 2px solid rgb(226, 226, 226); */
  border-radius: 50%;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  background: #333!important;
}

.hour-hand {
  width: 4px;
  height: 60px;
  background: #333!important;;
}

.minute-hand {
  width: 3px;
  height: 80px;
  background: #666!important;;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: rgb(94, 93, 93)!important;;
}

.center-clock {
  width: 10px;
  height: 10px;
  background: rgb(95, 95, 95)!important;;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
```



```
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 角度の計算
            const hourDeg = (hours % 12 + minutes / 60) * 30; // 12時間で360度
            const minuteDeg = (minutes + seconds / 60) * 6; // 60分で360度
            const secondDeg = seconds * 6; // 60秒で360度

            // 針の回転
            document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
            document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
            document.querySelector('.second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
        }

        // 初回実行
        updateClock();
        // 1秒ごとに更新
        setInterval(updateClock, 1000);
```



生成AIが最初登場した時はここまで出来なかったので一回目の指示でちゃんとしたものを制作していけるようになったというのは正直なところ驚きです.やっぱり指数関数的に人工知能は成長するのかなとたまに思うことがありますが、それと相反する思いも持っています.

相反するとは、あと5年ぐらいで人工知能も頭打ちになるじゃないかなとも思っています.

明日へ続く

 [ ![](https://zip358.com/wp-content/uploads/2025/12/flower2025.png) 漠然たるものを形にするのがクリエイターの仕事

 ](https://zip358.com/2025/12/26/%e6%bc%a0%e7%84%b6%e3%81%9f%e3%82%8b%e3%82%82%e3%81%ae%e3%82%92%e5%bd%a2%e3%81%ab%e3%81%99%e3%82%8b%e3%81%ae%e3%81%8c%e3%82%af%e3%83%aa%e3%82%a8%e3%82%a4%e3%82%bf%e3%83%bc%e3%81%ae%e4%bb%95%e4%ba%8b.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/12/Artificial-Intelligence-ai-2025.png) ポップアートと生成AIとAIで思ったこと.

 ](https://zip358.com/2025/12/25/%e3%83%9d%e3%83%83%e3%83%97%e3%82%a2%e3%83%bc%e3%83%88%e3%81%a8%e7%94%9f%e6%88%90ai%e3%81%a8ai%e3%81%a7%e6%80%9d%e3%81%a3%e3%81%9f%e3%81%93%e3%81%a8.html) 

 [ ![scenic view of a lightning in the sky](https://zip358.com/wp-content/uploads/2024/01/pexels-photo-4124167.jpeg) 映画アバターを観てきました.今年最後の映画見納め

 ](https://zip358.com/2025/12/24/%e6%98%a0%e7%94%bb%e3%82%a2%e3%83%90%e3%82%bf%e3%83%bc%e3%82%92%e8%a6%b3%e3%81%a6%e3%81%8d%e3%81%be%e3%81%97%e3%81%9f-%e4%bb%8a%e5%b9%b4%e6%9c%80%e5%be%8c%e3%81%ae%e6%98%a0%e7%94%bb%e7%b7%a0%e3%82%81.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/04/image-12.png) 田舎の公共交通機関がズタボロ感.皆さん使いませんか？

 ](https://zip358.com/2025/12/23/%e7%94%b0%e8%88%8e%e3%81%ae%e5%85%ac%e5%85%b1%e4%ba%a4%e9%80%9a%e6%a9%9f%e9%96%a2%e3%81%8c%e3%82%ba%e3%82%bf%e3%83%9c%e3%83%ad%e6%84%9f-%e7%9a%86%e3%81%95%e3%82%93%e4%bd%bf%e3%81%84%e3%81%be%e3%81%9b.html) 

 [ ![](https://zip358.com/wp-content/uploads/2025/12/image-7.png) モールス信号変換器を作った話.二番煎じ感

 ](https://zip358.com/2025/12/22/%e3%83%a2%e3%83%bc%e3%83%ab%e3%82%b9%e4%bf%a1%e5%8f%b7%e5%a4%89%e6%8f%9b%e5%99%a8%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%9f%e8%a9%b1-%e4%ba%8c%e7%95%aa%e7%85%8e%e3%81%98%e6%84%9f.html) 

 

[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "Facebook")[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "X")[](https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "Bluesky")[](https://www.addtoany.com/add_to/line?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "Line")[](https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "Threads")[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fzip358.com%2F2025%2F03%2F26%2F%25e3%2582%25a2%25e3%2583%258a%25e3%2583%25ad%25e3%2582%25b0%25e6%2599%2582%25e8%25a8%2588%25e3%2582%2592top%25e3%2583%259a%25e3%2583%25bc%25e3%2582%25b8%25e3%2581%25ab%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25be%25e3%2581%2597%25e3%2581%259f-%25e3%2582%25bd%25e3%2583%25bc%25e3%2582%25b9%25e3%2582%25b3.html&linkname=%E3%82%A2%E3%83%8A%E3%83%AD%E3%82%B0%E6%99%82%E8%A8%88%E3%82%92TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89. "Copy Link")[](https://www.addtoany.com/share)
