クライアントスクリプトを使用した外部アプリケーションまたはWebサイトからのデータ取得のユースケース3

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

フォームを設計する際、株価、フライト状況、貨物の詳細、天気情報など、他のWebサイトやアプリケーションのデータを表示したい場合があります。サードパーティのWebサイトやアプリケーションからこのような情報を取得し、カード作成時に項目に表示するには、クライアントスクリプトを使用できます。

ビジネスシナリオ

Ryanは旅行代理店を運営しています。顧客からの予約要求を自動化するためにQntrlを使用しています。Ryanは、顧客が旅行パッケージを予約した際に、旅行先の天気予報を表示したいと考えています。また、顧客が旅行先を変更した場合は、予報を自動的に更新したいと考えています。

これを実現するために、RyanはQntrlのクライアントスクリプトで任意の天気予報WebサイトのAPIを使用し、ユーザーが旅行先を選択したときに天気と気温を表示できます。

新しいボード（予約要求ボード）を作成し、顧客の要求のデータを取得する項目を追加します。

ドロップダウン項目（［旅行先を選択］）を追加し、Alabama、Alaska、California、Floridaなどの州をドロップダウン値として追加します。
［旅行先の天気］と［旅行先の気温］のデータを取得する2つの1行項目を作成します。

フォームを作成したら、ブループリントを設計し、権限を設定して、ボードを公開します。

スクリプトを記述する前に、データを取得したいWebサイトまたはアプリケーションを選択します。サンプルコードでは、openweathermap.orgのAPIを使用しています。

新しいスクリプトを作成し、名前として「天気の更新」と入力します。
［ボード］ドロップダウンで［予約要求ボード］を選択します。
新しいカードが追加されたときにスクリプトを実行するため、［実行場所］として［新しいカードの追加］を選択します。
［旅行先］が選択されたときにスクリプトで天気予報を表示できるように、［実行トリガー］として［onChange］を選択します。このオプションを選択すると、右側のパネルに［項目］ドロップダウンが表示され、更新時にスクリプトを起動する項目を選択できます。
以下のスクリプトをコピーしてスクリプトエディターに貼り付け、パラメーター名を置き換えます。

サンプルスクリプト

async function onChange(forpage,oldVal,newVal,executeOnLoad){

if(executeOnLoad){

return;

}

var weatherdata = ZDK.HTTP.GET(' https://api.openweathermap.org/data/2.5/weather?q=' + newVal.display_name + ',US&APPID=86ed5346f446a2975cb8f16e9eec2417');

var msg = weatherdata.weather[0].説明;

current.Job.setValue(current.Layout.Fields.<select-Destination-weather-parameter-こちら>.id, msg);

var temp = weatherdata.main.temp - 270;

var str_a = temp.toString();

var result = Number(str_a.slice(0, 5));

var tempmsg = result + ' Degree Celsius';

current.Job.setValue(current.Layout.Fields.<select-Destination-temperature-parameter-こちら>.id, tempmsg);

}

フォーム、ブループリント、クライアントスクリプトの準備ができたら、新しいカードを作成してスクリプトをテストできます。