HTML+CSS

DREAMWEAVER テンプレートのコメントタグで表示崩れ IE6

2008年6月 2日 22:47

DREAMWEAVER テンプレート編集可能領域の多数使用とIE6の組み合わせ

というコメントアウトタグを利用したDREAMWEAVERの独自機能、テンプレート。
たまに使いますし、便利な場合があります、ただしなぜか大規模案件には1度も使われる所は見た事なかったですね。
実は正当なマークアップ（validしてる）にも関わらず、IE6に限り表示崩れを起こす事がありました。

DREAMWEAVER テンプレートのコメントタグで表示崩れ IE6の続きを読む

clearfix、下に出る余白をfont-sizeが影響！？：Mac Safari 2

2008年6月 2日 23:06

Mac Safari 2でclearfixのレンダリング結果を画像付きで検証

俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。
下図は以下のソースコードのレンダリング結果です。

clearfix、下に出る余白をfont-sizeが影響！？：Mac Safari 2 の続きを読む

IE6 floatでmarginが倍、Sleipnir（スレイプニール）でも

2008年7月 3日 21:31

『Double margin float bug』がSleipnir(スレイプニール)でも確認

よく考えたら当然ですね、IE6のレンダリングエンジンを使っているから『Double margin float bug』は、WEBブラウザ、Sleipnir（スレイプニール）、でも起るわけですね。
バグが確認されたSleipnirのverは2.5.12.0でした。そのマシンにはIE6がインストールされています。

ちなみに『Double margin float bug』とは、例えばブロックレベル要素にfloatを指定して浮動させた方向にmarginプロパティを指定すると、IE5.x〜IE6にかけてmarginの値を倍近く取ってしまう、有名なバグです。

WindowsXP+IE7なので、気づかなかったんですが、IE6がインストールされているマシンのSleipnirで見ると同じようにレイアウトが崩れている！
IE6の時と同じ方法で、display:inline;にするとなおったので、ちょっと不思議な感覚でした。

HTML5のcanvas要素とJavaScriptを試してみました。

2009年8月15日 02:55

まだIEだと見れないと思います。
こちら、Mac版FirefoxとSafariのみでしか確認してません・・・（ちゃんとやれよっ・・・て？）
Flashじゃないですよ。

さて、次世代のHTML5、新要素として結構アツいcanvas要素。
グラフを書いたり、ゲームを動かしたり・・・いままでFlashやJavaアプレットとかいう技術で表現していたものが遂にブラウザベースで実現出来るようになる、らしい。

で、canvas要素に使うJavaScriptで「とりあえず丸が描けたっ！やった〜」なんてよろこんでいるしょうもない大人ですが、世の中にはすごい人たちがいっぱいいますね？
こんな人たちにはまだまだ追いつかないにしても、とっかかりで簡単な所からやってみました！！

参考サイトはこちらです。

HTML5.JP - 次世代HTML標準 HTML5情報サイト

　http://www.html5.jp/

ActionScriptでいうGraphics.drawCircle()的なメソッドを使って円を描き、久しぶりに使ったsetInterval()で繰り返し処理をして座標を入れ直す、というやり方は基本中の基本ですね。

まずは新要素、canvasを使ってbody内にこんな風に書いてみます。

id名をつけたのは、JavaScriptでそのままid名をgetして来るためです。そうなるとこれ。ところが、canvas要素で描画するには、canvas要素の「コンテキスト」なるものを取得する必要があるらしいです。記述はこんな感じです。ところで、canvas未対応のブラウザは処理しないように、条件文をつけて、対応ブラウザのみ動作するようにしましょう。今回は、ctxという変数にcanvasのコンテキストを与えたので、この変数にドットでつないで命令する、これはAS3でも同じ考え方、、ってイメディオのセミナーの受講生さんに言ってるんだけど、理解してくれるのに時間がかかるもんです。まあ、それはさておき、、これで描画を始めるよ！という意味で・・・これで描画を終わるよ。と言う意味なんですが、最後に「描画しなさい！（正確には塗りつぶそうぜ）」と命令することによって描かれるので以下を忘れてはいけません。と、いうわけで、body要素内にコレだけ描けば、円が描かれるはずです。（ブラウザによる、、、なんといい加減な説明ですが。IEは無理。）

<canvas id="testCircle" width="600" height="400"></canvas>
<script type="text/javascript" language="JavaScript">
<!--
window.onload = function() {
  var canvas = document.getElementById('testCircle');
	var timeID;
	var ctx;
	var rote = 0;
	var centerX = 300;
	var centerY = 200;
	var globalRote = 0;
	var globalRoteNum = 0;
	var grad;
	ctx = canvas.getContext("2d");
	
  if (canvas.getContext) {
			timeID=setInterval(balls,30);
		}

HTML5 canvas要素とベジェ曲線の基礎を予習

2009年8月24日 01:25

今度デジハリでセミナーがあるので、もう少し入門者ながら勉強してみたcanvas要素。
JavaScriptでベジェ曲線を描いてみました。

ポイントとなるメソッドは「bezierCurveTo()」です。
最初に「moveTo()」で開始地点を決めて、あとは「bezierCurveTo()」で終点と、あいだのハンドル（愛用イラストレータで言う）の先端の2点を指定するだけで描けるから、わりと憶えやすいかもしれません。

「bezierCurveTo()」の書式はこのようになります。（イラストレータで使う用語を織り交ぜると・・・）

と、引数が6つもあります。
で、例えば以下のように書くと、
開始地点のアンカーポイントがX=0、Y=0で、終了地点のアンカーポイントがX=300、Y=300になります。
さらに、ハンドルをにょきっと移動させたと仮定して・・・

開始地点から伸びている方のハンドルの先のX=270とY=0が、第一引数と第二引数に。
終了地点から伸びている方のハンドルの先のX=20とY=300が、第三引数と第四引数に。
終点のX=300とY=300が、第五引数と第六引数に。

どうやら「beginPath()」を最初に書いてあげないと、例えば線を描いた後に丸を描く、などといった、別の図形を続けて描く時におかしな事になるので、書きます。
「strokeStyle="#FF0000"」は、線の設定で、赤線を指定しています。
準備ができたら実際に線を描くために「stroke()」を使います、これを書かないと描画されません。とりあえず下記のソースだけで曲線は描けます。

9/27(日)CSS Nite in OSAKAのセッション内容予告

2009年9月14日 01:20

9/27（日）にアップルストア心斎橋で開催されるCSS Nite in OSAKA, Vol.19で（久しぶりのアップルストアだなあ）HTML5のcanvas要素の事を触れてみようと思います。

僕自身はJavaScript未経験者ですので、未経験者のための勉強ということで経験者の方は退屈されるかもしれませんが、それでも来場される方、どうぞよろしくお願いします。

今日のcanvasはこちら。

[http://akibahideki.com/blog/canvasball.html]

window.onload = function() {
var canvas = document.getElementById('testCircle');
	var timeID;
	var ctx;
	var _width = 1200;
	var _height = 800;
	var ballArray = [];
	var ballNum = 50;
	var mouseX;
	var mouseY;
	ctx = canvas.getContext("2d");
	
if (canvas.getContext) {
		initBall();
		window.onmousemove = getMouseXY;
		}
		
function getMouseXY(evt){
	mouseX = evt.layerX;
	mouseY = evt.layerY;
	//console.log(mouseX);
	}

function balls(){
		ctx.clearRect(0,0,_width,_height);
		ctx.beginPath();
		for (var i=0 ; i<ballNum ; i++){
			var myX = ballArray[i][0];
			var myY = ballArray[i][1];

//マウス衝突判定
			var myR = ballArray[i][2];
			if(mouseX > myX-myR && mouseX < myX+myR && mouseY > myY-myR && mouseY < myY+myR) {
				//console.log("hit");
				ballArray[i][3]=rand(_width);
				ballArray[i][4]=rand(_height);
			}
			
			ctx.fillStyle = "red";
			var spd = rand(5)/100;
			myX+=(ballArray[i][3]-myX)*spd;
			myY+=(ballArray[i][4]-myY)*spd;
			ctx.arc(myX, myY, ballArray[i][2], 0, 360*Math.PI/180, true);
			ballArray[i]=[myX , myY , myR , ballArray[i][3] , ballArray[i][4]];
			ctx.closePath();
		}
		ctx.fill();
		//丸のパス描画(1回転分)ココまで
		}

function initBall() {
		ctx.clearRect(0,0,_width,_height);
		ctx.beginPath();
		for (var i=0 ; i<ballNum ; i++){
			var ball_x = rand(_width);
			var ball_y = rand(_height);
			var ball_r = rand(25)+25;
			var ball_target_x = rand(_width);
			var ball_target_y = rand(_height);
			ctx.fillStyle = "red";
			ctx.arc(ball_x, ball_y, ball_r, 0, 360*Math.PI/180, true);
			ctx.closePath();
			//配列に各パラメータを代入
			ballArray.push([ball_x , ball_y , ball_r , ball_target_x , ball_target_y]);
		}
		ctx.fill();
		//丸のパス描画ココまで
			timeID=setInterval(balls,30);
		}	
};

function rand(num){
	return Math.floor(Math.random()*num);
}

CSS Nite in OSAKA, Vol.19 フォローアップ【秋葉秀樹】

2009年9月28日 00:57

2009年9月27日、アップルストア心斎橋で開催されたCSS Nite in OSAKA, Vol.19で、HTML5のcanvasを使った入門講座ということでスピーチしてきました。

canvasというのは、HTMLタグで、直接ブラウザに図形を表示させるためのタグで、まずは「線を引く」とか「塗りを入れる」など、シンプルな絵を描く方法を説明させていただいたあと、「HTML内のリスト化された数値を抜き取り、折れ線グラフを描画させる」とか、「ポイントをドラッグさせてベジェ曲線を操作する」など、canvasで出来る初歩的な仕様のご紹介をしました。

全てが自作のJavaScriptなので、勉強し始めて半月くらいしかない僕にとって「まだまだ」だとは思いますが、まだ知らない人にとって、お役に立てたら光栄です。

今日公開したスライドです、ダウンロードしてお使いください。
http://www.akibahideki.com/html5/cssnite0927/slide_0927.pdf
[PDF: 3.3MB]

HTML5とcanvasとJavaScriptが同一ファイルになっていて1ファイルで完結しているのでサンプルファイルも参考にしてください。

■HTML5 canvasに関する入門講座 ~CSS Nite in OSAKA, Vol.19~
http://www.akibahideki.com/html5/cssnite0927/

【内容】

canvasに3000個のドット、Processing.jsを使わないと...

2010年2月12日 01:46

processing_no_use.html ←クリックして見てください、Safari,Chromeあたりが速いです、Mac版でしか見てませんが...

この前書いたブログ記事のあと、「Flashとcanvasを比べるなんておかしい」なんて声をいただきました、、、すいませんすいません。。。

ただし、最近どこかのサイトで「Flashに取って代わる」、とか「Flashが要らなくなる」、とか、ずいぶんはっきりした書き方をしている所もあるから。。

で、、そのときの記事でJavaScriptのフレームワーク、「Processing.js」を使って1000個のドットを動かしたんですが、システムエンジニアの方に「フレームワークを使ったら処理も影響されるんじゃない？」って言われて、良く分かんない僕は「え？」って思いました。

で、1000個のドットを動かすのもやっとこさのProcessing.js+canvasだったんですが、（初めてProcessingを書いたに等しいので書き方としてソースの善し悪しがわからず。）結構重たい。そんなものかと思っていましたが、Processing.jsナシで書いてみると、、

え？

割と軽快でした。

今回はブラウザでパフォーマンス比較、もうFlashとの比較はしません。。
今このマシンにあるブラウザの中で軽快な順番だと

1位がSafari
2位がChrome
3位がOpera
4位がFirefox
（全てMac版）

やっぱりSafariが軽快でした。 JavaScript、あんまりわからずに書いてみたけど、一応動きました、こんな感じで書いてみました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>canvas prosessing.js not use</title>
<style type="text/css" media="all">
</style>

</head>

<body>
<canvas id="canvasID" width="600" height="600"></canvas>
<p>パーティクルの数 : <span id="point">3000</span></p>
<script type="text/javascript">
<!--
var r = 0.75;
var width = document.getElementById('canvasID').width;
var height = document.getElementById('canvasID').height;
var ctx;
var timer;
var len;
var pList = [];

window.onload = function() {
	len = document.getElementById('point').innerHTML;
	init();
};

function init() {
	var canvas = document.getElementById('canvasID');
	ctx = canvas.getContext('2d');
	pList = [];
	ctx.fillStyle = "black";
	ctx.rect(0,0,width,height);
	ctx.fill();
	for (i = 0 ; i<len ; i++){
		var myX = rand(width);
		var myY = rand(height);
		var vx = rand(1)*10-5;
		var vy = rand(1)*10-5;
		pList[i]=[myX,myY,vx,vy];
		ctx.beginPath();
		ctx.fillStyle = "red";
		ctx.arc(myX,myY,r,0,Math.PI*2,true);
		ctx.fill();
		}
	timer = setInterval(draw,33);
}

function rand(num){
	return Math.random()*num;
}

function draw() {
	ctx.fillStyle = "black";
	ctx.rect(0,0,width,height);
	ctx.fill();
	for (i = 0 ; i<len ; i++){
		var myX = pList[i][0];
		var myY = pList[i][1];
		var vx = pList[i][2];
		var vy = pList[i][3];
		myX += vx;
		myY += vy;
		if(myX<0) myX = width;
		if(myX>width) myX = 0;
		if(myY<0) myY = height;
		if(myY>height) myY = 0;
		
		pList[i]=[myX,myY,vx,vy];
		ctx.beginPath();
		ctx.fillStyle = "red";
		ctx.arc(myX,myY,r,0,Math.PI*2,true);
		ctx.fill();
		}
}

-->
</script>
</body>
</html>

デザイナー、秋葉秀樹のブログ

『HTML+CSS』