top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_847

天気予報:今さら、ですが、天気予報。ライブドア「WeatherHack」 に、プロクシサービス「XML 2 JSON service」を組み合わせ、クロスドメインを回避する ・・・ 【創ったmetaboy】

 2009-04-14
 天気予報
 「今更・・・」ですよね。
 勘弁してください。

 とりあえず、報告特徴としては

  ・利用者サイドのブログパーツ作成
   ・見ている方が、場所を設定し、クッキー保存
    次回来てくれたときに、設定を反映
  ・クロスドメインを、あの秀逸サービス
    「XML 2 JSON service」を利用し、回避
 が、あります。
 ・いつも知りたい!あの場所天気予報
 その他、0 1 並びのデータや、HTMLソースまで

 報告です・・・

  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more************************************************
◎ いつも知りたい!あの場所天気予報
************************************************


まずは、個人利用には無償利用できる
Weather Hacks(気象データ配信サービス
Weather Hacks(気象データ配信サービス いろいろな利用方法が
 あるようですが
 オーソドックスに
 REST利用で・・・

 ・・・ID取得無くとも利用できるんだよね。

 さて、どんな「天気予報」パーツ
 するか・・・

 
 ◆仕様策定◆
 ・やっぱり「利用者スタンス」
  ・見ている方が場所を設定でき
   このブログを再び見に来てくれた時は
   同じ場所の天気予報が出ないと・・・
  ・クロスドメイン問題を、有名な秀逸サービス
   「XML 2 JSON service」を利用して回避してみる。
   



 ■Weather Hacks

  □REST 利用
   http://weather.livedoor.com/forecast/webservice/rest/v1?city=70&day=tomorrow
   ※こんな例が載っているよね。要は、& でパラメータ組み込んだ
    URLアクセスで、XML形式でデータを返してくれるわけだ。

  □お天気Webサービス仕様
   こちらに、詳細な仕様が公開されている
   ポイントは
    ・都市を示す ID番号 と
    ・今日・明日・あさって を示すパラメータ

  □データ準備
   今回は、データベースは使わないで、
   JavaScript変数に組み込んだ形で用意する。
   ※こちらにあります。
    不細工で申し訳ありませんが、必要な方はお使いください。


 ■XML 2 JSON service

  □クロスドメイン問題
   プロキシサービス用意して回避してくれる
   ◆XML を JSON に変換するサービス - ベータ版を公開
   XML を JSON に変換するサービス - ベータ版を公開 未だに「ベータ版」
 ということで、
 ほんの少し、不安だけれど・・・
 (ほんの、ほんの少しね)

 ・・・ありがたく利用させていただきます。

 ※引用転載
 
 ◆特徴◆
  1. クロスドメイン制限を超えて
    JSON 形式で XML 形式のデータを利用することが可能
  2. JSON は XML と比較して JavaScript 上で
    非常に扱いやすいため、
    コツを掴めば簡単に自分のサイトで利用できる


 で、
 ・不特定多数の方にサービス提供するために負荷対策を施し、
  XML 2 JSON service ベータサービスを公開
 されている。素晴らしい。

 ただし、
 ・アクセス数制限があるサービスに対しては、ご利用をお控え下さい。
 ・すぐにアクセス数制限を超えてアクセス不可になると思います。
 ・あまりに容量の大きい XML は破棄して処理を中断する仕組みが実装されています。
 ・一定期間、結果をキャッシュします。最新の動きを追うような用途には期待した結果が得られません。
 ・負荷の問題等で、突然サービスを終了する可能性もあります。
 ということで。
 ごもっとも、です。


 ■実際の構築

   □プルダウン連携
    ・古いやり方だけれど、
     ・絞込み式のプルダウンを実装
     (「エリア」を選択すれば「地域」が絞り込まれる)
function SetAreaGo(intVal){
if(intVal){
var form=this.document.forms['livedoorweathers'];
var obj1 = form.sel_area;
var obj2 = form.sel_city;
obj2.length=0; var tempcnt=1;
obj2.options[0]=new Option('▼地域','');
for(var s = 0;s <arrays_city.length;s++){
if(arrays_city_pref_id[s] == intVal){
obj2.options[tempcnt]= new Option(arrays_city[s],arrays_city_pid[s]);
tempcnt++;
}
}
}
}
 ・・・ 最初は「地域」は
     すべてを選択できるようにしておく。

   □地域「セット」> WeatherHack 実行
    ・プルダウン変更ですぐに更新されるのではなく
     ・[セット] ボタン押してから、
      WeatherHack するようにしている。
     ※[実行] や [取得] ではなく、[セット] ね。
      同時にクッキーに値を保存しておく。
function GoSetMapArea(intWork,callbaclfunc,opSet){
if(intWork==1){
var selObj = document.getElementById('sel_city');
var selIndex = selObj.selectedIndex;
val_city = selObj.options[selIndex].value;
if(val_city!=''){
if(opSet==1){
var selObj2 = document.getElementById('sel_area');
var selIndex2 = selObj2.selectedIndex;
val_area = selObj2.options[selIndex2].value;
SetCookie(365,'*****',val_area,1);
SetCookie(365,'*****',val_city,1);

val_city_name = selObj.options[selIndex].text;
Go_SetKeyword(3,val_city_name);
}
var script = document.createElement('script');
script.charset = 'UTF-8';
script.src = URL_proxy + 'var=' + callbaclfunc + '&url=' +
escape(URL_livedoor + 'city=' + val_city + '&day=' + val_day);
document.body.appendChild(script);
}else{
alert('都市名を選択してください。');
}
}
}
 ・・・ ちょっとはまった。

   □コールバック用意しておき、
    そこで、書き換えエリアに
    取得した「天気情報」を表示する
callback_weather.onload = function(data){ // 送り返される値を受け取り
var d = document.getElementById('result_metaweather');
d.innerHTML = data["location"]["pref"] +' '+
data["location"]["city"] +' '+
data["telop"] +' '+
'<img src="' + data["image"]["url"] + '"><br>'+
data["description"];
}
 ・・・ ここは、ライブドアのサンプルまま。

    いつものように
     ・動的にHTMLを書き込む形式で
var outHTML = "<div class=\"headBox\" align=\"left\">いつも知りたい!<br>あの場所天気予報</div>";
outHTML += "<div class=\"contents\"><form method=\"post\" name=\"livedoorweathers\">";
outHTML += " <select id=\"sel_area\" name=\"sel_area\" onChange=\"JavaScript:SetAreaGo(this.value)\">";
outHTML += " <option value=''>▼エリア</option>";
for(var s = 0;s <arrays_pref.length;s++){ var tempval = arrays_pref[s].split(":");
outHTML += " <option value='" + tempval[1] + "'>" + tempval[0] + "</option>";
}
outHTML += " </select>";
outHTML += " <select id=\"sel_city\" name=\"sel_city\">";
outHTML += " <option value=''>▼地域</option>";
for(var s = 0;s <arrays_city.length;s++){
outHTML += " <option value='" + arrays_city_pid[s] + "'>" + arrays_city[s] + "</option>";
}
outHTML += " </select><br>";
outHTML += " <div style=\"text-align:right;\">";
outHTML += " <input type='button' name='bt_go' value='セット' onClick=\"javascript:GoSetMapArea(1,'callback_weather',1);\">";
outHTML += " </div>";

outHTML += " <div id=\"result_metaweather\"></div>";
outHTML += "</form>";

outHTML += "<br clear=\"all\" />";
outHTML += "※貴方がいつも知りたい場所を<br>";
outHTML += " リスト選択して<br>";
outHTML += " 選んでください。<br>";

outHTML += " Thanks to <br>";
outHTML += " ・<a href=\"http://weather.livedoor.com/weather_hacks/\" target=\"_blank\" rel=\"nofollow\">";
outHTML += "WeatherHacks";
outHTML += "</a><br>";
outHTML += " ・<a href=\"http://www.drk7.jp/MT/archives/001011.html\" target=\"_blank\" rel=\"nofollow\">";
outHTML += "XML 2 JSON service";
outHTML += "</a><br>";

outHTML += "</div>";
document.write(outHTML);
 ・・・とする。
    ※敬意を表して
     リンクもちゃんと用意する。(当たり前、か)

   □読み込み後
    保存されるクッキーの値を取得し
    トリガを引く。、
var old = window.onload;
window.onload = (typeof old != 'function') ?
callback_weather.init : function(e) { old(e); return callback_weather.init(e); };
 ・・実はここで結構はまった。

    ※結局、「XML 2 JSON service」で紹介されている
     サンプルを参照させていただいたのだが、
     (最初は)init 利用しないでやろうとしていて

     ・IE8 でエラーに悩まされ続けた。
      IE8 でエラーに悩まされ続けた
      表示エラー文字列:
HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)


     ま、一応の実装。
     もっとカスタマイズしたいが、本日
     時間切れ。


 ■公開

   □このブログ右サイドに用意

    ※別ウインドウで開くものも用意
     した。


 いやぁ、マッシュアップ
 面白いですねぇ。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/847-5a838c87
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。