無料で簡単！天気予報サイトを公開する方法をやさしく解説

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

https://qiita.com/nishifeoda/items/6d7fecb8dcc4c3bbad21

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/d454a231-bd9f-4bdb-86f7-3e59bd67e56f.png)

しかし、この記事を読んだ友人から「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.主な動作  

1. **天気予報の取得**  
   - 気象庁のAPIから天気データを取得し、JSON形式で処理  
   - 天気情報を抽出して画面に表示  
   - 取得エラーが発生した場合はエラーメッセージを表示  

2. **現在時刻の表示**  
   - 現在の時刻を「HH:MM」形式で表示  

3. **ページの初期化と表示**  
   - ページが読み込まれると、天気予報と時刻を自動で表示  

4. **3分ごとの更新**  
   - 最新の天気情報を表示するため、3分ごとにページを自動リロード  

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

### 2.3.使用するAPIについて  

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

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

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

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

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

https://qiita.com/tsmog52/items/b3ba8fbee7ba4afb093f

https://qiita.com/yasu_qita/items/3a24322f0ebdd443ba7e


## 3.2. GitHub Pages を有効にする

1. 今回使用しているリポジトリの「Settings（設定）」タブを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/c86127f7-1ba5-445e-aaaa-631ac536c2fc.png)

2. 左側のメニューで「Pages」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/ebfcc5ef-dfb7-4f59-9099-4bcf306cb245.png)

3. 「Branch」セクションで「main」ブランチと「/root」を選択し、「Save」ボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/0dde1ef5-c622-4cec-a38b-b1ca21dfdc45.png)

4. 「Visit site」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/54cf41b4-7ec6-4ee9-893e-82cf5cbd330e.png)

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

[https://nakkinakki55.github.io/real-time-weather/real-time-weather.html](https://nakkinakki55.github.io/real-time-weather/real-time-weather.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561875/a1cbab78-614a-4062-a147-6a955f763367.png)

以上です。

## さいごに
今回は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](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages)
[【webサイトを無料で公開できる】GitHub Pagesの使い方について #HTML - Qiita](https://qiita.com/koh_ru/items/cdc251f8e3e1d6d94159)