YahooニュースAPIをAjaxで表示

YahooニューストピックスAPI

dtn.jpのトップページにはYahooニュースのトピックスAPIを使い、ヤフーニュースを表示させてあります。トップページにニュースが表示されていれば、ポータルサイトぽく見えるかなと思って付けたのがきっかけです。

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

ニュース情報取得をRSSからAPIに変更

ニュースTopicsの表示方法ですが、最初に作った時は、YahooニュースTopicsのRSSがあったので、このRSSデータをPEARのXML_RSSで取り込み、これをパースして出力して表示をさせておりました。

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

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

Ajaxでタブ切り替え

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

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

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