RSS Pipesは、JavaScriptでフィルターを書く、RSSアグリゲーターです。

RSSの登録数が増えてきたら検索機能を作ろうと思っていたのですが、 先に作ってしまいました。検索と言っても、表示されているものを絞り込むだけです。

AngularJSには標準でフィルターというものが組み込まれているので非常に簡単にできました。ソースコードに検索ボックス配置の1行と、フィルター追記の1行で済んでしまいました。Bootstrapのレイアウトでもう数行いじりましたが、トータルで5行の改変のみです。

興味ある方は、diffを見てみてください。

https://github.com/dai-shi/rss-pipes/commit/c250c8a7d9b03476503c78fda5a2f0ab5cef5894#views/partials/home.jade

お手軽です。詳しくは、AngularJSのチュートリアルを参照しましょう。

http://docs.angularjs.org/tutorial/step_03

RSS Pipesは、JavaScriptでフィルターを書く、RSSアグリゲーターです。

フィルターJavaScriptはブラウザ上で誰でも書くことができます。すなわち、バグ入りのコードや、悪意のあるコードも書くことができます。 そのような不正なコードにどう対処するかがポイントになります。

RSS PipesはNode.jsで動いています。Node.jsにはvmというモジュールがあって、サンドボックス環境を作ることができます。 Node.jsを使ったことがある方は分かると思いますが、モジュールを書いてrequireするとexportsしたもの以外は名前が衝突しません。 これはrequireでモジュールをロードする時にサンドボックス環境で評価しているからです。 RSS Pipesでもこの仕組みを使ってJavaScriptのコードを評価しています。 よって、ブラウザ上から入力されたJavaScriptコードによって、サーバ側のNode.jsにアクセスされることはありません。

ところが、vmモジュールのマニュアルをよく読むと書いてあるように、このモジュールを使うことで安全になるわけではありません。安全にコードを走らせるためにはサブプロセスを使うように、と書いてあります。

どういうことかと言うと、Node.jsはシングルスレッドで動作するため、vmでサンドボックス環境を作ったとしてもそこで使用されるリソース（CPUパワーやメモリ）を制限することはできず、リソースを不用意に使われてしまう可能性があります。簡単な例では、

while(true) {}

というJavaScriptを走らせるとNode.js全体が固まってしまいます。 とは言っても、herokuで動いているRSS Pipesでサブプロセスを使うわけにはいきません。（もしかして、使うこと自体はできるのかも？）

そこで、無限ループを判定するような仕組みをいれています。 先ほどの例では、

while(true) {
  counter++;
}

のようにして、counterが一定値を越えた場合に強制的に止めればよいのです。これで、どの程度の危険が回避できたかは定かではありません。正確にCPUの使用率を測っているわけでもありませんし、メモリについてはノータッチです。それでも、無限ループで固まることは回避できているので、少なくとも悪意のないコードでしたら、問題のない範囲と思っています。

将来的に、vmモジュールのサンドボックス環境でリソース制限までしてくれるようにはならないでしょうかね。ちょっと興味あります。

まだ誰にも使われていないRSS Pipesですが、機能を追加しました。

RSS PipesはRSSのアグリゲーターでフィルターをJavaScriptで編集します。編集はWebブラウザ上で行うので、いわゆるWikiのようなシステムです。

誰でも編集できてしまうので、そのうちSPAM行為をする利用者もでてくるかもしれません。まあ、そうなるくらいになったらうれしいわけですが。

SPAM行為をされてから対策すればよいと思っていたですが、SPAM対策がされていないことで、利用者が躊躇してしまうのは本望ではありません。そこで、簡単なロック機能を作りました。

編集するときにロックコードを入力すると、以降そのロックコードを入力しないと更新できなくなります。もちろん、ロックコードを忘れたら、本人でも更新できなくなります。そういうときは、あきらめて新しいフィルターとして再登録しましょう。「複製」ボタンがあるので、簡単です。

http://dai-shi.github.io/rss-pipes/

昨日、見つけてissueの登録をしておいた、connect-offlineの件です。

https://github.com/dustMason/connect-offline/issues/1

早速返事が来ました、Pull Requestにして欲しいと。仕方ないやるかな、と思ってみたものの、やっぱりCoffeeScriptでは書く気になれません。また、パッケージ名も分かりにくいのではないのかと考え、新しく作ることにしました。

初めは、完全互換のパッケージにしようと考えていたのですが、process.cwd()で相対パスを使っているのが気に入らず、__dirnameを使うようにしたかったので、パスの指定の互換性がなくなってしまいました。

作っているうちに他の改善案（ディレクトリの再帰探索）も思いつき、実装方法もだいぶ変わってしまったので、互換の方向性はやめました。とは言っても、基本的には同じように使えるはずです。

https://github.com/dai-shi/connect-cache-manifest

から参照できます。npmにも登録済みです。

express.jsでHTML5のキャッシュマニフェストを使おう考えています。どうせならconnectのmiddlewareにしたら便利だろうと思って調べました。

GitHubでmanifestをキーワードに色々検索したのですが、見つかりませんでした。connect-manifestという空のプロジェクトがあったくらい。

あきらめて、自分で作ろうかと思ったところで、npmで検索してみました。結果、見つけました。

https://github.com/dustMason/connect-offline

offlineという名前だから、GitHubの検索では見つからなかったようです。 Node.jsはパッケージ探しが難しいですね。

このconnect-offlineはStar数が4しかありません。あまり、キャッシュマニフェストをmiddlewareで欲しいと思う人はいないのでしょうか。それとも、名前が悪くてみんな見つけられないのでしょうか。

READMEを読むと、以前のconnectにはcacheManifestというmiddlewareがバンドルされていたようです。connectのリポジトリを探りましたが、確かに、version 1.0より前のタグには存在します。なぜ、やめたのかは分かりませんでした。（消えたファイルのgit logを見ればいいのも）

さて、connect-offlineはちょっと想像していた機能が足りなかったので、自分で修正しようと思ったのですが、ソースがCoffeeScriptだったので手を出しませんでした。（CoffeeScriptはなぜか好きになれないので）

代わりに、issueにしておきました。

https://github.com/dustMason/connect-offline/issues/1

RSS Pipesを使ってJavaScriptの勉強をしよう、の第三弾です。

昨日、はてなブックマーク新着エントリからキーワードでフィルタリングするRSS Pipesの例を紹介しましたが、はてなブックマークの場合ははてなが提供するRSSでキーワードフィルタリングできてしまいます。

そこで今日は、キーワードが含まれていた場合タイトルを書き換える方法を例題にします。

フィードを流し読みするときは、タイトルに気になるキーワードが入っていると目に留まりませんか。自然と目でキーワードフィルタリングしているのかもしれません。そこで、それを助けるためにタイトルを強調表示してみましょう。★マークをつけるのはどうでしょうか。

次のようなJavaScriptコードになります。

function rssPipesFilterFunction(articles) {
  var keywords = ["JavaScript", "javascript"];
  var i, len = keywords.length;
  articles.forEach(function(article) {
    if (article.title) {
      for (i = 0; i < len; i++) {
        if (article.title.indexOf(keywords[i]) >= 0) {
          article.title = "★★★ " + article.title;
          break;
        }
      }
    }
  });
  return articles;
}

前回と同じように、indexOfでキーワードを探して、見つかった場合はarticle.titleに文字列を追加しています。

RSS Pipesで動くサンプルはこちらです。

RSS Pipes: hatena/JavaScript関連のブックマーク/タイトル強調表示

もう、ネタがなくなってきたかも。

RSS PipesはJavaScriptでフィルターを書くRSSアグリゲーターです。

既に存在するアイテムをコピーして新しく登録する「複製」機能が欲しいと思って実装方法を考えていたのですが、思いのほか簡単にできました。

備忘メモしておきます。

$routeProviderのコードは、

$routeProvider.when('/home', {...});
$routeProvider.when('/edit', {...});

のようになっています。/homeに複製ボタンがあり、それを押すと/editに遷移します。つまり、/homeから/editに複製元のデータを渡したいということです。

$rootScopeを使いました。

$rootScope.saved = {};

としておいて、/homeのコントローラで、

$scope.saved.data = data;

として保存し、/editのコントローラで、

$scope.data = $scope.saved.data;

として復元します。場合によりますが、今回は消したかったので、さらに、

delete $scope.saved.data;

としました。

もっとスマートな方法があるのかもしれませんが、今回はこれでよしとします。

RSS Pipesを使ってJavaScriptの勉強をしよう、の第二弾です。これ、連載にできるかしら。

フィードを流し読みするときは、タイトルに気になるキーワードが入っているかが重要だと思います。キーワードでフィルタリングするというのはありがちですね。

次のようなJavaScriptコードになります。

function rssPipesFilterFunction(articles) {
  var keywords = ["JavaScript", "javascript"];
  var i, len = keywords.length;
  var newArticles = [];
  articles.forEach(function(article) {
    if (article.title) {
      for (i = 0; i < len; i++) {
        if (article.title.indexOf(keywords[i]) >= 0) {
          newArticles.push(article);
          break;
        }
      }
    }
  });
  return newArticles;
}

キーワードが一つでも見つかったら、breakでforループを抜けて次に進むところがポイントです。Array.forEachを使うと、iとlenの変数が不要になるのですが、その場合JavaScriptだとループを抜け出せないのです。

今回はindexOfで書いてみましたが、ここを正規表現でマッチさせる方法もあります。今回の例だと、/javascript/iという簡単な正規表現で書けるので、そのほうが一般的かもしれません。正規表現を使う時はループの外側で事前に定義してprecompileするようにしましょう。

article.titleだけではなく、article.descriptionもチェックするとタイトルではなくdescriptionにキーワードが含まれているかもチェックできます。今回は、タイトルだけにとどめました。

実際これをRSS Pipesで適用した例が、下記にあります。

RSS Pipes: hatena/JavaScript関連のブックマーク

この例ははてなブックマークの新着エントリーを使いましたが、はてなブックマークを使うだけならはてなが提供するRSSで対応できましたね。

http://b.hatena.ne.jp/keyword/JavaScript?mode=rss

つづく。かな？？

RSSを処理すると言えば、まずは広告エントリの除去でしょうか。 Yahoo! Pipesの利用例でもよくありそうです。

RSS Pipesの場合はJavaScriptでフィルターを書きます。

function rssPipesFilterFunction(articles) {
  var newArticles = [];
  articles.forEach(function(article) {
    if (article.title && article.title.lastIndexOf('AD:', 0) != 0 &&
        article.title.lastIndexOf('PR:', 0) != 0) {
      newArticles.push(article);
    }
  });
  return newArticles;
}

このような感じになります。

AD,PRエントリを除去するフィルター #rsspipes にも同じものを置いています。

今、思ったのですが、これってJavaScriptの勉強に結構使えるのではないでしょうか。比較的短いコードで実用的な機能が作れるので。

実際これをRSS Pipesで適用した例が、下記にあります。

RSS Pipes: news/itmedia&cnetjapan

このコードをコピペするだけで、他のRSSの処理もできるようになります。いかがでしょうか。

JQueryやAngularJSはGoogle Hosted Librariesが配信してくれて、 BootstrapはBootstrapCDNというのもあって 便利です。

しかし、マイナーなライブラリになるとどうしたものかと思っていました。手を入れないライブラリは自分でホスティングする理由もないので、CDNがないかなと思って探したところ、

• jsDeliver
• cdnjs

を見つけました。cdnjsはGitHubのPull Requestsでライブラリの登録を依頼できるというのが面白いです。

しかし、どちらもcssファイルは登録されていない様子なので、結局すべてを外部CDNに頼ることはできないと。探せば他にもありそうですね。