ブログ内検索

by Futomi Hatano

HTML5 3Days Tech Talk

HTML5 3Days が終わりました。お越し頂いた皆さん、本当にありがとうございました。

実は、html5-developers-jp では初めての Tech Talk だったため、どのようなトピックを取り上げ、そして、どのレベルにあわせた内容にするべきか、とても悩みました。すべての人に満足頂けるた内容ではなかったかもしれません。しかし、少しでも、みなさんのHTML5への取り組みへのモチベーションアップに貢献できたなら、幸甚です。

今回、私は「Canvas チュートリアル」と題して、まだ、Canvas を使ってみたことがない方を対象にして、Canvas の具体的な使い方を紹介しましたが、時間も限られていたため、至らぬ点がたくさんあったと思います。時間があれば、実際のコーディングはどうなるのか、とか、フォールバックをどうるべきかまで、踏み込みたかったのですが、このあたりについては、また、別の機会があれば、紹介していきたいと思います。

さて、今回の Tech Talk で使ったプレゼン資料とサンプルを公開します。プレゼン資料だけでは分かりにくいかもしれませんが、お越し頂いたみなさんの記憶を呼び出す際に、参考にして頂ければ幸いです。

プレゼン資料
サンプル

ここで、Tech Talk で説明するのを忘れてしまったことを補足しておきます。

エッジ検出のサンプルですが、写真は私が近所の公園で撮影した風景ですが、コードは、HTML5 仕様の Canvas の Pixel manipulation の節日本語訳)に掲載されているコードを、ほとんどそのまま流用したものです。

このエッジ検出のサンプルは、Safari 4, Firefox 3.5, Chrome 3 で動作します。

マンデルブロ集合のサンプルは、Safari 4, Firefox 3.5, Chrome 3, Opera 10 で動作します。ただし、とても処理が重いので、ご注意を。Tech Talk では、Mac OS X Snow Leopard 上で Firefox 3.5 を使ってご覧頂いたので、処理が早く感じたかもしれません。やはり 64 bit OS だからなんでしょうかね。この環境でのパフォーマンスはとても良いです。それ以外の環境では、結構、処理に時間がかかります。

マンデルブロ集合の Web Workers Version は、Safari 4, Firefox 3.5, Chrome 3 で動作します。通常版より、パフォーマンスは悪いですが、処理中も UI がブロッキングされないのが分かると思います。

マンデルブロ集合の Web Workers Version は、1日目の Tech Talk では、質疑応答で少し触れただけで、実際にお見せできずに申し訳ありませんでした。

マンデルブロ集合のコードは、Tech Talk のために、大急ぎで1日で作ったものでして、ちょっとコードをお見せするのが恥ずかしいのですが、よろしければ、ご自由にご覧ください。はっきり言って、かなり強引な手法を使っています。もう少し知恵を絞れば、もっとパフォーマンスが良くなるかもしれませんね。

マンデルブロ集合(通常版)
マンデルブロ集合の Web Workers Version

この投稿は 2009年10月4日 日曜日 12:48 AM に お知らせ カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

コメントは受け付けていません。