Yahoo!ニュースAPIをAjaxで表示

dtnのトップページにはYahoo!ニュースのトピックスを表示させてあります。
とりあえずTopページにニュースを表示させておけば、
ポータルサイトっぽく見えるかなぁと思って付けたのがきっかけでしたが、、、(^＿^;)
最近ではブラウザのスタートページをdtnにしていることもあり、
ニュースを表示させとくと意外と便利だなぁって思ったりもしています。

さて、そのニュースTopicsの表示させ方ですが、
最初作った時は、Yahoo! ニュースTopicsのRSSがあったので、
このRSSデータを、PEARのXML_RSSを使って引っこ抜き、
PHPで表示させたりしておりました。。。
ただ、、、RSSデータの二次利用ってのはやっぱり良いとは思えず、、、
どうしようかなぁと思っていたら、Yahoo! デベロッパーネットワークに、
Yahoo!ニュース用のAPIがあることに今頃気が付きましたヽ(^O^;)ノ
どうやら7月30日に公開されてたようです。。。
という訳で、Yahoo! ニュース APIを使ってさっそく作り直してみました！
でも、どうせ作るんだから、ライブドアのTopページみたいに
タブで切り替えとかも出来たらいいなぁと思ったので、
最近流行のAjaxをチョイ使って、タブ切り替えもできるようにしておきました。
で。↓こんな感じになりました。

仕組みとしては、XMLHttpRequestでJavaScriptからPHPに
RESTリクエスト用のパラメータを付けて放り投げます。
あとはいつも通りPHP側で、
RESTリクエスト構築→返ってきたXMLデータ分解→必要なデータでリンク作成
をして、JavaScript側に戻せばOK(^-^)
Ajaxは便利でいいですね?。
タブ部分は、onMouseOverより、onClickの方がいいかなぁとも思ったのですが、
とりあえずマウスオーバーで切り替わるようにしておきました。
使いづらいようだったらまた変えてみます。

共有