Googleから「Ajaxアプリケーションを簡易に開発するツールキット」という謳い文句でGoogle Web Toolkit ベータ版 (GWT) がリリースされました。
何となく、Yahooが同様に出したライブラリの延長線上のようなものだと思っていて気楽に眺めてみたのですが、とんでもない。ぶっとびました。
GWT は言うなればJavaのSwing/AWTや一部のクラスを完全に置換する、一種のプラットフォームとして開発されています。
そこまでしてAjaxへコミットしたGoogleにやはり脱帽です。
何かはまちちゃんのところとか、はてブのブックマーク数をBlogに表示させるのが流行っているみたいなので、便乗してみます。
# 前にもらったし、トラックバック返しておきますね。
というか、以前にはてブのブックマーク数を任意のページにインライン表示してみるで一度紹介していますが、あの方法ではBlogの記事ページのようにとある1ページのブックマーク数を一つだけしか表示できませんでした。
今回はBlogトップページのように複数のコンテンツがある場合にそれぞれのコンテンツにブックマーク数をインライン表示(シール?)させる方法を紹介してみます。
但し、前回のように単にJavaScriptでwriteするだけだとそこで表示が止まってしまいますし、また毎回APIにアクセスすると全体表示が非常に遅くなってしまうため、CGI経由で複数のブックマーク数をまとめて取得しておいて、後からJavaScriptでインライン表示してみます。
また前回と同じくCGIからJavaScriptオブジェクトやデータを生成して引き渡しますので、クロスサイト・ドメインの制限にはかかりません。
例えばレンタルのBlogサーバーでも別のサーバーのCGIからブックマーク数を取得して表示可能になっています。
多分他の人たちも作られてると思いますが、組んでみたので公開してみます。
自分のPostしたコメントを一覧するのが主な目的なので、コメントを入れていない人にはあまり面白くないかも。
①CGI(Perl)で動作しますので、CGIの動くサーバーが必要です。
またLWPやXML::RSSがインストールされている必要があります。
getMyhetebuComments.cgi
#!/usr/bin/perl
use lib qw(../lib); #←ライブラリは適当に変更して下さい。
use LWP::Simple;
use LWP::UserAgent;
use HTTP::Request::Common;
use XML::RSS;
my $maxcount = 10; #←表示件数です。適当に変更して下さい。
my $yourhatena_id=”ro-ca”; #←はてなのIDです。自分のIDに変更して下さい。
print "Content-Type: text/html\r\n\r\n";
#ヘッダーも適当に変えて下さい。
print "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n";
print "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\r\n";
print "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"ja-JP\" lang=\"ja-JP\">\r\n";
print "<head>\r\n";
print " <link rel=\"stylesheet\" type=\"text/css\" href=\"(CSSファイル名を指定して下さい)\" />\r\n";
print " <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\r\n";
print " <meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\" />\r\n";
print " <meta http-equiv=\"Content-Style-Type\" content=\"text/css\" />\r\n";
print "</head>\r\n";
print "<body style=\"background-color: #ffffff;\">\r\n";
my $hbUrl = “http://b.hatena.ne.jp/”.$yourhatena_id.”/rss”;
my $title;
my $link;
my $desc;
my $rss_data = get($hbUrl);
my $rss = new XML::RSS;
$rss->parse($rss_data);
my $cnt = 0;
foreach my $item ( @{$rss->{‘items’}} ) {
if($item->{‘link’} ne “”) {
$title = $item->{‘title’};
$link = $item->{‘link’};
$desc = $item->{‘description’};
print "<a href=\"$link\" style=\"font-size: 0.8em;\" target=\"_blank\">$title</a><a href=\"http://b.hatena.ne.jp/entry/$link\" target=\"_blank\"><img src=\"http://b.hatena.ne.jp/images/entry.gif\" border=\"0\"></a><div style=\"font-size: 0.8em;\">『$desc』</div><br />";
}
$cnt++;
if($cnt >= $maxcount) {
last;
}
}
print "</body></html>\r\n";
②サーバーにアップして、適切な権限を設定しておきます。
③IFRAME内などに呼び出してやればOKです。
例えばSeesaaの場合だと、管理画面から「自由形式」のコンテンツに以下のようなHTMLコードで呼び出せます。
<iframe name="hatebu" width="165" height="500" frameborder="0" src="getMyhetebuComment.cgiへのパス" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="false" scrolling="yes"></iframe>
Seesaaでは直接CGIを置いたりできないのでIFRAMEでの呼び出しにしましたが、SSIが使える環境などであれば、SSIに改造しても綺麗でしょう。
適当に改造して使って下さい。
ここしばらく、はまちちゃんが今度は主にはてなで大暴れ。
(一応、はてなとmixiからはログアウトしてから見た方がいいかも知れません)
http://mxxi.hamachiya.com/2006/02/post_15.html
http://mxxi.hamachiya.com/2006/02/post_14.html
http://mxxi.hamachiya.com/2006/01/post_13.html
http://mxxi.hamachiya.com/2006/01/post_12.html
どれも即座に対応されてしまっているのが笑えます。
絶対、はてなからは常にチェック入ってるんではないかと。
セキュリティが向上して、良かったですね。
今更ですが、GmailをOperaでも利用可能になってますね。
ここでいうOperaは現行の7.54u2です。次バージョンの8(7.6)からXMLHttpRequestサポートに伴って利用可能になる、との話はありましたが、それに関わらず先行して対応されたようです。
確認してみると、IE6やFirefoxではGmail viewというオプションでstandardかbasic HTMLかを選べるのですが、そのうちbasic HTMLのみに固定して使えるようにしてあるようです。
いわゆるAjaxパターンでは無い普通の静的なHTML Webメーラーとしての対応、ということなのでしょう。
そのため、普通にメールを読んだり書いたりは問題ないのですが、Mail Settingsを選ぶと
Settings can only be changed from Gmail’s standard view.
To access standard view, please use a fully supported browser.
と言われてしまい、設定変更できない罠も・・。
まあ、これもそのうち対応してくれるんだろう、と楽観視してますが。
(このあたりに、ブラウザ毎対応の説明がありますね)
# 因みに、ではOpera8(8.0b2)ではどうなのかというと、7.54u2と同様の動作でbasic HTMLにしかならないみたいです。
XMLHttpRequestサポートによるAjax対応はどうなってるのかな？コードを読んでみても複雑すぎてよく分からん・・。
聞いていた話と違うように思いますが、まあまだベータ版だからかも知れず、正式版リリース後にもう一度試してみましょう。