以前に、サムネイルAPIをJavaScriptで簡単に切り替える方法をエントリーしました。
サービスが使えなくなればサムネイルを外すなり他のサービスに切り替えるなりする作業が発生します。MT等のブログツールやCMSツールを使っていればテンプレートの修正だけで、数百あるエントリー全てを変更していくようなバカげた作業をやるはめにはならないでしょうが、できる限り簡単に切り替える方法を持っておきたいものです。
このブログでも上記方法を使っていたのですが、これが問題になるケースが出てきました。
エントリー本文中にサムネイルを貼る時もscriptタグを書いていたのですが、これが、RSSに出力された時にタグを壊してしまうようで、Livedoor ReaderなどにこのブログのFeedが流れなくなってしまったのです(※他にも原因があるかもしれないんだけどね)。
という訳で、代替の方法を勉強がてら下記3パターンにまとめした。
- .htaccessでリダイレクト編
- PHPでリダイレクト編
- Perlでリダイレクト編
.htaccessでリダイレクト編
一番手っ取り早いと思うのがこの方法です。
.htaccess に RewriteRule でサムネイル用のラッパーURLを作っといてリダイレクト先を変える。
RewriteEngine On RewriteCond %{HTTP_REFERER} ^http://creazy\.net/ [OR] RewriteCond %{HTTP_REFERER} ^http://labs\.creazy\.net/ RewriteRule rewrite/(.*) http://img.simpleapi.net/small/$1 [R,L] #RewriteRule rewrite/(.*) http://mozshot.nemui.org/shot/large?$1 [R,L] #RewriteRule rewrite/(.*) http://capture.heartrails.com/free?$1 [R,L] #RewriteRule rewrite/(.*) http://thumbs.bookmacro.com/w/200/h/150/u/$1 [R,L] #RewriteRule rewrite/(.*) http://www.thumbalizr.com/api/?url=$1 [R,L]
上記のリダイレクトルールが書かれた、.htaccess を http://www.example.com/ 直下に配置した場合、下記のURL呼び出しでSimpleAPIのサムネイル画像が呼び出されます。
http://www.example.com/rewrite/(サムネイルにしたいURL)
IMGタグの場合は下記のような感じ。
<img src="http://www.example.com/rewrite/(サムネイルにしたいURL)" alt="サイト名" />
mod_rewriteの記述に戻ると、RewriteCondの2行は呼び出し元のリファラーを制御するためのもの。[OR]オプションで複数指定できます。言うまでもないけど、サムネイルAPIの変更はコメントアウトしている部分を変えるだけ。
PHPでリダイレクト編
.htaccessが使えない環境もあると思うのでPHPを使ったやりかたも考えました。
<?php $url = $_SERVER["QUERY_STRING"]; $ref = $_SERVER["HTTP_REFERER"]; $flg = false; $allow_list = array( "http:\/\/creazy\.net\/", "http:\/\/labs\.creazy\.net\/" ); foreach ( $allow_list as $val ) { if ( preg_match("/^".$val."/",$ref) ) { $flg = true; break; } } if ( $flg ) { //header("Location: http://img.simpleapi.net/small/$url"); header("Location: http://mozshot.nemui.org/shot/large?$url"); //header("Location: http://capture.heartrails.com/free?$url"); //header("Location: http://thumbs.bookmacro.com/w/200/h/150/u/$url"); //header("Location: http://www.thumbalizr.com/api/?url=$url"); } ?>
上記を http://www.example.com/sample.php として配置した場合、下記のURL呼び出しでMozshotのサムネイル画像が呼び出されます。
http://www.example.com/sample.php?(サムネイルにしたいURL)
IMGタグの場合は下記のような感じ。
<img src="http://www.example.com/sample.php?(サムネイルにしたいURL)" alt="サイト名" />
PHPの中身ですが、QUERY_STRINGに指定されたURLをheader関数にLocationを指定してリダイレクト(暗黙で302)しています。一応、$allow_list変数に接続許可ホストを指定できます。(正規表現で前方一致させているのでスラッシュとかはエスケープして下さい。)
Perlでリダイレクト編
全然自信ないけど、Perl版も適当に作ってみた。
#!/usr/local/bin/perl use strict; my $url = $ENV{QUERY_STRING}; my $ref = $ENV{HTTP_REFERER}; my $flg = 0; my @allow_list = ( 'http://creazy.net/', 'http://labs.creazy.net/' ); foreach (@allow_list) { $flg |= $ref =~ /^$_/; } if ( $flg ) { #print "Location: http://img.simpleapi.net/small/$url\n\n"; #print "Location: http://mozshot.nemui.org/shot/large?$url\n\n"; print "Location: http://capture.heartrails.com/free?$url\n\n"; #print "Location: http://thumbs.bookmacro.com/w/200/h/150/u/$url\n\n"; #print "Location: http://www.thumbalizr.com/api/?url=$url\n\n"; }
上記を http://www.example.com/sample.cgi として配置した場合、下記のURL呼び出しでHeartrails Captureのサムネイル画像が呼び出されます。
http://www.example.com/sample.cgi?(サムネイルにしたいURL)
IMGタグの場合は下記のような感じ。
<img src="http://www.example.com/sample.cgi?(サムネイルにしたいURL)" alt="サイト名" />
基本的にやっている事はPHPと一緒なので省略。
まとめ
本当はRuby版もやってみたかったけど、時間なくて断念。
.htaccessやらプログラミングやらの知識がないといけないのでJSでやるより導入難易度が高いかもしれないけど、HTML上はただのIMGタグになったのでなんか気持ちが良いですね。ああ、過去のエントリーのもJSから書き変えよ・・・。
ってか、呼出し元チェックを入れたんだけどこれやっちゃうと結局RSSとかで読んでいる人には見えないファイルになっちゃうな。リダイレクトだけしか処理してないから別に負荷なんてほとんどかからないだろうし、リファラーチェックははずしちゃってもいいのかもしれません。
一応動作確認はしましたがコードについてツッコミあればよろしくお願いします。
関連エントリー
・第15回:見ているページをAnother HTML-lintで文法チェックするブックマークレット
・第14回:JaikuのJavaScript BadgeをJSONから作ってみる
・第13回:URLエンコードとURLデコードを簡単にするブックマークレット
・第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
・第11回:引用(blockquote)を簡単にするブックマークレット
・第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
・第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
・第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
・第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
・第6回:TinyURL の遷移先が怖くて開けない場合の対処法
・第5回:twitter の JavaScript Badge を改造する
・第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
・第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
・第2回:タグに関わる基本的な事
・第1回:CSSで画像にborderをつけてみる