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