XML2JSON + LWWS で導入簡単なお天気 JavaScript

XML2JSON サービスは、最近はあふれかえるほど存在する Web service をより簡単に使うための道具な訳ですが、リリースしたまま放置状態が長い間続いてしまったので、XML2JSON ってなんのために存在するのだろう？？って思っていた方も多いかと思います。

今週末はちょっと時間ができたので、Livedoor Weather Web Service を使って自分のサイトにお天気情報を表示する JavaScript ツールを作ってみました。当サイトで配布している MTWeather と違って、Movable Type 以外のサイトにも設置頂けます。

お天気好きな方は、どうぞご利用下さい。近いうちに、Japan Weather Forecast xml 版も作るので、降水確率や週間予報が欲しい方は今しばらくお待ちを。

導入方法についての説明

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

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

   

   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 テンプレート等に追加することになります。

   <script language="javascript" src="<$MTBlogURL$>prototype.js"></script>
   <script language="javascript" src="<$MTBlogURL$>AjaxPages.js"></script>
   <script language="javascript" src="<$MTBlogURL$>xml2json.js"></script>

   次に、</body> の直前に以下のコードを追加します。

   <script language="javascript" src="<$MTBlogURL$>lwws.js"></script>

   次に、お天気情報を表示したい位置に以下のコードを追記します。サンプルの index.html もご覧下さい。

   <div id="lwws_menu"></div>
   <div id="lwws_today"></div>
   <div id="lwws_tomorrow"></div>
   

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

   

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

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

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

• IE 6, FireFox 1.5, Opera 8.x で動作確認済みです。それ以外は未確認です。
• XML2JSON および LWWS を使っています。いずれかのサービスに接続できない状態の時、お天気情報が表示されません。
• 結果は XML2JSON の仕様に応じて、一定期間キャッシュされます。最新の情報が表示されない場合があります。
• テンプレートを変更したい場合は、AjaxPages の仕様に順じて lwws.ajp というファイルを変更下さい。
  →AjaxPages は遅延読み込みがうまくいかず、IE で正常に表示されない場合が多々あるのでやめました。lwws.js 内の template というメソッドを書き換えて下さい。

サンプルはこちらをどうぞ。　（※AjaxPages の処理、結構重いなぁ・・・）
※今気がついたけど、IE だと、読み込み失敗するときありますね・・・イベント処理を後回しにしないとダメなのかな。