八角研究所 : jQuery （ jFeed プラグイン）を使って RSS リーダー

jQuery （ jFeed プラグイン）を使って RSS リーダー

今日は自社 3 階会議室で、杉丸が、昔どっかで Java を教えていたときの生徒だったひとたちと一緒に jQuery を勉強するらしいというので、行ってみました。ぼくも jQuery さわったことなかったので誰かが教えてくれるかもしれないと期待でいっぱい。

勉強会自体は、もともと何かみんなで作りたいモノがあったりして、それの完成を目指して必要な知識を収集しつつ進めているらしいのですけど、ぼくは実質今回初参加だったので、その辺のことはなんだかよくわかりません。ともかく今日は jQuery を勉強しておこうという話におちつき、各自で自由にテーマを決めて jQuery を使ったページやアプリを作って、最後に見せ合いっこするという話になりました。制限時間は 2 時間。ぼくはとりあえず RSS を読み込んで適当に表示させることにしました。ベッタベタです。というわけで、以下、jQuery を使って RSS 読んでみます。

jFeed で RSS 読み込み＆解析

RSS フィード解析用に jFeed という jQuery のプラグインがあるようです。リンク先ページの Usage と JFeed properties と JFeedItem properties を見れば使い方はすぐわかりそうです。

JavaScript では外部サイトのフィードを取得することができないのですが、それを解決するため、jFeed には proxy.php という PHP スクリプトが準備されています。自分のサーバに proxy.php を置いて HTTP で […]/proxy.php?url=http://www.hakkaku.net/articles/feed のように自分のサーバの URL を指定すれば、proxy.php が http://www.hakkaku.net/articles/feed の内容を取得して、それをそのまま出力してくれる、つまり外部リソースを自分のサーバ経由で取得できるわけです。

というわけで PHP を動かさないといけないので、ローカルファイルとしてブラウザで実行するだけではだめなのでした。仕方ないので XAMPP を使うことにします。Apache + PHP と MySQL を使える環境をお手軽に構築できるツールです。上述のリンク先にある XAMPP Lite の ZIP アーカイブ版を使います。ダウンロードして解凍して適当な場所（でもパスに日本語が含まれていると動かないので注意）に置いて、xampplite/setup_xampp.bat というバッチファイルを実行します。このファイルの実行は設置の際に一度だけでいいです。その後 xampp-control.exe を実行するとコントロールパネルがでてきます。

XAMPP コントロールパネル

今回は Apache だけを動かします。Apache というラベルの横の Start ボタンを押します。ボタンの横に Running というラベルが表示され、ボタンが Start から Stop に変われば起動成功。PHP ははじめから使えるようになってます。Apache を停止するときは Stop ボタン、XAMPP コントロールパネル自体を終了するときは、右下のほうにある Exit ボタンを押せば OK です。

xampplite/htdocs が WEB サーバのドキュメントルートになっているので、この下に今回は rssreader というディレクトリを作成してその中に必要なファイルを全部置くことにします。jQuery や jFeed のファイルを全部この中に移動させます。

環境準備も終わったので、まずは全体の枠組みとなるコードを書いてしまいます。rssreader/index.html というファイルを作成して、だいたい次のような感じで。jQuery や jFeed の js ファイル名とパスは自分の環境に合わせて書き換えましょう。あとスタイルシートは、この記事の最後にコードを載せようと思うので、それをあらかじめコピーでもして準備しておくのがよいかも。

index.html

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="jquery-1.2.6.js"></script>
  <script type="text/javascript" src="jquery.jfeed.js"></script>
  <script type="text/javascript">

$(function(){
  $("#load").bind("click", function(e){
    jQuery.getFeed({
      url: "jfeed/proxy.php?url=" + $("#url").val(),
      success: showArticles
    });
  });
});

function showArticles(feed) {
}

  </script>
</head>

<body>

  <div id="urlInputField">
    RSSフィードのURLを入力 ⇒
    <input id="url" type="text" />
    <input id="load" type="button" value="よみこむ" />
  </div>

  <div id="articles"></div>

</body>

</html>

style.css

#urlInputField {
  margin: 10px;
}
#url {
  width: 400px;
}

フィードの読み込みが完了したら関数 showArticles （未実装）が呼び出されて、その中で読み込んだフィードを HTML として表示する感じです。表示用のプレースホルダとして articles という ID の空っぽの div 要素を準備してあります。次にとりあえず以下のように簡単に showArticles を実装してみて、動作確認してみます。

showArticles 関数（簡易版）

function showArticles(feed) {
  var buf = "<ul>";
  for (var i=0; i<feed.items.length; i++) {
    var item = feed.items[i];
    buf += "<li><a href='" + item.link + "'>" + item.title + "</a></li>";
  }
  buf += "</ul>";
  $("#articles").append(buf);
}

結果は次のようになりました。jFeed を使ってフィードを解析して表示する、というのはこれでまず実現できたということにしてしまいます。

実行結果

実用上まったく意味ないけど jQuery UI のドラッグとリサイズを使ってみたい

最後に「 jQuery ってこんなことが簡単にできるですよ！」と発表する会なので、何でもいいから jQuery の機能を使いたいのです。というわけで次のように表示形式を変更したいと思います。ひとつひとつのパネルがひとつの記事に相当し、それぞれのパネルはドラッグとリサイズが可能です。

実行結果イメージ

まずは要素のドラッグやリサイズを可能にするライブラリが必要です。jQuery UI というのを使います。利用する機能だけを選択してダウンロードすることもできますが、どうせ勉強用なのでフルパッケージでダウンロードしてしまいます。Download jQuery UI の下にある latest と書いてあるところをクリックすればダウンロードできます。それを htdocs/rssreader の下に適当に置けばよいです。

showArticles 関数ほか

……

  <script type="text/javascript" src="jquery.ui-1.5.3/ui/ui.core.js"></script>
  <script type="text/javascript" src="jquery.ui-1.5.3/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="jquery.ui-1.5.3/ui/ui.resizable.js"></script>

……

var id = 0;

function showArticles(feed) {

  for (var i=0; i<feed.items.length; i++) {
    var item = feed.items[i];
    var article = "<div id=’article-" + id + "’ class=’article’>";
    article += "<h3 class=’title’><a href=’" + item.link + "’>" + item.title + "</a></h3>"
    article += "<div class=’description’>" + item.description + "</div>";
    article += "</div>";
    $("#articles").append(article);

    var name = "#article-" + id;
    var top = Math.floor(Math.random() * (getClientHeight() - 230) + 40);
    var left = Math.floor(Math.random() * (getClientWidth() - 420));

    $(name).css({"top" : top, "left" : left});
    $(name).draggable();
    $(name).resizable();

    id++;

  }

}

function getClientWidth() {
  if(document.all){
    return document.body.clientWidth;
  } else{
    return innerWidth;
  }
}

function getClientHeight() {
  if(document.all){
    return document.body.clientHeight;
  } else{
    return innerHeight;
  }
}

style.css

.article {
  position: absolute;
  border: solid 2px silver;
  background-color: white;
  width: 400px;
  height: 150px;
  padding: 10px;
}
.article .title {
  margin: 0;
  margin: 0 0 10px 0;
  padding: 5px 10px;
  background-color: lightblue;
  font-size: 14px;
}
.article .description {
  margin: 0;
  padding: 5px;
  font-size: 12px;
}
#urlInputField {
  margin: 10px;
}
#url {
  width: 400px;
}

フィードを読み込みながら、記事ごとに div 要素をひとつ追加していくかんじ。div 要素ごとに固有の ID を割り当てるため、グローバル変数 id を導入しています。ドラッグとリサイズは jQuery UI で準備されている関数をひとつ呼び出すだけです。とても簡単です。

    $(name).draggable();
    $(name).resizable();

実用上まったく意味ないけど jQuery Corner で角丸してみたい

さらに、 jQuery Corner という角丸を簡単に実現するプラグインがあるようなので、これをつかって、記事のタイトル表示部分を角丸にしてみます。上述リンク先、ページのうえのほうにある jquery.corner.js へのリンクからダウンロードできるので、それをダウンロードして htdocs/rssreader 下に配置します。そして下記コードの太字部分を追加します。これで再度 RSS を読み込んでみると、タイトル部分が角丸になってるはず。

showArticles 関数ほか変更箇所

……

  <script type="text/javascript" src="jquery.corner.js"></script>

……

function showArticles(feed) {

……

    $(name).draggable();
    $(name).resizable();
    $(name + " .title").corner();

    id++;

  }

}

実用上まったく意味ないけどフェードインしてみたい

ひとつひとつの記事が一瞬で表示されるのではなく、ゆっくりと表示されるようにしてみます。当然、フェードインする前は要素は非表示でなくてはならないので、ひとつの記事をあらわす div 要素自体を display: none に設定しておき、その要素を jQuery をつかってフェードインします。fadeIn(300) の引数は 300 ミリ秒かけて要素を表示するということです。

showArticles 関数変更箇所

function showArticles(feed) {

……

    var article = "<div id=’article-" + id + "’ class=’article’ style=’display: none’>";

……

    $(name + " .title").corner();
    $(name).fadeIn(300);

    id++;

}

でも、これを実行してもうまくいかないのでした。フェードイン処理は非同期に実行されるので、読み込んだすべての要素をほぼ同時にフェードインすることになり、結局全部の記事が同時に表示されてしまい、フェードインしてるのだかしてないのだかよくわからない結果になります。ひとつの記事を 300 ミリ秒かけて表示するのだから、記事を表示すると 300 ミリ秒待ってから次の記事が表示されればいいわけですが……。最初の記事をフェードインして、300 ミリ秒後に次の記事をフェードインして、さらに 300 ミリ秒後にその次の記事を表示する……というかんじ。

遅延実行は setTimeout を使うとして、そこで実行する関数はそれぞれフェードインの対象となる記事が違うし、記事用 div 要素の top と left も要素ごとに設定が必要なので、記事ごとにクロージャを生成してそれを setTimeout でスケジューリングすればよいような気がするので、最終的に showArticles 関数は次のようにしてみました。

showArticles 関数最終形

function showArticles(feed) {

  for (var i=0; i<feed.items.length; i++) {
    var item = feed.items[i];
    var article = "<div id=’article-" + id + "’ class=’article’ style=’display: none’>";
    article += "<h3 class=’title’><a href=’" + item.link + "’>" + item.title + "</a></h3>"
    article += "<div class=’description’>" + item.description + "</div>";
    article += "</div>";
    $("#articles").append(article);

    setTimeout(function() {
      var name = "#article-" + id;
      var top = Math.floor(Math.random() * (getClientHeight() - 190) + 40);
      var left = Math.floor(Math.random() * (getClientWidth() - 400));
      return function() {
        $(name).css({"top" : top, "left" : left});
        $(name).draggable();
        $(name).resizable();
        $(name + " .title").corner();
        $(name).fadeIn(300);
      };
    }(), 300 * i);

    id++;

  }

}