第7回　Mesh-Enabled Web アプリケーション ―― Hello, world!

Mesh-Enabled Web アプリケーション

今回からはLive Frameworkの特長のひとつでもあるMesh-enabled Web アプリケーションの開発です。今回はHello, World! 的なプログラムの実行まで行います。

Mesh-enabled Webアプリケーションは、本連載の第3回にも少しだけ紹介していますが、Live Framework CTPで登場した新しい形のWebアプリケーションです。Live Mesh上に配置し、データと同様にアプリケーションの同期およびユーザー間での共有が可能な、同じコードでWebブラウザ上およびデバイス上（クライアントのPC上）でも動作するといった特徴を持つアプリケーションです。もちろんLive Frameworkを使用した同期・共有するデータを扱うことが可能です。

Live Framework CTPの利用は、現在招待制になっており、Azure Services Invitation Programの登録やAzure Services Developer Portalの登録作業が必要になります。これらの点については第3回で説明しています。あらかじめ必要な登録作業を済ませておいてください。

サンプルアプリケーションの実行

最初に、CTPで用意されているサンプルのMesh-enabled Webアプリケーションを実行する手順を紹介します。Live Framework Developer Sandboxへ移動しページ上部のタブ「Apps」をクリックします（図1⁠）⁠。

Appsページにある「Browse more applications」をクリックすると、アプリケーションの一覧が表示されます（図2⁠）⁠。Mesh上へ追加したいアプリケーションを選び、そのアプリケーション名の右側にある「Add To Mesh」をクリックします。

まだこの時点でMesh上にアプリケーションは追加されていません。追加しようとしているアプリケーションが行うデータへのアクセスの種類を確認し、許可を与えることで追加完了となります。図3はCorkboardアプリケーションを追加しようとしたところです。Windows Live ProfilesやMesh Devicesに対しての読み取り、Live Contactsへの読み取りと更新、Mesh User Newsに対してはフルアクセスが行われることを示しています。また「Change」をクリックすることでアクセスを許可するMesh Objectを指定できます。「⁠Allow access」をクリックすることでアプリケーションのアクセスを許可します。

アクセス許可後、図4のように「Create New」をクリックし、表示されたウィンドウにアプリケーションのインスタンス名を入力すると、Live Desktop上にアプリケーションのショートカットが作成され、アプリケーションの起動が可能になります。

Live Framework Client[1]をPCにインストールしている場合は、デスクトップ上に同じようにショートカットが作成されデバイス上での実行も可能です。図にLive DesktopとクライアントPC上から実行した結果を示します。

サンプルのCorkboardへ追加できるNoteデータは同期されているため、片方を編集するともう片方へ反映されることも確認できます。デバイス上のアプリケーションは、オフラインでの実行が可能です。オンラインになった時点でLive Operating Environmentによりデータが同期されます。

Live Framework Toolsインストール

それではMesh-enabled Webアプリケーションを作成してみましょう。Visual Studio 2008 SP1および無償のVisual Web Developer Express Edition with SP1用にLive Framework ToolsというMesh-enabled Webアプリケーションの開発環境が提供されています。

Live FrameworkやMesh-Enabled Webアプリケーション自体はVisual StudioやWindowsに依存するものではありませんが、提供されている環境を使用すると非常に簡単に効率よく開発が可能です。本連載でもこれを利用し、Visual Studio 2008 SP1と言語にVisual Basicを使用します。最初に開発に必要な環境を構築します。

Visual Studio 2008 SP1またはVisual Web Developer Express Edition with SP1がインストールされた状態で下記のSDK等を順にインストールします。

Silverlight 2 SDKとToolsのインストール前に以前のバージョンのSDKやSilverlightのランタイムがインストールされている場合は、アンインストールしてからSDK、Toolsのインストールを試みてください。

Live Framework Toolsの執筆時点でのバージョンはApril 2009 CTPです。ダウンロードした内容にLive Framework SDKも含まれています。インストール時にVisual StudioまたはVisual Web Developerが英語版かどうかのチェックがあるため、通常はインストールができないと思います。一度、英語版のVisual Web Developer 2008 Express Editionをインストール後にLive Framework Toolsをインストールするとよいでしょう。

インストールが完了するとプロジェクトの作成にLive Frameworkの項目が追加されています（図6⁠）⁠。ここからMesh-enabled Web アプリケーションのプロジェクトが作成可能です。

プロジェクトの作成

さっそくMesh-Enabled Web アプリケーションを作成してみましょう。図7のようにLive Frameworkのプロジェクトは2種類ありますが、ここでは、Silverlight Mesh-enabled Web アプリケーションを選択します。また、本連載ではVisual Basicを選択しています。

プロジェクトを作成すると、ソリューションにふたつのプロジェクトが作成されています。アプリケーションのUIとロジック部分となるSilverlightプロジェクトと、Mesh-enabled Web アプリケーションとしての情報を持つプロジェクトのふたつです（図7⁠）⁠。

SilverlightプロジェクトにあるPage.xamlが、アプリケーションの見た目となる部分です。既に「Hello from MeshApp1Silverlight」というTextBlockコントロールが追加されています。

プロジェクトの実行

作成されたプロジェクトは文字列を表示するだけの単純なアプリケーションですが、Mesh-enabled Web アプリケーションはMesh上に配置する必要があるため、手順に従いアプリケーションを配置してから実行・デバッグする必要があります。その方法をこれから説明します。

メニューのデバッグからデバッグ実行を選択します。すると図8のふたつのウィンドウが表示されます。

サインインウィンドウからAzure Services Developer Portalで使用しているWindows Live IDアカウントでサインインします。すると図9のウィンドウが表示されます。このウィンドウでは、Application Self-Linkと呼ばれるMesh上のアプリケーションのURLを入力するまでの手順が示されています。

Azure Service Platformプロジェクトの作成

Mesh-enabled Web アプリケーション用のプロジェクトをAzure Services Developer Portal上に作成します。図9にある「Navigate to the Developer Portal」をクリックしDeveloper Portalへ移動します。

続いてページ上の「New Project」をクリックします（図10⁠）⁠。サービスコンポーネントを選択する画面が表示されるので、「⁠Live Services: Live Framework Community Technology Preview」をクリックします（図11）

次にプロジェクトの名前と説明を入力する画面が表示されます（図12⁠）⁠。適当な名前と説明を入力しましょう。

Live Framework-enabled Web site または、Mesh-enabled Web アプリケーションを選択する画面になりますので、Mesh-enabledの方を選択します。Createボタンをクリックするとプロジェクト作成の完了です。Live Framework-enabled Web siteは、HTMLやJavaScriptを組み合わせた画面をアプリケーションのように見せる種別のプロジェクトです。

アプリケーションパッケージのアップロード

Visual StudioのMesh-enabled Web アプリケーションプロジェクトをビルドすると、アプリケーションに必要なファイルはzipファイルにまとめられています。このzipファイル（アプリケーションパッケージ）をDeveloper Portalへアップロードします。

作成したAzure Service PlatformプロジェクトのSummary（図14）にある「Upload Package」をクリックします。

図15の画面が表示されますので、ここに作成されているzipファイルを指定します。図9のApplication Self-Link入力ウィンドウを再度確認してください。2番の項目にある「Copy full path of MeshApp1.zip to clipboard」をクリックします。クリップボードにzipファイルのパスが格納されるので、これを利用してzipファイルを指定します。

Application Self-Linkの取得

アプリケーションパッケージのアップロードが完了すると、SummaryのページにApplication Self Linkという項目が追加されています。

アップロードしたにも関わらず表示されていない場合は一度ページを更新してみてください。Self-Linkの値、https://user-ctp.windows.net/V0.1/Mesh/Applications/～という部分をコピーします（図16⁠）⁠。

Visual StudioのApplication Self-Link入力ウィンドウに戻り、コピーした値を3番の項目のテキストボックスに貼り付けます（図17⁠）⁠。

アプリケーションの実行

OKボタンをクリックすると処理が進行し、Live Framework Developer Sandboxへ移動します。最終的にLive Desktopが開きアプリケーションが実行されます（図18⁠）⁠。

無事に実行されたでしょうか。アプリケーションパッケージのアップロード処理などの進行の途中でエラーが起きた場合は、パスやリンクのコピーに間違いがないかなど、もう一度手順を確認してみてください。また、たまたまサーバー側に一時的な問題や通信に問題があった可能性もあります。確認後に再度上記手順を行ってみてください。

Live Framework Clientが動いている場合、PCのデスクトップ上に実行したアプリケーションのショートカットが作成されたかと思います。これを実行するとPC上でアプリケーションが実行できます（図19⁠）⁠。もちろん、このときオンラインである必要はありません。

アプリケーションのデバッグ

Visual Studio上から実行すると、ブレークポイントを設定したデバッグも可能です。少しだけコードを変更してデバッグ方法を確認してみましょう。ボタンをひとつ配置し、クリックすると「こんにちは世界」とメッセージボックスを表示する単純なアプリケーションに書き換えます。

SilverlightプロジェクトのPage.xamlを開き編集します。前述の手順でアプリケーションを実行している場合は、一度終了してください。XAML部分を以下のように変更します。

<UserControl x:Class="MeshApp1Silverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="クリック" Click="Button_Click" />
    </Grid>
</UserControl>

続いてPage.xaml.vbのコードにボタンのクリックイベントの処理を追記します。

Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    MessageBox.Show("こんにちは世界")
End Sub

ブレークポイントが有効であることを確認するため、MessageBox.Show部分にブレークポイントを設定します（図20⁠）⁠。

先ほど実行時に設定したApplication Self-Linkの設定は再度必要ありません。デバッグ実行を行うと、Live Desktop上でアプリケーションが実行されるまで進みます。

実行されたアプリケーションのボタンをクリックしてみましょう。ブレークポイントを設定した行で処理が中断し、通常の.NETアプリケーションと同様にデバッグが可能であることがわかります（図21⁠）⁠。

実行を再開するとメッセージボックスが表示されます（図22⁠）⁠。

今回はここまでです。いかがでしたでしょうか。Live Framework Toolsを利用すると、これまでの .NETアプリケーション開発と同様に、そして簡単にMesh-enabled Web アプリケーションの開発ができることを感じたのではないでしょうか。

次回からはさらにLive Frameworkを利用したMesh-enabled Web アプリケーションの開発と特徴を紹介していく予定です。