『HTML+CSS』

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

<!-- InstanceBeginEditable name="main" -->

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

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

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

『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;にするとなおったので、ちょっと不思議な感覚でした。

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




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

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

今日のcanvasはこちら。 canvasball.jpg
[http://akibahideki.com/blog/canvasball.html]

名称未設定-1.jpg
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/

【内容】
ピクチャ 1.png

canvasに3000個のドット
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、あんまりわからずに書いてみたけど、一応動きました、こんな感じで書いてみました。

Author
秋葉秀樹

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。

siteInformation

web creatorsに寄稿しています。 web creators 2009年10月号 web creators 2009年10月号 web creators 2009年10月号「Flashの動き表現アイデア」特集の131ページに『画像をタイル状に分割』というタイトルの記事を執筆しました。

web creators 2009年6月号の94~ 95ページに秋葉秀樹が執筆した記事「商品カテゴリを意識してビジュアルを強調する」が掲載されました。
テーマは「MovableType 4.xデザインカスタマイズを極める(前編)」です。

web creators 2009年2月号の147ページに記事を書きました。
テーマは「独学で始めるFlash作成講座」です。

info@akibahideki.com

powered by MovableType4
Powered by MovableType 4

セミナー情報|秋葉秀樹
カテゴリ