天気連動型美人時計を作ろう!~ChatGPTでコーディング~
ちょっと昔、美人時計というものが流行りました。
そんな感じのものを天候連動型で作成してみます。
天気と時刻と連動し、背景の画像も差し替えてもらいます。
もちろん、コードは全部ChatGPTに書いてもらいます。
(画像素材だけは、別途画像生成AIを使用します)
出来上がったもののイメージが以下です。
コードと素材は公開しますので、各々ローカル環境で動かしていただければと思います。
素材については、名前そのままに自分で用意したものに差し替えもできます。
注意点としまして、OpenWeatherのAPIを使用しますが、実装上直接APIを貼り付けているため、第三者から閲覧出来る形での公開はこのままではできません。
ローカル(自分のパソコンの中だけ)でなら問題はありません。
ChatGPTとのやりとりも以下に公開しています。
続きから指示を出せば、もっといろいろカスタマイズできると思います。
(頑張ってやりとりをすれば、公開出来る形に持って行けると思います。)
ソースコード
HTML(index.html)
<!DOCTYPE html>
<html>
<head>
<title>Weather Clock</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<img id="background" src="" alt="Weather Image" />
<div class="overlay">
<h1 id="weather"></h1>
<div id="clock"></div>
</div>
</div>
<script src="clock.js"></script>
</body>
</html>
CSS(styles.css)
.container {
position: relative;
width: 100vw; /* Viewport width (the size of the visible part of the document) */
height: 100vh; /* Viewport height */
overflow: hidden; /* Ensures that nothing spills outside of the container */
}
#background {
object-fit: cover; /* Ensures the image covers the entire container */
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: black;
background: rgba(255, 255, 255, 0.5);
border: 3px solid black;
}
#clock {
font-size: 60px;
}
javascript(clock.js)
const API_KEY = 'API_KEY'; // ここにあなたのOpenWeatherのAPIキーを入れてください
const BASE_URL = `http://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=${API_KEY}`;
let clock = document.getElementById('clock');
let weatherDisplay = document.getElementById('weather');
let background = document.getElementById('background');
function getTimeOfDay(hours) {
if (hours >= 5 && hours < 12) {
return 'morning';
} else if (hours >= 12 && hours < 18) {
return 'afternoon';
} else {
return 'night';
}
}
function updateClock() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
clock.innerHTML = hours + ':' + minutes + ':' + seconds;
updateWeather();
setTimeout(updateClock, 1000);
}
function updateWeather() {
fetch(BASE_URL)
.then(response => response.json())
.then(data => {
let weather = data.weather[0].main;
let currentTime = new Date().getHours();
let timeOfDay = getTimeOfDay(currentTime);
weatherDisplay.innerHTML = 'Current Weather: ' + weather;
background.src = weather.toLowerCase() + '-' + timeOfDay + '.jpg';
})
.catch(err => console.log(err));
}
window.onload = function() {
updateClock();
setInterval(updateClock, 60000); // 1分ごとに天気と時刻を更新
};
const API_KEYには、取得したAPIを入れてください。簡単にこの記事の下の方でAPIキーの取得方法を書いています。
BASE_URLには、Tokyoと直接書かれているところに、自分の地域の名前を入れてください。
格納イメージ
場所は何処でも良いですが、すべて同じフォルダに入れてください。
ChatGPTとのやりとり
GPT-4を使用しています。
OpenWeatherからAPIキーの取得
以下に簡単にAPIキーを取得する方法をご紹介します。
クレジットカード等の登録は不要です。ただし無料版には制限がありますので、ご注意ください。
登録
登録は結構簡単で、以下のURLから「ユーザー名」「メールアドレス」「パスワード」を入力します。
利用規約を読んで、ロボットではありませんを押して、Create Accountをクリックします。
登録したらメールが届くので、「Verify your email」をクリックします。
その後ログインをしたら、右上にある自分のユーザーネームにカーソルを持っていき、My API keysをクリックします。
押したら既に「Default」という名前のキーがあるかと思います。
これですが、どうにも1時間以上経過しないと使えないようで、そこは少し待つ必要があります。
以下、Pythonでですが401エラーになった際のChatGPT側の回答です。
結果、これは登録してすぐだったためで、翌日(これを書いている今)ためしたら、すんなり使えました。
まとめ
コーディングや素材含めて、1時間くらいで作る事ができました。
アイデアさえあれば、サクサクなんでもできる時代ですね。改めて感動します。
もちろん、きちんとサービスとして公開するためには、適切な場所にAPIキーを入れる必要がありますし、もっと時間はかかるでしょう。
けれど、プロトタイプ版ならこうもサクサク作れてしまいます。
素材に関しては美人時計が着想元だったので人物にしましたが、普通に猫の画像でも良いですし、なんでも良いと思います。
素材(おまけ)
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?