■Expression Designで,XAMLの手書きを省力化する
Expression Blend 1.0正式版は,Silverlightコンテンツ作成には対応していません。Blend 2.0はPreview版なので,作業環境によっては,インストールできない場合もあるでしょう(筆者もです)。
そこで,Expression Design 1.0(SP1)とExpression Blend 1.0と,Internet Explorer,行番号表示機能のあるテキストエディタで,つまりExpression Blend 2.0 Preview版は使わずに,サンプル「Silverlightもみじ」のようなアニメーションを作成する手順を説明します(実際に,この環境で作成しています)。
※動作させるには,ローカルマシンに,Silverlightプラグインをインストールしておく必要があります。
※Webサーバにアップロードしてテストするには,MIMEタイプの追加設定が必要です。
少なくとも,Expression Design(SP1)は,Silverlight用XAMLのエクスポートに対応しているため,元となる図形のXAMLコードを,1から手書きすることだけは避けられます。
Silverlightアニメーションは,手入力でXAMLを作成するか,あるいは,本来は,Blend 2.0を使って実装すべきものです。本ページの情報は,あくまで,テストしたいエンジニア向けです。XAMLコードの1からの手書きは省力化できますが,XMLに関する基礎知識は必要です。
したがって,本件への質問は受け付けていません。各自の責任で試して,調べてください。
■作図〜アニメーションの作成〜ローカルテスト〜公開
(1) Expression Design(SP1必須)でアニメーションのもとになる絵を描きます。描けたら,XAML形式でエクスポートします。このとき「出力の種類」には「Silverlightキャンパス」を指定します。
※作図手順については,
「技術者のためのExpression Design入門/第2回」を参照してください。
※絵が苦手で,自分で元の絵を作成できない場合は,デザイナやイラストレータにIllustratorファイルを作ってもらって(あるいはフリーのものを見繕ってもらって),インポートするという方法があります。この手順についても,
「技術者のためのExpression Design入門」に記事が載りますので,そちらを参照してください。
(3) アニメーションを読み込んで動かすためのHTMLファイル1個とJavaScriptファイル2個を用意します。
※この手順は,
Microsoft内のWebページに載っていますので,そちらを参照してください。
(4) Expression Blend 1.0で作成したWPFアニメーションのコード(デフォルトのままのファイル名であればWindows1.xaml)を開き,下記のようなSilverlightアニメーションの基本コード中に,必要個所をコピー&ペーストします。
(5) コピーできたら,用意したHTMLファイルをテキストエディタで開き,呼び出しているJavaScriptのイベントプロシジャを確認します。<script type="text/javascript">〜</script>内にある,hogehoge();が,それです。用意したJavaScriptは2種類のうち,このhogehoge(); がある方のスクリプトファイルをテキストエディタで開き,Silverlightアニメーションに付ける任意のXAMLファイル名を書いておきます。
function hogehoge()
{
Silverlight.createObject(
"Silverlightアニメーションに付ける任意のXAMLファイル名",
(6) コピー&ペーストして作成したアニメーションのコードを,いま付けたファイル名の,拡張子を(*.xamlではなく)「*.xml」に変えた形で保存します。それは,整形式XML文書になっているかどうか,IE等で開いて,一度確認するためです。アニメーションのコードは長いので,XML初心者がコピー&ペーストすると,開始タグと終了タグが合っていないなどの不整合の起こる可能性があるからです。
(7) 整形式XML文書になっていれば,拡張子を「*.xaml」に変更します。
(8) HTMLファイルをダブルクリックして実行します。ローカルマシンのSilverlightプラグインで動かすことになります。
(9) WPF利用のコードを,Silverlightとして動かそうとしているわけですから,当然,エラーが出ます。実行すると,エラーの詳細が表示されますので,XAMLコードを修正します。たとえば図のようなエラー表示からは,「Canvas要素にはMargin属性は使えない」こと,それがXAMLコードの「216行目の80文字目」で発生していることが分かります。
(10) 行番号表示機能のあるテキストエディタでXAMLファイルを開き,エラーの発生している箇所を削除します。同様の箇所(後の兄弟要素の同一属性)も削除し,再度実行します。また,エラーが発生するかもしれません。同様の手順を繰り返します。単なる座標値移動のアニメーションであれば,削除だけで動くと思われます。
ただし,図形の表示と非表示を頻繁に切り換えるなどの動作を含むアニメーションは,ベンダのサイトの技術情報(XAMLの構造)を調べて階層や要素や属性を変更するか,あるいは,一部の機能を,XAML側ではなく,JavaScript側で実装しなければ動かないようです。しかし,XAMLを手書きするのが面倒だから省力化したい!という理由から,このページを書いているのですから,作業時間がかかるのでは本末転倒です。Blend2.0正式版を待ちましょう。
(11) なお,Webサーバから発信するには,MIMEタイプの設定(IISマネージャで,拡張子xamlに対して,「application/xaml+xml」を追加登録)が必要になります。「ローカルマシンでは,MIMEタイプを設定していないのに動いているではないか?」と思われるかもしれません。では,ローカルマシンのIISを確認してみてください。VISTAマシンでは,デフォルトで,このMIMEタイプが設定されています。
※Web制作を始めた当初,手入力で作成したWorldファイル(VRML1.0)の送り出し設定を,Mac版のFetchで確認できたような記憶があります。レンタルサーバでも設定できているかどうかの確認だけなら,できるのかもしれません(記憶が定かではありませんが)。