YahooのニュースAPIで取得した情報をAjaxを使いサイトに表示させる

YahooニューストピックスAPI

2007年当時に提供されていたYahooのニューストピックスAPIを使い、dtn.jpのトップページにヤフーニュースの情報を表示させてありました。

トップページにニュースが表示されていれば、ポータルサイトぽく見えるかなと思って付けたのがきっかけです。

最近では、自身でブラウザのスタートページをdtn.jpにしていたこともあり、ニュースを表示させておくと意外と便利だと思ったりもしていました。

dtn.jpのサイトでニュース情報を表示させるにあたり、当初はYahooニュースのRSSをPEARのXML_RSSで取り込み、パースして得られたデータを使って表示させていました。

とはいえ、RSSデータの二次利用はあまり良いとは思えず、どうしようかと思っていたところ、YahooデベロッパーネットワークにYahooニュース用のAPIがあることに気が付きました。どうやら7月30日に公開されてたようです。（※今は提供が終了されています）

そこで、このYahooニュース用APIを使って作り直しをしていました。

せっかく作り直すので、ライブドアのトップページみたいにタブで切り替えて表示といったことができたらかっこいいなぁとは思ったので、最近流行となりつつあったAjaxを使ったタブ切り替えもできるように作り込みをしてみました。

XMLHttpRequestでJavaScriptからPHPにRESTリクエスト用のパラメータを付けて投げて実現することができました。

PHPでRESTリクエスト構築→返ってきたXMLをパース→必要なデータでリンク作成→JavaScript側に渡す。Ajaxは便利でいいです。

タブ部分はonMouseOverより、onClickの方がいいかなぁとも思ったのですが、とりあえずマウスオーバーでスイスイ切り替わるようにしてみました。使いづらいようだったらまた変えてみます。