Chapter 07

Node-RED での API からのデータ取得体験

Seigo Tanaka
Seigo Tanaka
2022.07.07に更新

HTTP API について

HTTP API の重要性や世界観を学びます。

さて、HTTP プロトコルは Web 上で重要な役割ですが、その中でも API という世界観を把握しておきましょう。

API とは、 Application Programming Interface の頭文字です。データを提供したり、何かしらの機能を提供するソフトウェアの一部を、私たちのような外部の人間が扱えるように公開されている窓口です。HTTP プロトコルでやり取りしていることが多いです。

たとえば、WEBアプリケーションなどインターネットの様々な仕組みを構築するとき、 API からデータを取得して加工して表示することが多いです。データや機能を借り受けるということですね。

サンプル API 解説

今回のつなぐ サンプル API について把握します。

かわいい柴犬画像をランダムに返答してくれる shibe.online というAPIを使ってみましょう。

image

https://shibe.online/ こちらです。

HTTP リクエストの仕様として読み解くと以下のようになります。

これのみです。追加で設定すべきパラメータもなく、これは、GET リクエストのためブラウザからアクセスでき、とても扱いやすいAPIです。

HTTP リクエストフロー概要

今回の API に接続しデータを取得する流れを学びます。

image

まず、パレットから http request ノードをワークスペースにドラッグアンドドロップしましょう。

image

http request ノードをワークスペースに配置しました。

image

inject ノードをワークスペースに配置して、動かすきっかけを指示できるようにします。

image

debug ノードをワークスペースに配置して http request ノードが、どこかのURLにアクセスして取得したデータをデバッグタブに表示できるようにします。

image

inject ノード → http request ノード → debug ノード とつなぎます。

これで「何かの API につなぐ」仕組みはひとまず出来上がりました。

HTTP リクエストフロー作成

今回のAPI に接続する HTTP リクエストフローを作成します。

image

さきほどのワークスペースに戻って http request ノードをダブルクリックして詳細の設定をしましょう。

image

このような設定項目があります。HTTP リクエストをするために様々な設定があります。

image

今回は

項目名 変更する内容
メソッド GET
URL http://shibe.online/api/shibes

で設定します。

完了をクリックします。

image

デプロイをクリックして Node-RED に設定を反映させます。

動かしてみる

image

それでは inject ノードの image のボタンをクリックしましょう。

image

サイドバーのデバッグタブには、柴犬画像APIからリクエストが表示されます。

返答データを文字列からJSONに変更する

image

現状では取得したデータは文字列です。今後扱いやすいようにJSONに変更しましょう。

文字列のままだと頑張って読んで探して取り出す必要がありますが、JSONデータで受け取れると入れ子構造で目的のデータが取り出しやすくなります。

それでは、http request ノードをダブルクリックをしてプロパティ編集画面を表示します。

image

http request ノードの設定の 出力形式 をUTF文字列から JSONオブジェクト 変更します。

image

すると、文字列ができるかぎり JSON に変換されます。

image

ためしに、fileにある柴犬画像URLをコピーして

image

ブラウザのアドレスバーにペーストしてアクセスしてみましょう。

image

無事、柴犬画像が見れていますね!

時間があれば(エクストラ)

node-red-contrib-image-output ノードをインストールして画像表示をします。

Node-RED で public-apis の柴犬画像 API につないで表示させるメモ – 1ft-seabass.jp.MEMO

  • 主な手順
    • node-red-contrib-image-output ノードをインストール
      • メインテキスト P.54 を見ながら
    • 先ほどのフローに function ノードを加える
    • その後に node-red-contrib-image-output ノードを加える
    • function ノードで柴犬画像 API から取得した JSON データから msg.payload[0] と 0 番目の配列が取得出来るように修正
    • デプロイして試してみる
    • データの流れを変える(change)、 change ノードの説明
    • function ノードを change ノードに入れ替える
    • change ノードの設定の値の代入先を設定
      • コード的には msg.payload = msg.payload[0] を目指す
      • 値の代入の設定になっているか確認する
      • 値の代入先の項目を空欄から msg.payload にする。
      • 左のノードに送るメッセージに設定するという意味
    • change ノードの代入する対象の値を設定
      • 対象の値 を msg に設定(文字列や数字でなく右のノードから来るメッセージ msg を指定)
      • 対象の値を payload[0] に設定。
      • 右のノードから来るメッセージ msg の payload の中が配列なので 0 番目の柴犬画像 API の画像 URL を使うという意味。
    • デプロイして試してみる
    • エクストラ
      • 余裕があれば change ノードの名前を分かりやすく「0 番目の画像を抽出」と設定。

HTTP API の多様さ

様々な HTTP API の種類や役割を把握します。

Image from Gyazo

さて、こちらの図は、私が使ったことのある API や知っている API をまとめてみたものです。

みなさんもイチから仕組みを構築してシステムをつくることももちろん大事ですが、このように API を知ることで、データを用意出来たり、ひとりでは難しい仕組みを導入出来たり、API を通じて新しい技術に触れることができます。

そして、フリーのAPIのリストコレクション public-apis をご紹介します。

image

英語ですが、実に 100 以上の API があり見ているだけで楽しいです。私が図で示したような広がりが、実感できるでしょう。

このような、API をはじめとした、すぐに作れるツールやアプローチを知っていることで、よりプロトタイピングが磨かれるので、手を動かしつつ技術に触れつつ、鍛えていきましょう。