MyMiniCityのブログパーツ「MyMiniCity Widget」

「MyMiniCity Widget」は、MyMiniCityの町やステータスを、ブログパーツのようにご自分のサイトに表示することができるものです。
左のような表示を行うことができます。

なお、左はキャプチャした画面ですので、リンク等は動作しません。
サイドバーの「ブログパーツ」部分に、実動サンプルがあります。

12月23日　午後11時57分
CGI内の表記のミスを一部修正しました。

1.動作の要件

MyMiniCity Widgetは、サーバー側のCGIと、クライアント側のJavaScriptを組み合わせて動作します。
サーバー側CGIの動作要件は以下の通りです。

• Perlが動作することが必要です。
• サーバーに以下のPerlモジュールがインストールされていることが必要です。
  • CGI
  • LWP::UserAgent
  • HTTP::Request

一方、クライアント側のJavaScriptは、以下のWebブラウザで動作を確認しています。

2.CGIのダウンロード

MyMiniCity WidgetのCGIは、以下からダウンロードすることができます。

MyMiniCityWidget_1_00.zip

[[donation_script_p]]

3.CGIの書き換え

ダウンロードしたファイルを解凍すると、「myminicitywidget.cgi」というファイルができます。
このファイルの以下の箇所を書き換えてから、ご自分のサーバーにアップロードします。
なお、ファイルの文字コードはUTF-8になっていますので、書き換えの際には、UTF-8の編集ができるテキストエディタをお使いください。

3行目「my $username = 'your_username';」

「your_username」を、ご自分のユーザー名に書き換えます。
例えば、ユーザー名が「hoge」の方だと、この行を「my $username = 'hoge';」に書き換えます。

4行目「my $width = 200;」

MyMiniCityのFlashを表示する際の幅を指定します。
例えば、幅を150ピクセルに変えたい場合は、この行を「my $width = 150;」に変えます。

5行目「my $height = 200;」

MyMiniCityのFlashを表示する際の高さを指定します。
例えば、高さを150ピクセルに変えたい場合は、この行を「my $height = 150;」に変えます。

6行目「my $noscale = 0;」

標準では、Flashのサイズに合わせて、町を縮小表示するようになっています。
縮小表示しない場合は、この行を「my $noscale = 1;」に変えます。

なお、Flashを右クリックして、メニューで拡大／縮小を行うこともできます。

4.CGIのアップロード

CGIの書き換えが終わったら、サーバーにアップロードします。
そして、CGIのパーミッションを「705」等に変えて、実行可能にしておきます。

5.表示先のページにJavaScriptを貼り付け

次に、MyMiniCity Widgetの表示先のページで、表示したい位置に以下のようなJavaScriptを挿入します。

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

6.表示のカスタマイズ

MyMiniCity Widgetでは、以下のような形式でWidgetを表示しています。

<div id="myminicity_container">
<div id="myminicity_home"><a href="http://○○.myminicity.com">○○ののMyMiniCity</a></div>
<div id="myminicity_powerup">工業発展等のページへのリンクを出力するselect</div>
<div id="myminicity_view">Flashを表示するコード</div>
<table id="myminicity_stat">現在のステータスを表示するtable</table>
<div id="myminicity_widget_copyright">Copyright</div>
</div>

これらのdiv要素に適切なスタイルシートを設定すれば、表示をカスタマイズすることができます。
例えば、以下のように表示したいとします。

• MyMiniCityWidgetをサイドバー等の中央に表示する
• 全体の幅を200ピクセルにする
• selectを幅200ピクセルで表示する
• ステータスのtableも幅200ピクセルで表示する
• tableに罫線を引く

この場合、スタイルシートは以下のようにします。

#myminicity_container {
    margin-left : auto;
    margin-right : auto;
    width : 200px;
    text-align : center;
}
#myminicity_powerup select {
    width : 200px;
}
#myminicity_stat {
    width : 200px;
    border-collapse : collapse;
}
#myminicity_stat th, #myminicity_stat td {
    border : 1px solid black;
}