郵便番号APIを使ってみる

郵便番号APIを使ってみる – メディアデザイン実習J授業のために、「郵便番号API」というのを用意しました。
日本郵便のオフィシャルデータを元に、郵便番号から番地を検索することができます。
シンプルかつ標準的なAPIになっていますので、まずはこれを例にAPIに挑戦してみましょう。

郵便番号

エンドポイント
APIには必ずエンドポイントというのがあります。
Webサイトで言うところのアドレスのようなものです。

郵便番号APIのエンドポイント
http://dev.koekatamarin.com/zokei/zipcode/

ブラウザ上でこれをクリックしても、エラーらしきページが表示されるだけです。
なぜか?
パラメーター(引数)が何も指定されていないからです。

 

パラメーター(引数)

関数(function、メソッド)を実行するには、引数というものがありましたよね。
APIとは、ネット上に存在する関数のようなものです。
APIというネット上の関数を実行するには、大抵の場合、パラメーター=引数を指定する(渡す)必要があります。

エンドポイントにzipcodeパラメーターを付け加えると…
http://dev.koekatamarin.com/zokei/zipcode/?zipcode=560-0013

↑をブラウザ上でクリックすると、今度は

と表示されます。これは、JSON形式のデータです。
みごと、郵便番号から、番地が検索できたというわけです。
 
このJSONというデータ形式、これは要するにJavScriptの「オブジェクト」です。
(参考) http://ja.wikipedia.org/wiki/JavaScript_Object_Notation
 
取得したJSONデータの、階層構造になっているプロパティ(見出し)に、ドット記法(ドットシンタックス)でアクセスすることで、値を表示したりできます。
results.kana1 といった具合に。

 

GETとPOST(ちょっと脱線します)

ところで、さきほどエンドポイントの後ろに
?zipcode=560-0013
って付けましたが、こういうアドレスの付け方ってどこかで見たことありませんか?
そう、Google検索です。

https://www.google.co.jp/search?q=HTML5

この場合の ?q=HTML5 とは、
qというパラメータ(引数)に、「HTML5」というワードを指定していることになります。

この引数の付け方は、「GET方式でURLにクエリストリングをつけている」と言います。

?変数1=値1&変数2=値2… という風につないでいきます。

GETとPOSTというは、HTTPでデータを送信する際の2つの手法です。
htmlのformタグで見たことありませんか?

これです。
このformでは、POST方式でform内のいろいろな値をサーバーに送信します。

?q=HTML5 とか ?zipcode=560-0013 っていうのは、GET方式でサーバーにパラメーターを送信しているということです。

APIと呼ばれるものは、GET方式で利用します。

Google検索もたまたまGET方式を採用しています。
検索サービスの実装ではGET方式がしばしば使われますが、メール送信フォームやユーザー登録フォームなど、通常のWebサイトにデータを送信する場合はほとんどPOST方式が採用されます。

 

JavaScriptからAPIを利用するには?

話をAPIに戻します。
今のは、ブラウザから試しにAPIを叩いてみただけで、クエリストリング(?zipcode=)を使ったのも簡易的な指定方法にすぎません。
あんな生のデータがずらっと出た所で、あまり意味は無いですもんね。
実際には、JavaScriptからAPIを叩いて、データをコネコネするプログラムコードを書かないと始まりません。

JavaScriptからAPIに通信(非同期通信)することを何と言うでしょう?
そう「AJAX」です。

AJAXを処理するのに適した有名なライブラリといえば?
そう「jQuery」です。

 

jQueryでAPIとAJAX通信
いよいよ実際にコードを書きましょう。

まず、BoilerPlateまたはBoilerPlate(Cached)を選択して、プロジェクトzipcodeを作成します。
コードを書き込むところは js フォルダの中の、script.js ファイルです。

jQueryでAPIとAJAX通信する例

上記のコードをscript.jsに打ち込んでみましょう。
ほとんどそっくり打ち込むのはアホらしいと思うかもしれませんが、コーディングに慣れるためにも我慢しましょう。

var _zipcode = ‘560-0013’;
の部分は、ご自分のお住まいの郵便番号にしてみても構いません。

打ち込み終わったら、「実行」メニューの「実行」を実行してみてください(・ω・)

ブラウザのダイアログに「豊中市」と表示されますね(560-0013の場合)。

※ブラウザのページ自体がうまく開かない場合は、 http://127.0.0.1:8020/zipcode/index.html を開きましょう。

 

次のステップ
上記のサンプルコードで、APIからデータを取得することが出来ました。

ただし、検索する郵便番号を変えるには、ソースコードを書き換える必要があります。つまり、ユーザーにとってはあまり意味のないアプリケーションです。

また、ダイアログ表示するだけなのもダサいですよね。

皆さんならどう洗練させていきますか?
単純に「洗練」と言っても、様々なディレクションが考えられます。
そもそも「APIを使う」というのが出発点なだけで、このアプリケーションのコンセプトは白紙です。

「題材が郵便番号ではつまらない」と思うかもしれませんが、ぜひこのサンプルの改善にも取り組んでみてください。

Have fun!(^ω^)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です