寝太郎の江戸風呂。ね！

[PR]

2024/04/27 (Sat.)

東京電力管内の電力の需給状況

東京電力管内の電力の需給状況を調べるページを作成しました。１時間ごとの電力消費量と供給量をグラフと表で表示したものです。

「東京電力需給状況」

■　表示サンプル

この２つの画像は、自由に転載して結構です。ぜひ紹介して下さい。

この夏の電力対策としては、まず節電の啓発が第一です。すでに色々なサイトが類似のものを作成していると思いますが、重なれば重なるだけ、みんなの意識が高まると信じます。そこで、微力ながら、私もこれに加わらせていただきました。

データ元は、Yahoo!デベロッパーネットワークの「電力使用状況API」です。そのAPIでは、１時間単位の需給量しかわかりません。そこで、定期的にデータを取得し、得られたデータをデータストアに保存することにしました。そして、そのデータを元にグラフと表を作成して表示するページに仕上げたのが、「東京電力需給状況」のページです。

今のところ、「2011-04-24」以降のものしか表示しませんが、それでもある程度のことはわかります。

例えば、「2011-04-24」は日曜日でしたが、この日の電力供給は、3500万kWh。消費量のピークは 19時で、3025万kWh、使用量率は 86% に達しました。

昨日「2011-04-25」の月曜日は、電力供給4000万kWh。消費量のピークはやはり19時で、3338万kWh、使用量率は 83% 。「2011-04-26」電力供給は、3950万kWh。

今日「2011-04-26」の電力供給は、3950万kWh。ピークで 85% ぐらいの消費量率になるように調整したのかなと思わせます。

まだ作り込んではいませんが、公開は早い方がよいと考え、紹介する次第です。

「東京電力需給状況」のページの作成に利用した「電力使用状況API」や Google Chart API などについては、次回以降、紹介します。

2011/04/26 (Tue.) Trackback() Comment(0) Yahoo! Web Services

静的HTML向けパラメータ取得&クエリストリング構築用ライブラリ

パラメータからクエリストリングを組立てる、また、クエリストリングからキーと値を取得する。

各種のWEBサービスの API が JSON に対応しているので、静的な HTML でも、JavaScript を用いて、動的なページが作成できます。

WEBサービスの API にリクエストする URL を組み立て、返ってきたデータをコールバック関数で処理します。リクエストする URL の組み立てにあたっては、数種類のパラメータを組み合わせて、クエリストリングを作成する必要があります。今回は、パラメータからクエリストリングを組み立てる関数を考えましょう。

また、静的HTMLファイル自身に対してもクエリストリングを付加してリクエストできます。このクエリストリングをキーと値のペアに分解すれば、これをWEBサービスの API に対するパラメータとして使用できます。クエリストリングからキーと値のペアを取得するメソッドも作りましょう。

さて、これから作成する関数は、次の２つに対応することを主な目的とし、付随的なメソッドを付け加えることにします。

(1) ブラウザのアドレスバーに表示される URL からパラメータを取り出して、ハッシュオブジェクトにする。

　　これは、現在のページの URL が
　　http://rakuten.netarrows.nobody.jp/ranking.html?genreId=1234
    ならば
　　{genreId:'1234'}
    という形のハッシュオブジェクトを取得しようというもの。

(2) ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

    {developerId:'abcd',
     operation:'ItemRanking',
     version:'2010-08-05',
     callBack:'callback',
     genreId:'1234'
    }
    という形のハッシュオブジェクトから
　　http://api.rakuten.co.jp/rws/3.0/json?
　　developerId=abcd
　　&operation=ItemRanking
　　&version=2010-08-05
　　&callBack=callback
　　&genreId=1234
    という API へのリクエスト用 URL を生成するもの。

[1] URLからのパラメータの取り出し。

これは、window.location.search の文字列から先頭の"?"を消去し、"&"で区切った文字列を、さらに"="で区切ります。

getParams=function(){
    var param={}

    var a=location.search.slice(1).split('&');

    for(var i=0;i

さらに特定のパラメータの値を取り出したいなら、

getParam=function(key){
    var param=getParams();

    return return param[key];;
}



[2] ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

これは、(1)と逆のことを行います。 まず、ハッシュオブジェクトからクエリストリングを生成しましょう。

buildQueryString=function(param){
       var a=[];

       for(k in param){

         a.push(k+'='+param[k]);

       }

       return a.join('&');

}



次に元となるURL にパラメータを付加します。

buildUrl=function(param,baseUrl){
    var queryString=param?'?'+buildQueryString(param);''
    return baseURL+queryString;
}



[3]URL生成関数を統合する。

上記で個別に記述した関数を wL という名前の元に統合しましょう。 処理上、wL() と wL.get() に分けます。

(1) wL()

a) wL()

　引数がない場合、 　　window.location オブジェクトを返します。 　　したがって、wL().hash　は window.location.hash と同じです。

b) wL(param,url)

引数２つ。 　　第二引数に第一引数のパラメータをクエリストリングにした文字列を返します。 　　パラメータのクエリストリング化にあたっては、wL.get()を使用します。 　　第二引数の指定がない場合には、window.location.pathname が指定されたものとみなします。

wL=function(param,path){
  if(!param){
     return window.location;
  }else{
     path=path?path:window.location.pathname;
     window.location.href=wL.get(param,path);     
  }
}

(2) wL.get()

a) wL.get()

引数なし。

　　window.location にクエリストリングがある場合、キーと値をペアとするハッシュオブジェクトを返します。

　　例えば、"?p=A&q=B"の場合、 　　　　{p:"A", q:"B"} を返します。

　　内部的には、wL.get(window.location.search) を実行し、b) wL.get(param) を利用しています。クエリストリングがある場合には、3)の「引数が "=" のある文字列の場合」によって、ハッシュオブジェクトが取り出されます。

　　window.location にクエリストリングがない場合、null を返します。

b) wL.get(param)

引数１つ。

　　1) 引数が配列の場合

　　　　各配列要素を"&"で結合した文字列を返します。 　　　　例えば、["p=A","q=B"] の場合 　　　　　　　　 "p=A&q=B" を返します。 　　　　なお、配列の要素がハッシュオブジェクトの場合、次の「ハッシュオブジェクトの場合」で文字列に変換したうえで結合します。

　　2) 引数がハッシュオブジェクトの場合

　　　　キーと値を"="で結合した文字列をさらに"&"で結合した文字列を返します。 　　　　例えば、{p:"A",q:"B"} の場合 　　　　　　　　"p=A&q=B" を返します。

　　3) 引数が "=" のある文字列の場合

まず "&" で区切り、さらに"="で区切りキーと値のペアとなるハッシュオブジェクトを返します。

　　4) 引数がクエリストリングのキーの場合

　　　　その値を返します。 　　　　例えば、クエリストリングが"?p=A&q=B"の場合、 wL.get('p')　は "A" を返します。

　　5) #始まり文字列

　　　　そのまま返します。 　　　　window.location.hash に値を入れられるようにするためです。

　　6)それ以外

　　　　null を返します。 　　　　処理を分岐出きるようにするためです。

c) wL.get(param,path)

引数２つ。 　　第二引数に wL.get(param) の結果を付加した文字列を返します。 　　wL.get(param) の結果に　"="　が含まれている場合には、"?"を第二引数の後に付け加えます。 　　例えば、wL.get({p:"A",q:"B"},"http://www.example.com/api")は、 　　"http://www.example.com/api?p=A&q=B" を返します。

wL.get=function(param,path){
  if(!param){
    if(window.location.search){
      return wL.get(window.location.search);
    }else{
      return null;
    }
  }else if(!path){
    if(typeof param=='object' && param.length){
       for(var i=0,s='';i

jQuery の getJSON を利用する場合

 

'&jsoncallback=?'を付加し、param で指定したコールバック関数を指定する必要があります。

 

param={
 q:'twitter',
 callback:'callback'
};
path='http://search.twitter.com/search.json';
$.getJSON(wL.get(param,path)+'&jsoncallback=?',callback);

参考

wL.js

2011/04/18 (Mon.) Trackback() Comment(0) JavaScript

topicPath - HTMLに追加する要素を作成

前回の「目次データから上位のトピックを探す。」では、目次データからトピックパスに表示するデータを取得する方法を説明しました。 そこでは、次のようなオブジェクトを要素とする配列が得られました。

[
 {id:'content22',     title:'内容22',parent:'subcontents2'},
 {id:'subcontents2',  title:'目次２',parent:'home'},
 {id:'home', title:'目次',parent:'contents'}
]

title 属性の値をリンクテキストとし、id 属性の値をリンク先にすれば、ページ内リンクが作成できます。

順番を逆にしないと、パスになりません。 まず、これをやりましょう。

上の配列を"paths"という変数で参照することにしましょう。 配列ですので、reverse() メソッドで順番が反転します。

paths.reverse();

上位から下位へと並ぶ順番に変わりました。

[
 {id:'home', title:'目次',parent:'contents'},
 {id:'subcontents2',  title:'目次２',parent:'home'},
 {id:'content22',     title:'内容22',parent:'subcontents2'}
]

この順番で、A 要素を生成します。

 for(var i=0;i

'topicPath'という id 要素を持つ要素内に、順番にハイパーリンクが追加されます。


また、このハイパーリンクがクリックされた時は、"changePage" という関数が起動されると記述されています。


この"changePage" という関数は、クリック後に表示すべき要素を取得するための関数です。A 要素の href 属性の値から、id を取得して、表示すべき要素を特定します。次のソースでは、表示すべき要素を グローバル変数 content で参照させます。

function changePage(e){
  content=document.getElementById(
　  this.href.match(/#(.+)/)[1]
  );
}


					

					
										
																				
					
2011/03/24 (Thu.)
												Trackback()
																		Comment(0)
												JavaScript
					
				

topicPath - 目次データから上位のトピックを探す。

前回の「topicPath - 目次データの取得」の記事では、topicPath 用の HTML の構造とそこから目次データを取得する方法について説明しました。

今回は、その目次データから、上位のトピックを探す方法についてです。

前回の記事では、各トピックの目次データが次のようなオブジェクトになっていることを説明しました。

そして、 ID が「subcontents2」の親の ID が「home」ということもわかります。

すなわち、ID を投入して、親の IDを取得して その属するオブジェクトを配列に加えます。取得した親の ID をまた投入して、親の IDを取得して さらに配列に加えます。それを繰り返して最後に「home」を ID とするオブジェクトを配列に加えたら終わりです。

つまり、結果を引数に再度入れる再帰的な関数を１つ作ればいいということ。
この関数を　searchAncestor としましょう。
また、上記のような目次データを arr とし、オブジェクトを格納する配列を paths とすると、次のように記述できます。
というように　結果配列を初期化した上で

を実行すれば、paths の内容は次のようになります。

2011/02/15 (Tue.) Trackback() Comment(0) JavaScript

topicPath - 目次データの取得

前回の「トピックパス/TopicPath」の記事では、topicPath を紹介しました。今後、何回かに分けて、そのスクリプトの考え方を説明します。今回は、基礎となる「
目次データの取得」についてです。

■ topicPath を利用するHTMLの構造

topicPath を利用する場合、HTMLの構造を次のように構成する必要があります。
(リスト中の#は、それに続く名前を id属性とする要素を意味します）

#topicPath
#contents
  ul(#home)
   li>a(href:#subcontents1)
   li>a(href:#subcontents2)
   li>a(href:#content)
  ul(#subcontents1)
   li>a(href:#subcontents11)
   li>a(href:#subcontents12)
   li>a(href:#content1)
  ul(#subcontents2)
   li>a(href:#contents21)
   li>a(href:#contents22)
  #content
  #content1
  #content21
  #content22

#topicPathは、トピックパスを表示する領域です。
#contentsは、目次とトピックをないようとする領域です。

■ 目次データの取得
HTMLが上記のような構造ならば、これから目次データを取得することは簡単です。
すなわち、#contents の中の UL要素の中にある A要素に着目します。

A要素は、リンク先の id 属性を href 属性に持っています。そして、その innerHTML は、リンク先のタイトルと通常、一致します。これで、id と title を項目に持つレコードが作成できます。

さらに、このレコードに、親の idを持たせれば、親子関係も保持するレコードになります。

topicPath では、このレコードの１行をオブジェクトとして把握します。すなわち、次のようなスタイルです。

{id:id,title:title,parent:parentId}

topicPath は、このオブジェクトを要素として、「目次データ」配列に格納します。
そして、この「目次データ」配列を基礎データとして、トピックパスを作成します。

次回は、「目次データ」から親子関係を遡って、先祖を探す方法を説明します。

2011/02/04 (Fri.) Trackback() Comment(0) JavaScript