1. ブックマークレットの登録
- 「アメブロ登録」のリンクをブックマークツールバーへ D&D 。
- 登録したいブログを開いたら、上記で登録したブックマークをクリックする。
- 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’ になっている。
上記を利用してクエリ文字列を作成。名前は 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 に流し込む。
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 のコンテンツ領域に、スクリプトからアクセスできるように、主ページと外部ページの両方が同じドメインとサーバから送信されていなければなりません。
なるほど、クロスドメインだと色々と制約があるのかぁ。。 (@_@;)
0コメント:
コメントを投稿