Delphi Community Edition Meet up ! - REST 編

これは、2018年8月3日に行なった Delphi Community Edition Meet up ! で行なった REST 関連のデモの記事です

Delphi の Community Edition では Starter では使用できなかった REST コンポーネントを使って、REST を使った Web サービスにアクセスできます。
個々の説明は、[docwiki - REST クライアントライブラリ](http://docwiki.embarcadero.com/RADStudio/Tokyo/ja/REST_%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88_%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA)  を見ていただくとして...

ひとつひとつコンポーネントを置き、プロパティを設定して Web サービスとの接続等々を行なうのですが、Delphi には REST デバッガという便利なツールが付属しています。この REST デバッガを使用すると、予め確認した内容をプロパティに設定したコンポーネントを生成してくれるので、容易に REST クライアントアプリケーションを作ることができます。

## 今回使用した Web サービス
[NHK 番組表 API](http://api-portal.nhk.or.jp/) を使用しました。
この中にある Program List API という、地域、サービス、日付を指定して、該当する条件の番組リストを取得します。

Request API は以下の形式 (地域=東京のラジオ第一の番組を取得しています)

```html
http://api.nhk.or.jp/v2/pg/list/130/r1/2018-08-07.json?key=_ENTER_YOUR_KEY_
```
_ENTER_YOUR_KEY_ の箇所は、このサービスに登録すると個々に発行されます。(今日は8/7なので日付のところが 8/7です)

## REST デバッガを起動
Delphi IDE のメニューから「ツール | RESTデバッカ」を選択して起動します。
![REST01.png](https://qiita-image-store.s3.amazonaws.com/0/164551/31b46d8a-5a3e-1660-178e-2bb3ebceaaae.png)

## REST デバッカで JSON データを取得するよ
1. REST デバッカの URL の箇所に Request API の URL を入力します (APIキーは個人のものなので、消しています)
![REST02_1.png](https://qiita-image-store.s3.amazonaws.com/0/164551/8eebf6a0-8820-1133-04f1-fdd1229c90ec.png)

2. 「要求の送信」をクリックします
3. 正しく通信が行なわれると「応答」の箇所に情報が表示されます
![REST03_1.png](https://qiita-image-store.s3.amazonaws.com/0/164551/038a73f0-a4c1-99a3-6819-42cb28c1b04b.png)

4. 表データのタブに切り替えます
5. 取得した JSON データがネストしている場合は、ネストのチェックボックスにチェックをつけて、表内の項目名の箇所をマウスでクリックすると「JSON ルート要素」のところに、その名前が入ります
6. 「適用」をクリックするとネストされているデータが表示されます
![REST03_2.png](https://qiita-image-store.s3.amazonaws.com/0/164551/ca1015e6-87d3-4582-adcc-d07de3f60a1d.png)

7. 更にネストとしている場合は同じ動作を繰り返します
8. 表データとして情報が取得できていることが確認できます
![REST04.png](https://qiita-image-store.s3.amazonaws.com/0/164551/4b82d08f-866a-85e0-eda1-682a0ea4b731.png)

## Delphi のアプリケーションで同じように JSON データを取得するよ
1. 8 の手順の続きとして「コンポーネントのコピー」のボタンをクリックします
2. クリップボードに設定済みの各コンポーネントがコピーされます
![REST05.png](https://qiita-image-store.s3.amazonaws.com/0/164551/1e8155a1-3048-dffe-b07a-73f1e9d6f816.png)

3. 今回のデモでは FireMonkey で作成したので Delphi の IDE に戻り「ファイル｜新規作成｜マルチデバイスアプリケーション - Delphi」で新規プロジェクトを作成し、次の画面では「空のアプリケーション」を選択します
![REST07.png](https://qiita-image-store.s3.amazonaws.com/0/164551/8b5f7e1c-2e92-0fcf-471d-ad7453bd3d38.png)![REST08.png](https://qiita-image-store.s3.amazonaws.com/0/164551/fdf8afe2-6871-790a-385a-3692372a6a4a.png)
4. 真ん中にあるフォームをマウスでクリックしてから Ctrl + V でクリップボードに保存されているコンポーネントをフォーム上に貼り付けます
![REST09.png](https://qiita-image-store.s3.amazonaws.com/0/164551/ecb4a022-3d6d-46e5-95ef-5af6957387bf.png)

5. 最終的に読み込まれたデータはメモリデータセットを扱う FDMemTable1 コンポーネント内に格納されますので、この FDMemTable1 コンポーネントと表示用のコンポーネントを Visual Live Binding で結び付けます
6. 表示用の StringGrid をツールパレットからドラッグアンドドロップしてフォームに貼り付けます
7. ついでに後で使う Button も同様にツールパレットからドラックアンドドロップして貼り付けます
![REST10.png](https://qiita-image-store.s3.amazonaws.com/0/164551/c7ecee05-37d6-8d65-a5c3-84f25a0141fa.png)

8. RestRequest1 コンポーネントをクリックして、オブジェクトインスペクタ上にある「実行」をクリックして、データを読みこみます
9. 成功すると、表示されているようなメッセージが画面上に出ます
![REST11.png](https://qiita-image-store.s3.amazonaws.com/0/164551/d0142f51-dd19-cadf-3305-0dc697c8dc45.png)

10. オブジェクトインスペクタ上にある「ビジュアルにバインド」をクリックします
11. LiveBinding デザイナが開きます
![REST12.png](https://qiita-image-store.s3.amazonaws.com/0/164551/4c14409f-58b5-4762-b2a7-9726bcade6b1.png)

12. FDMemTable1 の * のところと、StringGrid1 の * のところをマウスで線を引くようにドラックします
![REST13_1.png](https://qiita-image-store.s3.amazonaws.com/0/164551/13311458-e3bd-6784-15ca-26d896cd024a.png)

13. 設計画面側に読み込まれた JSON データが表示されます。この途中でデータが見えるというのも Delphi の特徴のひとつで、UI 設計時に実データが見えるので、表示する幅、文字の大きさなどを視覚的に確認しながら設計できます
![REST13_2.png](https://qiita-image-store.s3.amazonaws.com/0/164551/8a2826be-8e4d-5d7b-5e0a-0c718a966c49.png)

14. 実際に動作させるときには、オブジェクトインスペクタ上にあった「実行」と同じことを行う仕組みが必要なので、Button1 コンポーネントをダブルクリックして ButtonClick イベントを生成します
15. 生成された ButtonClick イベントに書くコードは次の１行のみです

```pascal
procedure TForm1.Button1Click(Sender: TObject);
begin
  RESTRequest1.Execute;  // リクエストを実行
end
```
![REST15.png](https://qiita-image-store.s3.amazonaws.com/0/164551/dbdfae67-2fa5-056a-0c60-2d4518b85b10.png)

実行させてボタンをクリックすると REST デバッカと同様に Web サーバーとの通信が行なわれデータが取得できました
![REST16.png](https://qiita-image-store.s3.amazonaws.com/0/164551/b6cc8fb0-cc3d-37bf-5039-db2ca504d8e8.png)
![REST17.png](https://qiita-image-store.s3.amazonaws.com/0/164551/ea22b5d2-7b6d-9b84-5cbf-2ade6a4690a7.png)