日本語プログラミング言語「なでしこ」公式サイト

天気APIを使ってみよう

Webサイト上ではいろいろなサービスが提供されています。そうしたサービスの中には、自分で作る自作アプリから、そのサービスが提供するデータが使いやすいように、Web APIが公開されていることがあります。例えば、天気など気象情報などが代表です。自作のプログラムで、天気や気温を表示することが可能です。

天気APIとして有名なのが、OpenWeatherMapです。Webサイト自体は日本語に対応していませんが、メールアドレスを登録すると、APIキーが発行され、そのキーを利用して、APIを使えるようになります。ちなみに、無料のプランでは、1分間に60回までAPIを呼びだすことができます。

  • 世界中の天気を提供するOpenWeatherMapのWebサイト

    世界中の天気を提供するOpenWeatherMapのWebサイト

OpenWeatherMap [URL] https://openweathermap.org/

OpenWeatherMap からAPIキーを取得しよう

それでは、APIキーの取得から始めましょう。OpenWeatherMapのサインアップのページにアクセスしてみましょう。サイトは英語ですが、それほど難しいものではありません。

  • ユーザー名とメルアドとパスワードを入力しよう

    ユーザー名とメルアドとパスワードを入力しよう

Username(ユーザー名)、Email、Password(パスワード)、Repeat Password(もう一度同じパスワード)を入力し、「I agree to ...」(サイトポリシーへの同意)と「私はロボットではありません」にチェックして、Create Accountのボタンをクリックします。すると、指定したメールアドレスにメールが送られて、登録が完了します。

続けて、APIキーを知るには、サインインのリンクアクセスし、開発者用のコントロールパネルを開きます。そして、API keysのタブを開きます。キーはいつでも作成したり、削除したりすることができます。ここで、調べたAPIキーをメモしておきましょう。

  • API keysのタブを開いたところ

    API keysのタブを開いたところ

天気APIの使い方

天気APIの使い方は、非常に簡単です。以下のURLにアクセスするだけです。

[書式] 天気を得るAPI

 https://api.openweathermap.org/data/2.5/weather?q={都市}&appid={APIキー}

APIをテストするには、appid={APIキー}の部分を、先ほど取得したキーに書き換え、q={都市}の部分を「q=Tokyo,jp」とか「q=Osaka,jp」などと書き換えます。そして、WebブラウザのURL欄に書き換えたURLを指定してアクセスするだけです。すると、ブラウザの画面に、APIの結果が表示されます。この時の実行結果は、JSON形式となっています。

  • ブラウザでアクセスしたところ

    ブラウザでアクセスしたところ

JSON形式は、{ key1: value1, key2: value2 ... }のような形式のデータとなっているものです。APIにアクセスして得られるデータは、英語ですがこちらのページに詳しい説明があります。

また、上記のAPIのパラメータに、単位(unit)や言語(lang)のパラメータを追加すると、出力結果をカスタマイズすることができます。例えば、以下は、天気を日本語で、また、東京の気温を摂氏で表示します。unitを指定しないと華氏で温度が表示されてびっくりします。APIキー(appid)を指定してブラウザでアクセスしてみてください。

[URL] https://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp&units=metric&lang=ja&appid={APIキー}
  • 言語と単位を指定したところ

    言語と単位を指定したところ

なでしこから利用してみよう

それでは、さっそくなでしこから使ってみましょう。なでしこの簡易エディタを表示して、以下のプログラムを入力して実行してみましょう。

 # APIキーと都市を指定(書き換えてください★) --- (*1)
 APIキー=「c9e9c8a35e44a6d805d865bace4dcbee」
 都市=「Tokyo,jp」
 # URLにパラメータを埋め込む --- (*2)
 URL=「https://api.openweathermap.org/data/2.5/weather?q={都市}&appid={APIキー}&units=metric&lang=ja」

 # APIにアクセス --- (*3)
 URLにGET送信した時には
   # 結果を表示 --- (*4)
    対象をJSONデコードして、Jに代入。
   天気=J["weather"][0]["description"]
   気温=J["main"]["temp"]
   湿度=J["main"]["humidity"]
   「天気: {天気}」を表示。
   「気温: {気温}度」を表示。
   「湿度: {湿度}%」を表示。
 ここまで。

プログラムを実行すると以下のように表示されます。

  • 天気と気温、湿度を表示したところ

    天気と気温、湿度を表示したところ

プログラムを見てみましょう。(*1)では、OpenWeatherMapから得たAPIキーと天気を取得したい都市を指定します。(*2)の部分では、OpenWeatherMapのAPIにパラメータを埋め込んだ、URLを組み立てます。

そして、(*3)の部分『GET送信した時』という命令で天気APIにアクセスします。これは、非同期通信のAjaxという技術を利用する命令です。(*4)の部分にデータを受信した後の処理を記述します。データは変数『対象』に代入されています。JSON形式のデータなので、『JSONデコード』命令を利用して、なでしこで扱えるデータに直し、必要な天気データを取り出して表示するという流れになっています。

天気アイコンも表示してみよう

続けて、少しプログラムを書き換えて、画面に天気アイコンも表示するように、改良してみましょう。

 # APIキーと都市を指定(書き換えてください★)
 APIキー=「c9e9c8a35e44a6d805d865bace4dcbee」
 都市=「Tokyo,jp」# --- (*1)
 # URLにパラメータを埋め込む
 URL=「https://api.openweathermap.org/data/2.5/weather?q={都市}&appid={APIキー}&units=metric&lang=ja」
 画像URL=「https://openweathermap.org/img/w/」

 # AjaxでAPIにアクセス --- (*2)
 URLにGET送信した時には
   対象をJSONデコードして、Jに代入。# --- (*3)
   天気=J["weather"][0]["description"]
   天気アイコン=J["weather"][0]["icon"]
   最高気温=J["main"]["temp_min"]
   最低気温=J["main"]["temp_max"]
   # HTMLを表示--- (*4)
   「<img src="{画像URL}{天気アイコン}.png">」を表示。
    「{天気} / 気温:{最低気温} - {最高気温}度」を表示。
 ここまで。

プログラムを実行し、さらに「HTML出力」ボタンをクリックしてみましょう。すると、天気アイコンを表示するHTMLコードが画面に反映されて、以下のように表示されます。

  • 天気アイコンも加えて表示したところ

    天気アイコンも加えて表示したところ

プログラムを見てみましょう。先ほどと同じですが、(*1)では、天気アイコン画像のURLを指定します。(*2)でAPIにアクセスし、(*3)で天気と天気アイコン、最高気温・最低気温の情報を取り出して、(*4)の部分でHTMLを出力します。

新しいなでしこ簡易エディタでは、「HTML出力」ボタンがついたので、このボタンをクリックすることで、HTMLのコードをブラウザに表示することができます。

Ajax通信『GET送信した時』について

ここで、Ajax通信を行う『GET送信した時』命令について詳しく見てみましょう。まず、以下の書式で記述します。

[書式]

 (URL)にGET送信した時には
     #ここに送信完了時の処理を記述 --- (*a)
 ここまで。

このように書くと、指定したURLにアクセスして、通信完了時に(*a)の部分の処理を行います。もし、通信完了時の処理が不要なら、処理を空っぽにすることもできます。通信が完了して、(*a)の部分を実行する前に、変数『対象』に通信相手のWebサーバから返されたデータが代入されるので、この値を利用した処理を記述できます。

Webサイトのセキュリティについて

ところで、Webブラウザ版のなでしこで行うAjax通信は、Webブラウザのセキュリティポリシーに沿った通信しか行えません。

どういうことかというと、プログラムを動かしているWebサーバと、外部からの通信を特別許可しているWebサーバしか通信できない決まりになっています。例えば、気象情報を提供しているWebサービスはいくつもあるのですが、Webブラウザのプログラム(具体的には、なでしこの親言語であるJavaScript)からのアクセスを許しているWebサービスというのは、それほどありません。

そのため、Ajax通信をしてみて、何も表示されないという時は、Webブラウザの開発者ツールを開いてみてください。以下のように「Access-Control-Allow-Origin」がセットされていないという旨のエラーが表示されていれば、セキュリティの制約により通信できないという意味になります。

  • Ajax通信が失敗した時

    Ajax通信が失敗した時

まとめ

以上、今回は、天気APIを使う方法を紹介しました。OpenWeatherMapを使うことで、日々更新される天気、気温や湿度などの情報をWeb経由で取得して画面に出力することができます。自作プログラムで天気情報を利用したい場合などに役立ちます。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2005年IPAスーパークリエイター認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。