こんにちは。Web系エンジニアのカズです。
今回はプログラミング初心者の方でもChatGptを使用して、お問い合わせフォームにあるような「住所入力欄」が作成できるのか検証してみました。
本格的に住所入力欄を作成するには、初心者の方には少し壁があります。
ChatGptに1回のメッセージをしただけでは、望む住所入力欄が完成しませんでした。
それをChatGptを駆使してどう、完成させたのかを記事にしています。
今回の記事の内容。
・ChatGptに住所入力欄作成をお願いしてみた①
・ChatGptの返答結果①
・ChatGptに住所入力欄作成をお願いしてみた②
・ChatGptの返答結果②
・ChatGptに住所入力欄作成をお願いしてみた③
・ChatGptの返答結果③
・初心者の方でも実現できるのか結論
実現したい住所入力欄の仕様について
・都道府県入力欄を作成する
・市区町村入力欄を作成する
・番地入力欄を作成する
・郵便番号を入力した際に、該当する都道府県と市区町村を入力欄に表示する
ChatGptに住所入力欄作成をお願いしてみた①
メッセージでお願いした内容は下記です。
①HTML,CSS,Javascriptを使用して作成してください。
②郵便番号を入力する欄を作成してください。
③都道府県の入力欄を作成してください。
④市区町村の入門欄を作成してください。
⑤番地の入力欄を作成してください。
⑥郵便番号を入力すると都道府県と市区町村と番地が自動的に表示されるようにしてください。
ChatGptの返答結果①
以下は、指定された仕様に従って住所入力欄を作成するためのサンプルコードです。
このコードはHTML、CSS、JavaScriptを使用しています。
また、郵便番号を入力すると都道府県と市区町村と番地が自動的に表示されるようになっています。
<!DOCTYPE html>
<html>
<head>
<title>住所入力フォーム</title>
<style>
#address-form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="address-form">
<label for="postal-code">郵便番号:</label>
<input type="text" id="postal-code" onblur="fetchAddressDetails()">
<label for="prefecture">都道府県:</label>
<input type="text" id="prefecture" readonly>
<label for="city">市区町村:</label>
<input type="text" id="city" readonly>
<label for="street">番地:</label>
<input type="text" id="street" readonly>
</div>
<script>
function fetchAddressDetails() {
const postalCode = document.getElementById("postal-code").value;
// ここで郵便番号に対応する都道府県、市区町村、番地を取得するAPIを呼び出すことができます。
// 以下は仮のコードで、APIの実装に合わせて適切な処理を行ってください。
const fakeAPIResponse = {
prefecture: "東京都",
city: "港区",
street: "六本木1-1-1"
};
document.getElementById("prefecture").value = fakeAPIResponse.prefecture;
document.getElementById("city").value = fakeAPIResponse.city;
document.getElementById("street").value = fakeAPIResponse.street;
}
</script>
</body>
</html>
このコードでは、郵便番号を入力すると、JavaScriptのfetchAddressDetails
関数が呼び出され、郵便番号に対応する都道府県、市区町村、番地を取得し、それらの値を該当するフィールドに表示します。郵便番号に対応するデータを取得する部分は、実際のAPIに合わせてカスタマイズする必要があります。
これでは上手く動作しない?
上記の返答結果のソースコードでは、望んだ通り動作しません。
どんな郵便番号を入力しても「東京都港区六本木1-1-1」しか表示されない作りになっています。
なぜ?ってなりますよね。
しかしChatGptは最後このように返答してきています。
ChatGptに住所入力欄作成をお願いしてみた②
ChatGptの返答結果②
日本の郵便番号を指定して住所を取得できるAPIの例として、以下のいくつかがあります:
- Japan Post Web API:
日本の郵便番号を指定して、都道府県、市区町村、町域を取得できる公式のAPIです。無料で利用できますが、利用にはAPIキーが必要です。詳細はJapan Postの公式サイトで提供されています。 - 郵便番号API(郵便番号.jp):
郵便番号.jpが提供するAPIで、日本の郵便番号を指定して住所情報を取得できます。無料で利用できるプランがありますが、制限があるため、商用利用や大量のリクエストの場合は有料プランを検討する必要があります。 - Algolia Places API:
Algoliaが提供する地理情報APIで、郵便番号から住所情報を取得できます。Algolia Placesは多くの国や地域をサポートしており、日本の情報も含まれています。利用にはAlgoliaのアカウントが必要です。
これらのAPIは、日本の郵便番号から住所情報を取得するために利用できるものです。各APIの利用条件や料金体系を確認し、プロジェクトに最適なものを選択することが重要です。また、APIのデータの更新頻度や精度も考慮して選択することが大切です。
返答結果を受けて
今回は「2:郵便番号API」のAPIを使用したいと思います。
URLは下記になります。
ChatGptに住所入力欄作成をお願いしてみた③
では、郵便番号APIを使用して作成するように、お願いしてみます。
メッセージ内容
①HTML,CSS,Javascriptを使用してください。
②郵便番号を入力する欄を作成してください。
③都道府県の入力欄を作成してください。
④市区町村の入門欄を作成してください。
⑤番地の入力欄を作成してください。
⑥郵便番号を入力すると都道府県と市区町村が自動的に表示されるようにしてください
⑦apiのurlは下記です
ChatGptの返答結果③
<!DOCTYPE html>
<html>
<head>
<title>住所入力フォーム</title>
<style>
#address-form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="address-form">
<label for="postal-code">郵便番号:</label>
<input type="text" id="postal-code" onblur="fetchAddressDetails()">
<label for="prefecture">都道府県:</label>
<input type="text" id="prefecture" readonly>
<label for="city">市区町村:</label>
<input type="text" id="city" readonly>
<label for="street">番地:</label>
<input type="text" id="street" readonly>
</div>
<script>
function fetchAddressDetails() {
const postalCode = document.getElementById("postal-code").value;
const apiUrl = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${postalCode}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.status === 200) {
const addressData = data.results[0];
document.getElementById("prefecture").value = addressData.address1;
document.getElementById("city").value = addressData.address2 + addressData.address3;
} else {
alert("郵便番号が見つかりません。");
}
})
.catch(error => {
console.error(error);
alert("エラーが発生しました。");
});
}
</script>
</body>
</html>
完成画面
私の望んだ仕様の画面を作成してくれました。
動作の方も問題なく、郵便番号を入力したら該当の住所を表示してくれました。
完成画面
初心者の方でも実現できるのか結論
②返答結果のソースコードで動作確認するが、上手く動作しない原因を探る
③APIを使用しなければ実現できないことが原因と判明
④どんなAPIが、おすすめなのかChatGptに質問
⑤そのAPIを使用して住所入力欄を作成するように再度お願いする。
コメント