# Make でAPIから情報取得する

## 1. LINE BotからJSONを受け取る
さきほど、Chromeで直接APIにアクセスしてJSON文字列を見ましたが、今度は「Make」からこのAPIにアクセスしてみます。

まずはJSON文字列を取ってくるための新しいモジュールを追加します。画面下の `Add` をクリックしてください。

[](https://gyazo.com/5ce413c0901b1b279e7b4a57d0e12dc1)

`http` を入力すると `HTTP` モジュールが表示されます。これを選択します。

[](https://gyazo.com/d44660b37f88ff8b7c73220f77cbf392)

さらにメニューが表示されるので、`Make a request` を選択しましょう。

[](https://gyazo.com/242efdcb28bddaf999c658321b72a92a)

HTTPモジュールが選択されたら、LINEモジュールの間にこのHTTPモジュールを組み込みます。
まずは、LINEモジュールを繋ぐ点線あたりにあるスパナのアイコンをクリックして `Unlink` を選択してください。

[](https://gyazo.com/a0b39dada6981181726d1eae232ab1eb)

その後、`Watch Events` のLINEモジュールの右側を `HTTP` モジュールの左側に、`HTTP` モジュールの右側を `Send a Reply Message` のLINEモジュールの左側に繋げてみましょう。
完成すると、このような状態になります。

[](https://gyazo.com/ca5f7120c2ed871e162e5ce91b11ab86)

準備が整ったので、HTTPモジュールの設定をします。
まずは、さきほどChromeのURL欄に入力したURLをこのモジュールに設定してみます。HTTPモジュールをクリックし、表示されたメニューの `URL` 欄にさきほどのURLをペーストしてみてください。

[](https://gyazo.com/fa0bdd5821e9f499f6c3210f4452a5f0)

[](https://gyazo.com/20c0521bf3c9583de17a770c5fdc1714)

`Send a Reply Message` のLINEモジュールにも少し手を加えます。モジュールをタップしたあとに `Text` を選択すると、さきほどはなかった `HTTP` のメニューが増えているはずです。この中の `Data` を選択してみましょう。

[](https://gyazo.com/24d53da67009f0a8d45280e4f108105d)

全体が完成すると、このような見た目になります。

[](https://gyazo.com/b9898704be849869f70668ed4f5a2ac0)

画面左下の `Run once` をクリックして、LINEからBotへ何かメッセージを送ってみましょう。
成功すると、さきほどChromeでみたものと同じJSON文字列がBotからメッセージとして送られてくるはずです。

## 2. LINE　Botへ特定の文字列を送って、それに応じたJSONを受け取る

現状は固定のJSONしか送ってこないBotですが、こちらからのメッセージに応じて返してもらうJSONを変えることができます。
今回使った「お天気API」は、

**<https://weather.tsukumijima.net/api/forecast?city=地点ID>**

のように、 `?city=地点ID` という形式の文字列をURLの後ろにつけることで、地点に応じた情報を返却してくれます。ちなみにこのような `?city=` といったオプションのことを **クエリパラメーター** といいます。

さきほどのシナリオを「地点IDを送ると、その地点の天気情報をJSONで返す」ものに変更してみます。

HTTPモジュールをクリックして開き、URLを `https://weather.tsukumijima.net/api/forecast` に変更します。
次に `Query String` メニューを開いて、`Name` に `city` 、`Value` に `Events[] -> Message -> Text` を選択します。

[](https://gyazo.com/5d6215bd457d6f8c07a0e3805267fdc6)

最終的な見た目はこのようになります。

[](https://gyazo.com/4838b646c0317feab731dc792f843cfd)

この状態で、LINE Botから任意の地点IDを送ってみましょう。地点IDのリストは `https://weather.tsukumijima.net/primary_area.xml` から確認できます。
Botに東京の地点ID `130010` と送ると、それに応じた東京の天気情報のJSON文字列が返却されるようになりました。別の地点IDを送っても、同様にそのIDに応じた場所のJSON文字列を返却してくれます。

[](https://gyazo.com/28b24bd28841cb00b9e8809711f22727)

[](https://gyazo.com/d89b8a5f5250339d6363d19ff41c5af1)

[](https://gyazo.com/928658bc083cf2db3b0e1d4054b4a667)

[](https://gyazo.com/59e28a5c64021b967846d3ef6716f58f)

[](https://gyazo.com/946136ab37f4d6d92b0dbfa7e772a62c)

[](https://gyazo.com/615d24a611e737a46512b5d45c67241e)

[](https://gyazo.com/040309ac980d05de52c1ab029c4cc123)

おめでとうございます！自分でAPIからデータを取得し、そのJSONをMakeで読み込めるように構造を定義し、自分で活用するところまでできました！