特集：PDC05レポート：巻き返しが始まるMicrosoftのRSS／Ajax戦略（3/3）

特集
PDC05レポート

巻き返しが始まるMicrosoftのRSS／Ajax戦略

吉松史彰
2005/10/06

Ajaxと新世代Webアプリケーション

　つい先ごろまで、MicrosoftはWebアプリケーションの開発環境／実行環境をリードしていた。模倣は最高の賛美というが、ASPやASP.NETが模倣の対象となっていることに疑いの余地はない。

　また、MicrosoftはWebサーバとWebブラウザの両方を自社で開発している数少ない企業であるため、Webサーバの負担をWebブラウザが補い、Webブラウザに足りないところをWebサーバが提供するという環境を築きやすかった。「Dynamic HTML」「Remote Scripting」「Remote Data Services」「XML Data Island」など、Internet Explorerをアプリケーション・プラットフォームとして「Internet Information Server（IIS）」と連動させるという技術では、当初Microsoftが先行していた。

　しかし、現在のMicrosoftはこの分野でも優れた先行者の後塵を拝している。先行していた技術で次々に脆弱性が発見されて、折からのセキュリティ重視の流れで多くの機能を実質的に無効化されてしまったため、Internet Explorerはそれ以上先に進めなくなってしまったのだ。ASP.NETでは、ほぼすべての処理をWebサーバ側で行い、Webブラウザは狭い範囲でのユーザー・インターフェイスの機能だけを担うようになっている。

　さらに最近になって、GoogleのGMailやGoogle Mapsに端を発した、リッチなユーザー・インターフェイスをWebブラウザに備わっている機能だけで実現する、いわゆる「Ajax（Asynchronous JAvascript + XML）」と呼ばれる技術を駆使したWebアプリケーションが現れた。Ajaxを利用したWebアプリケーションはその見栄えのよさ故に、あっという間にWebアプリケーション開発の主流の座へと駆け上り始めている。

　Perl、PHP、Rubyなど、Webアプリケーションの開発でよく使われるスクリプト言語の環境に対しては、あっという間にAjax機能を実現するアプリケーション開発フレームワークが登場し、いまやこれらの言語で開発するWebアプリケーションではAjax機能はさしたる努力もなしに手に入るようになっている。

　ここでもMicrosoftは出遅れた。ASP.NETにもいくつか有志による実装があるものの、ASP.NETというフレームワークに違和感なく組み込めるものとはいい難く、この分野でMicrosoftが何らかの回答を早期に出すことが期待されていた。

　まもなく出荷されるはずのASP.NET 2.0には非常に限定的なAjaxサポートが組み込まれているが、それは「非常に限定的」である。

Atlas Frameworkとは

　PDC05では、すでに名前が知られていた「Atlas Framework」が基調講演の中で行われたデモで披露された。

　AtlasはASP.NET 2.0をベースにAjaxのための機能を実装したもので、Webブラウザ側で動作するJavaScriptのライブラリと、ASP.NET 2.0で動作するサーバ側のハンドラやコントロールから構成される。

■Atlasを利用したWebアプリケーション

　Atlasを利用すると、例えば現在時刻を表示するWebアプリケーションは次のように記述できる。

<%@ Page Language="VB"  %><%@ Import Namespace="System.Web.Services" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<script type="text/VB" runat="server">

  <WebMethod> _

  Public Function Say_When() As String

    Return "<p>The time is <b>" + DateTime.Now.ToString() + "</b></p>"

  End Function

</script>



<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

  <title>Untitled Page</title>

  <atlas:script ID="Script1" runat="server"

    Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />

  <atlas:script ID="Script2" runat="server"

    Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />

  <atlas:script ID="Script3" runat="server"

    Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />

  <atlas:script ID="Script4" runat="server"

    Path="~/ScriptLibrary/AtlasCore.js" />

  <atlas:script ID="Script5" runat="server"

    Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />

  <atlas:Script ID="Script6" runat="server"

    Path="~/ScriptLibrary/AtlasUI.js" />



  <script type="text/javascript">

    <!--

    function run() {

      PageMethods.Say_When(onReturn);

      return false;

    }

    function onReturn(result) {

      $('time_div').innerHTML += result;

    }

    //-->

  </script>

</head>



<body>

  <form id="form1" runat="server">

  <div>

    <h1>What time is it?</h1>

    <div id="time_div">

      I don't have the time, but

    <a href="#" id="hyperlink1" onclick="return run();">

      click here

    </a> and I will look it up.

    </div>

  </div>

  </form>

</body>

</html>

Atlasを利用した現在時刻を表示するWebアプリケーションの例

　Ajaxを利用する場合、「枯れた新しいUI革命『Ajax』をASP.NETで活用する」でも解説されているとおり、ブラウザによってXmlHttpRequestオブジェクトの生成スクリプトを変えたり、非同期実行するためのクロージャを記述したりと、複雑怪奇なJavaScriptコードを記述する必要があった。

　Atlasでは、Ajaxを利用する際に不可欠となる処理をそのフレームワークの中に用意している。例えばXmlHttpRequestオブジェクトの生成やエラーにも対応したクロージャの記述、さらにはDataSetオブジェクトのやりとりなどをはじめとするASP.NET特有の機能に至るさまざまな処理などである（Atlasによって提供される機能についての詳細は「ASP.NET ATLAS」を参照）。

　上のコード例でも、従来では、

document.getElementById('time_div')

と書いていたところを

$('time_div')

と記述できるようにしたり、Webページに用意されているWebMethod（Webサービス）を普通のJavaScriptの関数を呼び出すコードで呼び出せるようになっている。これらは、従来では必要だった面倒な部分をすべてAtlasがまかなっているおかげだ。

　このような機能は「Ruby on Rails」や「Catalyst」といったWebアプリケーションのフレームワークではすでにおなじみだが、AtlasによってASP.NETにもようやく付加されることになる。

■Atlasを利用したWebサービスとクライアント

　Atlasには、データを取得して表示するWebアプリケーションをAjax的に実装できる機能も用意されている。Ajaxではデータを取得する部分はサーバ側で行われ、（HTMLは含まない）取得されたデータだけがWebブラウザに渡されて、WebブラウザでHTMLの描画が行われる。

　ASP.NETでデータだけを取得するといえばWebサービスの出番となる。Atlasでは、ASP.NET Webサービスが拡張され、Ajaxに適した機能が追加されている。

　以下のコードはWebサービスを記述したコードである。Atlasで新しく導入されているのはMicrosoft.Web.Services.DataServiceクラスだけであることに注意してほしい。あとはすべて、ASP.NET 2.0の範囲内の機能である。

<%@ WebService Language="VB" Class="WebService" %>



Imports System.ComponentModel

Imports System.Collections.Generic

Imports System.Web.Services

Imports Microsoft.Web.Services



<DataObject()> _

Public Class Person

  Private _name As String

  <DataObjectField(False)> _

  Public ReadOnly Property Name() As String

    Get

      Return _name

    End Get

  End Property



  Public Sub New(ByVal Name As String)

    Me._name = Name

  End Sub

End Class



<WebService(Namespace:="http://luckypines.com")> _

Public Class WebService

  Inherits DataService



  <DataObjectMethod(DataObjectMethodType.Select)> _

  Public Function SelectMethod() As Person()

    Dim ps = New List(Of Person)

    ps.Add(New Person("Adam"))

    ps.Add(New Person("Betty"))

    ps.Add(New Person("Charles"))

    Return ps.ToArray()

  End Function

End Class

Atlasに対応するWebサービスの記述例

　このようなWebサービスを用意しておけば、データの表示側、つまりWebフォーム側では次のようなページを用意すればよい。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >



<head runat="server">

  <title>Untitled Page</title>

</head>



<body>

  <form id="form1" runat="server">

  <div>

  <atlas:ScriptManager runat="server" />



  <atlas:DataSource runat="server" ID="dataSource"

      ServiceUrl="WebService.asmx"></atlas:DataSource>



  <atlas:ListView runat="server" ID="listView"

    ItemTemplateControlID="items">



    <Bindings>

      <atlas:Binding DataContext="dataSource"

          DataPath="data" Property="data" />

    </Bindings>



    <LayoutTemplate>

    <ul runat="server">

      <li runat="server" id="items">

        <atlas:Label runat="server" ID="label">

          <Bindings>

            <atlas:Binding DataPath="Name" Property="text" />

          </Bindings>

        </atlas:Label>

      </li>

    </ul>

    </LayoutTemplate>



  </atlas:ListView>



  <atlas:Button runat="server" Text="Go">

    <Click>

      <Actions>

        <atlas:InvokeMethodAction Target="dataSource" Method="select" />

      </Actions>

    </Click>

  </atlas:Button>



  </div>

  </form>

</body>

</html>

上記Webサービスを利用したAtlasによるWebアプリケーション

　こちらはふんだんにAtlasのサーバ・コントロールを利用している。

　<atlas:DataSource>コントロールが、Webサービスとの通信部分とデータを管理する。<atlas:ListView>コントロールは、データをリスト表示する機能を持っていて、内部で<atlas:Label>コントロールのtextプロパティに、データ（ここではPersonクラス）のNameプロパティをバインドする。

　最下部には<atlas:Button>があり、このボタンがクリックされたときにデータソースのselectメソッドが起動され、それがWebサービスのSelectMethodを起動するという動作になる。

　Ajaxといいながら、JavaScriptのコードは一切記述していないことに注意してほしい。実際には多くのJavaScriptコードが自動生成され、Webブラウザ上で実行されるのだが、それはASP.NET開発者からは隠ぺいされている。

　Webサービスとの通信で使われるデータ・フォーマットは「JSON（JavaScript Object Notation）」で、「Webservice.asmx/js」というURLでアクセスできるようになっている。

AtlasとMSN

　AtlasやMicrosoftのAjax対応を語るうえで見逃せないのが、MSNの存在だ。

　MSNはこれまでも、ASP.NETチームにとってパフォーマンスを測定するために重要な場所だった。現在のMSNポータルはASP.NETベースでできているし、MSNスペースもASP.NETで実装されている。しかしあくまでまずASP.NETが開発され、次にMSNがそれを採用するという段取りだった。

　Atlasについては、段取りが逆転している。Atlas Frameworkは、すでに実地で稼働しているのである。MSNの試験的ポータルサイトであるStart.comがそれだ。http://start.com/pdc/にアクセスしてページのソースをのぞけば、“Atlas”の文字が見えるだろう。

■Start.comから始まったAtlasプロジェクト

　実は、Start.comが実装したJavaScriptフレームワークを基にASP.NET側の機能を追加して作り上げたのがAtlasであり、Atlasに関してはStart.comの方が本家なのだ。ただし、いまはStart.comチームはAtlasチームと共同でフレームワークを煮詰めているところだそうだ。

　AjaxはMicrosoftの外で起きたムーブメントであるが、GoogleやYahoo!との競争にまともにさらされているMSNのチームは、Ajaxを無視したままでは競争力を維持できないような状況になってしまった。このため、MSNチームが独自に新しいサイトの開発を始めざるを得なくなったのだろう。

　実際、Atlasはまだまだ出荷まで遠い道のりがあるが、Start.comはすでに稼働しているし、同じMSNフレームワークを採用しているHotmailはベータテストの規模を拡大している。またVirtual Earthという地図サイトもAjaxをふんだんに利用している（※6）。

※6 ちなみに、Atlasでは<atlas:VirtualEarthMap runat="server"/>というタグだけでVirtual Earthを利用できる。

　彼らMSNチームがMicrosoft本体のイベントで外部の開発者に向けて自分たちのサービスを紹介するというのはこれまでにはなかったことだが、今回のPDCではそれが行われた。

　PDCがお開きになるとすぐにMSNチームはWindowsのチームと1つのグループになるように組織再編も発表され、MSNチームがMicrosoftの中で大きな位置を占めるようになってきている。事実、Atlasをここまで短期間（※7）で発表できる状態に持ってこられたのは、あらかじめMSNチームが試行錯誤を行っていてくれたからだ。

※7 Start.comがWeb上に公開されたのは2005年2月だが、Atlasが発表されたのは2005年6月の後半である。PDC05までの間にDVDにコードを焼いたりドキュメントを用意したりすることなども考えると、Atlasのチームは実質2カ月程度しか作業をしていない。PDC05の場でStart.comの開発者にもじかに確認したが、AtlasはStart.comの成果である“MSNフレームワーク”を基に立ち上げられたプロジェクトである。

　MicrosoftはAjaxでも出遅れたが、魅力的な機能で巻き返してきた。ASP.NETに携わる開発者は、AtlasだけでなくMSNの新世代Webサイトの動向にも目を向けておくべきだろう。

INDEX
	[特集] PDC05レポート
	巻き返しが始まるMicrosoftのRSS／Ajax戦略
	1．PDC05の3つのテーマ
	2．RSSへの取り組み
	3．Ajaxと新世代Webアプリケーション
	動的プログラミング言語へと発展するC# 3.0とVB 9.0
	1．動的型付言語への憧憬
	2．型推論とラムダ式／Extension Methodsの導入
	3．クエリ構文の統合「LINQ」／DLinqとXLinq
	4．Visual Basicを再び動的プログラミング言語にする試み

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える