SQLの窓

2016年09月30日


イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

大きい画像を表示する為の選択肢として、

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 を設定できます )


タグ:Webサービス
posted by lightbox at 2016-09-30 03:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年08月06日


【Google ドライブウェブホスティング機能の廃止で、2016 年 8 月 31 日 で利用ができなくなります】Google ドライブの公開ページと管理ページを行ったり来たりする為のブックマークレット

Google ドライブにおけるウェブ ホスティング機能の廃止について

この機能は、Google の方針により、2016 年 8 月 31 日 で利用ができなくなります



▼ 以下古い記録になります
-----------------------------------------------------------------------------


Google ドライブを共有設定で、『ウェブ上で一般公開』すると、WEB ページを公開できるようになりますが、簡単に双方向の移動方法が用意されていないので、ブックマークレットを作成しました。

それぞれの URL で判断して切り替えるようにしています。

Google WEB切替



関連する記事

Google ドライブにWEBページを作成する方法



posted by lightbox at 2016-08-06 12:48 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月22日


フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント

たくさんのフリーフォント(約260種類)を使用していろいろなボタンを簡単に作成できます。

▼ 以下は jQuery で実際に動作するコンテンツです



posted by lightbox at 2016-05-22 20:19 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年05月05日


utf8 文字ツール の 文字参照リンクの作成方法



http://lightbox.on.coocan.jp/html/utf8tool.php?hex=26C4&col=FFC0CB&target=26C4,26C5,26D4,26F3,26F5,26FD,2709

この URL で utf8 文字ツール を表示すると、先頭が 0x26C4 の文字になり、26C4,26C5,26D4,26F3,26F5,26FD,2709 で指定された文字の背景を col で指定した背景色にする事ができます。(hex=26C4 は、num=9924 でも動作します)

また、この URL で表示されたページにあるボタンで表示位置を変更しても、範囲内に選択した文字があれば、背景色は変更されたまま表示されます。元の位置に戻したい場合は、F5 で再表示して下さい。



1) 右上の ● をクリックするとその文字が先頭になります 

2) 文字の下の &#nnnnn; は、HTML 上で有効な文字そのものです 

3) その下は、nnnnn を 16進数に変換したものです 

4) 一番下は、文字そのもののコードを16進数であらわしています
3種類のコード部分はクリックすると選択されるので、CTRL+C でコピーして利用しやすくなっています。 本体の文字が連続して欲しい場合は、先頭にしたい文字の右上の ● をクリックしてから、文字一覧取得ボタンをクリックしてウインドウを表示させると、その中のテキストエリアに320文字を連続して表示しています。
posted by lightbox at 2016-05-05 20:24 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年04月22日


フリーフォントでボタン素材作成

基本的なパターンのバリエーションに対して、色違いのサンプルを作成しました。

これ以外にも簡単に以下のバリエーションを作成できます
1) フォントの種類を変更
2) 文字の輪郭を別の色で作成
3) 文字を上下左右に寄せる
4) ボタンに太い枠を作成する
5) フォントサイズを変更する
6) ボタンのサイズを変更する( ドラッグでも変更できます )
7) 角丸の大きさを変更する
8) ボタンの光沢の強さを調整する
9) ボタンの文字を表示しないで作成する

光沢 : 0.6, グラデ : 50

➡ 色別

光沢 : 0.6, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 50

➡ 色別

光沢 : なし, グラデ : 0

➡ 色別

光沢 : なし, グラデ : 0, ドロップシャドウ( 色:40190B )

➡ 色別

光沢 : 0.6, グラデ : 50, 文字枠色 : D44617

➡ 色別

光沢 : 0.6, グラデ : 0, 文字枠色 : D44617

➡ 色別



posted by lightbox at 2016-04-22 14:41 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2016年03月13日


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

はぴeみる電 [関西電力] の月別電力量のページで実行させて、『計算』ボタンをクリックすると、直近の12ヶ月を使って計算します。( まだ、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+=" 1 <input type=\"text\" id=\"d1\" style=\"width:50px;\"> <input type=\"text\" id=\"n1\" style=\"width:50px;\"> \n";
str+=" 2 <input type=\"text\" id=\"d2\" style=\"width:50px;\"> <input type=\"text\" id=\"n2\" style=\"width:50px;\"> \n";
str+=" 3 <input type=\"text\" id=\"d3\" style=\"width:50px;\"> <input type=\"text\" id=\"n3\" style=\"width:50px;\"> \n";
str+=" 4 <input type=\"text\" id=\"d4\" style=\"width:50px;\"> <input type=\"text\" id=\"n4\" style=\"width:50px;\"> \n";
str+=" 5 <input type=\"text\" id=\"d5\" style=\"width:50px;\"> <input type=\"text\" id=\"n5\" style=\"width:50px;\"> \n";
str+=" 6 <input type=\"text\" id=\"d6\" style=\"width:50px;\"> <input type=\"text\" id=\"n6\" style=\"width:50px;\"> \n";
str+=" 7 <input type=\"text\" id=\"d7\" style=\"width:50px;\"> <input type=\"text\" id=\"n7\" style=\"width:50px;\"> \n";
str+=" 8 <input type=\"text\" id=\"d8\" style=\"width:50px;\"> <input type=\"text\" id=\"n8\" style=\"width:50px;\"> \n";
str+=" 9 <input type=\"text\" id=\"d9\" style=\"width:50px;\"> <input type=\"text\" id=\"n9\" style=\"width:50px;\"> \n";
str+="10 <input type=\"text\" id=\"d10\" style=\"width:50px;\"> <input type=\"text\" id=\"n10\" style=\"width:50px;\"> \n";
str+="11 <input type=\"text\" id=\"d11\" style=\"width:50px;\"> <input type=\"text\" id=\"n11\" style=\"width:50px;\"> \n";
str+="12 <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 での構築




posted by lightbox at 2016-03-13 22:33 | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり