MTWeather の進化系→JavaScriptで導入簡単なお天気プラグイン

「MTWeather プラグインをバージョンアップ ver 1.00」で長らく Movable Type 向けにお天気プラグインを配布してきましたが、JavaScript を使ってもっといろいろなブログでお使い頂くことが可能なプラグインを MTWeather の進化系として配布致します。

このJavaScript プラグインはプルダウンで見てるユーザさんが好きな地域を選択することができ、Cookie でそのユーザさんの環境として地域が保存されるようになってます。つまりは、見てる人向けにカスタマイズされてお天気が表示可能ってわけ。

約２週間ほど当サイトにて試運転してきたので、ある程度バグはとれているかと思いますが、不具合等御座いましたらコメントお願い致します。

- スポンサーリンク -

導入方法についての説明

  1. JavaScript 一式をインストールする ≫スクリプトはこちら（Drk7jpWeather.zip）　

    上記リンクから Drk7jpWeather.zip をダウンロードします。ダウンロードしたファイルを解凍すると以下のような４つのファイルになります。※更新具合で、サイズは多少変化しているかもしれません。

    weather01.jpg

    index.html はサンプルになります。その他の３つのファイルをご自分のサイトの適当な箇所に FTP してください。その他の JavaScript や CSS が置いてあるディレクトリで問題ないでしょう。
    ※文字コードを変更せず、FTP して下さい。script を改変する場合は、UTF-8 で BOM つき（UTF-8-flag を ON にする）で保存下さい。

  2. 設置する html もしくはテンプレートを編集

    お天気を表示したいページの </head> の前あたり。つまり、その他の JavaScript や CSS が記述してあるところに以下のコードを追加します。 src 属性の path は、自分が設置した場所に適宜合わせて下さい。
    ※例えば、Movable Type であれば、Main Index テンプレート等に追加することになります。Movable Type 以外の方は、適当に path とか指定して下さい。 

    <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>

  3. 動作確認

    ページを保存もしくは再構築すれば、下記のように表示されると思います。

    weather02.jpg

    表示されない場合は、
    　１．文字コードを変更して FTP してしまった
    　２．html 内に埋め込むコードが足りていない。もしくは間違っている
    　３．非対応のブラウザー？（IE, FireFox, Opera は動作確認済みですが。。。）
    が考えられます。どうしてもうまくいかない場合は、コメントなり投げて下さい。

    ちなみに、地域を選択すれば、Ajax 風味で動的にお天気情報が変更されます。また、地域名は Cookie で保持されるので、各ユーザさんに応じて求める地域のお天気情報が表示されるので便利です。

その他、仕様について・・・

  • IE 6, FireFox 1.5, Opera 8.x で動作確認済みです。それ以外は未確認です。
  • XML2JSON および Japan Weather Forecast xml を使っています。いずれかのサービスに接続できない状態の時、お天気情報が表示されません。ご了承下さい。
  • 結果は XML2JSON の仕様に応じて、一定期間キャッシュされます。最新の情報が表示されない場合があります。

サンプルはこちらをどうぞ。

- スポンサーリンク -

関連する記事＆スポンサーリンク