【PHP】ホームページに天気予報を表示させる方法【Webスクレイピング】【初心者向け】

ホーム
バックエンド
【PHP】ホームページに天気予報を表示させる方法【Webスクレイピング】【初心者向け】

バックエンド

2018.11.7

【PHP】ホームページに天気予報を表示させる方法【Webスクレイピング】【初心者向け】

とある方

これから冬になると、雪が降ることが多いから、ホームページに天気予報をのせておいたほうがいいと思うんです。

先日とある方よりいただいたご要望。

確かに冬になれば、地域によっては雪が降り積もりますし、梅雨になれば、雨ザーザーになっちゃいますし。

アオキ

ホームページに天気予報を表示させたいという方は意外に多いのかもしれないなぁ

と思い、

さくっとつくってみましたのでその時の方法をまとめてみることにしました。

ホームページに天気予報を表示させる方法

天気予報といえば、Yahoo天気やウェザーニュースなどが有名と思いますが、

毎日毎日そういったサイトに行って、

天気予報をチェックして、
自分のホームページに掲載するというのは、

できないことはないけれどさすがにしんどく、手間暇かかってしまいます。

そんな時に便利なのがプログラミング。

天気予報のサイトからその日のデータをひっぱってきて、
自分のホームページに掲載させるということが簡単にできてしまいます。

もちろん毎日データを書き換えるといった手間も不要。

一度プログラミングをつくっておけば、
何かしらトラブルがなければ、
四六時中いっときも休まずに、勝手に情報を更新してくれます。

アオキ

プログラミングってめっさ便利ですね・・

ということで、天気予報の情報をとってくるプログラミングの方法を、今回は『PHP』で解説してみます。

ホームページに天気予報を表示させる方法は2通り

ホームページに天気予報を表示させる方法は大きく2通りあります。

APIを使用する
Webスクレイピング(ホームページに表示されているデータの抽出

まず1の『API』というのは、

アプリケーションプログラミングインターフェースの略で、

今回の場合は天気予報のサイトが、外部サイトにもデータを提供できるようにしている仕組みのことです。

有名な天気予報関連のAPIとして、

OpenWeatherMap
WeatherUnderGround
Forecast
LiveDoor天気予報

などがあります。

参考記事

Qiita

気象情報API比較してみた - Qiita

https://qiita.com/Barbara/items/93ae7969691164c7c2bc

#はじめに気象情報APIを利用する機会があったのでAPIをいくつか比較したところ、思った以上に情報にばらつきがあったり、情報量に差があったりしたので表にまとめてみました。

API利用の注意点として、

商用で使う場合は有料だったり
1日の無料アクセス回数が決まっていたり

します。

LiveDoor天気予報がいいかなと思ったのですが商用有料ということで断念。

OpenWeatherMapを検討したのですが、

表示させたい地域の天気予報がなかったこともあり、

今回はAPIを使うことは断念し、

2番目のWebスクレイピングでデータを抽出することにしました。

ホームページに天気予報を表示させるために「Webスクレイピング」

Webスクレイピングはホームページからデータを抜き取る方法。

どのホームページを使えばいいのかなと思いググってみると、

どうやら気象庁のWebデータは、2次利用OKということを発見。

blog.pixela.co.jp

無料商用可能な天気予報APIの比較 – PIXELA Developers Blog

~~https://blog.pixela.co.jp/2017/11/30/無料商用可能な天気予報apiの比較/~~

アオキ

こりゃ決まりだね。

天気予報を表示させたい地域もあったので即決。

要望いただいたホームページはレンタルサーバーだったので、プログラム言語は迷わず『PHP』を選択。

※個人的にはWebスクレピングといえばPythonだと思ってますが、
いかんせんレンタルサーバーで動かすには向いていないので、
格安レンタルサーバーなら素直に『PHP』でいいと思います。

ググって、『phpquery』なるライブラリ(便利ツール)があることを発見。

ほとんどこの記事の通りに実施して天気予報の情報を収集することができました。

参考記事

Qiita

【php】webサイトから、欲しい情報を3行で取得する方法 - Qiita

https://qiita.com/dia/items/3cf963fa89b08b87e8ef

「webサイトから欲しい情報だけを集めたい」そんなことはありませんか？「スクレイピング」という技術を使うことによって、カンタンにwebサイトから欲しい情報を取得することが出来ます。#スクレイピングとは>WebサイトからWeb...

phpqueryサイトからphpファイルをダウンロードして、

code.google.com

https://code.google.com/archive/p/phpquery/downloads

任意の場所において、『PHP』のinclude_once() 関数でファイルを読み込んで、

file_get_contents()関数で天気予報が掲載されているページのURLを読み込んで、

$html = file_get_contents("https://www.jma.go.jp/jp/yoho/334.html");

あとはphpQueryの使い方にあわせて、こんな感じでデータを出力すればOKです。

echo phpQuery::newDocument($html)->find("h1")->text();

深い階層にあるデータは、

グーグルクロムのデベロッパーツール「右クリックで検証、もしくはF12キー」

で確認しながら調整していくとOKです。

今回の場合はこういったコードになりました。

 echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(0)")->text();

最後の ->text() を省くと、HTMLが出力されるようです。

アオキ

天気予報と言ったらやっぱり晴れ・曇・雨のマークがいるっしょ

っと思い、画像も持ってくることにしました。

echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(0)")->find("img");

最後に ->text() が書かれていないので、HTMLのまま出力されるのですが、

画像は相対パスだったためそのままでは持ってこれず・・

よくよく画像ファイルのURLを見ると、

https://www.jma.go.jp/jp/yoho/img/201.png

といったURLだったので、最後の番号を101とか 203 とか推測しながら画像収集しました。
(まるっと取得できる方法もあったはずなので探しておきます。)

また、降水確率の箇所が 00-06時、06-12、12-18、 18-24、と記載があり、一行でつなげると流石に見づらかったので、

explode() 関数で、”%”の箇所で区切りつつ、%をつけつつ、
タグで改行させています。

今回の天気予報データの取得はこんなコードになりました。

<?php
  require_once("./phpQuery-onefile.php");
  $html = file_get_contents("https://www.jma.go.jp/jp/yoho/334.html");

  if(!isset($html)){

  }else{

  echo '<table class="weather_info">';

  echo '<tbody>';
  echo '<tr>';
  echo '<td></td>';
  echo '<td>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(0)")->text();
  echo '<br>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(0)")->find("img");

  echo '</td>';
  echo '<td>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(1)")->text();
  echo '<br>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("th.weather:eq(0)")->find("img");
  echo '</td>';
  echo '</tr>';

  echo '<tr>';
  echo '<td></td>';
  echo '<td>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.info:eq(0)")->text();
  echo '</td>';
  echo '<td>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.info:eq(1)")->text();
  echo '</td>';
  echo '</tr>';

  echo '<tr>';
  echo '<td>降水確率</td>';
  echo '<td>';
  $rain_0day = phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.rain:eq(0)")->text();
  $rain_array_0day = explode("%", $rain_0day);
  echo $rain_array_0day[0] . "%" . "<br>";
  echo $rain_array_0day[1] . "%" ."<br>";
  echo $rain_array_0day[2] . "%" ."<br>";
  echo $rain_array_0day[3] . "%" ."<br>";

  echo '</td>';
  echo '<td>';  
  $rain_1day = phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.rain:eq(1)")->text();
  $rain_array_1day = explode("%", $rain_1day);
  echo $rain_array_1day[0] . "%" . "<br>";
  echo $rain_array_1day[1] . "%" ."<br>";
  echo $rain_array_1day[2] . "%" ."<br>";
  echo $rain_array_1day[3] . "%" ."<br>";

  echo '</td>';
  echo '</tr>';

  echo '<tr>';
  echo '<td>気温予報</td>';
  echo '<td>';
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.temp:eq(0)")->text();
  echo '</td>';
  echo '<td>';  
  echo phpQuery::newDocument($html)->find("#base")->find("#main")->find("div")->find("#forecasttablefont")->find("td.temp:eq(1)")->text();
  echo '</td>';
  echo '</tr>';


  echo '</table>';

  }
?>

見た目はこんな感じ。

※CSSははしょってます。