「Visual Studio プロフェッショナルセミナー」詳細レポート

デザイナー×開発者で生まれるRIAの理想形

2009年03月11日 10時00分更新

文● 企画報道編集部　撮影●パシャ

初体験のSilverlight開発も二人三脚で乗り切れ！

　神原氏の講演の後は、いよいよワークショップ本番だ。今回のワークショップは、「デベロッパーとデザイナーの二人一組のチーム」が参加条件。実際に1つのアプリケーションを共同で作り上げる作業を通じて、Silverlight開発の特徴である“協業のしやすさ”を体験してもらうのが狙いだ。


課題を発表する女優・松木里菜さん（中央）。左はサポート役であり、今回の課題の作成も担当したフリープログラマー岩井雅幸氏。右はマイクロソフトの神原氏

　課題は、Silverlightを使った「手書きのメッセージボード」アプリの制作とされた。パレットからペンやスタンプの種類を選んで、キャンバス上にマウス操作で自由に絵を描けるアプリケーションだ。冒頭、発注者役の松木里菜さんが「ポップでかわいい明るいメッセージボードを作っていただけたらうれしいです。また、私は犬を飼っているので、犬の絵などを使っていただければ」とオーダー。あらかじめ用意されているプログラムとデザインのひな形（プロジェクトファイル）をベースに、リクエストに沿ったアプリの完成を目指して、90分間の実作業がスタートした。


ひな形となるメッセージボードアプリ。白いキャンバスの右下をクリックするとパレットが出現。ペンやスタンプを選んで書き込みができる。この状態からどこまで松木さんの希望に沿ったものに作り替えられるかが、腕の見せどころ


終始息の合ったコラボを見せていたアイ・エンターのお二人。デベロッパーの佐竹裕希子さん（左）、デザイナーの安藤利江さん。普段は企業向けシステムの開発に従事しているという佐竹さんは、慣れた様子でVisual Studioを使いこなしていた。一方の安藤さんの普段のお仕事は、Flashを使ったWebサイトのデザイン。Expression Blendは初体験だ

終始息の合ったコラボを見せていたアイ・エンターのお二人。デベロッパーの佐竹裕希子さん（左）、デザイナーの安藤利江さん。普段は企業向けシステムの開発に従事しているという佐竹さんは、慣れた様子でVisual Studioを使いこなしていた。一方の安藤さんの普段のお仕事は、Flashを使ったWebサイトのデザイン。Expression Blendは初体験だ


オノフのデザイナー千田岳大さん（左）とデベロッパー吉川武志さん。大手広告代理店からプロモーション系サイトなどを受注しているというお二人は、「Silverlightの案件の引き合いが出始めたこともあり、情報収集を兼ねて参加しました」（吉川さん）とのこと


フリーランスのデベロッパー金野邦明さん（左）と、メディックスのデザイナー古市哲也さんの二人は今回が初コラボながらも、コミュニケーションをとりながら楽しく作業していた

　ワークショップの参加者6名は、いずれも現役のプロのデベロッパー／デザイナーたち。とはいえ、Silverlightアプリの開発は全員が初めてということもあって、開始直後は少々苦戦気味の様子だった。「Visual Studioは普段から使っているが、Sivlerlightの“からくり”を理解するまでにちょっと時間がかかってしまった」とはフリーランスのデベロッパー・金野邦明さんの弁。ペアを組むデザイナーの側は、「初めて触ったので使いたい機能を探すにも一苦労」（オノフのデザイナー、千田岳大さん）と、未経験のオーサリングツール「Expression Blend2」の操作を覚えるまでが大変だったようだ。


進捗状況をたずねる松木さん。デベロッパーの金野さんが「背景を自由に変更できると楽しいと思うんですが」とアイデアを披露すると、「好きなものにできるのはいいですね」と応じていた

　それでも、ワークショップの後半にもなれば各チームとも急ピッチでの追い上げに成功したのは、何よりデベロッパーとデザイナーとのコラボがうまくいった証。分からないところは同じチーム内で声を掛け合って相談したり、はたまた他のチームの様子を見に行ったりと、コミュニケーションを活発にとりながら、ツールの使い方をしっかりマスター。課題の作成を担当したフリープログラマーの岩井雅幸氏とマイクロソフトの神原氏によるサポートもあって、「メッセージボードアプリ」は完成に向けて着実に進んでいった。

⇒ワークショップ前半を動画で見る

課題の発表から各チームの作業中の光景まで、ワークショップの前半部分の様子を動画（WMV形式／約11分／41.7MB）で見られます。Windows Media Playerでご覧ください。

デベロッパーとデザイナー
2人のコラボを生み出す2つのツール

　今回のワークショップの課題であるSilverlightアプリの開発スタイルの特徴は、以前にも紹介しているが（関連記事）、改めてここで簡単に触れておこう。カギとなるのは、「Visual Studio 2008」と「Expression Blend 2」という2つのツールだ。

　Visual Studio 2008は、Windowsアプリケーションの開発でもおなじみの統合開発環境（IDE）の最新版。これに、「Silverlight Tools」というアドオンを入れると、Silverlight 2に対応したアプリケーションの開発が可能になる。

　一方のExpression Blend 2は、デザイナー向けのオーサリングツールツール。ベクター画像を配置してUIをデザインしたり、タイムラインでアニメーションの編集ができる。


同じプロジェクトをExpression Blend 2（左）とVisual Studio 2008（右）で開いたところ。どちらか一方のアプリで変更して保存すると、同時に開いているもう一方のアプリの画面もリアルタイムに更新される

　この2つのツールは同時並行して使うことでき、デザイナーがExpression Blend 2で作ったUIをすぐにデベロッパー側のVisual Studio 2008に反映させることが可能だ。これは、SilverlightがUIをXMLベースの「XAML」で、ロジックをVisual Basic/C#、JavaScriptなどで記述するという具合に、デザインとロジックを分離しているためだ。今回のワークショップでも、サーバー上に置いてある同じプロジェクトファイルをデベロッパーとデザイナーがそれぞれのアプリから同時に開いて作業を進めた。リアルタイムに互いの進捗をチェックすることで、効率的に制作作業を進めることができたようだ。

前へ 1 2 3 次へ

ツイートする