ＳＱＬの窓
<< 電力自由化 : 関西… | TOP | kintone API のトー… >>

2016年03月13日


というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました

 
はぴeみる電 [関西電力] の月別電力量のページで実行させて、『計算』ボタンをクリックすると、直近の１２ヶ月を使って計算します。( まだ、CSS とか使って無いので美しくは無いです )



▼ ブックマークレット( ブックマークバーへドラッグ・ドロップ )
関西向け東電プレミアムプラン シュミレーション 

動作確認は、Google Chrome と Firefox と IE11 です。

▼ ブックマークレットのコード

<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v}}document.body.appendChild(wnd);window._bI.wnd=wnd;var%20url;url='https://secure624.sakura.ne.jp/fire30.winofsql.jp/kanden.js';wnd.contentWindow.document.write('<'+'script%20src=\''+url+'\'%20charset=\'utf-8\'></'+'script>');wnd.contentWindow.document.close();})(500,600,1,'0px','0px',1000,'');}">関西向け東電プレミアムプラン シュミレーション</a>

このコードに関しては以下を参照して下さい。

JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1)

このコードでは外部スクリプトを使用していませんが、style 要素の代わりに script 要素を使用しているだけです。また、はぴeみる電 は https なので、外部スクリプトも https でホスティングしています。

HTML の文字列化ツール

▼ 実行される外部スクリプト

parent._bI.wnd.style.backgroundColor = '#ffffff';

str="";
str+="<!DOCTYPE html> \n";
str+="<html> \n";
str+="<head> \n";
str+="<meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\"> \n";
str+="<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></"+"script> \n";
str+="</head> \n";
str+="<body> \n";
str+="<pre> \n";
str+="最初の400kWhまで 固定料金 <input type=\"text\" id=\"b01\" style=\"width:50px;\" value=\"8400\">円 \n";
str+="400kWhを超える分 1kWh <input type=\"text\" id=\"b02\" style=\"width:50px;\" value=\"24.6\">円 <input type=\"button\" value=\"計算\" onclick=\"dkfunc()\"> \n";
str+="　１ <input type=\"text\" id=\"d1\" style=\"width:50px;\"> <input type=\"text\" id=\"n1\" style=\"width:50px;\"> \n";
str+="　２ <input type=\"text\" id=\"d2\" style=\"width:50px;\"> <input type=\"text\" id=\"n2\" style=\"width:50px;\"> \n";
str+="　３ <input type=\"text\" id=\"d3\" style=\"width:50px;\"> <input type=\"text\" id=\"n3\" style=\"width:50px;\"> \n";
str+="　４ <input type=\"text\" id=\"d4\" style=\"width:50px;\"> <input type=\"text\" id=\"n4\" style=\"width:50px;\"> \n";
str+="　５ <input type=\"text\" id=\"d5\" style=\"width:50px;\"> <input type=\"text\" id=\"n5\" style=\"width:50px;\"> \n";
str+="　６ <input type=\"text\" id=\"d6\" style=\"width:50px;\"> <input type=\"text\" id=\"n6\" style=\"width:50px;\"> \n";
str+="　７ <input type=\"text\" id=\"d7\" style=\"width:50px;\"> <input type=\"text\" id=\"n7\" style=\"width:50px;\"> \n";
str+="　８ <input type=\"text\" id=\"d8\" style=\"width:50px;\"> <input type=\"text\" id=\"n8\" style=\"width:50px;\"> \n";
str+="　９ <input type=\"text\" id=\"d9\" style=\"width:50px;\"> <input type=\"text\" id=\"n9\" style=\"width:50px;\"> \n";
str+="１０ <input type=\"text\" id=\"d10\" style=\"width:50px;\"> <input type=\"text\" id=\"n10\" style=\"width:50px;\"> \n";
str+="１１ <input type=\"text\" id=\"d11\" style=\"width:50px;\"> <input type=\"text\" id=\"n11\" style=\"width:50px;\"> \n";
str+="１２ <input type=\"text\" id=\"d12\" style=\"width:50px;\"> <input type=\"text\" id=\"n12\" style=\"width:50px;\"> \n";
str+="年間電気料金 <input type=\"text\" id=\"nd\" style=\"width:50px;\" value=\"197618\"> - <input type=\"text\" id=\"sum_result\" style=\"width:50px;\" value=\"\"> \n";
str+=" = <input type=\"text\" id=\"d_result\" style=\"width:50px;\" value=\"\"> - 基本料金 x 12ヶ月 \n";
str+="▼ 基本料金別年間節約額 \n";
str+="1) <input type=\"text\" id=\"d_1\" style=\"width:50px;\"> 2kW(30A相当) 777.6円 \n";
str+="2) <input type=\"text\" id=\"d_2\" style=\"width:50px;\"> 4kW(60A相当) 1555.2円 \n";
str+="3) <input type=\"text\" id=\"d_3\" style=\"width:50px;\"> 6kW(9kVA相当) 2332.8円   \n";
str+="4) <input type=\"text\" id=\"d_4\" style=\"width:50px;\"> 8kW(12kVA相当) 3110.4円 \n";
str+="</pre></body></html> ";
document.write(str);


function dkfunc() {
	var nwk;
	var nsum = 0;
	parent.$("#container_0_subcontainer_0_maincontent_3_ListTable tr").each(function(idx){
		if ( 0 < idx && idx <= 12 ) {
			nwk = parseInt( parent.$(this).find("td").eq(3).text() );
			$("#d"+ idx ).val(nwk);
			nwk = parseInt( (parent.$(this).find("td").eq(5).text()).replace(",","") );
			nsum += nwk;
		}
	});

	$("#nd").val(nsum);

	var b01 = parseInt( $("#b01").val() );
	var b02 = parseInt( $("#b02").val() );
	var w1,w2,w3,w4;
	w3 = 0;
	for ( i = 1; i <= 12; i++ ) {
		w1 = parseInt($("#d"+i).val());
		if ( w1 <= 400 ) {
			$("#n"+i).val( b01 );
			w3 += b01;
		}
		else {
			w2 = (w1 - 400) * b02;
			$("#n"+i).val( b01 + w2 );
			w3 += b01 + w2;
		}
	}
	$("#sum_result").val( w3 );
	$("#d_result").val( parseInt($("#nd").val()) - w3 );
	w4 = parseInt($("#nd").val()) - w3;
	$("#d_1").val( w4 - 777 * 12 );
	$("#d_2").val( w4 - 1555 * 12 );
	$("#d_3").val( w4 - 2332 * 12 );
	$("#d_4").val( w4 - 3110 * 12 );

}


※ 後から実行される関数に関しては、最初から function で定義できます。

はぴeみる電のページでは jQuery が定義されているので、本体ページの参照は parent を使用してそちらを使用しています。IFRAME 内にも jQuery はあるので、IFRAME 内はそれを使用しています。

関連する記事

電力自由化 : 関西向け東電プレミアムプラン シュミレーション


東電プレミアムプランは、沢山の電力を使う家庭で安くなるようにもともと設定されています。他のプランはよく解らないので  電力比較サイトエネチェンジ を利用するといいと思います。また、東電プレミアムプランの基本料金設定はなかなかわかり難いので、こちらの記事を参照するといいと思います

まさかの「最安プラン」？！　（東京電力「プレミアムプラン」）


▼ ブックマークレット用技術関連記事
IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築
【WEBサービスの最新記事】
posted by lightbox at 2016-03-13 22:33 | WEBサービス | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり