SQLの窓

2014年11月11日


Google Chrome の type="date" で表示される datepicker の最も使いどころは、フレームをまたいで表示されるところです



上の画像は、IFRAME ですが、IFRAME 内部にあるコントロールを開いて、親の境界を超えて表示されます。これはコンボボックスでも当然の事ですが、昔は Windows のコントロールを ActiveX として IE に実装して、イントラネットでのみ使う理由もここにありました。

今では使われなくなりましたが、FRAME の境界も超えてくれます。
▼ 以下は IFRAMEで表示しています。(Google Chrome でのみテスト可能)
データフォーマットは yyyy-mm-dd

JavaScript や HTML 側で扱う『値』としてのフォーマットでは -(ハイフン) が使われます。また、月も 日も二桁で表現する必要があります( 9 では なく 09 )

日付のチェックはされますが、結果が空になります

数字のみしか入力できませんが、入力時に 2014/11/31 というような、正しく無い日付を選択できます。但し、その場合値を取得すると空文字列となります。

本当の未入力との区別

未入力の場合も当然 value は "" として返って来るので、JavaScrpt で、validity.badInput をチェックします。間違った日付の場合はこの値が true となり、通常の未入力では false となります。
<script>
function setStatus() {
	document.getElementById("getvalue").value = document.getElementById("dt").value;
	document.getElementById("geterror").value = document.getElementById("dt").validity.badInput;
}
</script>
<form 
	action="http://winofsql.jp/php_get.php" 
	target="iframe_result">
日付エラーのテスト
<input 
	id="dt" 
	type="date" 
	name="mydate" 
	size="15" 
	value="2014-11-30" 
	onchange='setStatus()'>
<br>

値 
<input 
	type="text" 
	id="getvalue">
<br>
エラー状態(validity.badInput) 
<input 
	type="text" 
	id="geterror">
<br>
<input 
	type="button" 
	value="ステータス更新" 
	onclick='setStatus()'>
<br>
<input 
	type="submit" 
	value="送信">
</form>

<br>
<iframe 
	style='width:400px;height:100px;' 
	name="iframe_result"></iframe>



posted by lightbox at 2014-11-11 22:28 | HTML5 | このブログの読者になる | 更新情報をチェックする

2013年03月13日


IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス

HTML5 で、scrolling 属性が削除されるという記述が良くありますが、実際は動作しています。削除されたのは『仕様』です。実際 iframe は広告・ツール等であちらこちらで利用されている現状で削除する事は簡単ではありません。

そんな中、Google Chrome だけが新しい仕様( seamless と srcdoc )を取り入れているので、ひょっとして最初に scrolling 属性を削除するかもしれないと推測はできますが、現実的では無いと思います。いかに Google と言えども人の作業が介在するので、このあたりは避けたいはずです。

また、Firefox だけが、scrolling がなくなる事を想定して、overflow:hidden が 対応されていますが、現状では css による変更は border:0px のみを考えるという状況に思われます。

iframe の背景透過

background-color の未指定時の透過処理は全てうまくいっていますが、IE8 以前では動作しません。

iframe 内で背景色を指定しない場合のみ、親ページでの背景色指定が有効になります。iframe 内で背景色を設定している場合親ページからの指定は反映されません。ただ、Windows Safari では動作が遅いせいか、親側の背景色が表示された上に後から( iframe がロードされてから )iframe 内の色が反映されるという状況でした。

Google Chrome の seamless の css 的効果

seamless は、Google Chrome だけでしたが、seamless 指定すると display:block となります。以下の例で縦にならんでいるのは、意図的に行っていますが、iframe はなにもしなければ横へ並びます。

スクロールバーが消える事はありませんが、border:0px と同じ効果がありました

現在最新のブラウザでのテスト結果 (2013/03/13)
Chrome
25.0.1364.160
Firefox
19.0.2
IE
10
Opera
12.14
Safari
5.1.7
srcdoc × × × ×
seamless
スクロールバーは
表示される

display:block
となる
× × × ×
overflow:
hidden
× × × ×
scrolling
HTML5 でも
使用できる
border:
0px;
background-color:
transparent
以下は実際の IFRAME


iframe内の記述
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #e0e0e0;
	border-radius: 5px;
	padding: 4px;
}
body {
	background: url(http://leiya.winofsql.jp/d2.png);
}
.tp {
	background-color: #123456;
}
iframe {
	width: 400px;
	height: 60px;
	margin-bottom: 8px;
}
</style>

<body>
<pre>
<b>指定なし</b>
<iframe src="test1.htm"></iframe>
<b>scrolling="no" border:0px</b>
<iframe scrolling="no" style='border:0px;' src="test2.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test1.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test2.htm"></iframe>
<b>overflow:hidden</b>
<iframe style='overflow:hidden;' src="test2.htm"></iframe>
<b>seamless srcdoc</b>
<iframe seamless srcdoc="&lt;b style='color:#fff;'&gt;seamless srcdoc&lt;/b&gt;"></iframe>
</pre>
</body>
</html>

test1.htm
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 4px;
}
</style>

<body>
<b>背景色なし</b>
</body>
</html>

test2.htm
<!DOCTYPE html>
<html lang="ja">

<style type="text/css">
b {
	color: #000000;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 4px;
}
body {
	background-color: #c0c0c0;
}
</style>

<body>
<b>背景色あり/本来スクロールあり</b>
<pre>





























</pre>
</body>
</html>

Google Chrome のスクリーンショット





posted by lightbox at 2013-03-13 08:34 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月28日


Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )

CSS で実装するほうがはるかに簡単ですが、JavaScript でベタな描画する方法です。まず最初に線幅と角丸の半径を使って、上下左右の直線を引いた後、円弧を4隅に描画しています。( 角丸の無い場合でも、円弧の描画は必要です )
★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装

この文章の下側で、角丸BOX が描かれています
<div style='position:relative;height:200px;'>
	<div id="target" style='position:absolute;left:0;top:0'></div>
	<div style='position:absolute;left:0;top:0;padding:15px'>
		<b style='color:#ff0000'>★ 角丸の DIV を CSS3 で実装せずに、Canvas で実装</b><br><br>
		<b style='color:#0000ff'>この文章の下側で、角丸BOX が描かれています</b>
	</div>
</div>
<script type="text/javascript">

// CANVAS を作成
var canvas = document.createElement("canvas");
// 幅と高さを設定
canvas.setAttribute("width", "500");
canvas.setAttribute("height", "200");
// 初期化
if ( ! canvas || ! canvas.getContext ) {
	G_vmlCanvasManager.initElement(canvas);
}
// CANVAS を ターゲットの Child として追加
document.getElementById("target").appendChild(canvas)

// 2D 処理の準備
var ctx = canvas.getContext('2d');

box( ctx, 0, 0, 500, 200, 5, 15 )

function box( c, x, y, w, h, lw, sz ) {

	// c : コンテキスト
	// x : 基準位置
	// y : 基準位置
	// w : 幅
	// h : 高さ
	// lw : 線の太さ
	// sz : 角丸半径

	// ライン用ストローク開始
	c.beginPath();
	// 開始位置へ移動
	c.moveTo(x+(lw/2)+sz, y+(lw/2));	// 左上直線開始部分
	c.lineTo(x-(lw/2)+w-sz, y+(lw/2));	// 上部分の直線( 右上に向けて )
	c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);	// 右上直線開始部分
	c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);	// 右部分の直線( 右下に向けて )
	c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);	// 右下直線開始部分
	c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);	// 下部分の直線( 左下に向けて )

	// 左下直線開始部分
	if ( sz == 0 ) {
		c.moveTo(x+(lw/2), y+h-sz);
	}
	else {
		c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
	}
	// 左部分の直線( 左上に向けて )
	c.lineTo(x+(lw/2), y+(lw/2)+sz);

	// 四隅の角丸
	c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
	c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
	c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
	c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

	// 線幅で全て描画
	c.lineWidth = lw;
	c.stroke();
}

</script>



posted by lightbox at 2011-05-28 09:00 | HTML5 | このブログの読者になる | 更新情報をチェックする

Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く

ExplorerCanvas を使用しています。動的にエレメントを作成する為に G_vmlCanvasManager.initElement を使用しています。

※ ExplorerCanvas は、古い IE 用のライブラリなので、今後使う事はあまり発生しないと思います。

<!--[if lte IE 8]><script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script><![endif]-->
<div id="target"><input type="button" value="IE8も BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "200");
	canvas.setAttribute("height", "300");
	if ( ! canvas || ! canvas.getContext ) {
		G_vmlCanvasManager.initElement(canvas);
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 10 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>

関連する記事

CSS3 の角丸を IE8以前でも使うには( ブログで使うには )


posted by lightbox at 2011-05-28 08:09 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月27日


Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く

単純に、Canvas : 指定サイズ BOX の内側を指定の太さで線を引く 
を発展させたものです。線の太さを考慮して座標を移動しつつ、直線と
円弧を交互に引いています。

※ 最後の引数は、角丸の半径ですが、0 にすると長方形が描かれます。
※ 本来は、arc を実行しないようにするべきですが、拡張の可能性を
※ 考えてそのままにしています


<div id="target"><input type="button" value="BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "200");
		canvas.setAttribute("height", "300");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 40 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>


posted by lightbox at 2011-05-27 22:30 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月22日


Canvas : 指定サイズ BOX の内側を指定の太さで線を引く

普通に BOX を Line で描こうとすると、その位置を中心として線の太さを
使うので、始点が欠けてしまいます。また、エリアいっぱいいっぱいに引こ
うとすると、線が細くなってしまうので、補正しています。

※ 指定 BOX エリアの内側を指定した太さで線を描画しています

<div id="target"><input type="button" value="指定サイズ BOX の内側を指定の太さで線を引く" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "300");
		canvas.setAttribute("height", "300");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 10 )

	function box(c,x,y,w,h,lw) {

		c.beginPath();
		c.moveTo(x+(lw/2), y+(lw/2));
		c.lineTo(x-(lw/2)+w, y+(lw/2));
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h);
		c.lineTo(x+(lw/2), y-(lw/2)+h);
		c.lineTo(x+(lw/2), y);

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>
関連する記事 Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く
posted by lightbox at 2011-05-22 01:12 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年04月06日


HTML5 : 最も簡単な「required 属性」による未入力チェック

もちろん、サーバー側でのチェックを行うのは当然ですが、無駄な通信
が減り、JavaScript で記述する労力も軽減されます

ここをクリックすると、実際にテストできます

※ この他にもチェック機構があります。

▼ Firefox4

Firefox4 では、title 属性では無く x-moz-errormessage="必須入力です" 
とする必要がありました

▼ Google Chrome


<form>
<input type="text" required title="必須入力です">
<input type="submit" value="送信">
</form>

※ IE9 は明日チェックしますが、ドキュメント見る限りにおいて存在しません
※ 2011/04/07 : IE9、Opera11、Safari5 では動作しません。



posted by lightbox at 2011-04-06 16:23 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年04月03日


HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか

キャンバスの大きさは、500 x 120 で、画像サイズは 334 x 80 です。Firefox 4.0 で保存すると以下のようになります。



ctx.rotate で回転する事を前提に以降の命令が実行されます。基本的に背景は透過しています。元の画像が png なのでそうなったのだとは思いますが、他ではまだ確認していません。

他を試してみると・・・

Google Chrome => x
Opera => x
Safari => x

思いの他、画像として保存できないようですが、IE9 はまだ試してませんが、Firefox 的にはかなりリードしてるような気がします。

( canvas に特別な指定をしていません )


IE9 製品候補版で試すと・・・

期待していたのですが、ダメでした。保存できませんので、Firefox のみブラウザで簡単な画像加工ができるという事になります。


toDataURL() を使うと可能ですが・・・

srcData = canvas.toDataURL()
document.getElementById("img_test").src = srcData;
---------------------------------------
<img src="" id="img_test" />

但し、この場合は元々の画像が同一ドメインでないと既存画像オブジェクトにセットできないのです。セキュリティエラーが出るので、そもそも正しいのですが、そうなると逆に Firefox はひょっとしてまずいのでは・・と思う事なるのですが、ブラウザの機能だから OK という事なのでしょうね。( 個人利用という考え方で、操作する人に依存する処理だから )

・・・でも、突っ込まれるのは確実そうな理屈ではあります。


<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "500");
		canvas.setAttribute("height", "120");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.rotate( 8 * Math.PI / 180 );
		ctx.drawImage(img, 0, 0);  
		ctx.font = "bold 22px 'MS Pゴシック'";
		ctx.strokeText("文字を重ねる", 15, 75);
		ctx.fillText("文字を重ねる", 15, 95);
	}
}
</script>


関連する記事

HTML5 : canvas 要素に画像をロードする



posted by lightbox at 2011-04-03 21:32 | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年04月02日


HTML5 : canvas 要素に画像をロードする

IE9 はまだ製品候補版ですし、そもそも IE8 では canvas は実装されていませんが、
今後は IE9 をターゲットとしていろいろなものが作られるでしょうから、今のうち
に IE8 でもある程度は慣れておいたほうがいいと思います。

もちろん、HTML5 を想定した場合は、Firefox 等、IE 以外を使うのがテストの上で
は間違いありませんが、IE8 以下のシェアを無視できるほど提供側の懐は豊かでは
無いので、ガンガンに HTML5 を使わない場合は考慮しなければなりません。

excanvas.js は、そんな IE8 以前の為のライブラリで、完全に IE を無視できない
人の為にあります。プログラムで「ふり」をしているので、動的に canvas を作る
場合はちょっと解りません。そこまで調べる必要があるほど、IE8 の価値はもう無
いのでは無いかとも思うのも事実ですし。

<!--[if lte IE 8]>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script>
<canvas id="c1" width="334" height="80"></canvas>
<![endif]-->
<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		canvas = document.getElementById('c1'); 
		if ( ! canvas || ! canvas.getContext ) {
			return false; 
		}
	}
	else {
		canvas.setAttribute("width", "334");
		canvas.setAttribute("height", "80");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.drawImage(img, 0, 0);  
	}
}
</script>
関連する記事

HTML5 : 画像にテキストを重ねて少し回転して
「名前を付けて画像を保存」するとどうなるか


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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり