ZAPAnet総合情報局 > ZAPAブログ2.0 > お天気Webサービス作りました

お天気Webサービス作りました

2006年09月26日 プログラミングTIPS
お天気Webサービス - Weather Hacks - livedoor 天気情報を利用した「お天気Webサービス」を作成しました。
このAPIを利用したAPIの解説ページとして、
10分で理解する初めてのAPI
も作りました。
PHP5を利用したREST APIとのやりとりを解説しています。
恥ずかしながら、サンプルソースも公開しています。

そして、このサンプルを元に、各地域でのお天気情報を調べることが出来るサイトに改良したのが
お天気Webサービス-ZAPAnet-
です。
各地域の「今日の天気」「明日の天気」を調べることが出来ます。

そして、さらに改良したのが
お天気Webサービス(Ajax版)-ZAPAnet-
です。
Ajaxに対応させて、画面遷移なしに各地の「今日の天気」「明日の天気」「あさっての天気」を調べることが出来ます。
画面遷移のないページがどのような感じになるのかは、実際にお天気Webサービス(Ajax版)-ZAPAnet-で確認してみてください。
リンクをクリックすると、サブウィンドウが立ち上がりサーバと非同期に情報が更新されていることがわかると思います。

Ajaxとは、Asynchronous JavaScript + XMLの略です。
Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。
従来、Webブラウザを使ったWebアプリケーションでは、データをサーバに通知して処理結果を得るにはページ全体をロードしなおさなければならず、ネイティブアプリケーションのような操作性を得ることは難しかった。Ajaxでは、指定したURLからXMLドキュメントを読み込む機能を使い、ユーザの操作や画面描画などと並行してサーバと非同期に通信を行なうことで、サーバの存在を感じさせないシームレスなWebアプリケーションを実現することができる

Ajaxとは 【Asynchronous JavaScript + XML】より

Ajaxなら当然「XMLHttpRequestを使って、お天気WebサービスのREST APIから返ってきたXMLを直接処理すれば良い」と思ってしまいがちですが、
セキュリティ的な構造の制約上XMLHttpRequestオブジェクトは別ドメインと通信できない
決まりがあるため、Ajaxで直接お天気Webサービスとの通信が直接出来ません。
したがって、今回は「いつ」「地域」の二つのパラメータを与えるとお天気Webサービスと通信を行いサブウィンドウ用のHTMLを返すPHPプログラムを作成しました。
AjaxのXMLHttpRequestは、この自ドメイン上のPHPファイルと通信を行って、天気を表示しています。

ついでに、サブウィンドウを閉じたときに、徐々に透明度が薄くなり、フェードアウトしていくような効果も付けてみました。(Operaは非対応)

AjaxはPHP単体で作るときと違い、Javascript自体の言語仕様が少し違うという点もありますが、何よりも「ブラウザごとの動作」が違ってくるところが開発の難しいところです。
自分で作った最初のバージョンでは、IEでのみ確認していたため気付きませんでしたが、実はGeckoエンジンでは動いていませんでした。(OperaではOK)
問題となっていた部分は、「event」の部分で、マウス座標を調べるときに
event.clientX
としていましたが、IEとOperaでは動いて、Geckoエンジンでは動いていませんでした。
そこで、
この関数を呼ぶときに明示的にeventを渡して、
<a href="#" id="1" onClick="temp(event,1)">稚内</a>
JSファイル内で
function temp(tevent, id) {
var myEvent = tevent ? tevent : window.event;
・・・
}
とすることで、myEvent.clientXで座標を取得できるようになり、firefoxなどGeckoエンジンでも動くように改良しました。

他にもMacや他のブラウザなどではテストしていない(テストできない)ため、どのように動作しているのが確認できていません。
この辺りが仕様が統一されていないJavaScriptを使ったWebアプリ開発の難しいところです。

今回が初めてのAjax体験でしたが、なかなか難しいことがわかりました。