だいぶ間が空いてしまいましたが、HTML5を使ってどこまでスマホアプリが作れるのか、挑戦しようと進めています。しかも、フルキャンバスで。

題材はRSSリーダーです。RSS Pipesの補完機能として考えています。

前回はHellow Worldを表示するところまででした。今回は、RSSを取得してテキスト表示してみました。ただし、まだスクロールできません。当然クリックもできません。

RSSはjQueryを使って読み込むことにしました。コードはこんな感じです。

$.ajax({
  type: 'GET',
  url: rssurl,
  dataType: 'xml',
  success: function(xml) {
    var $xml = $(xml);
    var items = [];
    $xml.find("item").each(function() {
      var $this = $(this);
      var item = {
        title: $this.find("title").text(),
        link: $this.find("link").text(),
        description: $this.find("description").text(),
        pubDate: $this.find("pubDate").text()
      };
      items.push(item);
    });
    updateRssContent(items);
  },
  error: function() {
    alert('failed to get the rss: ' + rssurl);
  }
});

updateRssContent()でキャンバスにかきますが、座標も自分で計算しないといけません。

function updateRssContent(items) {
  $.each(items, function(index, item) {
    var text = new Kinetic.Text({
      x: 5,
      y: 5,
      text: item.title,
      fontSize: 12,
      fontFamily: 'Arial',
      fill: '#aaaaff'
    });
    text.setOffset({
      y: -index * (text.getHeight() + 5)
    });
    layer.add(text);
  });
  layer.draw();
}

setOffsetを使うよりいい方法があるのではないかと想像しますが、まだ探していません。

実行結果はこんな感じです。

最新版はherokuでも実行可能です。

http://canvas-rss-reader.herokuapp.com/

今回は、GitHubにコードをアップしました。

https://github.com/dai-shi/canvas-rss-reader/tree/42ddd815e88304c6217c8c5f9f978d97c39fc34a

そう、プロジェクト名もcanvas-rss-readerにしました。

しかし、キャンバスを使うとあたりまえですが文字列選択ができないですね。JavaScriptでクリップボードって制御できるのでしょうか。

http://www.w3.org/TR/clipboard-apis/

このあたりをウオッチすることになるのでしょうか。

facebook-node-sdkを使って、簡単なFacebook Graph APIの呼び出しをしていたのですが、不思議なエラーがでてました。

(#5) Unauthorized source IP address

というエラーです。

stackoverflowでも複数のスレッドで話題になっていました。IPが変わってしまっていて、エラーになっているということは分かりました。

herokuを使うと、デプロイしてから何時間か経つとIPアドレスが変わるようです。そこで、access tokenを同じものを使い続けると上記エラーがでるので、access tokenを取得し直す必要があります。

これは、OAuthExceptionのときに再取得するようにすればいいのですが、少しはまりました。access tokenを取得するAPIを呼ぶ時に事前にaccess tokenをクリアしておく必要がありました。そうしないと、access tokenを再取得しようとするときに上記のエラーが出ました。Facebook側の問題か、ライブラリ側の問題か難しいところですが、とりあえずは自分で回避するしかないです。

参考までにサンプルコードを載せておきます。

FB.api('hoge/feed', function(res) {
  if (res && res.error && res.error.type === 'OAuthException') {
    FB.setAccessToken(null);
    FB.api('oauth/access_token', {
      client_id: process.env.FACEBOOK_APP_ID,
      client_secret: process.env.FACEBOOK_SECRET,
      grant_type: 'client_credentials'
    }, function(res) {
      if (!res || res.error) {
        console.log('error occurred when getting access token:', res && res.error);
        cb(res);
        return;
      }
      FB.setAccessToken(res.access_token);
      FB.api('hoge/feed', cb);
    });
  } else {
    cb(res);
  }
});

今回はapplication access tokenを使う時に起こったエラーですが、普通のuser access tokenでも同じかもしれません（未確認）。

5/2追記。

上記のコードでも回避できずにエラーになったことが一度だけありました。再度調査中ですがその後再現しないので解決できないです。

5/6追記。

その後安定して動いています。前回の一度起こったエラーはたまたま別の要因があったと思っておきましょう。

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を使って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の勉強をしよう、の第二弾です。これ、連載にできるかしら。

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

次のような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の処理もできるようになります。いかがでしょうか。

Gunosy RSS はオープンソースで提供されています。ライセンスの範囲内で自由に使うことができます。

慣れている人は説明なしですぐにできると思いますが、どれだけ簡単にできるかを示すため手順を書いておきます。

前提：

• herokuのアカウントがあること（なければ作る）
• heroku toolbeltがインストールされ、SSH鍵が登録済であること
• GitHubのアカウントがあること（なければ作る）
• gitがインストールされていること

まず、GitHubからソースコードを取得します。

https://github.com/dai-shi/gunosy-rss

にアクセスして、右上のForkボタンを押して、自分のリポジトリにします。自分のリポジトリのページに行ってリポジトリのURLを確認します。 仮に、git@github.com:<username>/gunosy-rss.gitだったとします。

% git clone git@github.com:<username>/gunosy-rss.git

をコマンドラインで実行するとダウンロードされます。

% cd gunosy-rss

でディレクトリを移動します。

次に、herokuにアプリケーションを作ります。

% heroku apps:create <appname>

を実行するだけです。<appname>は省略も可能です。 作ったアプリケーションの情報を確認するため、

% heroku apps:info

とします。そこで表示される、Git URLとWeb URLが重要です。 それぞれ、git@heroku.com:<appname>.gitとhttp://<appname>.herokuapp.com/だったとします。

% heroku config:set SITE_PREFIX=http://<appname>.herokuapp.com/

として、環境変数を登録します。

% git remote add heroku git@heroku.com:<appname>.git

として、リモートリポジトリを登録します。

% git push heroku

として、herokuにアップロードして、完了です。 http://<appname>.herokuapp.com/<gunosyid>.rssでRSSフィードが生成されます。

いかがでしょう？

補足

実は、GitHubのアカウント作らずForkもしなくても、上記のことはできます。ですが、せっかくなのでpull requestが送れるようにForkするのが、GitHubらしいのではないでしょうか。

herokuのアプリケーション情報を表示するところでは、

% heroku apps:info --app <appname>

とする必要があるかもしれません。