外部のAPIを利用して指定された地域の天気を表示する
外部のAPIを利用して、指定された地域の天気を自動で表示します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
本記事の内容は、記事公開日（2022年8月24日）当時の内容です。
利用するイベント・API
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
他の地域の天気を表示する場合は、「補足」の「日本で取得できるwoeid」のセクションをご確認ください。
リストメニューパーツに項目名と値の追加、カスタマイズコードの修正が必要となります。
パーツID | パーツタイプ | 項目名・値 | 補足 |
fidLocation | リストメニューパーツ | 東京 | |
名古屋 | |||
大阪 | |||
fidWeather | テキスト（一行）パーツ | タイプ：ノーマル |
カスタマイズコード
カスタマイズコードCopied!
(function () { 'use strict'; /** * リストパーツから地域を選択した場合、選択した地域の天気を表示するイベント */ collaboflow.events.on('request.input.fidLocation.change', function (data) {
const parts = data.parts; const location = parts['fidLocation'].value;
// リストメニューパーツの項目からwoeidを取得する let locationWoeid; switch (location) { case '東京': locationWoeid = '1118370'; break; case '名古屋': locationWoeid = '1117817'; break; case '大阪': locationWoeid = '15015370'; break; }
const url = 'https://www.metaweather.com/api/location/' + locationWoeid; const headers = {}; const parseType = 'json';
// 天気取得のリクエストを送信 collaboflow.proxy.get(url, headers, parseType).then(function (response) {
if (response.status !== 200) { throw Error(response); }
// weatherCodeを取得する const weatherCode = response.body.consolidated_weather[0].weather_state_abbr;
// weatherCodeから天気を取得する let weather; switch (weatherCode) { case 'sn': weather = '雪'; break; case 'sl': weather = 'みぞれ'; break; case 'h': weather = 'あられ'; break; case 't': weather = '雷雨'; break; case 'hr': weather = '大雨'; break; case 'lr': weather = '小雨'; break; case 's': weather = 'にわか雨'; break; case 'hc': weather = 'くもり'; break; case 'lc': weather = 'くもりのち晴れ'; break; case 'c': weather = '晴れ'; break; } // 取得した天気をfidWeatherパーツに設定する parts['fidWeather'].value = weather;
}).catch(function (error) { // 失敗時の処理 console.error(error);
alert('天気の取得に失敗しました。'); return false; }); });})();補足
天気取得APIについて
本サンプルの天気取得は、 MetaWeather を利用しています。
詳細については、MetaWeatherのサイトにてご確認ください。
日本で取得できるwoeid
天気を取得可能な日本の地域は以下の通りです。
地域 | woeid |
仙台 | 1118129 |
東京 | 1118370 |
横浜 | 1118550 |
川崎 | 1117502 |
埼玉 | 1116753 |
名古屋 | 1117817 |
京都 | 15015372 |
大阪 | 15015370 |
神戸 | 1117545 |
広島 | 1117227 |
動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. 保存したjsファイルを任意のエディターで表示します。
3. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
4. サンプルフォームに、先で記載されている必要項目を配置します。
5. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
6. 保存したファイルをアップロードします。
7. アプリ設定＞経路設定から新規に経路を作成します。
8. 新規文書から作成した経路名をクリックします。
9. 申請画面が表示されます。
10. リストメニューパーツから、天気を取得する地域を選択します。
11. 指定した地域の天気が一行パーツに表示されます。
動作イメージ
