HTTP API について
HTTP API の重要性や世界観を学びます。
さて、HTTP プロトコルは Web 上で重要な役割ですが、その中でも API という世界観を把握しておきましょう。
API とは、 Application Programming Interface の頭文字です。データを提供したり、何かしらの機能を提供するソフトウェアの一部を、私たちのような外部の人間が扱えるように公開されている窓口です。HTTP プロトコルでやり取りしていることが多いです。
たとえば、WEBアプリケーションなどインターネットの様々な仕組みを構築するとき、 API からデータを取得して加工して表示することが多いです。データや機能を借り受けるということですね。
サンプル API 解説
今回のつなぐ サンプル API について把握します。
かわいい柴犬画像をランダムに返答してくれる shibe.online というAPIを使ってみましょう。
https://shibe.online/ こちらです。
HTTP リクエストの仕様として読み解くと以下のようになります。
- HTTP リクエスト方法
- GET メソッド
- アクセスする API の URL
これのみです。追加で設定すべきパラメータもなく、これは、GET リクエストのためブラウザからアクセスでき、とても扱いやすいAPIです。
HTTP リクエストフロー概要
今回の API に接続しデータを取得する流れを学びます。
まず、パレットから http request ノードをワークスペースにドラッグアンドドロップしましょう。
http request ノードをワークスペースに配置しました。
inject ノードをワークスペースに配置して、動かすきっかけを指示できるようにします。
debug ノードをワークスペースに配置して http request ノードが、どこかのURLにアクセスして取得したデータをデバッグタブに表示できるようにします。
inject ノード → http request ノード → debug ノード とつなぎます。
これで「何かの API につなぐ」仕組みはひとまず出来上がりました。
HTTP リクエストフロー作成
今回のAPI に接続する HTTP リクエストフローを作成します。
さきほどのワークスペースに戻って http request ノードをダブルクリックして詳細の設定をしましょう。
このような設定項目があります。HTTP リクエストをするために様々な設定があります。
今回は
項目名 | 変更する内容 |
---|---|
メソッド | GET |
URL | http://shibe.online/api/shibes |
で設定します。
完了をクリックします。
デプロイをクリックして Node-RED に設定を反映させます。
動かしてみる
それでは inject ノードの のボタンをクリックしましょう。
サイドバーのデバッグタブには、柴犬画像APIからリクエストが表示されます。
返答データを文字列からJSONに変更する
現状では取得したデータは文字列です。今後扱いやすいようにJSONに変更しましょう。
文字列のままだと頑張って読んで探して取り出す必要がありますが、JSONデータで受け取れると入れ子構造で目的のデータが取り出しやすくなります。
それでは、http request ノードをダブルクリックをしてプロパティ編集画面を表示します。
http request ノードの設定の 出力形式
をUTF文字列から JSONオブジェクト
変更します。
すると、文字列ができるかぎり JSON に変換されます。
ためしに、fileにある柴犬画像URLをコピーして
ブラウザのアドレスバーにペーストしてアクセスしてみましょう。
無事、柴犬画像が見れていますね!
時間があれば(エクストラ)
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 番目の画像を抽出」と設定。
- node-red-contrib-image-output ノードをインストール
HTTP API の多様さ
様々な HTTP API の種類や役割を把握します。
さて、こちらの図は、私が使ったことのある API や知っている API をまとめてみたものです。
みなさんもイチから仕組みを構築してシステムをつくることももちろん大事ですが、このように API を知ることで、データを用意出来たり、ひとりでは難しい仕組みを導入出来たり、API を通じて新しい技術に触れることができます。
そして、フリーのAPIのリストコレクション public-apis をご紹介します。
英語ですが、実に 100 以上の API があり見ているだけで楽しいです。私が図で示したような広がりが、実感できるでしょう。
このような、API をはじめとした、すぐに作れるツールやアプローチを知っていることで、よりプロトタイピングが磨かれるので、手を動かしつつ技術に触れつつ、鍛えていきましょう。