第 1 0 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP onb ⅳ「イベントハンドラ するとフォーカスが外れ、 onblur イベントが発生します。 入力可能な状態がフォーカスの当たっている状態で、その状態から他の場所をクリック いたものが外れることを言います。テキストボックスの場合は、マウスでクリックして う関数が関連付けられています。 onblur イベントとは、それまでフォーカスが当たって サンプルプログラムでは、 onblur イベントハンドラに JSONP のリクエストを行 HTTP 通信を行って非同期処理をしていますが、これを Ajax と呼べるかどうかは難 サーバーから画像データを読み込んで表示させることもできます。これも一応は を使って img タグの s 「 c 属性の値を変えることによって、ページ遷移することなしに HTML では他にも、「第 3 日」に作ったサンプルプログラムのように、 JavaScript 思います。 JSONP 十ダイナミック script タグも Ajax の 1 手法、としてもいいのではないかと ばれていることを考えても、細かい違いに関わらす同じ結果をもたらすものとして、 XML の頭文字からきているのに XML を使わずに JSON を使ったものでも A 旧 x と呼 法を Ajax と呼べるのかどうか、と疑問に思う方もいるでしよう。しかし、 Ajax の x が を使ってページ遷移を行わずにサーバーから受け取ったデータを非同期処理する手 XMLHttpRequest オブジェクトを使わずに、 JSONP 十ダイナミック script タグ JSONP 十ダイナミック script タグも Ajax? まとめ しいところです。 219 る。 送ると、 XMLHttpRequest オブジェクトを使わずにクロスドメインでの非同期処理ができ CJSONP 形式でデータを返す Web サービスにタイナミック sc ⅱ pt タグを使ってリクエストを と呼ぶ。 CJSON 形式のデータを JavaSc 「 ipt の関数の引数にして関数こと返すデータ形式を、 JSONP つ。 ネットを介して他のプログラムとデータのやりとりをするプログラムを、 Web サービスと言

第 10 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP ワンポイント・アドバイス シフト』 S など、 UTF-8 以外で書かれた日本語文字列がバラメータの値に含まれて いる場合は、 URL として送る前に JavaScript の encodeURI ( ) 関数を使ってエンコ ードする必要があります。ただし、前記の例のように半角アルファベットや数字など アスキー文字だけからなる場合は、エンコードの必要はありません。 でした。しかし、次に紹介する JSONP の登場によって、 JavaScript だけを使って Web サ ングを知らない一般個人がホームページで使うには Web サービスはハードルが高いもの サイドプログラムの実行環境がなければ Web サービスを使うことができず、プログラミ てきました。したがって、サーバーサイドプログラミングの知識があり、かっサーバー プロキシ (proxy) を経由させることによってこの制限を乗り越えるという方法が取られ XMLHttpRequest のクロスドメイン制限があるため、間にサーバーサイドプログラムで ます。 Aj ax で動的に Web サービスを使う場合は、「第 8 日」にもふれたように サービスにリクエストを送り、返されたデータを HTML 形式に変えてプラウザへと送り 静的な Web サイトで Web サービスを使う場合は、サーバーサイドプログラムから Web JSONP とは ービスを利用することができるようになりました。 XMLHttpRequest のクロスドメイン制限の不便さを回避して、 Web サービスを利用す るための方法として考え出されたのが JSONP というデータ形式です。 JSONP という名前 からも想像できるように、これは基本的に JSON 形式のデータであり、 JSON と違うのは、 JSONP では JSON データを引数として入れた関数そのものをデータにしているという点 です。 【 JSONP の例】 cal lback( { “工 tem" : "Author": " 岡田克司“ } ) JSONP は、ダイナミック script タグと組み合わせて使われます。ダイナミック script タ グとは、 JavaScript プログラムで動的に script タグを生成する手法のことです。 script タ グの src 属性では、 HTML 文書が置いてあるサーバーとは別のサーバーにあるスクリプ トプログラムでも読み込むことができます。これを利用して、 src 属性の中に JSONP を返 す Web サービス API のリクエスト URL を書いて script タグを生成すると、サーバーから 返ってきた JSONP 形式の関数が自動的に実行されます。また、ダイナミックに script タ グを生成することにより、ページ遷移をすることなしに JavaScript 関数を JSON データの 引数とともに読み込んで実行することができるため、 XMLHttpRequest オプジェクトを 使ったのと同じように非同期処理が行えるというわけです。 JSONP ではあらかじめ渡す関数名が決まっている場合もあれば、自分で関数名を決め " 10 日でおほえる avasc て ip セ入門教室 " ー JSONP は、 JavaScr : ー ipt Object Notation ー ー with Padding の略で す。

プロバティ名 itemName itemPrice itemCaption itemUrl smalllmageUrI 第 10 日 / 2 時限目・ JSONP を使ったマッシュアップ ~ 楽天 + 価格.com 説明 商品名 商品価格 商品説明文 商品 U 日 L 商品画像 (64px x 64px) サンプルプログラム中、コールバック関数は仮引数 json で JSON データを受け取って います。したがって、たとえば 1 番目の商品の価格はコールバック関数内では zson. BOdy. 工 temSearch. ltems . 工 temCO] . itemprice で、パースできます。 価格.com API JSONP 価格 . c 。 m API JSONP は、オンライン通販の価格比較サイトである価格 . c 。 m の web サービス API の仲介をして、 XML データを JSONP データに変換して提供する Web サービスです。 価格.com API JSONP のリクエスト URL は、 http: / / jso れ 0 ・ ya セ ena.com/検索キーワード です。検索キーワードの部分に、 UTF -8 でエンコードした文字列が入ります。 コールバック関数名は kakaku ー ws と決められているため、プログラム内でもこの名前 でコールバック関数を定義します。また楽天ウエプサービスとは違って、リクエスト URL 中でコールバック関数名を渡す必要はありません。 価格.com API JSONP から返される JSON データの形式は、 { “工 tem" : [ { "ReviewPageUr1 “ : "http : //kakaku. com/prdevalua te/evaluate . asp? ・・ です。 ltem というプロバティの値として配列が入っていて、その中に個別の商品情報か それぞれオプジェクトとして与えられています。主なプロバティ名とその説明は、次の 価格.com API JSON ー ー P の URL は、 http://j sonp. yaten a. ー ー com/ : です。 通りです。 プロバティ名 ProductName ltemPageUrI ImageUrI Lowe st P 「 i ce CategoryName 説明 製品名 製品ページ 製品画像 IJ 日 L 最低価格 カテゴリー名

第 1 0 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP “ % 6 % 97 % A5 % を 6 % 9C C % 8 % 9E ” 箇所にコピー & ペーストします。 JavaScript では文字列リテラルは引用符で囲みますが、 とエンコードされた値が返されるので、引用符に囲まれた部分をリクエスト URL の該当 リクエスト URL ではパラメータの値が文字列であっても、引用符は付けずに書いてくだ さい。 , を Firebug - aboutblank ー、。 ファイルー表示へルプ 調査消去ゴロプアイル コンソール HTML ( 55 スりワト ン > > 2 れ cod Ü良工 ( ”日本語 ”を三石をヨ 7 を AS を三 6 を 90 を熹 C を 2 日を AA 宿 9 を” enc0deURI に日本語 : 実行消去コピー DOM 接岐 オゴションマ 0 ワンポイント・アドバイス ブラウザの URL 入力欄に直接入力するのではなく、 UTF -8 で書かれた HTML 上で 動いている JavaSc 「 ipt プログラム内からリクエストを送信する場合は、日本語文字 列も IJ の一部としてそのまま送ることのできる UTF-8 コードになっているため、工 ンコードする必要はありません。 JSONP データ JSONP データは先に見たように、 JavaScript の関数に引数として JSON 形式のデ ータが入れられたものです。 JSONP の P は padding ( 詰め物 ) の頭文字で、ちょうど JSON が関数に詰められた形になっています。 XMLHttpRequest オプジェクトを使った Ajax では、サーバから返された JSON データ はオプジェクトの responseText プロバティに文字列型データとして入れられていたた め、 eval() 関数で JavaScript のコードとして評価し直す必要がありました。しかし、ダイ ナミック script タグでは JSONP は、文字列型データではなく JavaScript として直接実行 可能なコードとして送られてくるので ( 普通に script タグを使って js ファイルを読み込ん だのと同じ状態 ) 、 ev 0 関数を使う必要はありません。 郵便番号検索 JSONP では、以下の形式で JSON データがコールバック関数とともに返 されます。

バラメータ名 developerld affiliateld operation callback keyword verslon hits page imageFlag 必須 J S O N P として出 力する場合は必須 〇 〇 〇 デフォルト値 なし なし なし なし なし なし 30 1 O 説明 デベロッパー旧 アフィリエイト ID 使用する API の操作名 ltemSearch JSONP として出力する際のコー ルバック関数名 (UTF-8 で URL 工ンコードした文字列 ) 英数字、「 . ( ドット ) 」、「一 ( アンダ 括弧 ) 」のいずれか 1 文字以上 検索キーワード 2007-10-25 1 ページあたりの取得件数 取得ページ数 ( 1 から IOO までの 整数 ) 商品画像有無フラグ ( O : すべての 商品を検索対象とする 1 : 商品画像ありの商品のみを検索 対象とする ) ( ※ ) keyword 、 genreld ( ジャンル ID ) 、 catalogCode ( カタログコード ) のいずれかが必須 JSONP 形式でデータを返して欲しいときは、 ca Ⅱ back パラメータでコールバック関数 を指定します。このとき、関数名の後に 0 は付けません。 ca Ⅱ back パラメータを省略した 場合は、 JSONP ではなく JSON が返されます。 楽天ウエプサービスの商品検索 API から返される JSON データは、 {"BodyI' : {“工 temSearch" : {“工 tems" : {“工 tem" : 8 さい。 す。それ以外のプロバティについては、楽天ウエプサービスのホームページをご覧くだ ィ名は以下の通りです。本サンプルプログラムで使っているデータだけを表にしていま 品の詳細情報がオプジェクト形式で格納されています。個別商品の詳細情報のプロバテ という形式ではじまります。 "ltem" の値として配列が入っており、その配列の中に個別商 16 ′ "shopName" : ” " ・ [{"genreldl' : ” 110457 “′ "creditCardF1ag":I, “て ev 土 e 0 れ t “ :

サンプルプログラムのコールバック関数 kakaku_ws 0 では楽天のときと同じように json という仮引数で JSON データを受け取っています。したがって、たとえば最初の商品 の製品名は関数内では、 コ SO れ . 工 temC 0 ] . ProductName で、パースできます。 dOjO. io.script. get 0 Dojo には、 dojo. io. script. get 0 という、ダイナミック script タグ用の関数が用意さ れています。この関数は、オプジェクト形式で引数を受け取ります。引数のプロバティ 名と値は、次の通りです。 callbackPa 「 am プロバティ名 url content load canDelete サーバーのプログラムの U 日 L ( バラメータ部分は含まない ) ( 文 字列型 ) リクエスト IJ 日 L のバラメータとその値 ( オブジェクト型 ) ( ただ しコールバック関数は含まない ) リクエスト U 日 L の中で渡すコールバック関数のバラメータ名 ( 文字列型 ) ( たとえば楽天ウェブサービスの場合は " c 訓 back " ) コールバック関数名 ( 識別子 ) 関数の実行が終わったら sc 「 ipt タグを削除するかどうか ( ブール 型 ) ( 削除するなら t 「 ue 、デフォルト値は囿 se ) サンプルプログラムでは reqJSONP() という関数を定義し、その中で楽天ウエプサー ビスと価格.com API JSONP の 2 組のパラメータオプジェクトを jsonp ー arg というオプジ ェクトに入れ、それぞれ "rakuten" 、 "kakaku" とうラベル ( プロバティ名 ) を付けています。 このマッシュアップにさらに Web サービスを追加する場合は、コールバック関数を追加 し、同時に reqJSONP0 関数内の jsonp ー arg にパラメータオプジェクトを追加し、さらに CSS ファイルに結果表示用の div 要素の ID を追加するだけですべて完了します。逆に、今 ある Web サービスをマッシュアップから削除する場合もコールバック関数と、 reqJSONP() 関数内の jsonp_arg の該当オプジェクトおよび CSS ファイル内の ID を削除す るだけです。 HTML 部分は変更する必要がありません。 230

6 JavaScript ライプラリの利用 このサンプルプログラムでは Ajax の基本的な仕組みを理解するために、自分で JavaScript のコードを書いて XMLHttpRequest オプジェクトを操作しました XMLHttpRequest オプジェクトの操作が、いかに煩雑であるかがわかったことと思いま す。「第 9 日」で取り上げる各種 JavaScript ライプラリでは、この Ajax プログラミングの 面倒な部分をライプラリ側で行ってくれ、プログラミングの煩わしさを軽減してくれる Ajax 専用のメソッドが用意されています。「第 9 日」「第 10 日」では、 JavaScript ライプラ リを使った Ajax のサンプルを紹介します。 ータを読み込む方法もあります。これについては、「第 IO 日」に取り上けます。 隠しフレームを使う以外にも、ダイナミック sc 「 ipt タグを使って JSON 形式のデ CSS で非表示 ( dis ay プロバティを none にする ) にするという方法もあります。 一般的です。また、フレームの代わりにインラインフレーム (iframe 要素 ) を使い、 ってきた結果を表示されているほうのフレームに表示する、などの使い方をするのが 隠しフレームに読み込むファイルの中のフォームをスクリプトを使って操作し、返 うにするものです。 にし、さらにフレームのリサイズを禁止 (noresize) することによって表示しないよ ムはこのうちどちらか 1 つのフレームの幅 ( または高さ ) をゼロにして枠の太さを O 画面の上下または左右に別々の HTML ファイルを読み込むものですが、隠しフレー 広まる以前に使われていたのが、「隠しフレーム」を使う方法です。フレームは通常、 XMLHttpRequest を使う以外にも、非同期処理を行う方法があります。 Ajax が 隠しフレームを使った非同期処理 まとめ を使って JavaSc 「 ipt のコードとして評価した上で、変数に渡して処理する。 こ ) JSON データは「 esponseText に文字列として格納されているため、 eval ( ) 関数など タを記述したものである。 CJSON は、 JavaSc 「 ipt の配列リテラルまたはオブジェクトリテラルと同じ書式でデー 周 ax でデータをやり取りする場合は、 XML または JSON 形式が使われることが多い。

第 1 0 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP 10-1 . htm と 1 0-I . js 、 prototype.js をダウンロードし、 1 0- l.js をエデ テンプレートファイルを開く プログラムを作成する 屯 HT Ⅶ工デイタ HyperEdit- 0- l.j - : 3 第篳 , イタで開きます。 つに茎 ′ F B B / 第は 翻万イル ( F ) 編集 ( E ) HTML(H) 登録タ牙し 10 ) 表示 (V) ワインドワ世 0 ア ( ? ) : f unct i on ( ) { ↓ Wi ndOW . ↓ unct ion call bac json 4 ト国にに上国◎回図目囲囲曲 「ソースコードの記述」を参考にして、スクリプトを書き込みます。 コードを記述する ) ァイ月編集 HTML(H) 登録タグ ( A ) , ナル ( T) 表示 ( の謝ンドス明アの 屯 HTML 工テイタ Hy 正 d にヨ 10-1 - ま第 : = ' 10-1 . htm を、ブラウザで開きます。 ブラウサで動作を確認する $$("head") [ 0 ] ・ appendChiId(scripteIem) ; ↓ ↓ sc r i pt e 尾第・ t ype "text/javascript"; SC r i pt e ー em . S rc 十 : "?PostalCode=" + $f("pcode" + "&Callback:callback"; ↓ SC r i pt 引 em ・ s rc http://www ・ yoshimeux ・ com/pj ostalJsonp ・ ashx"; ↓ var scriptelem document . createElement ("script") ; ↓ $("pcode") ・ onblur : function() { ↓ window. onload : function() { ↓ ↓ ↓ data ・ town; ↓ $ ( なレ t " ) . value . value : data ・ c i t y ; ↓ $ ()c i t y" . va ー ue data ・ pref; ↓ $("pref" var data : json ・ postalStruct; ↓ っ 0 墨 return false; ↓ alert(json ・ errorMessage); ↓ if !json ・ successes) { ↓ i f ! j son ) r et u rn f 引氈 ; ↓ unc lOn callback json 、国にに国◎回図囲曲囲・・ = ロ′ F 第 / 第 0 は言 ・住所の目動補完 - M 。ゴ firefox 住所の自動補完 ◆の , , 0 朝、全 ~ 、」 file///l , ロ , 。。 9 厄気 ファイル・ 0 一編集ー表示 (Y) 履歴 ~ ・に池・ブッケマークツルヘルプせ 郵便番号 : 都道府県 : 区市町村 : 町名・番地 : ( 例 : 000000 の 213

てリクエストと一緒にパラメータとして送るものもあります。いずれの場合にしても、 プログラムの中で関数を定義し、引数として渡された JSON データをどう処理するのか を決める必要があります。 JSONP でデータと一緒に渡される関数は、「第 8 日」に出てき たコールバック関数と同じ役割をするものと考えていいでしよう。 では、実際に JSONP とダイナミック script タグを使って、 Web サービスを利用したプ 今回作成する例題の実行イメージ ログラムを作ってみましよう。 を住所の自動補完 - Mozilla firefox ◆ , 多 , 0 3 全 ~ ロ file///C , [ 0 ヨ區五ヨ〕 ファイル編集表示履歴・ i ( 出 ( リ。づックマ、 - ク ( 旦 ) ツールヘルプ ( 0 住所の自動補完 郵便番号丨 16 ! 例 : 000000 の 0 住所の目軌補完 - MozilIa firefox 町名・番地 : 区市町村 : 都道府県 . ファイル偏集表示履歴・に池調ーブッケマーク ( ツールヘルプ凹 0 住所の自動補完 郵便番号 : 16 開 ooq 都道府県 : 東京都 区市町村 : 新宿区 町名・番地 : 舟町 ( 例 : 0000000 ) 匡区〕〔至亟〕 郵便番号を入力し、 外す どしてフォーカスを 外をクリックするな テキストボックスの に入力される 住所の一部が自動的 テンプレートファイルは こちら 212 onblu 「イベントハンドラ ダイナミック script タグ JSONP Web サービス API ・このレッスンのキーワード

第 1 0 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP く script type="text/javascript" s て c = “ 10-1. “〉く / sc て土 pt 〉 く title 〉住所の自動補完く代土い e 〉 く /head> く b0dY> く h ゎ住所の自動補完く / h ゎ <form false; “ > 郵イ更番号 . く input type="text" id=l'pcodel' size="10"/> ( 例 : 0000000 ) く b て / 〉 者 5 道府県 : く土れ t type="text" id="pref" s 土 ze = " 5 。 / > く b て / 〉 区市町村 : く土れ p t type="text" id="city" s 土 ze = " 10 " / > く b て / > 町名番士也 : <input type='ltext" id="streetn size="15"/> く土豆 p t type="submitn マ al 毯 e = " ) 医イ言 " / > く inp t type="reset" val e = “キャンセル“ / 〉 く / form 〉 く /body> </html> 解説 サンプルの概要 215 というスクリプトを実行したのと同じ状態になります。 く /script> ca11back({JSON データ }レ く script type=ntext/javascript"> JSONP 十ダイナミック sc 「 ipt タグを使ってデータを受け取ると、ちょうど POINT ワンポイント・アドバイス いう関数をコールバック関数に使っています。 JavaScript の関数としてそのまま実行されます。サンプルプログラムでは、 callback() と に src で指定したリクエストが Web サービスのサーバーへ送信され、返された JSONP が 生成します。 src には、リクエスト URL が入ります。この script タグが生成されると同時 住所入力フォームの郵便番号を入力したあと、フォーカスを他へ移すと script タグを 参照してください。 prototype を使用しています。それぞれの関数の使い方については、「第 9 日」 1 時限目を 今回のサンプルでは便利なユーティリティ関数 $ 0 、 $ $ 0 、 $F 0 を使うため、