このページの本文へ

サーバー不要!Yahoo! PipesでXML→JSONPに変換 (3/3)

2009年07月22日 23時07分更新

文●藤本 壱

  • この記事をはてなブックマークに追加
本文印刷

●地点と日のパラメーターを入力する

 自作のPipeの一覧のページに戻り、livedoor Weather HacksのPipeを開くと、「Input day」「Input city number」の2つの欄が表示されます。これらの欄にパラメーターを入力し、「Run Pipe」のボタンをクリックすると、データを受信できます。

 たとえば、東京(地点番号は「63」)の今日の天気の情報を得たい場合は、「Input city number」「63」と入力します。今日の天気を得るには、「Input day」の欄に「today」と入力します。

Pipesの画面

東京の今日の天気が得られた



●JSONPのデータを取得する

 先ほどのPipeの実行画面には「Get as JSON」のリンクがあります。リンクのアドレスは、以下のような形になっています。

 http://pipes.yahoo.com/pipes/pipe.run?_id=PipeのID&_render=json&city=地点番号&day=日


 リンクのアドレスをコピーし、その最後に「&_callback=関数名」を追加すれば、JSONPでデータを得るためのアドレスができあがります。また、上記のアドレスの「地点番号」と「日」の部分を書き換えることで、各地の今日/明日/明後日のデータを取得できます。


JSONP化したデータを利用した例

 これでlivedoor Weather HacksのデータをJSONPで取得できるようになりました。最後に、実際に取得したデータを利用して作った簡単なサンプルを紹介します。プルダウンで選択した地点と日の天気を表示するWebページです。筆者のWebサイトで公開していますので、JSONP化したデータの扱い方については、このページのソースコードを参考にしてください。

サンプル画面

JSONP化したlivedoor Weather Hacksのデータから天気の情報を表示するサンプル


●livedoor Weather Hacksを使ったサンプルページ(筆者のWebサイト)

 http://www.h-fj.com/ascii/lwws/sample.html

前へ 1 2 3 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています