1.はじめに

前回、天気予報を大きな画面に表示するシステムを作りました。デジタルサイネージを活用し、Raspberry Piを使って低コストで実現する方法を紹介しました。

しかし、この記事を読んだ友人から「WebやRaspberry Piの知識がないと運用が難しい」「スマホなど色々なデバイスで見られる方法がほしい」といった声をいただきました。たしかに、Raspberry Piの設定や専用の環境が必要なのは手間ですよね。

そこで今回は、誰でも簡単に天気予報サイトを公開できる方法を紹介します。GitHub Pagesを使って無料でWebページを作り、URLを発行して、スマホやPCから簡単にアクセス可能にする方法を紹介します。最後まで読んで、ぜひ試してみてください。

2.使用するソースコードの紹介

今回のHTMLコードは、気象庁のAPIから天気予報を取得し、画面にシンプルに表示するWebページです。黒い背景に白文字で見やすくデザインされており、Bootstrapを使用して中央に天気情報を表示します。

2.1.ソースコード

real-time-weather.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天気予報</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-dark text-white d-flex justify-content-center align-items-start vh-100">
    <div class="mt-5 text-center">
        <p id="time" class="display-6"></p>
        <p id="weather" class="display-1 fw-bold mt-3"></p>
    </div>

    <script>
        function fetchWeatherForecast() {
            const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";
            let todayForecast;

            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, false);  // 同期実行
            try {
                xhr.send();
                if (xhr.status === 200) {
                    const data = JSON.parse(xhr.responseText);
                    todayForecast = data[0].timeSeries[0].areas[0].weathers[0];
                } else {
                    throw new Error("ステータスコード: " + xhr.status);
                }
            } catch (error) {
                todayForecast = "エラーが発生しました: " + error.message;
            }

            return todayForecast;
        }

        function getCurrentTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        }

        function reloadPage() {
            location.reload();
        }

        document.addEventListener('DOMContentLoaded', () => {
            const weather = fetchWeatherForecast();
            const currentTime = getCurrentTime();
            document.getElementById('time').innerText = `今日の天気予報（${currentTime}現在）`;
            document.getElementById('weather').innerText = weather;
            setTimeout(reloadPage, 180000); // 3分ごとにページをリロード
        });
    </script>
</body>
</html>

2.2.主な動作

天気予報の取得
- 気象庁のAPIから天気データを取得し、JSON形式で処理
- 天気情報を抽出して画面に表示
- 取得エラーが発生した場合はエラーメッセージを表示
現在時刻の表示
- 現在の時刻を「HH:MM」形式で表示
ページの初期化と表示
- ページが読み込まれると、天気予報と時刻を自動で表示
3分ごとの更新
- 最新の天気情報を表示するため、3分ごとにページを自動リロード

シンプルな構成なので、すぐに試せます！

2.3.使用するAPIについて

https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json は、東京都の天気予報データを取得できる公式のAPIです。

このURLにアクセスすると、東京都の天気予報がJSON形式で提供されます。データはプログラムで扱いやすいように構造化されており、特定の情報を簡単に取得できます。

なお、URL内の 「130000」 は東京都の都道府県コードを指しており、他の地域の天気予報を取得するには、異なる都道府県コードを使用します。都道府県コードの詳細については、こちらのドキュメントを参考にしてください。

3.GitHub Pages を使ってWebサイトを無料で公開する

この章では、GitHub Pages を利用して、作成したWebページを無料で公開する方法を紹介します。GitHub Pages を使うと、簡単な手順でWebサイトをインターネット上に公開できます。

3.1. GitHubにソースコードをプッシュする

次に、GitHubにリポジトリを作成し、2.使用するソースコードの紹介で作成したソースコードをコミットしてから、GitHubへプッシュしてください。 GitやGitHub がよくわからない方は、以下の記事を参考にしてください。また、個人的に GitHub Desktop のインストールをおすすめします。今回リポジトリを作成する際は、 Public に設定してください。

3.2. GitHub Pages を有効にする

今回使用しているリポジトリの「Settings（設定）」タブを開きます。
左側のメニューで「Pages」をクリック。
「Branch」セクションで「main」ブランチと「/root」を選択し、「Save」ボタンをクリック。
「Visit site」をクリック。

今回は、real-time-weather.htmlというファイルにソースコードを記入してプッシュしました。そのため、表示されたURLの後ろに「/real-time-weather.html」を追加してください。なお、今回公開したURLは次の通りです。

https://nakkinakki55.github.io/real-time-weather/real-time-weather.html

以上です。

さいごに

今回はGitHub Pagesを使ってWebページのURLを発行できました。GitHub Pagesは無料でWebサイトを公開できるため、とても便利だと感じました。しかし、注意が必要なのは、GitHub PagesがPHP、Ruby、Pythonなどのサーバーサイド言語をサポートしていないことです。

一方で、HTML、CSS、JavaScriptなどのフロントエンド技術には対応しているので、デザイナーの方やフロントエンドだけで完結するプロジェクトには最適です。この点で、非常に便利なサービスだと思います。

ただし、GitHubは実際の開発現場でもよく使われており、レポジトリは通常　Private に設定されています。今回のように Public にして外部に公開する際は、注意が必要です。過去には、誤って Public にしたことでアクセストークンやデータベース接続情報が漏れ、大きな問題になった事例もあります。運用時は、本当に気をつけましょう。

それでも、GitHub Pagesは本当に便利なサービスで、個人的には非常に満足しています。将来的にはPHPやRuby、Pythonなどのサーバーサイド言語にも対応してほしいと思っています。

今回はここまでてす。最後まで読んでくださりありがとうございます。ではまた。

参考文献

GitHub Pages について - GitHub Docs
【webサイトを無料で公開できる】GitHub Pagesの使い方について #HTML - Qiita