Home > Archives > 2011年4月 Archive

2011年4月 Archive

jQueryでレスアンカーポップアップ

Posted by: 管理人
2011年4月23日 14:49
開発関連

最後にプログラムを更新したのが、2010年末だったという、
ほぼ放ったらかし状態の画像掲示板dtnですが、
その際に新機能を一つ追加していたのを思い出しました。
　
書き込み内にレスアンカー（　＞＞２　みたいなものですね　）があった場合に、
これを自動的に該当記事までリンクさせるというものです。
↓のような感じで、掲示板phpに一行足しただけでしたけども。。。



$txt = preg_replace('/>>([0-9]+)/','\\0',$txt);

本当なら、他の掲示板でもよくあるように、Javascriptでポップアップさせ、
当該書き込みをそこに表示させたりもしたかったのですが、
なかなかうまくいかず...時間もなく...搭載を断念しておりました。
　
これを今回実際に組み上げてみました。
　
　
実は、初めはjQueryのお世話にならずに、単純にJavascriptで　
組み進めていたのですが、IEではうまくいっても、
Firefoxや他で動作が失敗してたりと、色々面倒になってしまい....
というわけでjQueryでやってしまいました。
　
で、完成したのがこんな感じです。　

基本的な考え方はJavaScriptでやるのと同じで大丈夫です。
　
まず、下記のようにレスアンカーを表示させる為のdivをhtmlに用意しておく。



＜div id="ID"＞＜/div＞

次に、レスアンカー部分にマウスがのったらポップアップさせる
肝心のjQueryコードを書くのですが、
その前にアンカーリンク自体にも仕掛けをしておきます。
どの書き込みをポップアップさせるかを判別する必要があるからです。
　
という訳で、手っ取り早くする為、a link のname属性部分に、
表示させたいdivのidを仕込んでおきました。



＜a href="#1" class="onMouse" name="d1"＞

　
で、最後は肝心のjQueryのソースとなります。



$(function(){

	$("#ID").css({

		opacity:"0.9",

		position:"absolute",

		display:"none"

	});

	$("a.onMouse").mouseover(function(){

		var popupID = $(this).attr("name")

		$("#ID").html($("#" + popupID).clone());

		$("#ID").fadeIn("fast");

	}).mouseout(function(){

		$("#ID").fadeOut("fast");

	}).mousemove(function(e){

		$("#ID").css({

			"top":e.pageY+10+"px",

			"left":e.pageX+10+"px"

		});

	});

});

　
流れとしては、レスアンカーリンクにマウスがのった時に、
name属性の値を取得して、値のdivボックスデータをdiv#IDにコピー。
最後に、フェードイン、フェードアウトの設定を付けたという感じです。
　
とっても簡単な感じで、ブラウザの差異もあまり気にしなくていいですし、
ホントにjQueryさまさまです。
　
　
こんなことやる前に、ディレクトリの登録審査やら、
猫ねこサーチエンジンのXHTML化やら、
やること山ほどあるのですが、さっぱり進まず。
ご迷惑お掛けしてしまいます。
　
登録申請して下さった方々には大変申し訳ございませんが、
今しばらくのお時間を頂きたく、宜しくお願い致します。
　
　
１クリックお手を拝借。

タグ: jQuery, 画像掲示板

Comments: 0
TrackBacks: 0

電力使用状況API

Posted by: 管理人
2011年4月 2日 23:44
開発関連

東日本大震災により被害にあわれた皆様に心よりお見舞い申しあげるとともに、
犠牲になられた方々とご遺族の皆様に対し、深くお悔やみを申しあげます。
　
何もできない非力な自分が悲しいですが、少しでも力になれればと思い、
日々頑張っていこうと思っています。
　
さて、震災以後、計画停電や放射性物質の情報確認でネットをよく見てますが、
停電実施頃より、Yahoo! Japanトップページに東京電力の電力使用状況グラフが
表示されるようになっています。

さすがはYahoo! Japanと思って自分も確認していたのですが、
それだけではなく、このデータを電力使用状況API として公開もしてありました！
　
という訳で、早速これを使って電力使用状況グラフを作ってみました。
作り方はいつもと同じで、リクエストURLにクエリを投げ、



http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?appid=＜あなたのアプリケーションID＞

返ってくるXMLをパースして、データを抜き取ればよい感じです。
方法はこちら等と同じ方法です。
　
レスポンスデータから、電力使用量、最大供給量などが取得できると思います。
せっかく取得したデータですので、これをYahoo! Japanのように
グラフ化して表示する為、pChartを使ってみました。
このpChartは、phpにGDライブラリが組み込んであれば、かなり簡単に
折れ線グラフや、棒グラフ、円グラフの描画ができます。
　
pChartのページにサンプルコードがたくさん用意されているので、
使うグラフのサンプルコードを見て、データセットの部分の
数値配列、項目配列に、APIで取得したデータを入れれば完成です。



 // Dataset definition

$DataSet = new pData;   

$DataSet->AddPoint(array(10,2,3,5,3),"Serie1");   

$DataSet->AddPoint(array("Jan","Feb","Mar","Apr","May"),"Serie2");   

$DataSet->AddAllSeries();   

$DataSet->SetAbsciseLabelSerie("Serie2");

取得したグラフ画像はpng画像にして出力できるので、
定期的にcronで画像作成し、保存するようにしてあります。