お知らせ

2010年3月26日

「Movable Type 5実践テクニック」が発売されました。
実際的なWebサイト製作事例を通して、テーマと複数ブログ活用を中心に、Movable Type 5の実践的な使いこなし方を解説しています。
Movable Typeでサイト制作をされている皆様はぜひお買い求めください。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

MyMiniCityはじめました

壱 (2007年12月21日 11:14) | コメント(3) | トラックバック(0)

ここ3日ほど、Twitter界隈で「MyMiniCity」が盛り上がっています。
ということで、私も始めてみました。
私のページのアドレスはhttp://hjfuji.myminicity.comです。

また、自分のブログ等にMyMiniCityの町を表示するためのCGIも作ってみました。

2007年12月21日　午後12時45分
CGIとJavaScriptを一部修正しました。

2009年1月17日　午後19時3分
CGIを一部修正しました。

1.MyMiniCityの概要

MyMiniCityはSimCity風のサービスです。
ページへのアクセスが多くなるほど、町が大きくなっていくという仕組みです。
町が大きくなって人口が増えるにつれて、工業や交通といった町のパラメータを調節することができるようになるようです。
また、コメントをつける機能があり、ちょっとしたコミュニケーションツールとして使うこともできます。
自分のIDを登録するだけでアカウントを作ることができ、手軽に始めることができます。

私はまだ始めたばかりなので、人口はわずか5人です。
誰かにアクセスしてもらわないと町が大きくならないというシステムなので、大きくなるには時間がかかりそうです。

2.自分のブログ等に町を表示したい

MyMiniCityでは、現状はブログパーツのようなものは提供されていません。
「町の様子を自分のブログ等に表示したい」という方には、この点が弱点だと思います。

町はFlashで表示されているので、そのFlashのコードをブログ等に貼り付ければ、一応表示することはできます。
ただ、人口等が増えるにつれて、Flashに渡すパラメータが変化するので、それを得ることが必要です。

そこで、パラメータを得てFlashのコードを出力するCGIを作ってみました。
以下のように表示することができます。

2-1.CGIの設置

まず、以下のCGIをサーバーにアップロードし、パーミッションを「705」等に変えて実行可能にます。

ただし、2行目の「your_username」は、ご自分のユーザー名に書き換えます。
たとえば、ご自分のページのアドレスが「http://hoge.minicity.com」の方は、この行を「my $username = 'hoge';」にします。

また、3行目の赤字の「width」には、町を表示する際の幅を指定します。
例えば、180ピクセルで表示したい場合だと、この行を「my $width = 180;」とします。

#!/usr/bin/perl -w

my $username = 'your_username';
my $width = width;

use strict;
use LWP::UserAgent;
use HTTP::Request;
use CGI;

my $q = new CGI;
my $referrer = $q->param('referrer') || '';
my $ua = LWP::UserAgent->new;
$ua->timeout(10);
my $req = HTTP::Request->new(GET => "http://${username}.myminicity.com/");
$req->referrer($referrer);
$req->header(Cookie => "X-MV-referrer=$referrer; X-Mc-Ref=1");
my $resp = $ua->request($req);
my $html = $resp->content;
print "Content-type: text/javascript\n\n";

if ($html =~ /so.addParam\("FlashVars","(name=.*?&k=.*?)"/) {
    my $param_str = $1;
    $param_str =~ s/&/&amp;/g;
    my $height = int($width * 2 / 3);
    print <<HERE;
document.write('<embed width="$width" height="$height" flashvars="$param_str" allowscriptaccess="always" menu="false" quality="high" bgcolor="#deecfe" name="client" id="client" src="http://data.myminicity.com/swf/client.swf?v=0" type="application/x-shockwave-flash"/>');
HERE
}
else {
    print <<HERE;
document.write('Error occured');
HERE
}

1;

2-2.JavaScriptの設置

次に、MyMiniCityを表示したい位置に、以下のJavaScriptを入れます。

<script type="text/javascript">
//<![CDATA[
document.write('<script type="text/javascript" src="CGIのURL?referrer=' + encodeURIComponent(document.referrer) + '"><\/script>');
//]]>
</script>