WebAPIの使い方を学ぼう~天気情報をChatWorkに送信~

はじめに

私はWeb系のエンジニアでは無いのですが、IT業界で働いていると良く”API”や”REST”などという言葉を耳にします。
なにやらWebのサービスを利用することができるらしいということは知っていたのですが、
使い方もよくわからないし何かとっつきにくい印象があり、手を付けていませんでした。
とは言っても、企業の運用するあらゆるシステムは、ローカルのシステムと外部のシステムを連携させているものがほとんどです。
開発や運用などに携わる場合は避けては通れない道です。
なのでそうした場面に備えるためにWebAPIについて、実際にプログラムを組んで使い方を知り、理解を深めていきたいと思いました。
私と同様にWebAPIは知ってるけど使ったことが無い方や、どこかとっつきにくいと感じている方、これからWeb系に進みたい方に読んで頂き、疑念を払拭し、WebAPIの使い方を覚えて頂くことを目的としています。

WebAPIとは

WebAPIとは、Google、FaceBook、Amazonなどインターネット上の様々なサービスの一部の機能を利用するためのインターフェースになります。
Googleでは地図情報を取得して利用できるGoogle Maps APIがあります。
Google Maps APIを使えば、自分のサイトに地図を掲載させることが可能になります。
他にもLINEやChatWorkなどのチャットツールもWebAPIを用意していますので、それらを利用してメッセージを送信したり等連携が可能となります。
上記のような既存サービスを利用することができるので、サービスの向上やセキュリティ向上を図ることが可能になります。

WebAPIを使ってみよう

今回は「OpenWeatherMap」のAPIと「ChatWork」のAPIを使って、
天気情報をChatworkに送信するプログラムを作成していきたいと思います。
使用する開発環境はGAS(Google Apps Script)にします。
Googleに登録していれば無料で利用できますし、ライブラリも豊富です。（ChatWorkのAPIと連携できるライブラリも用意されています。）
また開発環境も用意されていますので大変便利です。
もし使ったことが無い方であれば是非ここで使い方を知ってもらえれば良いなと思います。
プログラムを学ぶにも最適なツールです。
では早速開発していきましょう。

前準備

Google Apps Script準備

Googleアカウントにログインして頂いた後、新規でプロジェクトを作成しておいてください。
プロジェクトの名前は任意で構いません。
詳しい手順やGASの基本的な使い方については本記事では割愛致します。
参考URLを参考にしてください。

OpenWeatherMapからAPIキー取得

次に天気情報を取得するためにOpenWeatherMapに登録しましょう。
OpenWeatherMapは無料で使える気象情報APIサービスで、現在の気象情報（天気、気温、風速、雲量、日の出、日の入り、国、都市名など）を取得することが可能になります。
登録後にAPIキー（APIに接続するための番号）を取得することができるようになります。
登録の方法や使い方については本記事では割愛致します。
簡単に登録できますので、参考URLを参考にして頂ければと思います。

ChatWorkからAPIキー取得

ChatWorkは、無料のチャットサービスになります。
企業などで使われていることが多いという印象です。
ChatWorkに登録されていない方は登録してください。
詳しい登録方法やChatWorkの使い方に関しては参考URLを見て頂きたいです。
本記事ではAPIキーの取得方法のみ紹介します。

1.ChatWorkに登録、ログインします。
2.右上に自分の写真アイコンが表示されていますが、その右側のプルダウンからサービスから「サービス連携」を押下します。
3.リストから「APIトークン」を選択すると、パスワードが聞かれますので、入力します。
4.APIキーが表示されますので、コピーして使ってください。
以上が前準備となります。

天気情報を取得

ではスクリプトを書いていきましょう。
まずはOpenWeatherMapのAPIを使って、天気情報を取得してみましょう。
以下が私の書いたプログラムになります。

function weather() {
/* openweatherから天気情報取得 */
var response = UrlFetchApp.fetch(“api.openweathermap.org/data/2.5/weather?q=Chiba&appid={APIキーを設定}&lang=ja&units=metric”);
Logger.log(response);
}

上記ポイントは、GASのメソッドである「UrlFetchApp.fetch」を使いURLとパラメータを設定して、
天気情報を取得しています。
UrlFetchApp.fetchメソッドを使うと、HTTPリクエストであるGETやPOSTなどが可能になります。
デフォルトはGETになっておりますので、今回は情報を取得するのみになりますので特にメソッドを指定する必要はありません。
GASのメソッドの詳しい説明は本記事では割愛します。
URLに関してはOpenWeatherMapのサイトからAPI用のURLを取得することが可能です。
パラメータは、”&”（アンド）で繋いで複数個設定できます。

q：ここには天気情報を知りたい都道府県を設定します。
appid：APIキーを設定します。
lang:言語設定になります。デフォルトは英語になっておりますので、日本語の場合は、「ja」と設定します。
units:温度の表記になります。デフォルトは華氏になっていますので、「metric」と設定し摂氏にします。

最後にLogger.logメソッドでログを取得しています。
実行後Ctrl+enterを押下するとログが確認できます。
結果が以下になります。

2020/10/06 11:40:52 情報 {cod=200.0, weather=[{description=曇りがち, id=803.0, icon=04d, main=Clouds}],
visibility=10000.0, coord={lat=35.6, lon=140.12}, dt=1.601952052E9, base=stations, id=2113015.0, clouds=
{all=75.0}, wind={speed=2.1, deg=50.0}, sys={sunrise=1.601930291E9, country=JP, type=1.0, id=8077.0,
sunset=1.601972211E9}, timezone=32400.0, main={humidity=49.0, temp_max=297.04, temp_min=294.15,
pressure=1015.0, feels_like=294.39, temp=295.5}, name=千葉市}

気象情報がJSON形式で取得されます。
このデータの中から必要な情報のみ取得して使っていきたいと思います。
データの詳しい説明は参考URLを確認して頂きたいですが、
今回は、weather=のdescription（天気情報）とmain=のtemp（温度）のみを利用します。
以下が必要な情報のみ取得したプログラムになります。
上記で紹介したプログラムを改修しています。

function weather() {
① /* openweatherから天気情報取得 */
② var response = UrlFetchApp.fetch(“api.openweathermap.org/data/2.5/weather?
③q=Chiba&appid=46c1b8b3baea15cc54581b2bd5db19c9&lang=ja&units=metric”);
④ var json=JSON.parse(response.getContentText());
⑤ Logger.log(json[“weather”][0][“description”]);
⑥ Logger.log(json[“main”][“temp”]);
⑦}

ポイントは④で、JSON.parseメソッドを使って、取得した文字列情報をJSON形式で解析して、利用できる状態にしています。JSONは連想配列のように値が格納されていますので、欲しい値を示す場合は以下のように指定してあげます。

[“weather”][0][“description”]

詳しく説明します。
先程のログを見て欲しいのですが、値は配列構造で格納されています。
最初の大きい波括弧の中にcod、weather、visibility、dt、baseなどの最初の配列名があります。
欲しい情報はweatherのdescriptionになりますので、
weatherを指定します。→ json[“weather”]
次にweatherの中を見ていきましょう。
weather=[{description=曇りがち, id=803.0, icon=04d, main=Clouds}]
となっており、括弧[]の中に波括弧{}が入っているのがわかります。
この括弧[]も配列として指定しなければなりません。
これにはkeyの値がありませんので、0を指定してあげます。（最初の添え字）→ json[“weather”][0]
最後に波括弧{}の中のdescriptionを指定してあげることで値を取得することが可能になります。→
json[“weather”][0][“description”])
temp（温度）に関しても同様の手順で取得しましょう。
結果は以下になります。

[20-10-06 16:39:24:915 JST] 曇りがち
[20-10-06 16:39:24:918 JST] 21.89

欲しい情報のみ取得されています。
以上がGASとOpenWeatherのAPIを使った天気情報の取得方法になります。
次に上で取得値を整形し、Chatworkのマイチャットに送信してみましょう。

ChatWorkに送信

以下先程のプログラムを改修したものになります。

①function weather() {
② /* openweatherから天気情報取得 */
③ var response = UrlFetchApp.fetch(“api.openweathermap.org/data/2.5/weather?
④q=Chiba&appid=46c1b8b3baea15cc54581b2bd5db19c9&lang=ja&units=metric”);
⑤ var json=JSON.parse(response.getContentText());
⑥ Logger.log(json[“weather”][0][“description”]);
⑦ Logger.log(json[“main”][“temp”]);
⑧ /* チャットワークに送る文字列のヘッダー */
⑨ var strBody = “[info][title]” +”千葉の天気”+”[/title]”;
⑩ strBody = strBody + “今日の天気： ” + json[“weather”][0][“description”]+” “;
⑪ strBody = strBody + “温度： ” + json[“main”][“temp”];
⑫ strBody = strBody + “[/info]”;
⑬ /* チャットワークに送信 */
⑭ var cwClient = ChatWorkClient.factory({token:”3267f649dbdf2d04538cf26e00a5c692″});　//チャットワーク
⑮API
⑯ cwClient.sendMessageToMyChat(strBody)
⑰}

①~⑦は先ほどと一緒になりますので割愛します。
⑧~⑫ですが、こちらはチャットワークに送信する本文を作成しています。
⑨で[info]、⑫で[/info]を指定していますが、infoを指定すると大枠が表示され、その中に文字を記載した形で表示されます。
titleの中に文字を記載するとタイトルは本文とは別に表示されます。
4回に分けて本文を変数に入れていますが、チャットワークに表示させる際に、一行づつ改行させる意図がありました。
調べた結果、改行する方法もあるにはあるようなのですが、今回は掘り下げませんでした。
⑬~⑯でチャットワークに送信しています。
GASにはChatworkと連携するためのライブラリがあり、今回はそれを使用しています。
HTTPリクエストのPOSTなどを使った方法もあるようですが、今回は使用しませんでした。
⑭ChatWorkClient.factoryメソッドにAPIキーを設定して、インスタンス化しています。
⑯でsendMessageToMyChatメソッドを使い、本文を引数にして、メッセージを送信しています。

結果は以下になります。

無事にチャットワークにメッセージが送信されましたか？
以上がWebAPIを使ったプログラムとなります。
最後に余力があれば作成したプログラムをトリガーに設定しておくと良いです。
トリガーに設定しておくと、任意の時間置きにスクリプトを自動実行してくれます。
私は一時間置きに、ChatWorkのマイチャットに天気情報が届くようになっています。
詳しい手順に関しては、参考URLを参照してください。

最後に

いかがでしたでしょうか？
少々とっつきにく印象のあるWebAPIですが、意外と簡単なものでした。
API自体の使い方はただURLとAPIキーを設定するだけで簡単に接続できました。
プログラムの作成を通して、WebAPIの使い方を少しでも学んで頂けたなら幸いです。
今回はGASを使ってのWebAPI連携となり、HTTPリクエストのメソッドを使用できなかったので、
そういった点は課題が残ります。興味があればやってみてください。Webに関する理解が深まるはずです。