外部のAPIを利用して指定された地域の天気を表示する

外部のAPIを利用して、指定された地域の天気を自動で表示します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するイベント・API

• 外部のAPIを実行する
• 申請入力画面イベント - パーツ値変更イベント

サンプルフォーム

他の地域の天気を表示する場合は、「補足」の「日本で取得できるwoeid」のセクションをご確認ください。
リストメニューパーツに項目名と値の追加、カスタマイズコードの修正が必要となります。

パーツID	パーツタイプ	項目名・値	補足
fidLocation	リストメニューパーツ	東京
		名古屋
		大阪
fidWeather	テキスト（一行）パーツ		タイプ：ノーマル

カスタマイズコード

(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. 指定した地域の天気が一行パーツに表示されます。

動作イメージ