YappoLogs

価格.com API JSONPと、JavaScriptテンプレートキットの組み合わせ

価格.comのAPIが話題になってますが、APIの結果をJSONPで履いてくれる価格.com API JSONPが公開されていたので、先日のテンプレートの奴と組み合わせて物を作りました。
本来なら価格.com本体でJSONP吐いてもいいんですけどねぇ。。。ケチ。。。

http://tech.yappo.jp/demo/kakaku/
JSONPだけでAjaxの動的検索っぽい事をしています。
作り方は、とても簡単なのでソースを読んでみるといいと思います。

もっともっと単純な方法は

<div class="kakaku">

  <table>

    <tr>

      <td><a class="[% $ItemPageUrl | attr 'set' 'href' %]" target="_new"><img class="[% $ImageUrl | attr 'set' 'src'%]" /></a></td>

      <td>

        <table>

          <tr>

            <td>製品名</td>

            <td><div class="ProductID"></div><a class="[% $ProductName | inner %][% $ItemPageUrl | attr 'set' 'href' %]" target="_new"></a></td>

          </tr>

          <tr>

            <td>カテゴリ</td>

            <td><span class="CategoryName"></span>(<span class="PvRanking"></span>位)</td>

          </tr>

          <tr>

            <td>メーカー</td>

            <td class="MakerName"></td>

          </tr>

          <tr>

            <td>最安値</td>

            <td class="[% cat $LowestPrice '円' | inner %]"></td>

          </tr>

        </table>

      </td>

    </tr>

  </table>

</div>

<script type="text/javascript" charset="euc-jp" src="./cjtk.js"></script>

<script type="text/javascript">

var cjtk;

var config = {

    classname: 'kakaku',

    foreach: true,

    url: 'http://jsonp.yatena.com/' + encodeURI('ipod'),

};

cjtk = new Cjtk(config);

cjtk.process();

function kakaku_ws(obj){

	cjtk.callback(obj.Item);

}

</script>

のように記述すれば下記の様に表示出来ます。
http://tech.yappo.jp/demo/kakaku/body.html
この方法だとキーワードが固定になるけど、使い出はあるかもです。
これはipodで検索する様になってますが、アップルにしたければ下のJavaScriptの部分を

    url: 'http://jsonp.yatena.com/' + encodeURI('アップル'),

にしてください。

ツールがそろってくるとマッシュうpも楽になりますな。

という訳で、テンプレートキットの販促活動でした。

Posted by Yappo at 2006年09月28日 19:39 | TrackBack | tech