SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 3徹底入門

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

Silverlight3徹底入門(3)


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

 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#から操作したりすることができます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ビヘイビアー

修正履歴

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Silverlight 3徹底入門連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4573 2009/12/16 15:05

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング