郵便番号をキーにして、OpenWeatherMapから天気データを読み込んでkintoneに表示させるメモ

デベロッパーネットワークの投稿を元に試してみたメモです。
https://developer.cybozu.io/hc/ja/community/posts/360041094612

好きなAPI kintone.proxy が使われていたので、元のソースコードをお借りして修正してみました。

ソースコード

index.js

(function() {
    "use strict";
    // 編集画面と新規作成画面にて
    kintone.events.on(['app.record.edit.show','app.record.create.show'], function(event) {
        // ボタンを作成
        var getWeatherBtn = document.createElement('button');
        getWeatherBtn.id = 'get_weather_btn';
        getWeatherBtn.innerText = '天気を取得する';

        // ボタンクリックイベントで発火
        getWeatherBtn.onclick = function () {
            console.log(event);
            // レコード取得
            var record = kintone.app.record.get();
            console.log(record);
            // 郵便番号フィールドから入力値を取得
            var zipCode = record.record.郵便番号.value;
            console.log(zipCode);
            var apiKey = '1234567890abcdefg'; // OpenWeatherMapのAPIキー
            var owmUrl = 'https://api.openweathermap.org/data/2.5/weather?zip=' + zipCode + ',jp' + '&APPID=' + apiKey ;
            console.log(owmUrl);
            // return new kintone.Promise(function(resolve, reject) {
            // イベントをreturnしない。
            new kintone.Promise(function(resolve, reject) {
                kintone.proxy(owmUrl, 'GET', {}, {}, function(body, status, headers){
                    if (status >= 200 && status < 300) {
                        var json = body.replace(/^\s+|\s+$/g,''); 
                        var result = JSON.parse(json);
                        console.log(result);
                        var todayWeather = result.weather[0].main;
                        console.log(todayWeather);
                        record.record.天気.value = todayWeather;
                        // レコードセット
                        kintone.app.record.set(record);
                        resolve(event);
                    }
                },function(error) {
                    //error
                    console.log(error); 
                    resolve(event);
                });
            });
        };
        // ボタンの描画
kintone.app.record.getSpaceElement('get_weather_btn_field').appendChild(getWeatherBtn);
    });
})();

画面イメージ

まとめ

• イベントをリターンしない事が肝
• OpenWeatherMapは無料枠がある

リンク

• OpenWeatherMap https://openweathermap.org/