天気連動型美人時計を作ろう！～ChatGPTでコーディング～

2023年6月8日 00:03

ちょっと昔、美人時計というものが流行りました。
そんな感じのものを天候連動型で作成してみます。
天気と時刻と連動し、背景の画像も差し替えてもらいます。
もちろん、コードは全部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側の回答です。
結果、これは登録してすぐだったためで、翌日（これを書いている今）ためしたら、すんなり使えました。

エラーメッセージによれば、APIキーが無効であるようです。`Invalid API key`というエラーメッセージは、通常、以下の理由で発生します：

1. APIキーが正しくない：APIキーが間違って入力されているか、存在しないキーが指定されている場合に発生します。

2. APIキーが有効化されていない：OpenWeatherMapでは新しいAPIキーを生成した後、それが有効化されるまでに最大1時間かかることがあります。そのため、すぐに新しいキーを使おうとするとこのエラーが発生します。

3. APIキーの使用回数が制限を超えている：OpenWeatherMapの無料プランでは、APIの使用回数に制限があります。この制限を超えるとAPIキーが一時的に無効になり、このエラーが発生します。

上記を踏まえて、以下の対応を試してみてください：

- APIキーが正しいか確認してください。誤った文字が含まれていないか、または余分なスペースが入っていないか等を確認してください。

- 新しくAPIキーを生成したばかりの場合は、少し待ってから再度試してみてください。APIキーの有効化には最大1時間かかることがあります。

- APIキーの使用回数が制限を超えている可能性がある場合は、時間をおいてから再度試してみるか、有料プランにアップグレードすることを検討してみてください。

ChatGPTの返答