Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

デザインツールの進化
― Expression Blend 3入門

Silverlight3徹底入門(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 Expression Blend 3はSilverlight 3のデザインやデザインプロセスを、効率よく進めることができるデザインツールです。今回はExpression Blend 3の新機能にフォーカスし、新たに追加された機能とその使い方について触れていきます。

目次

はじめに

 Silverlight はテキストエディタとSilverlight SDKさえあれば開発を行うことができます(どちらも無料で手に入ります)。ただし、視覚的な画面のデザイン、再利用可能なコントロールの作成、アニメーションを使った表現、他のデザインツールとの連携、チーム開発などを行う際はそれにあったツールを使うことが望ましいでしょう。

 Expression Blend 3はSilverlight 3のデザインやデザインプロセスを、効率よく進めることができるデザインツールです。今回はExpression Blend 3の新機能にフォーカスし、新たに追加された機能とその使い方について触れていきます。

対象読者

 Silverlightに興味を持っている方。

Expression Blend 3 の新機能

 Silverlight 3と同時期にリリースされたExpression Blend 3は、XAMLのインテリセンスサポートやデザイン時のデータバインドのサポートなどのデザイン機能の強化に加え、表1の新機能が追加されています。

表1 Expression Blend 3で追加された新機能
機能名 概要
スケッチフロー 画面デザインや画面遷移を検証しながらアプリケーションのプロトタイプを開発するための機能。
ビヘイビアー 動画の再生などインタラクティブな動作を、コードを記述せず操作するためのコンポーネント。
デザインファイルのインポート Illustrator(ai)、Photoshop(psd)、PowerPoint(pptx)などのデザインファイルをインポートしてデザインの効率をアップする機能(※PPTX 形式のインポートは、スケッチフロープロジェクト時のみサポート)
Team Foundation Serverへの接続 Microsoftのチーム開発用サーバーに接続し、Expression Blendからソース管理を利用する機能

 Visual Studio 2008のSilverlight開発用の拡張機能であるSilverlight 3 ToolsでXAMLのデザイナーサポートが公式にはなくなってしまいました。このためデザイン時のXAML画面のプレビューやデザインにはExpression Blendが必須になります。Visual StudioでのXAMLデザイナーサポートは次バージョンであるVisual Studio 2010で予定されています。

WebsiteSparkプログラム

 2009年9月24日 MicrosoftはWebサイトを作成している会社向けにWebsiteSparkプログラムを発表しました。このプログラムは従業員数25人以下の企業に対し、Windows Web Server、SQL Server、Visual Studio、Expression Web、Expression StudioというWebサイトを構築するツールを3年間無償で利用できるライセンスです。しかもサーバー製品は開発のみでなく本番環境でも利用できる4プロセッサーライセンスです!

 

 WebsiteSparkプログラムについての詳しい解説はMicrosoftのWebページを参照してください。また、Microsoftの副社長であるScott Guthrieのブログでも同様にWebsiteSparkについてのポストが公開されています。Scottのブログは@ITで翻訳されていますのでこちらも参照してみるといいでしょう。

 

デザインファイルのインポート

 これまでは画面のデザインを発注した場合、第1案をAdobeのPhotoshopなどのデザインツールでデザインし、そのデザインをもとにXAMLなどを書き起こす開発が主だったのではないでしょうか。

 Expression Blendでは、Illustrator、Photoshop、PowerPointなどのツールで作成したファイルをインポートし、レイヤー情報などを保持した状態でXAMLに変換することができます。ただしPhotoshop形式以外では次の制限があるので注意してください。

  • Illustrator(ai)形式のファイルは、Illustrator10以降でサポートされたPDF互換ファイルとして作成されているものに限りインポート可能です。
  • PowerPoint(pptx)形式はスライドを一枚のPNGファイルとして扱い、スケッチフロープロジェクト時のみの利用できます。また、Office 2007以降の形式(pptx)である必要があります。

 インポートしたファイルは簡単にカスタムコントロールに変更することが可能です。

 では、Adobe Photoshop形式のファイルをインポートして、ボタンを作成してみましょう。なお今回はサイトのデザインをPSDとして無料でダウンロードできる「Best of FREE PSD Templates」から、画面素材を拝借しました。素材提供者に感謝します。

1. インポートの開始

 Expression Blendの[ファイル]メニューからAdobe Photoshopファイルのインポートを選択します(図1)。

図1 インポートの開始
図1 インポートの開始

2. 素材を選択

 ファイル選択ダイアログから、Expression Blendに取り込むPSDファイルを選択します(図2)。

図2 素材を選択
図2 素材を選択

3. レイヤーの選択

 インポート対象のPSDに含まれるレイヤーをどのようにインポートするかを指定します(図3)。

図3 レイヤーの選択(PSDのレイヤーはXAMLのCanvas要素として取り込まれます)
図3 レイヤーの選択(PSDのレイヤーはXAMLのCanvas要素として取り込まれます)

4. 素材からコントロールの作成

 ボタンにしたいレイヤー(この場合Logo)を選択し、コンテキストメニューからコントロールの作成を選択します(図4)。

図4 素材からコントロールの作成
図4 素材からコントロールの作成

 この手順で、単なる画像の一つだったロゴが、Silverlightのカスタムボタンとして再構成されました。作成したボタンはほかのSilverlightコントロールと同様XAMLで属性や要素を指定したり、C#から操作したりすることができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2009/12/16 15:05 PSD互換→PDF互換

  • 2009/12/16 15:02 PSD互換→PDF互換

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:Silverlight 3徹底入門

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5