質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

1733閲覧

オーダーフォーム

shinoda

総合スコア75

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2015/11/17 06:13

お世話になります

オーダーフォーム等の郵便番号を入力すると、住所が自動入力される仕組みがありますが、ライブラリを使用せずに(google apiは使用可)作るにはどのようにすればよいのでしょうか?

郵政省よりCSVをダウンロードして、DBに格納して、php、javascriptなどで出力する仕組みを作るのでしょうか?

かなり大雑把な質問で申し訳無いのですがご教授いただければ幸いです。

act823👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ざっくりとした仕組みの話でしたら、以下のようになってると思います。
・前提条件
郵便番号に紐付く住所情報がサーバのどこかに保存されている(主にDBかな)
・処理の流れ
1.郵便番号を入力
2.入力された郵便番号を非同期通信(Ajax)でサーバに送信
3.サーバ処理で郵便番号に紐付く住所情報を取得し返却
4.非同期通信結果を解析し各住所入力フォームに設定

投稿2015/11/17 06:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoda

2015/11/17 07:31

お世話になっております。 早速のご回答ありがとうございます。 ご回答を拝見する限り、かなり作りこみがいりそうですね。(あまりスキルが高くないので...) ライブラリを使うのは簡単なのですが、JSONPとかで他に飛ばしてあったりするのでどうしても不安がありますので、自分で作るとしたらどのようにしたらよいか知りたくご質問させていただきました。 ご存知でしたらお教えください。 GoogleAPIの住所検索は、グーグルマップの近くで使用しなければいけないというのを何処かで見たのですが、そうなのですか? 宜しくお願い致します。
guest

0

ベストアンサー

郵政省よりCSVをダウンロードして使う方法は、下記を参考に実装したことがあります。
リンク内容

投稿2015/11/18 03:48

act823

総合スコア266

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoda

2015/11/24 12:45

お世話になっております。 返信遅くなってしまい申し訳ありません。 ご回答のサイトを参考にしたのですが以下の様なエラーがアラートで出てしまいます。 Error: jQuery111307646145133035661_1448368449799 was not called よろしければご教授頂けますか? <!DOCTYPE html> <html> <head> <title>郵便番号で住所入力補助</title> <meta charset="utf-8"> <script src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#lookup").click(function(){ var zip1 = $.trim($('#zip1').val()); var zip2 = $.trim($('#zip2').val()); var zipcode = zip1 + zip2; $.ajax({ type: "post", url: "api.php", data: JSON.stringify(zipcode), crossDomain: false, dataType : "jsonp", scriptCharset: 'utf-8' }).done(function(data){ if(data[0] == ""){ alert('見つかりませんでした。'); } else { $('#address').val(data[0] + data[1] + data[2]); } }).fail(function(XMLHttpRequest, textStatus, errorThrown){ alert(errorThrown); }); }); }); </script> </head> <body> <form> <p>郵便番号:<input type="text" name="zip1" id="zip1" size="6">-<input type="text" name="zip2" id="zip2" size="6"> <input type="button" id="lookup" value="郵便番号で検索"></p> <p>住所:<input size="50" type="text" name="address" id="address"></p> </form> </body> </html>
act823

2015/12/02 10:24

申し訳ないですが、参考にした箇所が「PHP のみで判別する場合」なので、エラーの詳細はわかりません。
guest

0

自分の会社でもまさにこれを実装してありますが、実装してから思ったのは、わりと郵便番号って変更があるので、その都度自社サーバのDBに登録した郵便番号の更新が面倒くさいってことです(苦笑)

局所的な地域で使うのであれば、運が悪くなければそれほど頻回な郵便番号変更は無いのかもしれませんが、全国版を自分で維持するのは面倒くさいです( ̄▽ ̄;)<今は月に一度、郵政局のデータから郵便番号関連のDBを更新しています。

堅牢なシステムを作らなければいけない前提なら、自前で郵便番号と住所文字列を関連付けたDBを用意するしかありませんが、そうではないなら、その後のメンテナンスの手間を考えるとWebAPIなどを使用して取得してしまうのが手っ取り早い上に簡単だと思いますよ。
データはJSONで取得するのが一般的ですけれど、XMLデータとかでも出力してくれるWebAPIもあったような・・・失念しましたが。

ちなみにgoogleAPIを使ってもいいってことですので、googlemaps APIを使用して、以下のURLにアクセスすると、get情報に入力してある〒100-0001のデータがJSON形式で受け取れますので、それをajaxで料理してあげるのが一番簡単だと思います。

http://maps.googleapis.com/maps/api/geocode/json?address=1000001&language=ja&sensor=false

投稿2015/11/18 01:33

編集2015/11/18 01:35
urdapple

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

urdapple

2015/11/18 02:49

既出のコメントを見逃しておりました・・・ ”GoogleAPIの住所検索は、グーグルマップの近くで使用しなければいけないというのを何処かで見たのですが、そうなのですか?” GoogleGeocodingAPIの使用はおっしゃる通りGooglemapとの併用が規約です。 Googlemapを併用しないのであれば、前提にある”google apiは使用可”を無視するようで心苦しいのですがYahooジオコードのご使用はいかがでしょうか? アプリケーションIDを取得しなければいけない一手間はありますが、アウトプット指定にXMLも指定できますし、日本特化のサービスで住所はもちろん最寄り駅なんかも出力できるので面白いですよ(笑) http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/zipcodesearch.html
shinoda

2015/11/18 03:19

お世話になっております。 やはり自前で作るとなるとかなり大変だということはわかりました。 更新もそれほどされるものなんですね。 自動で郵政省からCSVなりを取得して更新する仕組みも作る必要がありそうですね。 ご提案いただいたAPIなのですが、実装に関しては簡単なのは認識しているのですが、メジャーなAPIはひととおり拝見した感じですと作成者が簡単にログを見れてしまうのとjavascriptなので簡単に文字列を取得できそうだなとあまりスキルが高くない私でも思った次第です。 なので自作する場合の懸念事項等をお聞きしたくご質問させていただきました。 本業ではないため通常の製造機関よりも長くなることを考えどうしたらよいかと困っています。 ヤフーのAPIなのですが調べたところサイトにロゴを載せなければいけないようなので、あまり現実的な選択肢ではないと考えています。 以上長文で失礼致しました。
urdapple

2015/11/18 04:24

あ、そうか、Yahooはクレジット表記が規約にあるんですね( ̄▽ ̄;) 失念していました。すみません。 ”作成者が簡単にログを見れてしまうのとjavascriptなので簡単に文字列を取得できそうだな” この部分は懸念事項ですかね? (プログラム)作成者がログが見られるのは問題が無いのではないのかな・・・と。 もしも誤読していたらすみません。 また、エンドユーザが”javascriptなので簡単に文字列を取得”できるのが問題であったとしても、自作にせよ他社APIを利用する実装方法にせよJavaScriptである以上、どこにアクセスして情報取得しているのかとか、ソースを見られてしまうと解析可能なので、もしもそれが困るならサーバ側で処理させるしかないでしょうね。 例えば郵便番号を入力するイベントを見張って住所を入力するようなAJAX(JavaScript)を利用するのではなくて、ユーザにページ更新をさせる必要(「郵便番号から住所を入力」ボタン等を設置して)がある作りにするとかですね。 あとはJavaScript部分を圧縮(改行やインデントを削除)して、「え?こんなの解析するくらいなら、自分で作るわ」って思わせるような嫌がらせチックな方法くらいしか浮かびません(;・∀・)
shinoda

2015/11/18 04:39

お世話になっております >(プログラム)作成者がログが見られるのは問題が無いのではないのかな・・・と。 →ライブラリ作成者を疑ってたらキリがないのですが、フォームという人の個人情報を扱う部分ですので入力された情報をライブラリ作成者に覗かれてしまうというのは少し不安がありまして。全ては自分のスキル不足からくる問題なのですが...。 あまりわかっていないのですがJSONPですのでライブラリ作成の任意の場所に飛ばしたりできるのかなと思った次第です。 ご意見をまとめますと、私のやりたいことと不安を解消するにはjavascript+php(サーバーサイドのプログラム)などで実装するのが現実的のような気がしてきました。 もちろん技術力が伴っていないので、新たな問題が山積みになりそうですが... そのような観点でもう少し調査したいと思います。 宜しくお願い致します。
urdapple

2015/11/18 05:25

えっと、ちょっと勘違いしておられるようなので追記しますけれど、ご質問の通り郵便番号から住所を入力するだけのAPI製作者に見られる可能性があるのは、「あるIPから、ある時間に、郵便番号データが送られてきた」という情報のみなので、他のフォームに入力した部分はAPI製作者には届きませんよ( ´ー`) ご質問内容とは違いますが、もしもオールインワンでフォーム全体の仕組みそのものを作ってあるようなAPIなら話は別ですが・・・ 送る情報はフォームで入力された郵便番号入力部分のデータのみですから、それ以外のデータをAPI製作者に送る必要はありません。 もちろんそれ以外のフォーム入力部分と、それを受け取るサーバ側プログラムをご自分で作るのが前提です。
shinoda

2015/11/18 08:31

お世話になっております。 なるほどAJAXで渡してるのは郵便番号のみなのですね。 その結果をコールバックしてるだけという感じですかね。 流石にライブラリの中身を全て目を通すわけにも行きませんし、見たところで全てを理解できるとは思えませんが... もちろんライブラリ製作者の中に悪意のあるものは存在するかもしれませんがメジャーなライブラリを使用して、かつ他の部分はphpなりで作成すればセキュリティ上大丈夫そうですね。 少し話を戻してしまい申し訳ないのですが、グーグルAPIの規約についてなのですがグーグルマップとの併用というのは、フォームと同一ページにマップがなければいけないのでしょうか? 例えばですがフォームをAPIを使用して作成し、地図で探すのようなボタンを設けて、押下するとマップが開かれるというような感じだと許容される範囲なのでしょうか?(ボタンを押下しないかぎりマップは表示されない) urdapple様にご質問するのはお門違いかもしれませんがどうぞよろしくお願いします。
urdapple

2015/11/18 10:33 編集

AJAXは、ただの単一データを送って、そのデータによって処理してもらうもの(getで処理させることが多い)と、フォームデータ全体を送って処理するもの(postで処理させることが多い)とあるので、今回は前者の動作で処理させれば、郵便番号以外のデータは送られません。 そもそもgoogleAPIもYahooAPIも郵便番号の処理をさせるジオコード処理のAPIに限って言えば「情報をgetで渡す」が前提なので、むしろフォームの内容までgetで送ったら無視されるかエラーになります(;・∀・) 規約については、利用規約の中にこの一文があります。 ”The Geocoding API may only be used in conjunction with a Google map; geocoding results without displaying them on a map is prohibited.” ページ(https://developers.google.com/maps/documentation/geocoding/usage-limits?hl=ja)より抜粋 直訳すれば「ジオコーディングAPIはグーグルマップと組み合わせてのみ使用することができます。ジオコーディングの結果を地図上に表示しないのは禁止されています。」 ・・・ですかね? あまり英語は得意ではないので、訳が間違っていたらすいません( ̄▽ ̄;) この一文を読む限り、ジオコーディングAPIを使ったなら、その結果は必ず地図に反映させないとダメともとれますね(´・ω・) 例えば住所入力の部分は入力された郵便番号データをつかって、その帰ってきた住所文字列のみを使いますよね。これだけだとアウトだと思います。 でも仰るとおり、その同一ページ内で、↑によってついでに取得できた緯度経度を使って地図を表示するなら問題ないと思います。 ただしその先の表示するかしないかをエンドユーザの判断にまかせるような作りがOKかどうかって言うのは、これは規約の訳し方でどうとれるかってレベルなので、正確にはgoogleに直接聞いてみないことには、私の判断でどうこうって話じゃないですね( ̄▽ ̄;)
shinoda

2015/11/24 12:47

お世話になっております。 別の回答者の方のを参考に色々試しているのですが以下の様なエラーが出て困っています。 お手数ですがご教授いただければ幸いです。 【エラー内容】 Error: jQuery111307646145133035661_1448368449799 was not called 【コード】 <!DOCTYPE html> <html> <head> <title>郵便番号で住所入力補助</title> <meta charset="utf-8"> <script src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#lookup").click(function(){ var zip1 = $.trim($('#zip1').val()); var zip2 = $.trim($('#zip2').val()); var zipcode = zip1 + zip2; $.ajax({ type: "post", url: "api.php", data: JSON.stringify(zipcode), crossDomain: false, dataType : "jsonp", scriptCharset: 'utf-8' }).done(function(data){ if(data[0] == ""){ alert('見つかりませんでした。'); } else { $('#address').val(data[0] + data[1] + data[2]); } }).fail(function(XMLHttpRequest, textStatus, errorThrown){ alert(errorThrown); }); }); }); </script> </head> <body> <form> <p>郵便番号:<input type="text" name="zip1" id="zip1" size="6">-<input type="text" name="zip2" id="zip2" size="6"> <input type="button" id="lookup" value="郵便番号で検索"></p> <p>住所:<input size="50" type="text" name="address" id="address"></p> </form> </body> </html>
guest

0

  1. HTML 上に input:text を 1つないし、2つ設置
  2. 何かとトリガーに ajax 通信で入力値を送信
  3. 送信先の PHP ファイルで受け取った値(郵便番号)をもとに DB から住所テキストを検索
  4. 検索ヒットした住所テキストを JSON(またはXML)形式で応答
  5. ajaxの結果を受け取り、整形して住所入力欄に

以前に書いた記事が、仕組みとしては近いものです。改変すれば、お望みのものになります。
郵便番号データから都道府県・市町村リストを作成するためのスクリプト

投稿2015/11/17 08:24

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ZIP SEARCH API SERVICE
というのが提供されています。

ボランティア的に構築されたサービスのようですが、無償ですし、郵便番号のデータも毎月更新されているようなので使ってみては如何でしょう。
上記リンクには、プログラムサンプルもあります。

投稿2015/11/17 06:45

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問