Insider's Eye“WPF/E” vs. Adobe Flash、ガチンコ対決！デジタルアドバンテージ 一色 政彦 |
 |
|
|
|
■3. “WPF/E”とFlashの機能比較（機能と制作）
以降では、“WPF/E”の機能面や制作環境の面を、Flashと比較しながら説明していく。まずは“WPF/E”の基本機能であるグラフィックスのレンダリング関連の機能についてだ。
●グラフィックス・サービス（2Dグラフィックスやアニメーション関連）
“WPF/E”はWPFの機能を一部カットしたサブセットである。カットした機能は、GPUの活用と3Dグラフィックスの描画である。要するにWPFは、利用できるプラットフォームを広げるために、GPUレンダリングは使わず、すべてソフトウェア・レンダリングを行う方式を採用している。GPUレンダリングが使えないため、CPUの負荷が高まると考えられる3Dレンダリングもカットしたのだろう。
しかしそれらがカットされたとしても、WPFと同様の機能が使えるのは頼もしい。すべてを試したわけではないが、恐らく次のような機能が利用できるはずだ。
- 2Dベクタ・グラフィックス（ブラシ、ペン、図形、変換など）
- 視覚効果（ドロップ・シャドウやぼかしなどのフィルタ、乗算などのブレンド・モード、回転やゆがみなどの変形）
- アニメーション
- 高精度のテキスト描画（ClearTypeを使用したテキスト・レンダリング）
|
【Flashとの比較】
このほかにパフォーマンスを向上させるビットマップ・キャッシュ機能などが搭載されている。 |
“WPF/E”はWPFという充実したグラフィックス・ライブラリのサブセットなので、最終的には“WPF/E”の方が高機能なグラフィックスを表示できるのではないかと期待している。
●メディア・サービス（ビデオやオーディオ関連）
“WPF/E”CTP版では、マイクロソフトが開発したビデオ圧縮技術の「VC1コーデック」に対応している。このVC1コーデックはWMV（Windows Media Video 9）やWMA（Windows Media Audio 9）に採用されており、要するにビデオ（動画）に関しては「.WMVファイル」が、オーディオ（音声）に関しては「.WMAファイル」が扱えるということになる。しかし、“WPF/E”ランタイムに搭載されているビデオやオーディオの再生プレイヤは、WMV／WMA標準の「Windows Media Player」ではなく、独自のものである（※つまりWindows Media Playerのインストールは不要。そのため、ビデオやオーディオをインターネット上で配信する場合には“WPF/E”は非常に手軽な手段となるだろう）。
“WPF/E”専用のメディア・プレイヤは、プログレッシブ・ダウンロードをサポートするだけでなく（＝WMV／WMAコンテンツの配置先はどのようなWebサーバでもOK）、“WPF/E”最終リリース版ではさらにWindows Mediaサービスによるストリーミングにも対応する予定だ（＝WMV／WMAコンテンツの配置先はWindows Media Serverのみ）。ストリーミングでは、もちろんWindows Mediaサービスの特長である「ファスト・ストリーミング」による即時再生／常時再生機能にも対応する予定で、そのほかライブ・ストリーミング（ライブ中継）なども行える。
また、HD映像（720p）*4も再生できるが、ユーザーのコンピュータのCPU性能に依存するので注意してほしい（前述したようにGPUを使わず、メインCPUのみでレンダリングするため）。
なお、実際に“WPF/E”で再生できるWMVやWMAを作成するには、（「Expression Media」に付属する）「Expression Media Encoder」でいったんエンコードを行う必要がありそうだ。これにより、“WPF/E”に最適化したビデオの生成され、クロス-プラットフォームでの観賞が可能になる。
コーデックに関してもコミュニティ・フィードバックの結果によって、ほかのフォーマットを追加する可能性がある。ちなみに最終リリースでは、MP3オーディオもサポートされる予定である。
| *4 HD（High Definition：高精細）形式の映像のこと。720p（720 progressive scan：720本のプログレッシブ走査）は、HD映像の1種で、「解像度が水平画素1280×垂直線数720のプログレッシブ映像」を表す。フレーム・タイプがプログレッシブ走査方式のコンピュータ・ディスプレイと合致するため、コンピュータ上での映像表示に向いている。 |
|
【Flashとの比較】 |
●Ajaxとの連携
“WPF/E”はAjax（ASP.NET AJAXを含む）と連携して両者がお互いにやり取りするための機能が標準で搭載されている。
例えば、Ajaxで表を表示して、“WPF/E”でその表に対するグラフを表示するような連携が考えられる。マイクロソフトのドキュメントを読むと、Ajaxと“WPF/E”の連携を強調しているように見える（恐らく「“WPF/E”はAjaxを否定するものではない」ということを伝えたいのだろう）。
|
【Flashとの比較】 |
●プログラミング・サポート
“WPF/E”では、宣言的なコード部分（主にUI関連）には、次のXML形式のマークアップ言語が用いられる。
- XAML（eXtensible Application Markup Language）
しかし実際にXAMLコードを直接書く必要はなく、何らかの制作環境（詳細後述）を用いてUIを作成することになる。従ってXAMLの書き方を覚える必要はないだろう。ここでは単にそのような言語が使われていることを認識しておくだけでよい（ちなみにXAMLはWPFでデスクトップ・アプリケーションを構築するときにも用いられる）。
さらに命令的なコード部分（主にロジック／アクション関連）には、次の3つの言語がサポートされる予定だ。
- JavaScript
- C#
- Visual Basic
“WPF/E”ランタイムにはCLR（中間言語ランタイム）のサブセットが搭載されており、C#とVisual Basic（.NET言語）で記述したマネージ・コードを実行できる（詳細は次回）。しかし当然ながら、そこで利用可能な.NET Frameworkのクラス・ライブラリは制限されている（制限内容はまだ不明）。
“WPF/E”のプログラミング・サポートにおいては、JavaScript（スクリプト言語）は「スクリプティング・モデル」を実現し、C#とVisual Basic（.NET言語）は「プログラミング・モデル」を実現するとされている。それぞれのモデルの特徴は次のとおりだ。
-
スクリプティング・モデル（スクリプト言語）
→ Web開発者にとって取っつきやすく、これまで経験を生かせる。
→ ガジェットなどリッチ・アイランドの制作に向いている。 -
プログラミング・モデル（.NET言語）
→ デスクトップ・アプリケーションでWPFを活用する開発者向け。
→ パワフルな機能の実装が容易で、パフォーマンスが良い。
なお、現在のCTP版ではまだJavaScriptのみの対応である。
|
【Flashとの比較】 命令的なコード部分（主にロジック／アクション関連）には、次の言語のみがサポートされている。
ActionScriptはWebでよく使われるスクリプト言語の「JavaScript」によく似た言語仕様を持っている。従って、Web制作者／Webプログラマにとっては比較的取っつきやすいだろう。しかしJavaScriptそのものを使う“WPF/E”の方がより取っつきやすいと思われる。 |
C#とVisual Basicといった.NET言語（オブジェクト指向言語）が使える分だけ、“WPF/E”はWeb専門ではない開発者にとって非常に扱いやすい。これまで「Flashで作るのは大変そうだ」と思っていた開発者が、「“WPF/E”ならやってみようかな」と考え始めるかもしれない。そういった意味で、＜Web制作者やグラフィック・デザイナー中心＞のFlashよりも、＜Web制作者やデザイナーだけでなく、一般的なデベロッパーも加われる＞“WPF/E”の方が、制作者ターゲットが広いのは確かだ。
●制作環境
先ほど“WPF/E”の制作環境の話題が出てきたので、ここで制作環境についても比較しておこう。制作者のジャンルごとに次のツールが提供される。
- Web制作者やデザイナー向け：Expression Blend
- 映像クリエイター向け：Expression Media
- 一般的なデベロッパー向け：Visual Studio
これらのツールはいずれも“WPF/E”コンテンツを出力する機能を搭載する予定だ。「Expression Blend」はアニメーションなども定義可能なUIを構築するためのツールで、「Expression Media」はビデオのカタログ管理ツールだ。Visual Studioはいわずもがな.NET開発者向けの統合開発環境である。ちなみに、Expression Blendのアニメーション内で利用する画像は、「Expression Design」で作成することが推奨されている。
|
【Flashとの比較】
「Flash 8 Video Encoder」は先ほども出てきたが「Flash Professional 8」に付属するエンコーダーである。Flashアニメーションで使う画像の作成には、IllustratorやPhotoshopを活用することが一般的だ。 |
制作環境の使い勝手の評判を聞くとFlashに一日の長があるようだが、やはり開発者としては、“WPF/E”でVisual Studioが使えるのが何よりもうれしい。
●コンテンツの配置スタイル
“WPF/E”コンテンツを公開するには、それをWebサーバに単に配置するだけだ。その際、Webサーバは何でも構わない。“WPF/E”CTP版では、その配置形態として、次の3種類をサポートしている。
- HTMLファイル内にインラインで記述した「XAMLスクリプト・コード＋JavaScriptコード」
- 外部に用意した「XAMLファイル（.xamlファイル）＋JavaScriptファイル（.jsファイル）」
- 「圧縮コンテンツ・パッケージ（.wpfeファイル）」
HTMLファイル内に“WPF/E”コンテンツをインラインで記述するには、XAMLスクリプト・コード（＝「<script type="text/xaml" id="任意のID名">」によって記述したコード）をまず記述し、“WPF/E”ランタイムを呼び出す<OBJECT>／<EMBED>タグのSourceElement属性に先ほどのXAMLスクリプト・コードのID名（id属性に指定した名前）を指定すればよい（記述の参考例：「Mike Harsh's Blog : WPF/E Code Walkthrough」）。
外部に用意される「JavaScriptファイル」は、XAMLファイルの、いわゆる「コードビハインド・ファイル」である。
圧縮コンテンツ・パッケージの内容については、次の図のとおり。
 |
| 圧縮コンテンツ・パッケージの内容 |
| 「ストリーミング・メディア」への「参照」の矢印は、外部に置いた映像や音声などのストリーミング・メディア（ビデオや音声）を、XAMLコードから参照してストリーミング再生できるということを意味している。 |
“WPF/E”コンテンツは、基本的に単なるテキストであるXAMLコード（XMLコード）として配置される。これにより、検索エンジンに登録されやすくなる可能性があるという。というのもテキスト形式のファイルなら、検索エンジンが発見、ランク付け、インデキシングが簡単だからだ（もっとも検索エンジンがXAMLコードに対応しなければならいのだが……。もちろん「MSNのLive Search」は真っ先に対応してくれるのだろう……）。
また“WPF/E”の正式リリースでは、先ほども述べたように、JavaScriptだけでなく、C#やVisual Basicで書いたコードをコンパイルしたマネージ・コード（ILファイル。拡張子は「.il」）も、XAMLファイルのコードビハインド・ファイルとして、もしくは圧縮コンテンツ・パッケージ（.wpfeファイル）の中に含めて利用することが可能だ。
|
【Flashとの比較】 |
コンテンツの配置スタイルという観点では、“WPF/E”の方が「柔軟性が高い」といえる。
■
以上、ここまでの内容を一覧表にまとめたので参考にしてほしい。
今回の「【前編】“WPF/E”vs. Adobe Flash、ガチンコ対決！」では“WPF/E”の概要を簡単に説明し、Flashと比較しながら“WPF/E”の機能について解説した。
現時点では、“WPF/E”はFlashに比べ、マルチ・プラットフォーム対応という点ではやはり負けている印象がぬぐえないが、機能性の面では引けを取らないし、プログラミングや制作環境の面に至ってはすでにFlashに勝っているように思える。そういう意味で“WPF/E”は、最も開発者に恩恵が大きい技術となるのではないだろうか。Vista時代を迎え、未来のビジネス・アプリケーションがビジュアル要素を駆使した直感性や使いやすさを獲得していくとするならば、“WPF/E”はそこにあるべき技術となるだろう。
次回の「【後編】“WPF/E”開発を体験してみよう！」では、より内部に視点を移し、“WPF/E”ランタイムの働きについて説明した後、“WPF/E”の開発方法について紹介する。お楽しみに。
 |
 |
| INDEX | ||
| [Insider's Eye] “WPF/E”vs. Adobe Flash、ガチンコ対決！ | ||
| 1．“WPF/E”の概要 | ||
| 2．“WPF/E”とFlashの機能比較（ランタイム） | ||
 |
3．“WPF/E”とFlashの機能比較（機能と制作） | |
| 比較表. “WPF/E”とFlashの比較 | ||
| [Insider's Eye] “WPF/E”開発を体験してみよう！ | ||
| 1．“WPF/E”が動く仕組み | ||
| 2．“WPF/E”の基本的な実装コード | ||
| “WPF/E”のサンプル・コード | ||
| 3．“WPF/E”の開発（Visual Studio編） | ||
| 4．“WPF/E”の制作（Expression編） | ||
 |
||
 |
Insider's Eye |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
