第22回 「HTML5とか勉強会」に登壇しました。


昨日 (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>

さて、この記事を読まれて 「HTML5とか勉強会」 に興味を持たれた方は、ぜひ一度勉強会に参加してみてください。

人気からもわかるとおり、毎回興味深いテーマで、濃いィ~内容のセッションがおこなわれております。

私も何度か参加させていただいていのすが、毎回新しい発見があります。

勉強会の開催については、メーリングリスト html5j.org  に参加してお知らせを受け取るか、管理人である白石さん (「HTML5&API入門」を書かれた方です。)の Twitter アカウントをフォローするか、することで知ることができます。

私も今度はオーディエンスとして参加して、じっくりと情報収集をしたいと思っています。

 

 

Real Time Analytics

Clicky

Comments (1)

  1. Web 標準レンダリングの検証結果を公開している Windows Internet Explorer Testing Center について記述するのを忘れていました。

    このサイトは Web 標準化団体が運営するワーキンググループとの協業によって作成されたテストを行い、きちんと Web 標準にそったレンダリングがされているかどうかの結果を公開しているページです。(なんか日本語が変??)

    Windows Internet Explorer Testing Center

    samples.msdn.microsoft.com/…/default-JA.htm

    このページでは、テスト結果を見るだけでなく、そのテストを実際にお使いの Web ブラウザーで追試することができます。

    テストの方法は、テスト結果の表の左端の項目のリンクをクリックするだけです。

    複数の Web ブラウザーを並べて、同じテスト用の URL をブラウズすれば、表示の違いを比較して見ることができます。

Skip to main content