PROJECT KySS(プロジェクト・キッス)。 四国のSOHO。薬師寺 国安(フリーWebプログラマ)と,薬師寺 聖(デザイナ,個人事業所自営,http://www.SeinDesign.net)によるコラボレーション・ユニット。XMLに関する記事や著書多数。両名とも,Microsoft MVP for Windows Server System - XML (Oct 2003-Sep 2008) http://www.PROJECTKySS.NET

 本稿で利用するExpression Design,Expression BlendをはじめとするMicrosoft Expression Studio製品の全機能をインストール後60日間にわたって利用できる「Microsoft Expression評価版」をマイクロソフトのExpression Studioサイトからダウンロードできます。Expression Design/Expression BlendのサポートOSは,Windows Vista,Windows XPService Pack 2です。Windows XP Service Pack 2の場合はインストール前に .NETFramework 3.0をインストールしておく必要があります。Expression Blendで作成したコードを編集するには,Visual Studio 2005がインストールされている必要があります。

 これまでの4回で,Expression Designでの作図を中心に紹介してきた。しかしながら,エンジニアがExpression Designを気に入り,いざ実務で使おうとしても,2つの問題があるのではないだろうか。

 ひとつは,一から作図する場合。本業のプログラミング等が忙しすぎるだろうし,絵が苦手な人もいるだろう。デザイナやイラストレータにExpression Designを勧めて使ってもらえばよいのだが,すぐには難しいこともある。なぜなら,デザイナがExpression Designを新たに習得する時間がなかったり,Expression Designをインストール可能なWindowsマシンを持っていないかもしれないからだ。

 2つ目の問題は,既存の顧客の案件では, Expression Design 登場前から使われていたソフトウェアですでに画像素材が作成されている場合があるということだ。新規案件の場合でもC.I.導入済みの企業であれば,ロゴ・データは,他のソフトウェアで作成済みの可能性が高い。既にWebサイトや印刷媒体で使用されているものは,既存データを利用できなければ,再作成が必要になる。それでは非効率的だ。

 では,どうすればよいかというと,作成済みのデータを, Expression Designで読み込んで利用すればよいのである。通常,ドローデータはIllustratorで作成され,写真はPhotoshopで加工されている。Expression Designは,Illustratorのデータ(aiファイル)のインポートをサポートしているので,何ら問題はない(表1)。

表1●Expression Designのサポートする中間フォーマット
≪インポート形式≫
Adobe Illustrator - PDF 互換(*.ai)
Adobe Photoshop(*.psd)
GIF Decoder(*.gif)
PNG Decoder(*.png)
BMP Decoder(*.bmp;*dib;*.rle)
JPEG Decoder(*.jpeg;*.jpe;*.jpg;*.jfif;*.exif)
WMPhoto Decoder(*.wdp;*.hdp)
TIFF Decoder(*.tiff;*.tif)
ICO Decoder(*.ico;*.icon)

≪エクスポート形式≫
XAML(*.xaml)
PDF(*.pdf)
Adobe Photoshop(*.psd)
TIFF(*.tif;*.tiff)
JPEG(*.jpg;*.jpeg)
BMP(*.bmp)
PNG(*.png)
GIF(*.gif)
Windows Media Photo(*.wdp)

単純なドローデータをインポートする

 では,さっそく, Illustratorからのデータ互換を試してみよう。読み込む側のExpression Designも,Illustrator側についても,特別な設定は行わない状態で,確認してみることにする(注1)。

 まずは,単純なドローデータをインポートすることから始めよう。

 実務では,しばしば印刷物とWebサイトのイメージを連動させることがある。そこで,サンプル・データとして,実際に印刷用に作成した,拙著「XML完全マスター」(メディア・テック発行)のイラストの一部分を使うことにする。Windows XP ProfessionalのIllustrator10jで描いたものだ。それより以前のバージョン(たとえばWindows95版のIllustrator7.0j)のデータを使いたい場合も,新しいバージョンのIllustratorで開いて保存し直せばよいだけだから,別段問題はない。

 さっそくExpression Designを起動し,[ファイル/新規作成]を選択し,任意の新規ドキュメント名とプリセット,解像度を指定する。単位には「ピクセル」を指定しておく(図1左)。そして,「ファイル/インポート」で,Illustratorのaiファイルを指定して読み込んでみる(図1右)。インポートされた絵を,「選択内容」ツールでドラッグ選択して,ドキュメント上の適当な位置に移動させてみた。元のIllustratorの図(図2左)と見比べてみよう。実に,きれいにインポートできている(図2右)。

図1●新規ドキュメントにIllustratorのaiファイルを指定して読み込む
図1●新規ドキュメントにIllustratorのaiファイルを指定して読み込む
[画像のクリックで拡大表示]

図2●右がExpression Designにインポートした画像。元のIllustratorの図(左)と比較しても,きれいに再現されている
図2●右がExpression Designにインポートした画像。元のIllustratorの図(左)と比較しても,きれいに再現されている
[画像のクリックで拡大表示]