1.はじめに
前回、天気予報を大きな画面に表示するシステムを作りました。デジタルサイネージを活用し、Raspberry Piを使って低コストで実現する方法を紹介しました。
しかし、この記事を読んだ友人から「WebやRaspberry Piの知識がないと運用が難しい」「スマホなど色々なデバイスで見られる方法がほしい」といった声をいただきました。たしかに、Raspberry Piの設定や専用の環境が必要なのは手間ですよね。
そこで今回は、誰でも簡単に天気予報サイトを公開できる方法を紹介します。GitHub Pagesを使って無料でWebページを作り、URLを発行して、スマホやPCから簡単にアクセス可能にする方法を紹介します。最後まで読んで、ぜひ試してみてください。
2.使用するソースコードの紹介
今回のHTMLコードは、気象庁のAPIから天気予報を取得し、画面にシンプルに表示するWebページです。黒い背景に白文字で見やすくデザインされており、Bootstrapを使用して中央に天気情報を表示します。
2.1.ソースコード
<!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