昨日 (2011/10/26) に弊社品川オフィスで開催されました第22回 「HTML5とか勉強会」に登壇させていただきました。
「HTML5とか勉強会」 というのは、HTML5 を中心とした次世代 Web 技術に関する内容を中心として、様々なゲストを迎え、情報共有と発表の場とすることを目的とした勉強会です。
活動も活発なのですが、人気もものすごく高く、毎回勉強会のお知らせを流すたびに、あっという間に応募者の数が定員の数を超えてしまいます。
イベントの定員の数を応募者の数が上回るのは、メジャーな勉強会ではそれほど珍しいことではないのかもしれませんが、この勉強会の場合は、キャンセル待ちの方の数もものすごい数に上るのです。
ちなみに今回の募集では、100 人の定員が 1 時間ちょっとで埋まり、それでもキャンセル待ちが 250 人というものでした。
そんな絶大な人気の勉強会で、お時間を 15 分ほど頂戴して、以下の内容でミニセッションさせていただきました。
このセッションのメインとなる内容は、Internet Explorer 9 が Canvas と SVG をどのようにサポートしているか、です。
これについては、スライドには必要最低限の情報しか載せていませんので、ぜひ 「Internet Explorer 9 開発者ガイド」 にある詳しい情報をご覧いただければと思います。
HTML5 canvas 要素
SVG (Scalable Vector Graphics)
さて、上記の内容を実際にセッションで話すと、以外なほどあっという間に説明が済んでしまうので、Canvas や SVG を使用したコンテンツを作成する際にの労力を減らすツールとして Visual Studio 2010 を紹介させていただきました。
個人的に Visual Studio 2010 + Web Standards Update for Microsoft Visual Studio 2010 SP1 + SVG Intellisense schema for Visual Studio 2010 and 2008 の組み合わせは最強の Web コンテンツの作成ツールだと心の底から信じているので、説明にも力が入ります、というか、入りすぎって感じでしたが。。
ちなみに Visual Studio 2010 は以下から入手することができます。
Visual Studio 2010 評価版 (プロフェッショナル向け)
Visual Web Developer 2010 Express
なお、Visual Web Developer Express は、それ単体での入手はできず、Web Platform Installer (WebPI) を使用してインストールする必要があります。
Visual Web Developer Express インストールの手順について不安な方は、以前、インストールの手順をこのブログの記事にまとめているので、そちらを参考にインストールを行ってみてください。
デモでは SVG と Canvas で図形を描く際の作業を、Visual Studio 2010 の入力補完機能を使用したコーディングでお見せしました。
どんな図形を描いたのかは、以下のソースをコピーして、モダン Web ブラウザーで実際に描画してご覧いただければと思います。
<!DOCTYPE html PUBLIC ><html ><head> <title>content</title> <script type="text/javascript"> function drowSmile() { var ctx = document.getElementById("smile").getContext("2d"); ctx.beginPath(); ctx.moveTo(175, 25); ctx.quadraticCurveTo(125, 25, 125, 62.5); ctx.quadraticCurveTo(125, 100, 150, 100); ctx.quadraticCurveTo(150, 120, 130, 125); ctx.quadraticCurveTo(160, 120, 165, 100); ctx.quadraticCurveTo(225, 100, 225, 62.5); ctx.quadraticCurveTo(225, 25, 175, 25); ctx.stroke(); ctx.fillText("にはちんこ",150,70) } onload = function () { drowSmile(); } </script></head><body> <svg> <circle cx="70"cy="70" fill="yellow" r="70" stroke="black" stroke-width="4"> </circle> <circle cx="50" cy="30" fill="black" r="5" stroke="black"> </circle> <circle cx="90" cy="30" fill="black" r="5" stroke="black"> </circle> <path d="M 30,70 C 30 92.091390 47.908610 110 70 110 M 70,110 C 92.091390 110 110 92.091390 110 70" fill="none" stroke="black" stroke-width="4"> </path> </svg> <canvas id="smile" style="position: absolute; left: 30px"> </canvas></body></html>
<!DOCTYPE html PUBLIC ><html ><head> <title>content</title> <script type="text/javascript"> function drowSmile() { var ctx = document.getElementById("smile").getContext("2d"); ctx.beginPath(); ctx.moveTo(175, 25); ctx.quadraticCurveTo(125, 25, 125, 62.5); ctx.quadraticCurveTo(125, 100, 150, 100); ctx.quadraticCurveTo(150, 120, 130, 125); ctx.quadraticCurveTo(160, 120, 165, 100); ctx.quadraticCurveTo(225, 100, 225, 62.5); ctx.quadraticCurveTo(225, 25, 175, 25); ctx.stroke(); ctx.fillText("にはちんこ",150,70) } onload = function () { drowSmile(); } </script></head><body> <svg> <circle cx="70"cy="70" fill="yellow" r="70" stroke="black" stroke-width="4">
</circle> <circle cx="50" cy="30" fill="black" r="5" stroke="black"> </circle> <circle cx="90" cy="30" fill="black" r="5" stroke="black"> </circle> <path d="M 30,70 C 30 92.091390 47.908610 110 70 110 M 70,110 C 92.091390 110 110 92.091390 110 70" fill="none" stroke="black" stroke-width="4"> </path> </svg> <canvas id="smile" style="position: absolute; left: 30px"> </canvas></body></html>
■
さて、この記事を読まれて 「HTML5とか勉強会」 に興味を持たれた方は、ぜひ一度勉強会に参加してみてください。
人気からもわかるとおり、毎回興味深いテーマで、濃いィ～内容のセッションがおこなわれております。
私も何度か参加させていただいていのすが、毎回新しい発見があります。
勉強会の開催については、メーリングリスト html5j.org に参加してお知らせを受け取るか、管理人である白石さん (「HTML5&API入門」を書かれた方です。)の Twitter アカウントをフォローするか、することで知ることができます。
私も今度はオーディエンスとして参加して、じっくりと情報収集をしたいと思っています。