SQLの窓

2016年05月22日


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

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

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



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

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

ウチの電気使用量を初期値表示しています。おそらくこの値が正しければ、年間 33,158 円の節約になるはずです。また、この値の裏づけとして実際の今の東電管轄でのシュミレーションを行った方の記事がありますので、そちらを参照すると基本料金の考え方も良く理解できる上に、この値の信頼性も後押しされていると思います。

また、計算の元となった値は 電力比較サイトエネチェンジ 内の プレミアムプラン(1年契約)の詳細 より使用しています


最初の400kWhまで 固定料金 円
400kWhを超える分 1kWh 
 1  
 2  
 3  
 4  
 5  
 6  
 7  
 8  
 9  
10  
11  
12  
年間電気料金  - 
 =  - 基本料金 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 での構築

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


 

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

2016年02月05日


Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

2016/2/5 : ボタンの順番を変えました。
( Twitter / はてな / Facebook / Google+ )
また、自由に変えやすいようにコードに改行を挿入しました

2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました

Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。

ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。

正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。
Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
対象URL
Twitterテキスト
facebook アプリID 966242223397117 ( デフォルトの appid が使えるようです )
※ Shareボタンにする

『単純な 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 のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )


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

2016年02月04日


livedoor Blog で、Twitter カードを使用する

Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます )

関連する記事

Seesaa ブログで Twitter カードを使用する方法

livedoor Blog のブログ設定(PC/カスタマイズ)

Twitter カードの目的を考えるて、まず個別記事ページを設定します。livedoor Blog ではすでに OGP の設定が仕様として含まれている( <$OGP$> )ので、まずその下に以下のような Twitter 用のメタ要素を書き込みます。
※ 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ユーザID" />
<meta name="twitter:image" content="デフォルトの画像の URL" />
※ summary_large_image は大きな画像の表示です

デフォルトの画像は、記事別の画像を指定しない場合に表示される画像を URL で用意します。普通に Google の Picasa の画像が使えます。また、livedoor Blog では、この twitter:image の記述が無い場合は、『ブログアイコン』で指定した小さな画像が使われてしまいます。これは、Facebook 側(※1)で指定されているもので、Twitter カードはその指定の画像を利用することができます。
※1: <meta property="og:image" content="プロフィールアイコン(管理画面で設定)" />

なので、世の中のサンプルでは、先に OGP の記述があって、その後に Twitter カードの指定になっています。

記事毎に画像を変えるには

Twitter カードの メタ要素の指定は、ページのどこに書かれていても有効なようです。しかも、後から見つかった内容が最後に有効になっています。ですから、以下のような記述を記事の先頭に書くだけで有効になります。
<meta name="twitter:image" content="記事用画像のURL" />
それ以外にも、livedoor Blog には見出し画像という投稿項目があるのですが、これは og:image の内容を変えるものなので、この一連の設定ではヘッダ部分にすでに Twitter カード用のデフォルト画像を指定してしまっているので、変更しても Twitter カード側が優先されて、ライブドアの見出し画像は無効になります。

ライブドアの見出し画像を使いたい場合は、twitter:image を含むメタ要素を削除する必要があります。そしてその場合は、画像を事前に livedoor Blog にアップロードしておいて選択する必要があります。

トップページ用に注意する事

『ブログ基本設定』のブログの説明は、空では動作しません。また、デフォルトの画像は、記事毎のページのものと同じである必要はありません


関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』

関連するライブドアのドキュメント

Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)




posted by lightbox at 2016-02-04 23:53 | 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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり