WebAPIを呼び出す方法【Node.js】

2021年6月12日

世界にはたくさんのWebAPIがあります。その中でも今回は気象情報を提供しているWebサービスを題材にしたプログラムを紹介します。

基本的にはこの方法を応用することで他のWebAPIでも呼び出せます。
多くの場合、APIの利用にはキーの取得が必要です。

データの流れ

これまでと異なり他所のデータを取得することになります。データが返ってくるまでは結果を返すことはできません。やってもいいけど意味がありません。

実行イメージ

asyncについて

今回はasync（えいしんく）を使ってみます。Node.jsでは非同期実行で処理されますが、asyncを使うと処理のブロックを順番に処理することができるようになります。ちょっと面倒ですが、最近の言語はこのパターンが多いので慣れておいて損はありません。

プログラム

var http = require('http');
var express = require('express');
var async = require('async');
var app = express();

// EJS設定
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

var location = "Tokyo, JP";
var units    = 'metric';
var APIKEY   = "取得したAPIキーを書いてね";
var URL      = 'http://api.openweathermap.org/data/2.5/weather?q='+ location +'&units='+ units +'&appid='+ APIKEY +'&lang=ja';

app.get('/', function (req, response) {
  async.waterfall([
    function(next) {
      http.get(URL, function(res) {
        var body = '';
        res.setEncoding('utf8');
        res.on('data', function(chunk) {
          body += chunk;
        });
        res.on('data', function(chunk) {
          data = JSON.parse(body);
          next(null, data);
        });
      }).on('error', function(e) {
        console.log(e.message);
      });
    }
  ], function complete(err, data) {
    var comment = "";
    if (data.main.temp > 30) {
      comment = "あつい";
    } else {
      comment = "さむい";
    }
    res.render('index', { temp: data.main.temp
                        , pressure: data.main.pressure
                        , message: comment});
  });
});

app.listen(3000, function () {
});

これまでとは異なり、サーバ側プログラム自身がGETリクエストをすることになります。30度を超えていると「あつい」としています。それ以下だと「さむい」と語ることになっています。if文の使い方の説明を兼ねています。

HTML

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>東京の気象情報</title>
</head>
    <body>
        <nav class="navbar navbar-dark bg-primary mb-2">
            <a href="#" class="navbar-brand">東京の気象情報</a>
        </nav>
        <div class="container">
            <form action="/" method="POST">
                <div class="form-group">
                    <label for="text1">気温:</label>
                    <input type="text" id="temp" value="<%=temp %>" name="temp" class="form-control">
                </div>
                <div class="form-group">
                    <label for="text2">気圧:</label>
                    <input type="text" id="pressure" value="<%=pressure %>" name="pressure" class="form-control">
                </div>
                <div class="form-group">
                    <label for="text3">お知らせ:</label>
                    <input type="text" id="message" value="<%=message %>" name="message" class="form-control">
                </div>
            </form>
        </div>
    </body>
</html>

HTMLはこんな形です。特に変わったところはありませんね。

まとめ

WebAPIを使うのは簡単ですが、気をつけましょう。

システム開発

Posted by @erestage