すぐに忘れる脳みそのためのメモ

ラベル Ameba の投稿を表示しています。すべての投稿を表示

2009年9月1日火曜日

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

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

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

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

フィードを全文配信する Full Text RSS Feed Builder を開くためのブックマークレット

RefControl で画像を表示させる

cf. Google Reader で画像が表示されない場合、Firefox のアドオン 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 に流し込む。

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

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

2009年1月11日日曜日

アメブロのアクセス解析と Google Analytics の違い

知合いがアメブロを使っている。月に 1 回更新するくらいで、メンバー限定の記事が多いので、割と閑古鳥。「どれくらいのアクセスがあるの？」と聞いたところ、最近では一日に 30 ~ 40 だそうだ。しかし、それを聞いて思ったよりも多いなと感じた。なぜならアメンバーの数は一桁だし、記事の更新回数はほとんどやる気ないモードで、他の人のブログにコメントするほど活発ではなく、何よりもここ 1 ヶ月以上記事を全く更新していないからだ。

以前にそのブログに Google Analytics を設置したので、覗かせてもらった。(cf. アメブロで、Google Analytics を利用してアクセス解析をする) そうしたら、やはり思った通りで、ここ一ヶ月のページビューが合計しても 23 しかない。