大きい画像を表示する為の選択肢として、 1) window.open 2) Lightbox2 3) Shadowbox のいずれかを選択して貼り付けコードを作成します。試してみたい場合、lightbox や shadowbox のライブラリを意識する必要はありません。ご自分でホスティングする方法は、以下のリンク先を参考にして下さい。 Lightbox2 ライブラリの今時の使い方
このユニットは以下のコードで設置できます
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/createImageUnit.js" charset="utf-8"></script>
関連する記事 JavaScript : 入力文字列を htmlentity に変換する ( Lightbox2 では、タイトル部分に htmlentity で HTML を設定できます )
たくさんのフリーフォント(約260種類)を使用していろいろなボタンを簡単に作成できます。 ▼ 以下は jQuery で実際に動作するコンテンツです
基本的なパターンのバリエーションに対して、色違いのサンプルを作成しました。 これ以外にも簡単に以下のバリエーションを作成できます 1) フォントの種類を変更 2) 文字の輪郭を別の色で作成 3) 文字を上下左右に寄せる 4) ボタンに太い枠を作成する 5) フォントサイズを変更する 6) ボタンのサイズを変更する( ドラッグでも変更できます ) 7) 角丸の大きさを変更する 8) ボタンの光沢の強さを調整する 9) ボタンの文字を表示しないで作成する光沢 : 0.6, グラデ : 50
はぴ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 での構築
ウチの電気使用量を初期値表示しています。おそらくこの値が正しければ、年間 33,158 円の節約になるはずです。また、この値の裏づけとして実際の今の東電管轄でのシュミレーションを行った方の記事がありますので、そちらを参照すると基本料金の考え方も良く理解できる上に、この値の信頼性も後押しされていると思います。 また、計算の元となった値は 電力比較サイトエネチェンジ 内の プレミアムプラン（1年契約）の詳細 より使用しています
最初の400kWhまで 固定料金 円 400kWhを超える分 1kWh 円 １ ２ ３ ４ ５ ６ ７ ８ ９ １０ １１ １２ 年間電気料金 - = - 基本料金 x 12ヶ月 ▼ 基本料金別年間節約額 1) 2kW(30A相当) 777.6円 2) 4kW(60A相当) 1555.2円 3) 6kW(9kVA相当) 2332.8円 4) 8kW(12kVA相当) 3110.4円
でまあ、時間があればブックマークレットで はぴeみる電 [関西電力] の値から直接計算させてやろうかなと思うのであります。 関連する記事 IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築 というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました
2016/2/5 : ボタンの順番を変えました。 ( Twitter / はてな / Facebook / Google+ ) また、自由に変えやすいようにコードに改行を挿入しました 2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。 ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。 正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
『単純な Google+1ボタンにする』場合は、対象URL が表示されているページとなります。『単純な Google+1ボタンにする』のチェックを外すと、対象URL が必要になります。 ブログのトップベージのように、記事が複数ある場合は、上のテキストエリアのものを貼り付けて、下側のテキストエリアはページの最後に一度だけ実行されるようにします。 ▼ Seesaa で、Facebook 無しの記事下に貼り付けるコード
<div>
<table>
<tr><td>
<div class="g-plusone" data-size="medium" data-href="<% article.page_url %>">
</td><td>
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" /></a>
</td><td>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-lang="ja" data-text="<% article.subject %>"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</td></tr>
</table>
</div>
▼ Seesaa の記事 HTML の最後に貼り付けるコード( Facebook 無し )
<!-- google -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- hatena -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
Twitter 用としては、Seesaa では、data-text="<% article.subject %>" にする必要があります。 ボタン情報 Google +1ボタン はてなブックマークボタン Twitter buttons Facebook Like Button Facebook Share Button 関連する記事 livedoor Blog で、Facebook の『シェアボタンを表示する』 Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
