Velo 第８３回 APIの公開（３）
第８２回では Wixサイトから公開APIにアクセスしました。
しかし公開APIの目的は、HTTPリクエストを送信すればどのような環境下にあってもリソースが得られることです。
そもそも Wix環境下にあるならば何も遠回りして公開APIを使う必要はありません。
ページエレメントで直接、場合によってはノーコードでコントロールすることが出来るからです。
ブラウザーで送信
ブラウザーには JavaScript の実行環境が整っています。
F12でコンソールを開けば直ちにインタープリターが使えます。
また JavaScript には fetch( )関数がプリセットされています。
従ってブラウザーから公開APIを利用することが出来ます。
以下の図をご覧下さい。
getImageUrl( )関数を定義しました。
公開APIをfetch( )関数の引数に渡しています。
戻り値はレスポンスをテキスト化したものです。
この関数を以下の様に非同期で実行してみましょう。
プロミスが解決するとランダムに選ばれたアイテムがテキスト化されて表示されました。
画像のURL(imageUrl)もちゃんと表示されています。
Node.js で送信
JavaScript の実行環境として Node.js を使ってみましょう。
無料で簡単にインストールできますのでお手軽です。
ただ、GUI ならぬ CUI という昭和感満載の入力インターフェースですので「なんだかな～」と思うかも知れません。
ま、しかし、昔は全部こうだったって話です。
Node.js を使って Javascript を動かすときにブラウザーは必要ありません。
これはターミナルで動きます。
つまりターミナルで node というコマンドを実行すれば node が起動し Javascript の実行環境が出来上がります。
これも昔は全部こうだったって話です。
では早速起動してみましょう。
プロンプト上で node とタイプし、改行すれば起動します。
Node.js にはエディターモードがあって、このモードでは複数行の入力が可能になります。
早速「.editor」と入力しエディターモードに入りましょう。
Node.js にも fetch( ) が用意されていますので、ブラウザーの時と全く同じ関数を全く同じように入力しましょう。
実行や入力は ^Dの２ストロークで行います。これも昔は全部こうだったって話です。
さて、関数の定義が出来ましたので、非同期で実行してみましょう。
以下の図をご覧下さい。
実行結果もブラウザーの場合と全く同じです。
プロミスが解決した後にアイテムの表示が正しく行われています。
画像のURL(imageUrl)もちゃんと取得できています。
Velo開発のご依頼はこちら