2009年9月1日火曜日

Ameblo の 全文配信 RSS の登録を簡単にするブックマークレット - Yahoo Pipes でユーザ入力に対応したパイプをブックマークレットで呼出す例

1. ブックマークレットの登録

  1. アメブロ登録」のリンクをブックマークツールバーへ D&D
  2. 登録したいブログを開いたら、上記で登録したブックマークをクリックする。
  3. Pipes: Ameblo Content All が開かれるので、Get as RSS をクリックしてフィードリーダーに登録する。

追記(2012.3.5): 現在、全文配信のために、Full Text RSS Feed を利用している。

 

RefControl で画像を表示させる

 

2. ブックマークレットの作り方

以下、上記のブックマークレットで利用しているサービスと作り方。

Ameblo の RSS を全文取得するために Pipes: Ameblo Content All をブックマークレットで呼出す。(cf. Yahoo! Pipes で強制全文配信化 - てっく煮ブログ )

パイプの入力フィールドを見ると、input 要素の name 属性が `ameblo_rss’ になっている。

090901-001.png

上記を利用してクエリ文字列を作成。名前は ameblo_rss で、値は http://rssblog.ameba.jp/[ユーザ名]/rss20.xml を URLエンコード

ブログ上でブックマークレットをクリックして利用することを想定。

var user = location.href.split("/")[3],
yp = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall?ameblo_rss=",
rss0 = "http://rssblog.ameba.jp/",
rss1 = "/rss20.xml";
location.href = yp + encodeURIComponent(rss0 + user + rss1);

 

ブックマークレットに変換

Compress javascript でコードを圧縮したものをブックマークレット変換。 → アメブロ登録

このブックマークレットを上記のパイプを利用したいブログ上でクリック。

ブックマークレットを作るための参考

 

3. クエリ文字列の名前に対応するところ

試しに自分でユーザ入力が可能なパイプを作成してみる。

Blogger で複数のタグ (ラベル) の付いた記事を抽出 - サイトフィードを使って」で書いたように、Blogger では特定のタグが付いた記事を RSS で取得できる。この RSS を生成するパイプを作成。ユーザが入力できる部分は、「Blogger のドメイン」と「タグ名」の二つ。

 

パイプ の作成

Yahoo Pipes の作成画面において、User Inputs より Blogger のドメインを受ける URL Input と、タグを受ける Text Input を使う。(ただし、今回はタグを一つ指定できるのみ。)

上記の入力を、Url の URL Builder  >>> Source の Fetch Feed に流し込む。

090901-003.png

Pipes: test User inputs

 

JavaScript でテスト

URL Input > Name と、Text Input > Name で設定した値を使ってクエリ文字列を作成する。

var yp = "http://pipes.yahoo.com/pipes/pipe.info?_id=e2aaad527b948dfd1dab9aa69162d98a",
url = "jutememo.blogspot.com",
tag = "Firefox";
location.href = yp + "&url=" + encodeURIComponent(url) + "&tag=" + encodeURIComponent(tag);

 

4. 余談

RSS の URL の取得

アメブロの RSS の URL の取得は、link 要素から自前で検索した方がいいのかな?

function getRSS(){
 var links = document.getElementsByTagName("link");
 for (var i = 0; i < links.length; i++){
  if (links[i].type === "application/rss+xml"){
   return links[i].href;
  }
 }
}

 

わからなかったこと

当初、以下のようにパイプに遷移してからテキストフィールドに値を設定すればいいのかと思った。

location.href = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
document.forms["runform"].ameblo_rss.value = // ここに RSS の URL を設定

しかし、パイプにパラメータを渡す方法がわからず。 Tumblr のブックマークレットを見て、クエリ文字列にブログの RSS の情報を持たせ、遷移後にそこからデータを取り出せばいいのかと考えたけれど断念。。

 

それならば、ブログ内に iframe を作り、その中にパイプを読み込みフィールドの値を操作すればいいかと考えた。

// ページの上部に iframe を挿入
var newElem = document.createElement("iframe");
newElem.src = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
newElem.setAttribute("id", "yahooPipes");
document.body.insertBefore(newElem, document.body.firstChild);
// iframe の読み込みが完了した後に iframe にアクセスすると..
document.getElementById("yahooPipes").contentWindow.document.getElementById("runform");

しかし、結果は

"Permission denied for <http://ameblo.jp> to get property Window.document from <http://pipes.yahoo.com>."

Javascript & Dhtml Cookbook (p.448) によると、

保護されている iframe のコンテンツ領域に、スクリプトからアクセスできるように、主ページと外部ページの両方が同じドメインとサーバから送信されていなければなりません。

なるほど、クロスドメインだと色々と制約があるのかぁ。。 (@_@;)