Karen Corby

Windows Presentation Foundation

Microsoft Corporation

2005 年 10 月

日本語版最終更新日 2006 年 6 月 19 日

適用対象 :

WinFX Runtime Component

要約 : このドキュメントでは、Web における Windows Presentation Foundation の可能性を探ります。また、XAML ブラウザ アプリケーションの基盤となるテクノロジと、既存のサイトを移行する方法についても説明します。このドキュメントは、ブラウザベースのエクスペリエンスの向上に関心を持つ、Web に携わる読者を対象としています。

目次

はじめに
Web における WPF : XAML ブラウザ アプリケーション
WinFX のコンピュータへのインストール
展開
Windows Presentation Foundation サンドボックス
Loose XAML
既存サイトの移行方法
まとめ
追加情報

はじめに

最新の Web アプリケーション構築には困難が伴います。全面的なオンライン化に伴い、魅力ある Web エクスペリエンスへの期待は高くなる一方です。 より印象の強い表現が求められています。また、より複雑な機能も必要とされています。他と差別化したエクスペリエンスを提供することで、ユーザーを魅了し続けることがこれまでになく、重要になっています。

こうした Web アプリケーションを開発するには、大きな技術的課題があります。この課題を克服するには、3D、複雑なアニメーション、または拡張タイポグラフィなど、視覚効果を実現するための強力なテクノロジが必要です。また、同じテクノロジでアプリケーション ロジックも実現しなければなりません。サーバーに依存するソリューションを選択すると、ポストバックの通信に遅延が発生します。代わりにクライアント側に実装すると、スクリプト言語での開発という障害に直面します。

多くの場合、このような技術的な問題はデスクトップ バージョンのアプリケーションでは既に解決されています。ただし、オンライン バージョンでは Web テクノロジを使用して作成する必要があるため、デスクトップの解決策を利用するには困難が伴います。

WinFX の一部として提供される Windows Presentation Foundation (コード名 "Avalon") では、スタンドアロン アプリケーションと XAML ブラウザ アプリケーション (XBAP) の 2 つのアプリケーション タイプがサポートされます。XAML ブラウザ アプリケーション ("ウーバ" と発音) は、ブラウザで実行され、インストールされることのないオンライン専用アプリケーションです。このアプリケーションは、セキュリティ サンドボックスで実行され、Web に対しては Windows Presentation Foundation プラットフォームの機能を活用します。

このホワイト ペーパーでは、ブラウザでの WPF の可能性、XAML ブラウザ アプリケーションの基盤となるテクノロジ、および既存サイトの移行方法について説明します。ブラウザベースのエクスペリエンスの向上に関心を持つ、Web に携わる読者を対象としています。

注意 WPF のインストールや、"Web のように" 展開されるスタンドアロン アプリケーションについては、「ClickOnce」による展開の説明を参照してください。

Web における WPF : XAML ブラウザ アプリケーション

XAML ブラウザ アプリケーション (XBAP) により、Windows Presentation Foundation の機能を Web で利用できるようになります。ここでは、XAML ブラウザ アプリケーションの利点を明らかにし、XBAP に適したシナリオをいくつか説明します。

XAML ブラウザ アプリケーションの利点

Windows Presentation Foundation アプリケーションの特長である、XAML ブラウザ アプリケーションには次のような数多くのメリットがあります。

• XAML 。WPFでは、"Extensible Application Markup Language" (XAML) という新しい宣言型プログラミング モデルが導入されています。XAML には基盤となるプラットフォームの API が直接反映されているため、型付きプログラミング システムの利点をフルに活用できます。XAML の特徴には、コンパイル時のわかりやすいマークアップ エラー メッセージに加え、ＵＩ の "フックアップ" に必要なコードがより明快に把握できることなどを挙げることができます。

  <Application x:Class="MyApp" />

  図 1 XAML で定義されるアプリケーション   クラス  

• データ   バインディング。   データ バインディングは、データを UI に流し込む柔軟で強固な宣言型方式を提供し、ビジネス ロジックと ＵＩ の分離を可能にします。 WPF コントロールでは、サーバーにある情報へのデータ バインディングがサポートされているため、Web 開発者は非同期にデータを使用し、それをリッチ データ テンプレート システムによって効果的かつ魅力的な方法で視覚化することができます。

• 3D 。 WPF の 3D システムは、プラットフォームに完全に統合されています。3D 図形を単色で描画することは、同じ 3D 図形をビデオやテキスト パラグラフで表現する場合と比べても、難しいことではありません。

  
  図 2 ブラウザでの 3D

  
  

• フロー   ドキュメント。固定ドキュメントとは異なり、フロー ドキュメントは、ウィンドウのサイズ、デバイスの解像度、ユーザー設定などに合わせて動的にレイアウト コンテンツを配置します。これにより、さらに高度でパーソナライズされたユーザー エクスペリエンスを実現します。

  
  図 3 同じフロー   ドキュメントでウィンドウ   サイズとフォント   サイズが異なる場合  

• テキスト。WPF では OpenType フォント (TrueType および CFF) で豊富なタイポグラフィ機能を使用できます。これにより、サブピクセルによるスペーシングや縦方向のアンチエイリアシングを含む ClearTypeの最新技術を使用して、テキストをより美しくレンダリングできます。

  
  図 4 WPF でのタイポグラフィ  

  
  

• アニメーション。WPF アニメーション システムには、シーンの複雑で同期する変化を指定する柔軟な方法があります。プロパティおよびイベント システム、データ バインディング、スタイル設定、およびテンプレートと完全に統合されているため、インタラクティブで機能豊富なアプリケーションの詳細なサポートを可能にします。

  
  図 5 3D のブラックジャック   カード   アニメーション  

  
  

• ベクタ   グラフィックス。WPF では、ベクタ グラフィックスがネイティブで使用されるため、表示倍率や解像度に関係なく (美しくアンチエイリアシングされて) 忠実に視覚化されます。

  
  図 6 同じベクタ   グラフィックスでウィンドウ   サイズが異なる場合  

  
  

• ハードウェア   アクセラレータ。最新のグラフィック ハードウェアは常に進化しています。XBAP では、WPF のハードウェア アクセラレータ サポートを利用して、新たな段階の複雑な視覚エフェクトを実現しながら、CPU を解放してアプリケーションのコンピューティング要件に応えられるようにします。

• セキュリティ   サンドボックス。XBAP は、アプリケーションによるアクションの種類を制限するセキュリティ サンドボックス内で実行されます。つまり、XBAP は UI のレンダリング、アプリケーションの供給元のサーバーにあるサイトとの通信、分離された記憶領域の入出力などを実行できます。ただし、レジストリへのアクセス、ファイル システムへの直接の入出力など、より危険な処理は実行できません (詳細については、このドキュメントの「サンドボックス」を参照してください。

• ノータッチ   デプロイメント。XAML ブラウザ アプリケーションは、サンドボックス内で実行される、インストールされないアプリケーションであるため、ユーザー インタラクションを起動する必要がありません。つまり、セキュリティ プロンプトや情報バー メッセージをクリックスルーする必要はありません。ただ実行するだけです。

• .NET Framework プログラミング言語。WPF は .NET Framework を基盤にして構築されています。そのため、XBAP は強力な型付きマネージ アプリケーションであることの利点をすべて備えています。これには、.NET Framework プログラミング言語 (C#、Visual Basic など)、ASMX Web サービスへのネイティブ通信、および .NET Framework プラットフォームで利用可能な数多くのツールへのアクセスが含まれます。

• デスクトップと Web で同じプログラミング モデル。多くの開発チームは、アプリケーションを作成する際に、Web DHTML とデスクトップ Win32 という 2 つのバージョンを別々に作成しなければなりません。WPF では、オンライン アプリケーションとインストール アプリケーションの両方がサポートされるため、デスクトップ アプリケーションと Web アプリケーションで同じコード ベースを共有できます。アプリケーションを XAML ブラウザ アプリケーションとして作成するには、Visual Studio 2003 に含まれているテンプレートを使用するか、プロジェクト ファイルに 3 つのプロパティを設定するだけです。

  <HostInBrowser>True</HostInBrowser>
  <Install>False</Install>

  注意 Web バージョンのアプリケーションでは、サンドボックスで許可されていない機能をすべて無効にする必要もあります。

• デザイナと開発者の分離。 WPF は UI とロジックとの結びつきを最小限に抑え、開発者とデザイナが本来の作業に専念できるようにします。さらに WPF では、強力なデザイン コンセプト (リッチ 2D、アニメーション、および動的レイアウトなど) をカプセル化し、高度にツール対応されたマークアップ フォーマットで公開するため、デザイナは自分の最も優れた創造的なアイデアをそのまま表現し、他に依存せずに UI を作成できます。

XAML ブラウザ アプリケーションのためのアプリケーション シナリオ

XAML ブラウザ アプリケーションは多くの利点を Web 開発者にもたらします。また、Windows テクノロジの 1 つとして、Windows XP、 Windows Server 2003、および Windows Vista マシンでのユーザー・エクスペリエンスを大幅に拡張できます。ただし、目標とするアプリケーション コンテンツとユーザー アクセス範囲によっては、XBAP が最適なテクノロジとならない場合もあります。ここでは、XAML ブラウザ アプリケーションが最も適しているシナリオについて説明します。

XAML ブラウザ アプリケーションが最も推奨されるシナリオ

WPF は開発およびユーザー エクスペリエンスに多くの利点をもたらします。XAML ブラウザ アプリケーションは次のようなシナリオに推奨されます。

• 閲覧およびリッチ   コンテンツの視覚エフェクト。WPF では、非同期にデータがバインドされる 3D、アニメーション、またはテキストが中心となるコンテンツ ベースのサイトにおいて、より優れたエクスペリエンスを実現できます。開発もしやすくなります。 視覚エフェクトは XAML で定義できるため、デザイナが直接、または Expression Interactive Designer のようなツールを使用して作成できます。コンテンツを XML として保存するサイトについては、XAML と HTML の両方に対してサーバー サイドのトランスフォームを作成すると、低コストで高い効果が得られます。

• オンライン   ゲームおよびモデリング。オンライン ゲームや科学的なモデリングなどのサイトには、高度な論理エンジンまたは計算エンジンが必要になります。XBAP ではアプリケーションの駆動にマネージ コードを使用するため、複雑なクライアント サイドのロジック構築が大幅に簡略化されます。また、分離された記憶領域にキャッシュされた情報により、クライアントでの重いデータ処理が可能になるため、Web のポストバックの遅延を感じることがありません。

• データ   フロー管理と生産性アプリケーション。ゲーム アプリケーションといった、データ フロー アプリケーションおよび生産性 Web アプリケーションではロジックが重視されます。さらに、こうしたアプリケーションでは通常 Web サービスとのインタラクションが必要です。WFP は .NET をベースとして構築されているため、そこで提供される ASMX Web サービス インフラストラクチャを使用できます。アプリケーションと Web サービスとの通信に独自のメカニズムを構築する必要はありません。

• デスクトップと Web というアプリケーションの 2 つのバージョン。2 つの異なるアプリケーション テクノロジを使用しなくても、開発チームは WPF XAML ブラウザ アプリケーションと WPF インストール アプリケーションを作成して同じコード ベースを活用できます。

• 企業アプリケーション。企業で管理者がホスト環境を管理している場合でも、上記のアプリケーションを簡単に展開できます。これには、すべてのクライアント マシンに WinFX をあらかじめインストールしたり、イントラネット アプリケーション用にセキュリティ ポリシーをカスタマイズしたりするケースが考えられます。

XAML ブラウザ アプリケーションを検討すべきシナリオ

次に、XAML ブラウザ アプリケーションの使用を検討すべきシナリオをいくつか紹介します。視覚効果の複雑さ、開発の容易さ、およびアクセスするユーザーの規模の重要度を比較検討して、広範なアクセスが行われる HTML バージョンだけでなく、XBAP バージョンのエクスペリエンスも作成したほうがよい場合があります。

• マーケティング   キャンペーン。WPF を使用すると、Web デザイナは、潜在的な顧客を引き付ける魅力的でインタラクティブなマーケティング キャンペーンを作成できます。多くの場合、XBAP を構築して Windows ユーザーを魅了するエクスペリエンスを作成することが効果的です。

• E コマース。顧客ベースに応じて差別化したエクスペリエンスを WinFX ユーザーに提供することが、企業のブランドとビジネスに有利になる場合があります。

WinFX のコンピュータへのインストール

この新しいプラットフォームのユビキタス化は、WinFX の使用を考えている開発者にとって重要な検討事項です。いくつかの方法で WinFX のユビキタス化を進める計画です。

Windows XP SP2 と Windows Server 2003 では、WinFX を Windows Update からダウンロードして入手できます。現在、インストール ポイントをユーザーが容易に検索できるような方法を模索しています。

Windows Vista の PDC Beta リリースでは、Windows Presentation Foundation アプリケーションを実行するために必要なランタイム コンポーネントは、既定ではインストールされません。ただし、セットアップ ディスクでインストールへのポインタとなるショートカットが表示されます。Windows Vista のインストール操作は最終的なものではなく、今後のベータ リリースで変更されます。

展開

どのアプリケーション プラットフォームでも、ユーザーへのアプリケーションの配布が最も重要です。ここでは、展開テクノロジ、ブラウザ ホスティング、および WPF 検出など、XAML ブラウザ アプリケーションの展開に関して詳細に説明します。

ClickOnce

ClickOnce は、Web のような展開を可能にする新しい .NET Framework テクノロジです。リンクをクリックすると、アプリケーション ファイルがマシンにダウンロードおよびインストールされます。その後の実行では、公開されている最新バージョンのアプリケーションが必ず起動され、バージョン管理が円滑に行われます。

さらに、ClickOnce によるアプリケーション インストールそのものが独立していて、他に影響を与えず、復元できます。アプリケーションが他のアプリケーションに依存したり (Global Assembly Cache アセンブリのみ)、インストールがマシンの状態に影響することはありません。つまり、アプリケーションがアンインストールされると ([Add Remove Programs] で明示的に実行した場合と ClickOnce アプリケーション キャッシュから消去された場合のどちらでも)、アプリケーション全体が削除されます。

ClickOnce はまた、コード アクセス セキュリティをベースにしたセキュリティ展開モデルをアプリケーションに提供します (詳細については、「サンドボックス」で説明します)。

XAML ブラウザ アプリケーションは、キャッシュされた、オンライン専用の ClickOnce アプリケーションです。上記の利点に加えて、マシンに永続的にインストールされることはありません。しかし、キャッシュされるため、2 回目の実行はより高速かつ効率的になります。

注意  サンドボックスの外にインストールして実行する WPF アプリケーションもまた、スタンドアロンの ClickOnce アプリケーションであり、Web のような展開機能を利用できます。ClickOnce の詳細については、ClickOnce のホワイトペーパーを参照してください。

ブラウザによるホスト

名前のとおり、XAML ブラウザ アプリケーションはブラウザ内でのみ実行されます。ブラウザの最上位レベルに表示されるか、HTML IFrame 内でホストされます。

アプリケーションをホストするブラウザに応じて別々にコンパイルする必要はありません。

図 7 ブラウザ内の XAML ブラウザ   アプリケーション

サポート対象のブラウザ

XAML ブラウザ アプリケーションは、Internet Explorer 6 以降、および Microsoft WebBrowser コントロールをホストするすべてのブラウザで標準で実行できます。

Internet Explore XBAP ホスティングは、Windows Presentation Foundation ドキュメント オブジェクトのホストを作成することで実行できます。WebBrowser コントロールをホストするプラグインをサードパーティで作成することもできます (指定のブラウザの拡張性モデルに基づきます)。WebBrowser コントロールのホスティングの詳細については、「追加資料」を参照してください。

WPF のインストール時期の決定

拡張されたエクスペリエンスを WinFX ユーザーに対して提供する時期を決定する場合は、ユーザー エージェント ストリングを調べて、いつマシンに WPF をインストールするかを判断できます。SDK には、この方法を説明した役に立つ記事が提供されています。

Windows Presentation Foundation サンドボックス

Web から侵入するマルウェアやウィルスが増えるにつれて、ユーザーがセキュリティ プロンプトに戸惑う機会が増えています。何度もクリックスルーしなければならず、疲れてしまいます。"[OK] をクリック" しないと、Web や電子メールで提示されるものをまったくインストールできません。このような状況で、Web ユーザーに安全性とプロンプトのないエクスペリエンスを提供することには、大きな優位性があります。

XAML ブラウザ アプリケーションは、展開した場所に限定されたセキュリティ サンドボックスで実行されます。既定では、すべての XBAP はインターネット サンドボックスで実行されます。XAML ブラウザ アプリケーションはサンドボックスで実行され、インストールされないため、セキュリティ プロンプトを必要としません。

サンドボックスの構成

WPF サンドボックスは、.NET のセキュリティ フレームワークであるコード アクセス セキュリティ (CAS) を使用して構築されています。このセキュリティ モデルは許可セットと展開ゾーンの組み合わせを使用してアプリケーションの権限を決定します。CAS の詳細については、コード アクセス セキュリティ の記事を参照してください。Windows Presentation Foundation セキュリティのホワイトペーパー (http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/wcp_conceptual/html/c9c3d961-46db-4a9b-81da-c62da237f210.asp) (英語) でも、XBAP のセキュリティに関する詳細と WPF のセキュリティの概要について説明しています。

サンドボックスの機能

最新の WPF インターネット サンドボックスには豊富な機能セットが含まれているため、XAML ブラウザ アプリケーションはプラットフォームの機能の多くを活用できます。機能セットには次のような特長があります。

全般   ブラウザ ウィンドウ 供給元サイトへのアクセス 分離された記憶領域ファイルの入出力 ファイル オープン ダイアログ UIAutomation プロバイダ Cicero IME コマンド命令 タブレット スタイラス/インク Web 統合 IE ダウンロード ダイアログ 最上位レベルのユーザー主導ナビゲーション フレームまたはナビゲーション ウィンドウ内でホストされる HTML mailto: リンク URI (コマンド行) 引数 ASMX Web サービス HTML IFrame でホストされる XBAP XPS ドキュメント  XPS ドキュメント ビューア

視覚効果   2D 3D アニメーション メディア(およびクロスドメイン レンダリング) イメージ オーディオ ビデオ フロー ドキュメント ページ編集 テキスト フロー 最適パラグラフ ハイフネーション テキスト 埋め込みフォントとシステム フォント Adobe CFF グリフ

編集   スペル チェック* テキスト ボックス リッチ テキスト ボックス プレーンテキストとインク クリップボード プログラムによる切り取り/コピー ユーザー主導の貼り付け (Ctrl + V など) コントロール ボタン スライダ スクロール ビューア ポップアップ コントロール (ウィンドウ内に制限) ポップアップ ベースのコントロール (メニューなど) 基本コントロール

* Windows Presentation Foundation の Beta 2 リリースで提供されます。

プラットフォームの機能には、サンドボックス内で使用できないものもあります。これは設計によるものです。Beta 1 のインターネット サンドボックスで使用できない機能には、次のようなものがあります。

全般   スタンドアロン ウィンドウ 新しいウィンドウの開始 アプリケーションで定義されたダイアログ アプリケーションで起動された保存ダイアログ UIAutomation クライアント Web 統合 Windows Communication Foundation Web サービス 統合全般 HwndHost 音声認識の完全なサポート

メディア   ビットマップ効果 編集 リッチ (RTF、XAML) クリップボード

注意  ゾーン ベースの展開であるため、イントラネット アプリケーションは、インターネット アプリケーションの場合よりもわずかに拡張されたサンドボックスで実行するように要求できます。これにより、新しいウィンドウを起動したり、より充実したクリップボード フォーマットのセットにアクセスすることができます。

サンドボックスの拡張

WPF の拡張メカニズムは、.NET Framework のものと同じです。完全に信頼された、厳密な名前で署名されたアセンブリが Global Assembly Cache (GAC) に自動的にインストールされます。AllowPartiallyTrustedCallers (APTCA) 属性をアセンブリに設定することで、作成者はアセンブリのパブリック API をすべての XAML ブラウザ アプリケーションで使用できるようにします。

アセンブリ APTCA を作成するかどうかの決定は重要です。それは、サンドボックス内の呼び出しモジュールに DLL のセキュリティに加えて、API セットの適合性も厳密に保証するということでもあります。GAC にアセンブリを追加すると、MSI のインストールとセキュリティ プロンプトが必要になります。

APTCA GAC を設定したアセンブリの記述に関する詳細については、この記事の最後にある「追加情報」を参照してください。

Loose XAML

Loose XAML ファイルはマークアップのみのファイルで、XAML を使用してレンダリングする視覚コンテンツを定義します。アプリケーションと一緒にコンパイルされることはなく、Web サーバー上では独立したファイルとして存在します。XBAP と同様に、ブラウザの最上位レベルまたは HTML IFrame 内でホストできます。Loose XAML は常にインターネット サンドボックス内で実行されます。

Loose XAML はマークアップのみであるため、コンテンツのみのレンダリングに制限されます。つまり、Loose XAML では、ボタン イベント ハンドラなどのサポートや、クライアントのアプリケーション状態を保存することはできません。しかし、豊富な機能でコストをかけずに、サーバーで生成される動的な WPF 視覚効果を作成することができます。

図 8 HTML IFrame でホストされた   フロー   ドキュメントの Loose XAML

既存サイトの移行方法

XAML ブラウザ アプリケーションには多くの利点がありますが、Web プレゼンス全体を Windows Presentation Foundation に変換することが技術的または予算的に難しい場合があります。ここでは、Web スペースに段階的に WPF を追加していく方法について説明します。

Loose XAML の追加

Loose XAML を追加して、島のように独立したリッチ WPF コンテンツを作成できます。リッチ テキストの完全な "ページ" やフレーム、3D などが、これにあたります。 例えば、サイトに XAML で製品の仮想ツアーを追加し、そこから HTML による製品情報ページに移動させることもできます。または、オンライン百科事典で HTML ベースの広告構造を維持しながら、XAML のフロー ドキュメントで記事のコンテンツを表示できます (XML から XAML へは低コストで変換できるため、コンテンツを XML ストリームで保存している百科事典ではさらに大きな効果があります)。

IFrames による XBAP のホスト

Loose XAML でサポートされる WPF コンテンツよりもさらにインタラクティブな "島" を作成する必要がある場合があります。このコンテンツでは、ボタンのクリックやフォームのサブミットなどの UI イベントをフックアップするためのコードが必要になります。IFrames でホストされる小さい XAML ブラウザ アプリケーションを使用すると、そのような機能を持つ WPF の島を作り出すことができます。

混合サイトの作成

Web サイトの実際のインフラストラクチャを 1 つの大きな (または焦点を絞った 1 連の) XAML ブラウザ アプリケーションに移行すると仮定します。ただし、サイト全体を WPF に移行するだけの時間やリソースがない可能性があります。WPF フレームがホスト サーバーにある HTML ページを指すようにして、既存の実装環境を活用することができます。例えば、WPF によるチャット フォーラムをまだ作成していない場合、XBAP 内部に既存の HTML ベースのバージョンをホストできます。

HTML と WPF 間の通信

WPF でホストされる HTML と HTML でホストされる WPF の間で通信を可能にするには、次のようなオプションがあります。

1. サーバーを通信の仲介として使用します (HTTP Web 要求)。

2. ホストされる HTML の URI パラメータまたは XBAP URI を利用します。

3. ファースト パーティの Internet Explorer Cookie を使用します。

上記の解決策のいずれか、またはその組み合わせを実装することで、WinFX ユーザー向けの WPF エクスペリエンスを提供する統一された手段を作成できます。

まとめ

XAML ブラウザ アプリケーションは、Windows Presentation Foundation の可能性を Web にもたらします。最上級の視覚効果を可能にし、それを支えるアプリケーション ロジックを作成するツールを提供します。Loose XAML および緊密なブラウザの統合は、既存のサイトを移行する効果的な方法です。シームレスな展開やセキュリティ サンドボックスと併せ、XBAP は強力な Web テクノロジです。

追加情報

1. MSDN Magazine ClickOnce Article (英語)

   チュートリアル : デザイナを使用し、ClickOnce 配置 API で必要に応じてアセンブリをダウンロードする 

2. コード アクセス セキュリティ 

   Default Security Policy (英語)

   Configuring CAS policy on machines (英語)

3. Windows Presentation Foundation セキュリティ ホワイトペーパー

   WebBrowser Control Hosting Article (英語)

   HTMLEdit サンプル : Internet Explorer MSHTML 編集コントロールのラップ

4. Determining Whether WinFX Is Installed: User-Agent String (英語)

5. アセンブリとグローバル アセンブリ キャッシュの使用 

6. .NET Framework アセンブリと AllowPartiallyTrustedCallers 属性 

7. 分離ストレージ作業の実行(英語)