Help us understand the problem. What is going on with this article?

Delphi Community Edition Meet up ! - REST 編

More than 1 year has passed since last update.

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

Delphi の Community Edition では Starter では使用できなかった REST コンポーネントを使って、REST を使った Web サービスにアクセスできます。
個々の説明は、docwiki - REST クライアントライブラリ を見ていただくとして...

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

今回使用した Web サービス

NHK 番組表 API を使用しました。
この中にある Program List API という、地域、サービス、日付を指定して、該当する条件の番組リストを取得します。

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

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

REST デバッカで JSON データを取得するよ

  1. REST デバッカの URL の箇所に Request API の URL を入力します (APIキーは個人のものなので、消しています)
    REST02_1.png

  2. 「要求の送信」をクリックします

  3. 正しく通信が行なわれると「応答」の箇所に情報が表示されます
    REST03_1.png

  4. 表データのタブに切り替えます

  5. 取得した JSON データがネストしている場合は、ネストのチェックボックスにチェックをつけて、表内の項目名の箇所をマウスでクリックすると「JSON ルート要素」のところに、その名前が入ります

  6. 「適用」をクリックするとネストされているデータが表示されます
    REST03_2.png

  7. 更にネストとしている場合は同じ動作を繰り返します

  8. 表データとして情報が取得できていることが確認できます
    REST04.png

Delphi のアプリケーションで同じように JSON データを取得するよ

  1. 8 の手順の続きとして「コンポーネントのコピー」のボタンをクリックします
  2. クリップボードに設定済みの各コンポーネントがコピーされます
    REST05.png

  3. 今回のデモでは FireMonkey で作成したので Delphi の IDE に戻り「ファイル|新規作成|マルチデバイスアプリケーション - Delphi」で新規プロジェクトを作成し、次の画面では「空のアプリケーション」を選択します
    REST07.pngREST08.png

  4. 真ん中にあるフォームをマウスでクリックしてから Ctrl + V でクリップボードに保存されているコンポーネントをフォーム上に貼り付けます
    REST09.png

  5. 最終的に読み込まれたデータはメモリデータセットを扱う FDMemTable1 コンポーネント内に格納されますので、この FDMemTable1 コンポーネントと表示用のコンポーネントを Visual Live Binding で結び付けます

  6. 表示用の StringGrid をツールパレットからドラッグアンドドロップしてフォームに貼り付けます

  7. ついでに後で使う Button も同様にツールパレットからドラックアンドドロップして貼り付けます
    REST10.png

  8. RestRequest1 コンポーネントをクリックして、オブジェクトインスペクタ上にある「実行」をクリックして、データを読みこみます

  9. 成功すると、表示されているようなメッセージが画面上に出ます
    REST11.png

  10. オブジェクトインスペクタ上にある「ビジュアルにバインド」をクリックします

  11. LiveBinding デザイナが開きます
    REST12.png

  12. FDMemTable1 の * のところと、StringGrid1 の * のところをマウスで線を引くようにドラックします
    REST13_1.png

  13. 設計画面側に読み込まれた JSON データが表示されます。この途中でデータが見えるというのも Delphi の特徴のひとつで、UI 設計時に実データが見えるので、表示する幅、文字の大きさなどを視覚的に確認しながら設計できます
    REST13_2.png

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

  15. 生成された ButtonClick イベントに書くコードは次の1行のみです

procedure TForm1.Button1Click(Sender: TObject);
begin
  RESTRequest1.Execute;  // リクエストを実行
end

REST15.png

実行させてボタンをクリックすると REST デバッカと同様に Web サーバーとの通信が行なわれデータが取得できました
REST16.png
REST17.png

CYonezawa
風都在住の万事屋
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away