OTCHY.NET » はてブ

Chrome 正式版 Greasemonkey でクロスドメイン POST をする方法

Otchy — Fri, 29 Jan 2010 05:22:05 +0000

最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るようになりました。
それ自体は非常に嬉しい事だったんですが、バージョンアップに伴い、はてブ with Twitter が動かなくなってしまっていました。(現在は修正済み)

以前、JavaScript だけでクロスドメインで POST メソッドを送る方法で紹介したやり方が、Chrome のバージョンアップによって無効になってしまったためです。
無効になったとはいえ、通常の JavaScript として使用する分には問題なく、Greasemonkey だけに問題が発生していました。
動的に生成した iframe の contentWidow オブジェクトが取得出来なくなっており、セキュリティの制限が強化されたものと思われます。

最終的にはその制限を回避する方法を見つけたので、以下に解説します。

通常 JavaScript の記述

まず、Greasemonkey ではなく普通の JavaScript としてJavaScript だけでクロスドメインで POST メソッドを送る方法等を参考に、本来やりたい処理を記述します。
この時は普通に script タグでスクリプトを読み込んで、正常動作を確認しておきます。

そして、正常に動作するスクリプトが作成出来たら、それを任意のサーバにアップします。

Greasemonkey の記述

以下のようなスクリプトを書きます。

(function() {
    var d = document;
    var s = d.createElement('script');
    s.src = 'http://www ...'; // スクリプトファイルをアップした場所
    d.body.appendChild(s);
})();

これだけで、本来の window オブジェクトから実行したかった処理が実行され、Greasemonkey の制限に掛かることなく、iframe を使用したクロスドメイン POST が実現します。

でもちょっと待って

Greasemonkey が実行されるたびに、自分のサーバから js ファイルがダウンロードされるなんて嫌ですよね？私は嫌です。レスポンスを考えたって好ましくないですし。

そこで、data スキームを使って外部スクリプト自体を Greasemonkey スクリプトの中に埋め込んでしまう事にします。(data スキームについてはこの辺を参照して下さい。)

data スキームへの変換には、[JavaScript] dataスキームURI生成（画像データのBase64変換）を使用させていただきました。
このサイトで、先ほどアップした js ファイルの URL を指定し、data スキームに変換した文字列を取得します。

その上で、Greasemonkey を以下のように書き換えます。

(function() {
    var data = 'data:application/x-javascript;base64,'+
        'KGZ1bmN0aW9uKCkgewoJdmFyIGQgPSBkb2N1bWVudDsKCWZ1bmN0aW9uIGdldEVsZW1lbnQoeHBh'+
        // 中略
        'fSkoKTs=';
        var d = document;
    var s = d.createElement('script');
    s.src = data;
    d.body.appendChild(s);
})();

これで、単体の Greasemonkey スクリプトでありながら、外部スクリプトを読み込んだのと同等の状況を作り出す事が出来ます。

これでスッキリしましたね！

Google Chart API を使って自サイトの合計はてブ数をグラフ化する

Otchy — Tue, 04 Aug 2009 13:23:13 +0000

日頃、自サイトにはてブが付いて増えていく様子を、TopHatenar でグラフを見てほくそ笑んでいたりしたのですが、TopHatenar は更新が遅れることが多く、残念な気持ちになることも度々ありました。

そこで以前、せめて記録だけは残そうと、自分のサイトの合計はてブ数を淡々と csv に記録し続けるというエントリを書いて、それ以来ずっと記録しています。
それでまあ、そろそろデータも貯まってきたので予告通り(？)、グラフ化してみる事にしました。
ブログパーツのようにして、このサイトの右メニューにも貼り付けてあります。

大きく出すとこんな感じです。

当初、PHP で何らかのライブラリを使用して楽をしようと思ったのですが、自分の希望を全て満たすものが見あたらなかったので、自力で Google Chart API を使用しています。

グラフの元になるデータは、自分のサイトの合計はてブ数を淡々と csv に記録し続けるで取得したものです。
下記のようなファイルになっています。

2009-07-16,204
2009-07-17,205
    ：
    ：
2009-08-03,245
2009-08-04,250

これを元に、Google Chart API のパラメータを生成して、グラフを表示しています。
以下にソースを載せておきます。

ソース中にざっくりとコメントを書いておきましたが、ポイントになるのは、Google Chaart API の線グラフでは、Y 軸の値が、0.0～100.0 と固定されていて、グラフを描画する値をその範囲の値に正規化しないといけない点です。
値を正規化したら、Y 軸のラベルには、その正規化された世界で本来の値がどこになるのか、という情報を渡してやる必要がありますね。
そんな処理が上に書かれています。

X 軸についてはシンプルに、最初と最後の日付を載せているだけです。

また、今回は元データが整数値なのですが、汎用性を考えて、仮に小数の値が元データになっても問題なく動作するように書いたつもりなので、小数のデータであってもきっと上手く動作するでしょう。
整数値前提となっている部分がありました…。

追記

元データの行数が増えてくると、グラフとして描画するのが苦しくなってくることが予想されます。
その場合、csv を保存した後に、tail -n 60 hatebulog.csv > hatebulog_tail.csv のようにしておいて、最新の何件かを取り出すようにするといいでしょう。

自分のサイトの合計はてブ数を淡々と csv に記録し続ける

Otchy — Thu, 16 Jul 2009 03:14:08 +0000

Twitter ボットの作り方 Perl 編連載中ですが、ちょっとお休みして、さっき思い立って書いたスクリプトを紹介します。

最近、TopHatenar の更新が止まってしまっていて悲しいので、自分のサイトのトータルはてブ数を記録して、自分でグラフを書くことにしました。
といっても、自分が見る専用で問題ないので、csv を出力しておくだけです。適宜 Excel とかで加工してグラフ化します。

まず必要になる CPAN モジュールをインストールします。root 権限必須です。

$ su -
# cpan
cpan> force install XMLRPC::Lite
cpan> install DateTime

XMLRPC::Lite は自分の環境だとテストで引っかかって上手く入らなかったので、force install してます。
force install する前に、通常の install で入れられないかを試すべきです。
いずれのインストールも結構時間がかかるので、原則放置でたまに Enter を押してやる感じです。

実際のスクリプトは下記のような感じです。
標準出力に吐くようにしたので、ファイルに記録したい場合は任意にリダイレクトしてやります。

#!/usr/bin/perl

use strict;
use warnings;
use XMLRPC::Lite;
use DateTime;

my $url = 'http://www.otchy.net';

my $count = XMLRPC::Lite
    ->proxy('http://b.hatena.ne.jp/xmlrpc')
    ->call('bookmark.getTotalCount', $url)
    ->result;

my $now = DateTime->now(time_zone => 'Asia/Tokyo');
print $now->strftime('%Y-%m-%d') . ',' . $count . "\n";

$url の値はカウント対象の URL ですが、もちろん変更して下さい。
スクリプトに実行権限を与えて実行すると、こんな感じの出力が出てきます。

2009-07-16,204

毎日の記録を残すのであれば、例えば下記のように cron に登録すればいいです。

00 00 * * * /home/your_id/hatebulog/hatebulog.pl >> /home/your_id/hatebulog/hatebulog.csv

今のところ日次で記録する前提で日付しか出力していませんが、はてブ数が多くもっと頻繁に記録するのであれば、出力を下記のように変える事で実行時間も記録されます。

print $now->strftime('%Y-%m-%d %H:%M:%S') . ',' . $count . "\n";

最初に自分専用とはいったものの、いったん csv に落としてしまえば、PHP ＋ Google Chart API でグラフ化して Web から見れるようにするとかもありですね。

追記(2009-08-04)

グラフ化してみました！

ログインしないでニコ動を見るためのブックマークレット

Otchy — Wed, 25 Feb 2009 04:38:44 +0000

タイトルは釣りです（ぉ
というか、正確にはログインしないでニコ動を見るためにも使える、別の目的のブックマークレットです。

ニコニコ動画のアカウントを持ってはいるのですが、もともと ROM でしか使用しない上に、普段からログインしているわけではありません。
紹介されていたリンク先がニコ動だったりして、「あ、これ見たい」と思ったけども、わざわざログインするのが面倒、みたいな時に使っています。

というか、ROM 専門なら、アカウントはもう要らないかもって感じですね。

ではご紹介。
下記のリンク先をブックマークレットとして登録してクリックすると、今開いているページのはてブのページが開きます。
本来だったらそれだけの機能なのですが、ニコ動の各動画のページを開いて、ID/パスワードの入力を求められているような状況で、ブックマークレットを起動してみて下さい。
今のはてブとニコ動の仕様上、ニコ動のはてブページを開くと、その場でログインしないまま動画が再生できます。

はてブを開く

javascript:location.href='http://b.hatena.ne.jp/entry/'+location.href

はてブページを確認するために簡単なブックマークレットを書いたら、意外なところで役に立ったというお話でした。

参考

ブックマークレットとは

検索エンジンに優しいサイト移行

Otchy — Sat, 10 Jan 2009 16:32:41 +0000

OTCHY.COM から、OTCHY.NET へのコンテンツ移行第一弾として、はてブ with Twitter を移行しました。

[旧 URL] http://www.otchy.com/lab/hatebuwithtwitter.html
[新 URL] http://www.otchy.net/greasemonkey/hatebu-with-twitter/

サイトを移行するにあたっては、元のサイトに説明を書いてリンクを張ったり、JavaScript か meta タグに利用した、リダイレクトなどを行うことが一般的に行われていますが、こういった方法は検索エンジンには優しくなく、SEO の観点からは非推奨です。

サイトを移行した際には、検索エンジンにもそれがわかるように、HTTP 301 リダイレクトしたいですね。特にこの旧URL は、はてブもいくつか付いているのでその価値を引き継がない手はありません。

今回は、301 リダイレクトを行うために、apache の mod_rewrite モジュールを使用したので、その設定をメモとして残しておきます。
以下の記述を、.htaccess という名前で、hatebuwithtwitter.html と同じディレクトリに配置しています。
(mod_rewrite と .htaccess が有効なのは前提です)

RewriteEngine on
RewriteBase /lab/
RewriteRule ^hatebuwithtwitter.html http://www.otchy.net/greasemonkey/hatebu-with-twitter/ [R=301,L]

今後も少しずつ OTCHY.COM からコンテンツを移行していき、その度に同様の 301 リダイレクトを設定していけば、最終的に OTCHY.NET は今の OTCHY.COM と同程度の (SEO 的な) 評価を得ることになるはずです。