Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

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

Apr172006
Vote:
http://bizcaz.com/archives/2006/04/17-012519.php
Categories: prototype
Tags: prototype
Social Bookmark

Next Page: prototype.jsを使ってタブ表示する

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

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

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

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

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

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