本記事ではJavaScriptを使って動画のような「郵便番号から住所を自動入力する機能」を実装する方法をご紹介します。
コピペだけで使えるので、JavaScriptがわからない方でも大丈夫です！
準備：フィールドを作成する
まずはテスト用のアプリを作成し必要なフィールドを設置しましょう！
アプリ名は「住所自動入力テスト」など分かりやすい名前にしておきましょう！
赤枠内から「文字列（1行）」をドラッグし画面のように２つ設置しましょう！
１つ目のフィールドのフィールド名には「郵便番号」、フィールドコードは「zipcode」にします。
２つ目のフィールドのフィールド名には「住所」、フィールドコードは「address」にします。
フィールドを配置したら「保存」して「アプリを公開」をします。
ここまでで準備は完了です。では、いよいよJavaScriptの実装に入っていきましょう！
実装：JavaScriptを反映する
サンプルコードコピー
以下のコードをコピーして、テキストファイルに貼り付けましょう。
(function() {
'use strict';
kintone.events.on(['app.record.create.change.zipcode', 'app.record.edit.change.zipcode'], function(event) {
var record = event.record;
var zipcode = record.zipcode.value;
//郵便番号の値がない場合は処理を抜け出す
if(!zipcode) return;
//数字以外を削除、７桁以外の場合は処理を抜け出す
zipcode = zipcode.replace(/\D/g, '');
if(zipcode.length !== 7) return zipcode;
//３桁-４桁になるように整形する
zipcode = zipcode.replace(/^(\d{3})(\d{4})$/, '$1-$2');
$.ajax({
// 郵便番号から住所を取得するAPIにリクエスト
url: 'https://api.zipaddress.net/?zipcode=' + zipcode,
dataType: 'json', // 返ってくるデータ形式はJSON
async: false, // 同期処理で実行
success: function(response) {
// 住所が見つかればフォームにセット
if(response.code === 200 && response.data) {
record.zipcode.value = zipcode;
record.address.value = response.data.fullAddress;
} else {
alert('該当する住所が見つかりませんでした');
record.zipcode.value = null;
record.address.value = null;
}
},
error: function(response) {
// 通信エラー時の処理
alert('郵便番号から住所の検索に失敗しました');
record.zipcode.value = null;
}
});
return event
});
})();ファイル保存の方法
テキストファイルに貼り付けたら、
１．「ファイル」→「名前を付けて保存」
２．「ファイルの種類」を すべてのファイル に設定
３．「ファイル名」は zipcode.js
保存先はデスクトップなど、分かりやすい場所でOKです！
これでJavaScriptファイルが完成しました。次はkintoneに読み込んでいきましょう！
JavaScriptファイルをアップロード
作成した zipcode.js をkintoneに読み込みます。
１．対象アプリの歯車アイコンの矢印をクリック
２．カスタマイズ／サービス連携をクリック
３．JavaScript／CSSでカスタマイズをクリック
まずは作成したファイルを動かすために、jQueryライブラリを読み込みます。
１．「URL指定で追加」をクリック
２．以下のURLを入力して保存します
https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js
次に作成したファイルをアップロードします。
１．「アップロードして追加」をクリック
２．先ほど保存したzipcode.jsをダブルクリック
２つのJavaScriptファイルが追加されているかを確認しましょう！
画面右下の「保存ボタン」をクリックしましょう！
右上の「アプリの更新」をクリック、「アプリの変更を運用環境に適用します。よろしいですか？」という画面が出るのでもう一度「アプリの更新」をクリックしましょう！
お疲れさまでした！これで郵便番号から住所を自動入力できるアプリが完成です！
実際に作成したアプリをあなたの手で体感してみてください！
ちょこっとコード解説
ここでは皆さんがコピペしたコードの中身について簡単に解説します！
イベントを監視する部分
kintone.events.on(['app.record.create.change.zipcode', 'app.record.edit.change.zipcode'], function(event) {
var record = event.record;
var zipcode = record.zipcode.value;ここでは郵便番号フィールドが入力・変更されたときに処理を開始します。
入力チェック & 整形
if(!zipcode) return;
zipcode = zipcode.replace(/\D/g, '');
if(zipcode.length !== 7) return zipcode;
zipcode = zipcode.replace(/^(\d{3})(\d{4})$/, '$1-$2');郵便番号がない場合は終了。7桁以外なら処理を止め、正しい場合は「123-4567」の形に整えます。
APIで住所を取得
$.ajax({
url: 'https://api.zipaddress.net/?zipcode=' + zipcode,
dataType: 'json',
async: false,郵便番号をAPIに投げて住所データを取得します。
APIとは一言でいうとアプリとアプリをつなぐ橋のようなものです！
結果を反映
success: function(response) {
if(response.code === 200 && response.data) {
record.zipcode.value = zipcode;
record.address.value = response.data.fullAddress;
} else {
alert('該当する住所が見つかりませんでした');
record.zipcode.value = null;
record.address.value = null;
}
},
error: function(response) {
alert('郵便番号から住所の検索に失敗しました');
record.zipcode.value = null;
}成功すれば住所欄にセット。該当なしや通信エラーならアラートを出して値をクリアします。
まとめ
今回の記事では kintoneアプリにJavaScriptを追加して郵便番号から住所を自動入力する方法 を紹介しました。
- 郵便番号を入力すると自動で住所が反映されるようになった
- JavaScriptファイルを保存してkintoneに読み込む流れを理解できた
- APIを利用して外部のデータを活用する方法を体験できた
これでアプリの入力作業がグッと効率化できます！
コメント