【ajaxzip3】ボタンクリックで郵便番号から住所を取得する方法2020.02.08Web制作Bこんにちは、ryohei(@ityryohei)です!本記事では、ajaxzip3を使って、ボタンをクリックして郵便番号から住所を取得する方法をご紹介しています。ajaxzip3を公式ページのサンプルに沿って設置した場合、郵便番号の入力完了後、対応する住所があれば予め指定して置いた入力フィールドに取得してきた住所を出力してくれます。郵便番号入力で瞬時に住所を取得してきてくれます。それだけでもかなり使い勝手は良いのですが、案件によっては入力完了後に自動で取得するのではなく、ワンクッション挟んで住所を出力して欲しい、という要望をいただいたりします。それが本記事でご紹介するボタンを使用する方法になります。下記は、完成形のデモになります。郵便番号を入力して「郵便番号から住所を取得」をクリックすると、取得してきた住所が入力フィールドに出力されます。CodePen.本記事では、上記デモの内容に沿って、郵便番号入力後にボタンをクリックして住所を取得する方法をご紹介していきたいと思います。「ajaxzip3」の詳しい使い方については説明しておりませんので、予めご了承ください。[ads_middle]ajaxzip3を読み込むajaxzip3のライブラリファイル本体は下記のページからダウンロードすることができます。ajaxzip3.github.io圧縮ファイルを展開すると、ディレクトリの中に「ajaxzip3.js」というファイルが内包されています。それがライブラリ本体のファイルになります。ajaxzip3を使用するファイルに読み込みむことで各機能を使用することができます。公式からCDNが提供されています。charset="UTF-8"></script>CNDを使用する場合は上記の読み込むだけで準備は完了です。使いやすい方法で「ajaxzip3」を使用するファイルにライブラリファイルを読み込みます。※デモではjQueryを使用していますので、併せて読み込んでおきましょう。src="https://code.jquery.com/jquery-3.4.1.min.js"</script>[ads_middle]ajaxzip3を使用するフォームを作成する続いて、フォームを作成していきます。デモと同じ内容のサンプルを下記に用意しております。それぞれ住所が出力されます。使用するフィールドは必要な部分だけを取捨選択してご使用ください。value=""></form>[ads_middle]ajaxzip3のスクリプトを作成するライブラリの読み込み、フォームの作成が完了しましたら、スクリプトを作成します。本記事では、ボタンをクリックしてajaxzip3で住所を取得します。クリックイベントの監視にはjQueryを使用します。JavaScriptを使用していただいても構いません。お好みの方法で実装してください。false;});以上でスクリプトの作成は完了です。ajaxzip3bには、成功時、失敗時にそれぞれコールバックメソッドが用意されています。」が失敗時に実行される処理になります。成功時にはフォーカスを設定し、失敗時にはアラートが表示されるようにしています。こちらは適宜カスタマイズしてご使用ください。[ads_middle]最後にajaxzip3は実用性のあるとても便利なライブラリファイルです。私もいつも愛用させていただいております。この場をお借りして開発者の方に感謝を。ありがとうございます!これからも多くの案件で使用させていただきます。本記事ではボタンクリックを起因とした住所の取得方法を解説しましたが、またカスタマイズする機会がありましたら別の記事でご紹介させていただければと思います。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。