Tech・Ed Japan 2010 BoFレポート
――マイクロソフトの Web テクノロジ最前線と現実解を語ろう

「マイクロソフトのWebテクノロジ最前線と現実解を語ろう」セッションレポート

最前線の技術を活用したサンプル紹介

　MVC 3（Razor）、Data Services、HTML5、jQueryなどの最新の技術を活用したサンプルアプリケーションを竹原さんが説明しました。

ナオキ：それでは最前線の技術を活用したサンプルを竹原さんから紹介していただきます。なお、マイクロソフトの社員の方が多数参加している中で恐縮ですが、ChromeやSafariとSSIDの準備をしてください。

――竹原さんが作成したサンプルは複数人で共有する落書きアプリのため、SSIDなどの設定が必要でした（図7）。

図7　iPadを利用したMVC Graffitiのデモ

竹原：それでは、画面右上に表示されているIPを入力してください。そこにアクセスしていただくと、同じ画面が表示されるはずです。おススメはiPadを利用することです！

ナオキ：竹原さん！ マイクロソフトのカンファレンスです（会場：笑）。

竹原：あ、そうですね。このアプリは何ができるかというと、表示されているユーザー登録して…お！ みなさん素晴らしいです。良いですよ（会場：笑）。

――MVC Graffitiにアクセスした後、竹原さんの説明を待たずに参加者の方々がそれぞれ落書きやさまざまな機能を利用し初めていました。

ナオキ：UXが優れているアプリケーションでもあるわけですね（笑）。

竹原：このアプリで何をしているかというと、大元の受け口はMVC 3で、HTMLレンダリングではRazorを利用しています。ストロークデータはData ServicesにJSONで通信して非同期でPostとGetを繰り返しています。クライアントサイドはRazorとHTML5とCSS3でできています。サーバーサイドでストロークデータを書き換えるためにサービスを利用しているイメージです（図8）。

図8　MVC Graffitiの利用例

　アクセスしている方々は非同期で更新されるため、全員が同じ表示がされているかと思います。URLはURLルーティングを使用していますし、Data ServicesのURLを叩けばその生のデータを閲覧することもできます。サンプルは後日公開するので、見てみたい方は後日確認してみてください（※6）。

※6

　現在CodePlexでサンプル公開中です。