WebAPIに一回だけアクセスして、２回目以降はローカルモックで開発する方法

1 はじめに

WebAPIにアクセスするアプリを作成する場合、本番用サーバだけで開発を行うのは、条件的に難しい場合があります。また、デバッグ用に、受信データを自由に変更したい場合もあります。

今回は、天気予報データをWebAPIで取得するアプリを例にとって、１度だけサーバにアクセスしてデータを取得し、２回目以降はローカルのモックサーバで開発を進める手順を紹介します。

天気予報のデータは、無料でも利用可能なOpenWeatherMapを使用しました。

こちらのサービスは、APIキーを取得することで無料でも利用が可能ですが、無料枠では、 「１つのデバイスからのリクエストは10分に１回に抑える」「リクエスに失敗したら10分間は再リクエストを控える」などの制限が設けられています。 http://openweathermap.org/appid#get

このような場合、サーバへのアクセスを頻繁に行って開発を進めることは、避けなければなりません。それでは、早々にモックサーバーを準備してみましょう。

2 天気情報の取得

まず、最初に、WebAPIからデータを取得するために下記のコードを作成しました。

NSString *API_KEY = @"26axxxxxxxxxxxxxxxxxxxxxxxxxcca2";
NSString *hostname = @"api.openweathermap.org";
NSString *url = [NSString stringWithFormat:@"http://%@/data/2.5/weather?q=Tokyo,jp&units=metric&APPID=%@", hostname, API_KEY];
AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
[manager GET:url
  parameters:nil
    progress:nil
     success:^(NSURLSessionTask *task, id responseObject) {
         NSData *data = [NSJSONSerialization dataWithJSONObject:responseObject options:2 error:nil];
         NSString *json = [[NSString alloc]initWithData:data encoding:NSUTF8StringEncoding];
         NSLog(@"json string: %@", json);
     } failure:^(NSURLSessionTask *operation, NSError *error) {
         NSLog(@"ERROR");
     }
];

上記では、取得したJSONデータを文字列にデコードしてログに出力しています。 これを実行すると、図のように取得したデータがログに出力されます。

ログに出力された文字列は、整形すると次のようになっています。
JSON整形

{
  "base": "stations",
  "id": 1850147,
  "dt": 1468400024,
  "main": {
    "humidity": 94,
    "temp_max": 28.89,
    "temp_min": 25,
    "temp": 26.65,
    "pressure": 999
  },
  "coord": {
    "lon": 139.69,
    "lat": 35.69
  },
  "wind": {
    "speed": 2.1,
    "deg": 130
  },
  "sys": {
    "id": 7619,
    "message": 0.0151,
    "country": "JP",
    "type": 1,
    "sunset": 1468403883,
    "sunrise": 1468352145
  },
  "weather": [
    {
      "id": 520,
      "main": "Rain",
      "icon": "09d",
      "description": "light intensity shower rain"
    },
    {
      "id": 701,
      "main": "Mist",
      "icon": "50d",
      "description": "mist"
    }
  ],
  "visibility": 6000,
  "clouds": {
    "all": 75
  },
  "cod": 200,
  "name": "Tokyo",
  "rain": {
    "1h": 0.25
  }
}

ここで取得したデータは、とりあえず保存しておきましょう。

3 node-easymock

続いて、ローカルにモックサーバを立てるのですが、今回は、node-easymockを利用させて頂きました。
https://github.com/CyberAgent/node-easymock

(1) インストール

node-easymockは、下記のコマンドで階層下のディレクトリにインストールされます。

$ npm install easymock

インストールが成功すると、node_modulesの下に、easymockがインストールされていることを確認できます。

ls -la node_modules/
total 0
drwxr-xr-x   4 sin  staff  136  7 13 18:04 .
drwxr-xr-x   3 sin  staff  102  7 13 18:04 ..
drwxr-xr-x   3 sin  staff  102  7 13 18:04 .bin
drwxr-xr-x  13 sin  staff  442  7 13 18:04 easymock

(2) レスポンス作成

続いて、サーバから返すレスポンスを設定します。

アクセスしたいURLが /data/2.5/weather なので、/data/2.5/ のフォルダを作成して、その中に weather_get.json を作成します。 そして、その中に先ほど取得したデータを入れます。

$ mkdir data;mkdir data/2.5
$ echo '{"base":"stations","id":1850147,"dt":1468400024,"main":{"humidity":94,"temp_max":28.89,"temp_min":25,"temp":26.65,"pressure":999},"coord":{"lon":139.69,"lat":35.69},"wind":{"speed":2.1,"deg":130},"sys":{"id":7619,"message":0.0151,"country":"JP","type":1,"sunset":1468403883,"sunrise":1468352145},"weather":[{"id":520,"main":"Rain","icon":"09d","description":"light intensity shower rain"},{"id":701,"main":"Mist","icon":"50d","description":"mist"}],"visibility":6000,"clouds":{"all":75},"cod":200,"name":"Tokyo","rain":{"1h":0.25}}' > ./data/2.5/weather_get.json

レスポンス用のJSONファイルに < @headerを追加すると、ヘッダーを付与することもできます。 < @header Location: http://www.pa-rk.co.jp/

(3) config.jsonの設置

node-easymockを起動するディレクトリにconfig.jsonを作成します。内容は、とりあえず下記のようなもので大丈夫です。

$ echo '{ "simulated-lag": 1000 }' > config.json

simulated-lagは、応答待ち時間の設定です。特定のパスごとに、応答待ち時間を設定することも可能です。

(4) easymockの起動

下記のコマンドでeasymockは起動できます。 起動すると、デフォルトでポートで3000で接続を待ち受けます。

$ node_modules/easymock/bin/easymock
Server running on http://localhost:3000
Listening on port 3000 and 3001
Documentation at: http://localhost:3000/_documentation/
Logs at:          http://localhost:3000/_logs/

-p オプションで任意のポート番号を指定することも可能です。 $ easymock -p 3001

ブラウザで接続すると、モックサーバから応答が返ってきていることを確認できます。

この時、コンソールには、次のようなアクセスログも出力されています。

==> /tmp/WeatherInformationSample-mock//data/2.5/weather_get.json

4 接続先の変更

モックサーバが準備できたので、接続先を http://localhost:3000 に変更します。

変更後も、本物のサーバにアクセスした時と同じようにレスポンスを得ることができています。上の図では、モックサーバーのログも確認されています。

なお、この際、シュミレーターであれば、接続先はlocalhostでいいですが、、実機で動作確認する場合は、node-easymockの動作する端末と、実機（iPhone端末）を同じWifiアクセスポイントに接続し、node-easymockのIPアドレスを指定する必要があります。

5 実装

接続先がモックになったので、遠慮なくアクセスが可能です。 下の図は、天気アイコンと幾つかの情報を表示してみたものです。

レスポンスは、先のJSONを編集することで、自由に変更できますので、気分が良いように晴天にしておきました。

6 最後に

今回は、モックサーバーとしてnode-easymockを使用させて頂きました。

いつでも、このようなモックサーバーを軽易に立ち上げられるように、日頃から準備しておきたいと感じました。

参考までに、作成したサンプルは、ここに置いておきます。
[GitHub] WeatherInformationSample

7 参考資料

https://github.com/CyberAgent/node-easymock
OpenWeatherMap
OpenWeatherMap で気象情報をゲットしよう
JSON整形