Insider's Eye

“WPF/E”開発を体験してみよう!

デジタルアドバンテージ 一色 政彦
2006/12/21


6. “WPF/E”の制作(Expression編)

 グラフィック・デザイナーや映像クリエイター向けのツールであるExpressionの使い分けは、前回でも示したように、次のようになっている。

 しかし、どちらのツールもまだ“WPF/E”コンテンツを出力できないようである。現時点では、グラフィック・デザイン・ツールであるExpression Designのみが“WPF/E”コンテンツ(のXAMLファイル)を出力できるようなので、本稿ではこれを使って“WPF/E”コンテンツの制作を試してみることにしよう。

 なお筆者の欲をいえば、“WPF/E”専用のExpression制作環境がほしい。現在の制作環境はいずれも、WPFなどほかの制作環境のおまけとして出力できるのみだからだ(制作環境が分かりにくいという声もある)。

“WPF/E”CTP版SDKでの制作イメージ(Expression編)

 まずはExpression Designを使ってUIを制作する。次の画面の例では、パスや円などによって「クマ」の絵を描いたところだ。

ExpressionによるUIの制作
この絵はすべてパスや円などによって描かれている。なおこの絵自体は、Expression Designに付属するサンプルを拝借している。
Expression Designはグラフィック描画ツールであるため、単に絵が描けるだけで、ボタンやテキストボックスといったコントロールの配置などには対応していない。また、コードビハインド・ファイルにも対応していないので、イベント・ハンドラの追加などもできない。

 UIが完成したら、XAMLファイルとしてエクスポートを行う(具体的にはメニュー・バーから[File]−[Export]−[XAML]を選択する)。[Xaml Export]の出力オプションの画面で、ドキュメント・フォーマット(Document Format)として「WPF/E」を選択してエクスポートを行う。

“WPF/E”コンテンツの出力
XAMLファイル(CuteBear.xaml)をエクスポートする。

 出力したXAMLファイルを“WPF/E”コンテンツとして実行すると、次の画面のようになる。

制作した“WPF/E”コンテンツの実行

 以上、Expressionで制作した“WPF/E”コンテンツを次の.ZIPファイルにまとめた。

7. “WPF/E”の運用

 最後に“WPF/E”の運用について簡単に触れておこう。

 “WPF/E”コンテンツを活用したWebサイトを運用するには、前回でも説明したように、単にWebサーバにファイルを配置するだけでよい。しかもWebサーバの種類を選ばない。

 しかし、そのWebサーバにおけるXAMLファイルの取り扱いには注意しておく必要がある。XAMLファイルは拡張子が「.xaml」であるため、Webサーバによってはアクセスが制限される可能性があるからだ。

 実際にそのような問題が発生する場合には、「.xaml」拡張子に対するMIMEタイプを「text/xml」にしなければならない。MIMEタイプの設定方法に関しては、「ClickOnceの真実」という記事の「実運用ポイント1:Webサーバへの配置」という項目が参考になるだろう。

 以上、2回にわたって“WPF/E”の内容についてざっと見てきたが、その特徴や開発/制作のイメージをつかんでいただけただろうか。“WPF/E”コンテンツを実際に作り始めるにはまだ早すぎる段階だが、本稿で興味を持たれた方がいれば、ぜひおもしろいコンテンツの制作にトライしていただきたい。End of Article

 

 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


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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH