Webアクセスの処理も後半となります。前回はHTTP経由でのCSVファイルのダウンロードを行っていましたが、今回は一般的なWebAPIへアクセスして見ようと思います。
【関連】
【RaspberryPi】Node-REDでWebアクセス（クライアント）前半 - uepon日々の備忘録
WebAPIへのアクセスを行う
今回は比較的アクセスが簡単なwaht3wordsというサービスのAPIを使用してみたいと思います。
what3wrodsの登録をする
waht3wordはWikipediaによれば…
what3words（ワットスリーワーズ）は、3メートルの解像度で場所を伝達するためのジオコーディングシステムである。what3wordsでは、地理的座標を3つの単語で符号化する。例えば、自由の女神像の持つ松明の位置は、"toned.melt.ship"の3語で表している。従来のほかの位置エンコードシステムとの違いは、長い文字(たとえば住所)や数字(たとえば経緯度)ではなく、3つの単語で簡単に表される点にある。
ってことのようです。簡単に言えば住所などの表記が長くなりがちなので、3つの言葉の組み合わせで表現しましょうというものです。
what3wordsユーザー登録をする
まず、WebAPIを使用するにはAPI-Keyが必要になるので、そのためのユーザー登録を行います。 ユーザ登録するために、こちらのURLにアクセスします。 すると以下のような画面が表示されます。
画面右上にあるハンバーガーボタンをクリックし、ユーザー登録の作業をすすめます。
登録はFacebookやgoogleのアカウントと連携することで行うことができるので、今回はFacebookのユーザIDとのアカウント連携をすすめてみます。
【Facebookで続行】のボタンをクリックします。
ボタンをクリックすると確認のダイアログが表示されるので【中央にある青いボタン】をクリックします。 アカウント作成の画面に遷移します。
この中で、氏名などの情報を入力し、プライバシーポリシーの同意のチェックボックスにチェックを入れます。このチェックを入れないと【続行】ボタンがアクティブになりませんので、必ず行ってください。（アクティブになるとボタン化赤く変化します。）
【続行】ボタンをクリックするとユーザー登録は完了して以下のような画面になります。
これでユーザー登録は完了です。
API KEYの取得
つづいてAPIのアクセスに必要なAPI-KEYを取得します。ログインが終わったら上の方にあるメニューバーの【Developer】をクリックします。
すると以下のような画面に遷移します。このページはAPIの説明とGet Startedというチュートリアルがあるのでそれを見ていくことになります。
画面内のGet Startedの中にある【1.Get your free API key】のリンクをクリックします。
すると、以下のようなデベロッパーページが表示されます。左側のペインにある【デベロッパーAPIキー】をクリックします。
すると画面右側に【APIキーの作成】が表示されるのでクリックします。
APIキーの作成に関するライセンス確認のダイアログが表示されるので
同意のチェックボックスにチェックを入れて、【続行】ボタンをクリックします。
続いてはAPIキーを発行するアプリの作成を行います。アプリの【名前】と【ディスクリプション】（説明）を入力して【APIキーの作成】ボタンをクリックします。
この例では以下のように設定しています。
- 名前：
ueponAPP - ディスクリプション：
API test
すると、デベロッパーAPIキーが表示されます。ここで表示されたAPIキーを後程使用するのでメモしておきます。
これで開発の準備ができました。先ほどのDeveloperページのGet Startedに戻ります。
今回は緯度経度から3つのワードでできた住所を調べたいので【Coordinates => 3 word address】の欄にあるリンクをコピーします。
コピーすると以下のようなリンクアドレスが取得できます。ここで[API-KEY]となっている部分を先ほど生成しておいたAPI-KEYに変更します。
https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]
このリンクアドレスにブラウザなどからアクセスすると以下のようなJSONデータ返されます。
この中でwordsの値がindex.home.raftとなっているのがわかるかと思います。これが取得された３ word Addressとなります。
値が英語の単語になっていますが、これはデフォルトが英語になっているので、クエリで言語を設定すれば日本語にすることもできます。
リンクアドレスの末尾に&language=jaに追加すれば大丈夫です。
https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]&language=ja
改めてこのリンクアドレスにアクセスすると以下のようになります。
日本語の場合にはていせい・ゆとり・しゅふという3つの単語が帰ってきます。
これでAPIの準備はOKです。
Node-REDからアクセスを行う
今度はNode-REDからこのAPIにアクセスをしてみたいと思います。 まずは新規のフローを作成します【＋】のタブをクリックします。
今回使用するのは以下4つのノードになります。
- 入力グループの【inject】ノード
- 機能グループの【http request】ノード
- 機能グループの【json】ノード
- 出力グループの【debug】ノード
これらのノードをワークスペースにドロップし、
以下のようにノードの端子を接続していきます。
後は各ノードの設定を行います。
【inject】ノードを編集する
まずは起動トリガーとなるinjectノードをダブルクリックします。
ノードをドロップすると、自動的にタイムスタンプという表示になるのでそれを名前のプロパティをスタートと変更して【完了】ボタンをクリックします。
【http request】ノードを編集する
続いてhttp requestノードをダブルクリックします。このノードでWebアクセスをします。
編集するのはURLのプロパティです。
https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]
先ほど使用したリンクアドレスに編集します。[API-KEY]の部分は置き換えます。 終わったら【完了】ボタンをクリックします。
【json】ノードを編集する
JSONデータを処理する、jsonノードをダブルクリックします。
動作のプロパティのプルダウンから【常にJavaScriptオブジェクトに変換】を選びます。ここを修正していないとWebアクセスによって得られたJSONデータが単なるString（文字列）になるので以降データの取得などを行うことを考えるならばオブジェクトに変換させておく方が便利です。
【debug】ノードを編集する
最後のdebugノードで結果を表示します。debugノードをダブルクリックして
対象プロパティをmsg.payload.wordsと編集します。前段のJSONから送信されたデータからwordsのキーに入っているデータを取得し、表示を行うことになります。
デプロイとフローの実行
設定が終了したので上部の【デプロイ】ボタンをクリックして、デプロイ作業を行います。
以下のようにデプロイが成功しましたと表示されれば成功です。
後はフローの実行になります。スタートと名付けたinjectノードの左側のボタンをクリックすると実行されます。
デバックタブを表示させると以下のように表示されます。先ほどと同様にindex.home.raftが表示されています。これでWebAPIへのアクセスができました。
もう少し触ってみる
先ほどはリンクアドレスの言語設定を行っていなかったので、英語の3単語になっていました。 URLを変えるものいいのですが、折角なので日本語も同時にアクセスできるようにしたいと思います。
先ほど作成したフローのhttp requestノード以降をマウスで選択し、コピー＆ペーストを行います。あとはスタートのノードの端子と接続を行っておきます。
つづいて新規に作成したhttp requestノードをダブルクリックしてURLプロパティの末尾に&language=jaを追加して【完了】ボタンをクリックします。
あとは【デプロイ】ボタンをクリックして、
フローの実行を行います。
すると、英語と日本語の2つの結果がデバッグ画面上に表示されます。
さらにもう少し触ってみる
今はhttp requestノードのURLプロパティにクエリパラメータを入力していますが、長くなると間違える可能性があります。そこでhttp requestノードにクエリパラメータをJSON形式でデータを渡しアクセスURLに反映をさせてみようと思います。
まずはスタートのinjectノードをダブルクリックします。
そして入力ボックスの右側の【…】をクリックします。
するとJSONエディタが立ち上がります。ここにJSON形式でKeyとValueのセットを記述します。（この時の入力にはURLエンコードをする必要はありません➡うれしい）編集が終わったら【完了】ボタンをクリックします。
先ほど編集を行ったJSON形式のデータがペイロード部分に格納されます。確認できたら【完了】ボタンをクリックします。
あとは、http requestノードをダブルクリックし、URLプロパティからクエリパラメータの文字列を削除し、【msg.payloadをクエリパラメータに追加】にチェックを入れて【完了】ボタンをクリックします。
これで先ほどと同様にWebAPIにアクセスができるようになります。
おわりに
これでNode-REDを使用して一般的なWebAPIへのアクセスができるようになりました。 これで一般的な機器とのHTTPでの連携ができるようになりました。サーバー側もクライアント側もできるようになったので割と広がったかなと思います。
【Node-RED 関連エントリ－】
