CrossOverで天気予報API

アップフロンティア株式会社様のwidgetownでこのサイトで公開しているCrossOverライブラリが紹介されています。

第7回 天気予報APIを活用して、快適な秋を過ごそう!【特集 サンデープログラミング】|widgetown.

ご紹介の記事では、widgetownが財団法人日本気象協会と共同で提供している「天気予報API」を使用した天気予報や指標情報を表示するためのウィジェットのサンプルについて解説しています。

CrossOverライブラリはFlashのデータ保持領域にXMLのデータを取り込んで、JavaScriptにデータを渡すことができます。読み込む のは天気情報と洗濯情報の2つのXMLなのですが、提供されているライブラリでは1度に1つのデータ保持領域を作成するため、1つのXMLしか読み込むこ とができませんでした。そこで、CrossOver.jsを改良して、1度に複数のデータ保持領域を作成し、それぞれJavaScriptにデータを渡す ようにしました。

ほほー、なるほど。

たしかに、紹介されているソースを拝見すると複数のXMLも扱えるようです。

アップフロンティアのクロサキ様、すばらしい情報をどうもありがとうございます。

XML文字列をDOMエレメントに変換する

先日公開したJavaScriptでクロスドメインでのXMLアクセスを可能にするライブラリ「CrossOver」は、コールバック関数への引数がXML形式のテキストデータです。

DOMオブジェクトで戻せば余計な処理をゴリゴリ書く必要がなくて、親切だったのかもしれませんが、XML.ObjTreeなどの他の優秀なライブラリとの連携を前提にすることで、最小限の機能だけを提供することが可能になり、信頼性の確保が可能になると考えました。

それに実は私、アクションスクリプトは詳しくありません。

ただ、そうはいっても、やっぱりDOM操作をゴリゴリやりたいという声も多いようなので、XML形式のテキストデータをDOMオブジェクトに変換する関数を書いておきます。

// xmlStringをDOMオブジェクトに変換
function parseFromString( xml ){
  var root;
  if ( window.DOMParser ) {
    var xmldom = new DOMParser();
    xmldom.async = false;
    var dom = xmldom.parseFromString( xml, "application/xml" );
    if ( ! dom ) return;
    root = dom.documentElement;
  } else if ( window.ActiveXObject ) {
    xmldom = new ActiveXObject('Microsoft.XMLDOM');
    xmldom.async = false;
    xmldom.loadXML( xml );
    root = xmldom.documentElement;
  }
  return root;
}

CrossOverで定義したコールバック関数に渡された値を上記関数に渡してやると、戻り値がDOMオブジェクトに変身します。

CrossOver – JavaScriptでクロスドメイン

JavaScriptでは、セキュリティ上の制限により、違うドメインのXMLを読み込むことができません。

一方Flashでは、crossdomain.xmlにより許可されたドメインからはXMLの取得が可能です。

そこで、FlashのExternalInterfaceを利用して、JavaScript側で指定したURLからFlashでXMLを取得して、その結果をJavaScriptに返すだけの小さなswfファイルを作成しましたので公開します。

まずは、こちらのサンプルページをご覧ください。

ダウンロード

ダウンロード(CrossOver.zip)

パッケージ内容

PHPやCGIが不要です!

  1. CrossOver.swf
  2. CrossOver.js
  3. swfobject.js

利用方法

</body>の直前あたりに以下のソースを貼り付けてください。
パスは環境にあわせて修正願います。

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="CrossOver.js"></script>

ボタンクリックなどのイベントでloadCrossOver()という関数を実行してください。
引数には、コールバック関数名及びXMLのURLを渡してください。
(コールバック関数名はダブルクォーテーション等で囲む必要があります。)

また、XMLリクエストが成功した際に実行されるコールバック関数を定義してください。

詳細は、サンプルページなどもご参照ください。

// XMLHttpリクエストをFlashにしてもらう関数
oButton.onClick = function{
  loadCrossOver( 'callback', 'http://example.com/feed.xml' );
}
// 上記関数の第一引数と同じ名前の関数を定義
function callback( XMLString ){
.......... // XMLに対する処理
}

コールバック関数の引数には、取得したXMLのString型データが渡されますので、XML.ObjTree等と併用することで、オブジェクトとして利用可能です。

ライセンス

MITライセンスとします。

ご注意

crossdomain.xmlで許可されていないサイトのXMLにはアクセスできません。
他の手を考えましょう。