Skip to main content
評価してください: 

HTML5 対応サイトをクラウドで動かす ~ "The Shodo" ができるまで

更新日: 2011 年 6 月 10 日


次世代 Web 標準技術として、HTML5 や CSS3 が関心を集めています。また、次世代 Web 技術を駆使した Web サービスの展開先は、真っ先にクラウドが検討され、多くのユーザーに対してスケーラブルに新体験が提供されています。

ところで、HTML5 で作られた Web サービスがマイクロソフトのクラウド プラットフォーム Windows Azure 上に早くも存在しています。 "The Shodo" (英語) をご存知でしょうか。このサイトは、Web ブラウザー上で書道を体験し、書いた作品を Web 上に公開し共有することができる Internet Explorer 9 に対応した Web サイトです。

このような Web サービスをいざ作るとなると、ブラウザー側とサーバー側との使い分けや、認証など多くのことを検討することとなり、どこから手を付ければよいか悩んでしまうことも少なくないでしょう。

そこで、どのような技術を組み合わせこの新体験を提供したのか、5 回にわたって製作にかかわった開発者にその技術の使いどころを紹介してもらいます。

  • 第 1 回 The Shodo の紹介と構成

    The Shodo のサイトの概要紹介と、このサイトでどのような技術を利用しているのか Windows Azure 上で構築したサーバー サイドや外部サービス連携までを含めたサービスの全体構成の簡単な解説を行います。

  • 第 2 回 Write - 書の作成 - を通してのクライアントとサーバーの実装

    The Shodo のサイトの代表的な機能「作品を書く」は、Write ページで書いた書をサーバーに送り書のデータを保存することで実現しています。
    この回では、Write ページの HTML5 Canvas 要素で書いたデータを AJAX で送信し、サーバー サイドでは ASP.NET MVC で受け取り、SQL Azure と Azure Storage Blob にデーターを保存までの一連の流れについて解説を行います。

  • 第 3 回 Sign in - 外部の認証サービスへの対応

    外部のサービスでユーザー認証を行う仕組みを持つサイトが増えてきており、The Shodo では Twitter、Facebook、Windows Live ID (現: Microsoft アカウント) の 3 つの認証に対応しています。この 3 つのサービスで採用している OAuth に対応したサンプル コードから、特に Windows Live ID (現: Microsoft アカウント) での実装例をもとに、認証から認証ユーザーのデータの取り扱いまでの解説を行います。

  • 第 4 回 Gallery - 書の公開 - における Windows Azure Storage Blob (CDN) と HTML5 の連携

    The Shodo のサイトの代表的な機能「作品を見る」は、書いたデータをサーバーから受け取り、Gallery ページ等の HTML5 Canvas 要素に表示することで実現しています。この回では、Azure Storage Blob (CDN) からのデータの読み込みと HTML5 Canvas を組み合わせたときに発生する問題点について説明し、The Shodo における解決方法について解説を行います。

  • 第 5 回 クラウドとブラウザーの摺合せ - Windows Azure と HTML5_JavaScript 連携の Tips

    最終回では、プロジェクトを通じて得たいくつかのノウハウについて解説を行います。jQuery などの JavaScript ライブラリの配信に Microsoft Ajax CDN を用いた理由、Razor 構文でのコーディングのポイント、ビデオや Web Fonts 等 Windows Azure で HTML5 関連技術を使う場合の設定、静的ファイルを Blob に置くノウハウなど Web サイト構築での共通の課題とその対策について解説を行います。

[本資料の著者]

株式会社 ビジネス・アーキテクツ
ソフトウェアデザインエンジニア 吉野 友人 (よしの ともひと) [ Facebook]

ページのトップへ