0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【APIキー・プラグイン不要】kintoneで郵便番号から住所を自動補完する方法 (pospita API)

0
Last updated at Posted at 2026-09-16

【2026/09/20 更新】
API のレスポンス形式(data が複数件対応の配列 data: Address[] に統一されたこと)に合わせて、掲載の JavaScript コードを更新しました。

kintone(キントーン)で顧客管理や案件管理アプリを運用する際、「郵便番号を入力したら、自動で住所欄に都道府県や市区町村を入力したい」というニーズは非常に定番です。

この機能を導入しようとすると、従来は以下のようなアプローチが必要でした。

  • 有料・無料の専用プラグインを探して導入する
  • 外部の郵便番号APIの利用登録を行い、APIキーを発行・管理する

しかし、事前登録およびAPIキーの発行が一切不要なオープン住所インフラAPI pospita(ポスピタ) と、JavaScriptカスタマイズを組み合わせることで、プラグインなし・完全無料で一瞬で自動補完機能を導入できます。

本記事では、kintoneの標準テンプレート「顧客リスト」アプリを例に、コピペで使えるJavaScriptコードと設定手順を解説します。


pospita(ポスピタ)とは?

pospita(ポスピタ)は、事前登録やAPIキーの発行が一切不要で無料利用できる日本の郵便番号・住所解決APIです。

以下、特長です。

  • APIキー不要・即時動作: 会員登録や環境変数の設定なしで、URLを呼び出すだけですぐに利用可能
  • 1日1,000リクエスト無料: 個人開発から企業での日常業務利用までカバー(IP単位)
  • 高速エッジ配信: Cloudflare Workers + D1 による快適なレスポンス速度
  • AIエージェント対応: OpenAPI仕様や /llms.txt、MCP (Model Context Protocol) も標準サポート

実装手順(3ステップのみ)

今回はkintoneアプリストアにある公式テンプレート 「顧客リスト」 アプリを例に解説します。

ステップ1: アプリの準備

  1. kintoneアプリストアから 「顧客リスト」 アプリを追加します。

ステップ2: JavaScriptコードの配置

  1. 後述の「完成JavaScriptコード」をコピーし、ファイル名を pospita-kintone.js などでPC上に保存します。
  2. アプリの 「歯車マーク(設定)」 > 「詳細設定」 > 「JavaScript / CSSカスタマイズ」 を開きます。
  3. 「PC用のJavaScriptファイル」 および 「スマートフォン用のJavaScriptファイル」 に、作成した .js ファイルをアップロードして「保存」を押します。
  4. アプリ設定画面の右上にある青い 「アプリを更新」 ボタンをクリックして変更を反映します。

ステップ3: 動作確認

  • 顧客の新規作成画面を開き、「郵便番号(数字のみ)」欄に 1000002 と入力すると、「住所」欄に 東京都千代田区皇居外苑 が自動的に入力されます。

スクリーンショット 2026-09-16 20.30.39.png


完成JavaScriptコード

PC版およびスマートフォン版の双方に対応した、そのままコピー&ペーストで使えるスクリプトです。

/**
 * kintone「顧客リスト」アプリ用 pospita 住所自動入力スクリプト
 * 
 * 概要: 郵便番号(7桁)が入力された際に、pospita API を呼び出して住所フィールドへ自動補完します。
 * 対応: PC版 / スマートフォン版両対応・APIキー不要
 */
(function () {
  'use strict';

  // --------------------------------------------------
  // フィールドコードの設定
  // --------------------------------------------------
  const FIELD_ZIPCODE = '郵便番号';   // 郵便番号フィールドのコード(顧客リストアプリの初期値)
  const FIELD_ADDRESS = '住所';       // 住所フィールドのコード(顧客リストアプリの初期値)

  // 監視するkintoneイベント(新規作成・再編集画面の変更イベント)
  const events = [
    `app.record.create.change.${FIELD_ZIPCODE}`,
    `app.record.edit.change.${FIELD_ZIPCODE}`,
    `mobile.app.record.create.change.${FIELD_ZIPCODE}`,
    `mobile.app.record.edit.change.${FIELD_ZIPCODE}`
  ];

  kintone.events.on(events, function (event) {
    const record = event.record;
    const rawZip = record[FIELD_ZIPCODE] ? record[FIELD_ZIPCODE].value : '';

    if (!rawZip) return event;

    // ハイフン等の非数字文字を自動除去
    const cleanZip = rawZip.replace(/[^0-9]/g, '');

    // 7桁入力された時点で pospita API を呼び出す
    if (cleanZip.length === 7) {
      const url = `https://pospita.jp/api/v1/addresses/${cleanZip}`;

      // kintone.proxy を使用してCORS制限を回避し通信
      kintone.proxy(url, 'GET', {}, {}).then(function (args) {
        const responseData = args[0];
        const status = args[1];

        if (status === 200) {
          try {
            const result = typeof responseData === 'string' ? JSON.parse(responseData) : responseData;
            const item = result.data && result.data[0];

            if (item) {
              const address = item.full_address || (item.prefecture + item.city + item.town);

              // UI描画の競合を防ぐため100ms遅延させてレコード更新を実行
              setTimeout(function () {
                const getRecord = kintone.app.record.get || (kintone.mobile && kintone.mobile.app.record.get);
                const setRecord = kintone.app.record.set || (kintone.mobile && kintone.mobile.app.record.set);

                const currentRecord = getRecord ? getRecord() : null;

                if (currentRecord && currentRecord.record[FIELD_ADDRESS]) {
                  currentRecord.record[FIELD_ADDRESS].value = address;
                  if (setRecord) {
                    setRecord(currentRecord);
                  }
                }
              }, 100);
            }
          } catch (e) {
            // 例外発生時は静かに処理を終了
          }
        }
      });
    }

    return event;
  });
})();

技術的なポイント・補足解説

  1. kintone.proxy() によるCORS影響の回避
    kintone上で外部Web APIを呼び出す際、ブラウザの標準 fetch ではCORS制限を受ける場合があります。本コードではkintone公式の kintone.proxy() を採用することで、ブラウザ環境に左右されず安定した非同期通信を実現しています。

  2. setTimeout による非同期レンダリングの競合防止
    kintoneのフィールド変更イベント(change)内で非同期通信を行った後、画面の描画更新(kintone.app.record.set)が競合して反映されない問題を防ぐため、100ミリ秒のウェイトを設けてUIを安全に更新しています。

  3. 他アプリで使う場合のフィールドコード変更
    自作アプリや「顧客リスト」以外のアプリで利用したい場合は、コード冒頭の定数(FIELD_ZIPCODE や FIELD_ADDRESS)を、アプリの設定で確認できる各フィールドコード名に変更するだけで簡単に移植可能です。


まとめ

無料・登録不要の郵便番号検索API pospita(ポスピタ)を活用することで、APIキーの発行やプラグインの契約をしなくても、わずか数行のJavaScriptでkintoneアプリに住所自動入力機能を組み込むことができます。

社内アプリの業務効率化やプロトタイプ作成でぜひお試しください!

関連リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?