Read Article

郵便番号を入力するだけで、住所の入力を自動化出来ます!!

郵便番号を入力するだけで、住所の入力を自動化出来ます!!

こんにちは!矢野です!!今回も今まで同様、kintone連携サービス「フォームブリッジ」に関してです。今回はサンプルカスタマイズを紹介していきます!今回のテーマは「郵便番号の入力で、住所も自動的に入力されるようにする!!!」です!これは設定出来たら、回答者の手間も省ける上に入力ミスも防ぐことが出来るのでとても便利ですね!!今回の設定では、他社が提供しているAPIを利用します!ですので、その規約上問題がないことをご確認の上ご利用下さい!!規約の詳しい説明は以下のサイトを参照ください!

郵便番号-住所検索API:https://zipaddress.net/

利用規約:https://zipaddress.net/#terms

ではさっそく実際の例を使いながら設定方法を紹介していきたいと思います!!

設定

今回の設定は大きく分けて「フィールドコードの設定」と「カスタマイズの設定」の2つ工程があります!この順番に説明していきますね!

フィールドコードの設定

「住所登録」というフォームを使って使い方を紹介します!この画像のようなkintoneアプリを用意します!このように郵便番号を入力するフィールドと、自動的に住所が入力されるフィールドを用意します!そして、これらのフィールドのフィールドコードをAPIが使えるように変更します!!しかし、自動的に入力される住所に用意するフィールドは「住所全て」を1つにまとめる場合や、「都道府県」や「市区町村」等で別々のフィールドに分ける場合によって設定が少し違うので注意が必要です!!今回の例では、画像のようにそれぞれの場合について紹介します!まず郵便番号については、フィールドコードを「postal_code」に設定する必要があります!ですので、このように変更します!!他のフィールドに関しても、同様の設定を行います!!住所全てが入力されるフィールドは、フィールドコードを上のように「address」もしくは「full_address」と設定します!!これで、「郵便番号」が入力された時点でこのフィールドに住所が自動的に入力されるようになります!また、自動的に入力される住所の値を「都道府県」、「市区町村」、「地域」に分けたい場合はそれぞれのフィールドコードを「prefecture」、「city」、「area」に設定すればOK! ですので、フィールドコードをこのように変更します!また、住所の区切り方として「都道府県&市区町村」のように区切ることも出来ます!その場合は、フィールドコードも「prefecture_and_city」のようにすればOKです!分かりやすいですね。同様に「市区町村&地域」で分けたい場合は「city_and_area」のようにします!ですので、 画像のように設定します!これで、フィールドコードの設定は完了です!それぞれのフィールドに対応したフィールドコードをおさらいと、

  • 郵便番号      → 「postal_code」
  • 住所(全て)    → 「address」 or 「full_address」
  • 都道府県      → 「prefecture」
  • 市区町村      → 「city」
  • 地域        → 「area」
  • 都道府県&市区町村 → 「prefecture_and_city」
  • 市区町村&地域   → 「city_and_area」

となっています!!

カスタマイズの設定

次は、フォームブリッジ上で「カスタイマイズ」の設定を行います!!まずは、さっきのkintoneアプリからフォームブリッジでフォームを作ります!そしてトップページの「カスタマイズ」をクリック!「カスタマイズ」の中で今回はJava Scriptを利用します!ですので「JavaScriptを利用する」にチェックを入れます!利用するJSファイルを登録する方法として今回は直接URLで指定します!ですので、画像のように紫の+ボタンをクリックします!そして、「https://form.kintoneapp.com/static/js/address.js」と入力しましょう!!このファイルによって、郵便番号から自動的に住所を入力してくれるようになります!!実際に入力しました!!これで保存すれば設定は全て完了です!!お疲れさまでした!!

実際に回答してみた

実際に回答して試してみます!郵便番号〒141-0031を入力してみます!すると、、「141-0031」の入力が完了した瞬間に自動的にさっき設定した住所の欄が入力されていました!!すごいですね!無事、設定が成功していたことが確認できました!住所は、あとは地域などの細かい情報を入力すればいいだけですね!!一応、kintoneアプリにちゃんと回答が投稿されているか確認してみると、

しっかりとデータ投稿できていました!また、郵便番号の入力フォーマットについては半角数字であれば「141-0033」のような形や、ハイフンがない形でもOKです!このように、7桁の数字でもちゃんと住所が入力されます!ただし、郵便番号が全角数字では住所が入力されないので注意してください!!

まとめ

今回は、郵便番号から自動的に住所を入力されるようにする設定を紹介しました!今回のテーマはイメージしやすかったのではないでしょうか。やはり回答者の手間を省けること、入力ミスを防げることの2つの利点があるのでとても役に立つと思います!!設定も難しくないので、ぜひ試してみてください!!

※このJavaScriptに関してはサポート対象外、動作保証外となっております。ご理解のうえ、お試しください。

フォームブリッジが気になった方、試しに使ってみたい!と思った方は、こちらの無料トライアルにてお試しいただけます!是非一度、フォームブリッジを使ってみてください!

これからもフォームブリッジの便利な機能を紹介していきます!それでは、今回はこの辺りで~!

URL :
TRACKBACK URL :

COMMENTS & TRACKBACKS

  • Comments ( 5 )
  • Trackbacks ( 0 )
  1. ありがとうございます!
    区までしか表示ができないので、町村名も表示できるともっと嬉しいです。

    あと1フォームに2つ郵便番号がある場合にも対応可能でしょうか?

    • コメントありがとうございます!
      町村名は出ないのですよね。。。Google のAPIの仕様なのか、設定がうまく出来ていないのか、判断ができません(^_^;)

      2つ、郵便番号フィールドがある場合に関してですが、弊社では試していないので、回答できかねます。
      是非お試しくださいませ!

      • ご回答ありがとうございます!

        kintoneとフォームクリエイターでは表示できていたのでどうかなぁと思ったのですが、APIの仕様ですとしょうがないですね。。

        郵便番号2つは同じフィールドコードをもつことができないようなので、別の方法を検討します!

  2. フォームブリッジにおいてこちらを試させていただいたところうまく動作しました。
    ただ、https://kintoneapp.com/blog/formbridge_html/ こちらにて公開されている「HTML書き出し」を実装したところ、郵便番号入力の部分が動作しなくなりました。エラーを見ると「ReferenceError: fb is not defined」と表示されています。
    HMTL書き出しした場合は動作しないでしょうか?

    • takaさん
      ご連絡ありがとうございます。
      ご指摘の通り、HTML書き出しまで想定したものではありません。
      動作するかどうかも試してないのが正直なところです(^_^;)

LEAVE A REPLY

*
*
* (公開されません)

Return Top