• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

技術者のためのExpression Design入門

第5回 Expression Designで既存の画像素材を利用する

2007/12/14 日経ソフトウエア
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の図(左)と比較しても,きれいに再現されている
[画像のクリックで拡大表示]

ここから先はITpro会員(無料)の登録が必要です。

次ページ ビットマップの画像を埋め込んだイラストをインポー...
  • 1
  • 2

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

  • 【夏休みスペシャル 2017】

    エンジニアが知っておきたい夏バテ撃退法

     暑い日が続く2017年の夏。「夏バテ気味だ」と感じる読者は多いかもしれない。なかには猛暑で体力を奪われ、食欲が落ちている人もいるだろう。そこでこの夏休みスペシャルでは、IT企業でエンジニア向けの保健指導を務める金橋治美氏(保健師)に、夏バテを解消する夏休みの有意義な過ごし方を聞いた。

  • 【夏休みスペシャル 2017】

    屋内トレで夏を乗り切る、無料ヨガアプリの実力

     いよいよ夏休み。ひと息ついて、秋から年末にかけての忙しい時期に備えて、エネルギーチャージをしておきたいところだ。それに向けて大事になってくるのが、体のメンテナンスである。そこで今回は、ストレッチやヨガを自宅で実施するための無料iPhoneアプリから、3つを厳選して紹介したい。

ITpro SPECIALPR

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る