Movable Type 備忘録

MovableTypeで天気予報を表示してみる

Apr172006
Author: bzbell
Categories: Customize
Tags: JavaScript, Sidebar, Weather

Prev Page: MovableType用占いランキングを表示してみる
Next Page: 投稿者別に最近のエントリ一覧を表示する

MovableType用占いランキングを表示してみるに引き続き、天気予報も表示させてみました。

前回に引き続き、今回参考にしたサイトはdark7.jp様です。

dark7.jpさんでは、天気予報を表示する MTWeather も公開しています。
インストールはカンタンです。

こちらのMTWeather の進化系→JavaScriptで導入簡単なお天気プラグインからスクリプトをダウンロードします。
デフォルトで表示させる地域を変更します。
Drk7jpWeather.js を任意の文字コードで保存可能なテキストエディタで開きます。

そして、以下のように修正してください。
```
11行目
var DEFAULT_ID    = '46';
var DEFAULT_XML   = '13';
var DEFAULT_AREA  = '東京地方';
：
：
{'id':46 ,'pref':'東京都' ,   'xml':'13',  'area':'東京地方'},
：
：
```
ファイル中から表示させたい地域を探して、その地域情報の青い字の値を DEFAULT_ID に変更します。
赤い字の値を DEFAULT_XML に変更します。緑の字も同様に DEFAULT_AREA として変更します。

例えば、京都の南部 を表示させたい場合には以下のようになります。
```
var DEFAULT_ID    = '79';
var DEFAULT_XML   = '26';
var DEFAULT_AREA  = '南部';
：
：
{'id':79 ,'pref':'京都府' ,   'xml':'26',  'area':'南部'},
：
：
```
変更できたら保存します。
圧縮ファイル中の prototype.js、xml2json.js、Drk7jpWeather.js の JavaScript を各自の環境に合わせてアップロードします。
アップロード先はどこでも構いません。
以下のコードを表示させたいテンプレートの <head>～</head> に追加します。
```
<script language="javascript" src="<$MTBlogURL$>prototype.js"></script>
<script language="javascript" src="<$MTBlogURL$>xml2json.js"></script>
<script language="javascript" src="<$MTBlogURL$>Drk7jpWeather.js"></script>
```
青い字の部分を各自の環境に合わせて修正します。上記コードでは index.html と同じ場所を指定しています。
そして、以下のコードを表示させたい場所に追加します。
```
<div id="jwfx_menu"></div>
<div id="jwfx"></div>
```