Kintoneのカスタマイズを行うことによって、業務の効率化を図ることができます。Kintoneは柔軟なプラットフォームであり、JavaScriptを使用することでさまざまな自動化や機能拡張が可能です。

例えば、顧客情報を登録する際に住所と郵便番号を手動で入力するのは、面倒でミスが起こりやすい作業です。郵便番号の入力ミスや住所の誤入力は、後の業務に影響を与えることがあります。特に、大量のデータを扱う場合には、この手間が積み重なり、効率の低下やデータの不整合が発生する可能性が高まります。

そこで今回は、郵便番号を入力すると自動で住所を取得し、フィールドに反映させる方法をご紹介します。このカスタマイズによって、手動で住所を入力する手間を省き、データ入力の正確さも向上させることができます。

以下の手順に従って、Kintoneアプリにこの便利な機能を追加してみましょう。

スクリプトの作成手順

Kintoneアプリの設定

Kintoneアプリの「アプリの設定」から「フィールド」を追加します。

  • 郵便番号フィールド（フィールドコード：郵便番号）
  • 住所フィールド（フィールドコード：住所）

カスタマイズビューの設定

アプリの設定で「Javascript/CSSでカスタマイズ」の設定画面に移動し、新しいJavascriptファイルを追加します。
以下のコードをコピーしてJavascriptのファイルに貼り付けます。

(function() {
  'use strict';

  // 郵便番号フィールドが変更されたときに実行する関数
  function fetchAddress(event) {
    const record = event.record;
    const zipcode = record.郵便番号.value;

    if (!zipcode) {
      return event;
    }
    
    // zipcloud APIのURLを生成
    const apiUrl = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + encodeURIComponent(zipcode);
    
    // zipcloud APIにリクエストを送信
    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        console.log(data); // ここでAPIのレスポンスを表示
        if (data.results && data.results.length > 0) {
          // 最初の結果から住所を取得
          const address = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
          // 住所フィールドに値を設定
          record.住所.value = address;

          // レコードを更新
          kintone.app.record.set({record: record});
        } else {
          alert('該当する住所が見つかりませんでした。');
        }
      })
      .catch(error => {
        console.error('Error fetching address:', error);
        alert('住所の取得中にエラーが発生しました。');
      });
    
    return event;
  }

  // レコードの編集画面で郵便番号フィールドが変更されたときのイベント
  kintone.events.on('app.record.edit.change.郵便番号', fetchAddress);
  // レコードの追加画面で郵便番号フィールドが変更されたときのイベント
  kintone.events.on('app.record.create.change.郵便番号', fetchAddress);
})();

コードの説明

イベントハンドラーの設定

kintone.events.onを使用して、レコードの編集画面及び追加画面で「郵便番号」フィールドが変更されたときに、fetchAddress関数が実行されるように設定します。

// レコードの編集画面で郵便番号フィールドが変更されたときのイベント
kintone.events.on('app.record.edit.change.郵便番号', fetchAddress);
// レコードの追加画面で郵便番号フィールドが変更されたときのイベント
kintone.events.on('app.record.create.change.郵便番号', fetchAddress);

fetchAddress関数

  1. event.recordから郵便番号の値を取得します。
  2. 郵便番号が入力されていない場合は、何もせずに終了します。
  3. zipcloudのAPIのURLを生成して、郵便番号をエンコードしてクエリパラメータに含めます。
  4. fetchを使用してAPIにリクエストを送信し、レスポンスをJson形式で処理します。
  5. レスポンスの結果から住所を取得し、event.record.住所.valueに設定します。
  6. レコードの変更をKintoneに反映させるために、kintone.app.record.setを使用します。
  7. APIリクエストが失敗した場合や、該当する住所が見つからなかった場合にエラーメッセージを表示します。
function fetchAddress(event) {
  const record = event.record;
  const zipcode = record.郵便番号.value;

  if (!zipcode) {
    return event;
  }

  // zipcloud APIのURLを生成
  const apiUrl = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + encodeURIComponent(zipcode);
  
  // zipcloud APIにリクエストを送信
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      console.log(data); // ここでAPIのレスポンスを表示
      if (data.results && data.results.length > 0) {
        // 最初の結果から住所を取得
        const address = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
        // 住所フィールドに値を設定
        record.住所.value = address;

        // レコードを更新
        kintone.app.record.set({record: record});
      } else {
        alert('該当する住所が見つかりませんでした。');
      }
    })
    .catch(error => {
      console.error('Error fetching address:', error);
      alert('住所の取得中にエラーが発生しました。');
    });
  
  return event;
}

カスタマイズの結果

上記のカスタマイズをした結果、以下のように「郵便番号」を入力すると住所が割り当てられます。

まとめ

今回のカスタマイズは、Kintoneの柔軟性と拡張性を活かした非常に便利な機能の一例です。郵便番号から住所を自動で取得するこの機能は、データ入力の手間を大幅に削減し、入力ミスを防ぐことができます。これにより、業務の効率化だけでなく、顧客データの信頼性も向上します。

Kintoneのカスタマイズは一見難しそうに思えるかもしれませんが、実際に手を動かしてみるとその簡単さと効果に驚かれることでしょう。今回のカスタマイズを通じて、Kintoneの魅力を感じていただけたなら幸いです。ぜひ、この機会にKintoneのカスタマイズに挑戦してみてください。今後も、さらに便利な機能を追加していくことで、業務の効率化を進めていきましょう。

このサイトではほかにも、Kintoneの様々なカスタマイズ方法に関する記事も投稿しておりますので、ぜひチェックしてくださいね！

https://arcuss-service.com/knowledge/how-to-auto-day.html