Yahoo! ニュース Web サービスを用いたニュースカテゴリの取り込み方法

ここでは Yahoo! ニュース Web サービス を利用して、 Yahoo! ニュースカテゴリ一覧の取り込み方法を説明します。それぞれのトピック名をクリックすると、Yahoo! ジャパンのニュースヘッドラインページへジャンプします。

まずは実行例を見てください。

Yahoo! Japan ニュース

上記ニュースカテゴリは、Yahoo! ニュース Web サービスを用いて取得しています。

アプリケーションの構築方法

ここでは上記のように、コンピュータカテゴリのニュースカテゴリを取得する方法を説明します。

全体的な構成

いろいろな方法があるのだと思いますが、私は下記のような構成にしています。

次のような順番になります。

Web クライアントの JavaScript から Ajax リクエストを自サーバーに対して行う。
この時、prototype.js の Ajax.Request を利用しています。
サーバー側ではクライアントからのリクエストから、Yahoo! Web サービス向けの HTTP リクエストを作ります。
Yahoo! Web サービスを呼び出し、結果を XML で受け取ります。
Yahoo! Web サービスから返された XML メッセージは simplexml_load_string 関数で XML オブジェクトに変換されます。
json_encode 関数を使って上記オブジェクトをクライアントに送信する。
クライアントでは eval を使って JSON 文字列を解析します。
HTML 要素を作成し、div 要素の innerHTML に差し込みます。

それでは、もう少し具体的に見ていきます。

アプリケーション ID の取得

最初にあなたのアプリケーション ID を取得します。これはYahoo! ニュース Web サービスのサイトから無料で取得できます。

REST リクエストの送信

次の形式で Yahoo! Web サービスに対して、 HTTP の GET リクエストを送信します。

http://news.yahooapis.jp/NewsWebService/V1/Topics?appid=[あなたのアプリケーションID]&パラメータ1=値1&パラメータ2&値2...

コンピュータカテゴリに絞る場合は、パラメータとして category を渡し、その値を computer とします。

試しにブラウザからリクエストすると、次のように XML メッセージとして応答が返って来ることがわかります。

要はこれをアプリケーションに取り込めばよいのです。

ちなみに、このように HTTP リクエストに対して XML のメッセージを応答として返す形式の API を一般に REST 形式の API といいます。

AJAX によるリクエスト送信

prototype.js の Ajax.Request を利用してリクエストを送信しています。ここで気をつけていただきたいのは、クライアントからリクエストを行っているのでは Yahoo! 宛てではなく、当サイトのウェブサーバ (http://keicode.com) であるということです。セキュリティの関係から、クロスサイトの Ajax 呼び出しは出来ないようになってます。同一生成元ポリシー (Same Origin Policy) というやつです。

Same Origin Policy って日本語で何て言うのかググってみたのですが、あまり訳語があてられてないようですね。 MDC で「同一生成元ポリシー」と訳されていたので、それを拝借しました。

そういう縛りがあるため、わざわざ一旦当サーバーを介しています。また、PHP を介することによって、 XML のパースが非常に簡単になることも利点といえるでしょう。JavaScript 上で XML のパースをするより全然楽です。

function set_news() {

     if(!$('news_ph')){
          return;
     }

     $('news_ph').innerHTML 
          = '<img src="image1.gif" alt=""> ニューストピックを読み込んでいます...';

     new Ajax.Request( 
          'get_yws01.php',
          { 
               method: 'POST', 
               onComplete: function(trans){
                    set_news_table(trans.responseText);
               } 
          }
     );
}

尚、「読み込んでいます...」のときに表示するアイコンは ajaxload.info で生成した GIF アニメーションを利用しています。

REST リクエストの送信と XML の受け取りと解析

PHP から Yahoo! の API サーバに対して、REST リクエストを送信し、その結果を XML で受け取り、さらにその結果をクライアントに JSON 形式で返します。 PHP ではこの処理を非常に簡単に行えます。全部いっぺんに見てみましょう。全コードは次の通りです。

<?php

$c = file_get_contents('http://news.yahooap...(省略)');
$xml = simplexml_load_string ( $c );
echo json_encode($xml);

?>

file_get_contents 関数で REST リクエストの送信及び、結果を受け取ります。$c には XML メッセージが文字列として入ります。次に simplexml_load_string で XML メッセージを XML オブジェクトに変換します。それが $xml です。最後にそのオブジェクトを json_encode で JSON にフォーマットして、クライアントに echo します。

結果の受け取りと表示

この結果、上述の JavaScript の Ajax.Request の onComplete に指定したファンクションにて、 JSON 形式のレスポンスを受け取ります。

JSON を eval で評価することにより元のオブジェクトにデシリアライズ (deserialize) できます。

function set_news_table(t) {

     var div = $('news_ph');
     
     if(!div){
          return;
     }
     
     var news = eval('(' + t + ')');
     
     if( !news || !news.Result || !news.Result.length ){
          div.innerHTML = '<b>ニュースカテゴリが読み込めませんでした。</b>';
          return;
     }
     
     var sb = new TKStringBuffer();
          
     for(var i=0; i<news.Result.length; i++){
          
          var r = news.Result[i];
          
          sb.a('<a href="');
          sb.a( r.url );
          sb.a('" target="_blank">');
          sb.a( r.topicname );
          sb.a('</a>');
          
          if ( i < news.Result.length - 1 ) {
               sb.a(' | ');
          }
     
     }
     
     sb.a('</table>');
     
     div.innerHTML = sb.toString();
   &nbs
}

HTML の生成については好きなように行えばよいでしょう。コードで使っている TKStringBuffer については当サイト内 JavaScript の文字列の結合を最適化するにて説明しています。