天気サイトの作り方

当天気サイトの作り方の手順をご紹介します。

WordPressに組み込むことを目標としていますので、PHP言語を選択しています。


1.Visual Studio Code (Windows版) のインストール

2.XAMPPの設定

3.PHPのインストール

4.気象庁の天気予報APIとは?

5.天気概況文の作り方

6.天気図の表示の仕方

7.天気テロップコード一覧表

8.府県天気予報の作り方

9.週間天気予報の作り方

10.天気予報のWordPress化

11.降水確率の表示の仕方

12.雨雲レーダーの作り方

13.日付・曜日の表示の仕方

14.夜アイコンの表示の仕方

15.雨雲レーダーのアニメーションの仕方

1.Visual Studio Code (Windows版) のインストール

Visual Studio Code(以下VSCode)のWindows版のインストール手順を以下に記します。導入環境 1-1.VSCodeをダウンロードするVSCodeの以下のダウンロードページにジャンプします。htt

2.XAMPPの設定

2-1.XAMPP(ザンプ)とは XAMPPとは、Webアプリケーション開発に欠かすことのできないソフトウェアとそれ以外にもあると便利なツールを、無料で一括インストールすることができるパッケージのことです。 そもそも、W

3.PHPのインストール

今回は Windows 11 home に PHP 8.1.6 と composer をインストールします。 ちなみに開発環境を想定していますので、運用には向きません。 3-1.パッケージのダウンロード 公式ページから

4.気象庁の天気予報APIとは?

4-1.WebAPIとは Web APIとは、コンピュータプログラムの提供する機能を外部の別のプログラムから 呼び出して利用するための手順・規約(API:Application Programming Interface

5.天気概況文の作り方

5-1.天気概況文のURL 以下のURLにブラウザで直接アクセスすれば、天気概況文のJSONデータを確認できます。 ・三重県の天気概況文を取得する https://www.jma.go.jp/bosai/forecast

6.天気図の表示の仕方

6-1.天気図画像ファイル名取得用URL データJSON取得URL:https://www.jma.go.jp/bosai/weather_map/data/list.json カラー天気図のデータ配列は、下記内容になり

7.天気テロップコード一覧表

天気コードに対応した説明文と天気テロップ一覧表を下記に記します。 このコードに対応した抽出プログラムを書きますと、天気予報が作れます。 下記JSONデータのweatherCodesに対応した、天気テロップ画像を表示する形

8.府県天気予報の作り方

8-1.府県天気予報のURL 以下のURLにブラウザで直接アクセスすれば、府県天気予報のJSONデータを確認できます。 ・三重県の府県天気予報を取得する https://www.jma.go.jp/bosai/forec

9.週間天気予報の作り方

9-1.週間天気予報のURL 週間天気予報は府県天気予報と同じファイルに入っていますので、URLは府県天気予報と同じです。 ・三重県の週間天気予報を取得する https://www.jma.go.jp/bosai/for

10.天気予報のWordPress化

10-1.フォルダの設定 WordPressテーマフォルダの直下に、まず下記フォルダを作成します。 ①CSSファイルは、stylesファルダ ②天気アイコンは、wiconフォルダ ③天気説明文は、wtxtフォルダ 10-

11.降水確率の表示の仕方

①5時発表の降水確率 朝6時から6時間ごとに分割されて、翌日の24時までのデータpopsが7個出力されています。 ②11時発表の降水確率 昼12時から6時間ごとに分割されて、翌日の24時までのデータpopsが6個出力され

12.雨雲レーダーの作り方

では早速、雨雲レーダーのコードを見てみましょう‼️🌧️☔⛈️ PHPでgetしたナウキャストjsonデータを変数$baseTimeに代入しています。 <?php  // ナウキャストjsonデータのアドレス $ur

13.日付・曜日の表示の仕方

週間天気予報には、日付・曜日の表示が必要になります。 曜日は、土曜日は青色、日曜日は赤色の表示にします。 では早速、日付・曜日の表示のコードを見ていきましょう‼️ <?php  // 三重県のjsonデータのアドレ

14.夜アイコンの表示の仕方

気象庁の今日の天気予報では、夜になると月アイコンの表示に変わります。 それに伴い表示も、今日の天気から今夜の天気になります。 昼夜変更時刻を17時以降、翌朝5時までを夜として、設定します。 その天気テロップコードは、以下

15.雨雲レーダーのアニメーションの仕方

今回は雨雲レーダーのデータが、3時間前から1時間後まで存在するので、スクロールバーを用いてアニメーションの仕方をご説明いたします。 では早速、雨雲レーダーのコードを見てみましょう‼️🌧️☔⛈️ PHPでgetしたナウキャ