プロトタイピングツールSketchFlowを用いた、Silverlightアプリ開発

第1回SilverlightとSketchFlowの紹介

みなさんこんにちは。この連載では、昨年に発売されたExpression Blend 3 の新機能で話題になっているSketchFlowを使ってどのようにアプリケーション開発が発展していくのか、実際にSilverlightアプリケーションを作成する過程を見ながら紹介してきます。

SketchFlowを利用することで今までの開発がどの様に効率化でき、Silverlightアプリケーションの開発へつなげられるのか。また、長年RIA開発を行ってきたセカンドファクトリーではどの様にSketchFlowを利用しているのか、実体験からの考察も交えながら解説していきます。

Silverlightことはじめ

現在、最新バージョンであるSilverlight 3がリリースされています。様々なアプリケーションが生み出されてきており、以前に比べ豊富な情報を入手することができるようになりました。ここでは、簡単にSilverlightについてご紹介していきます。

これまでの歴史

Silverlightとは、マイクロソフトが開発したクロスブラウザ、クロスプラットフォームで動作するWebブラウザプラグインベースのRIA(Rich Interactive Application)の実行環境です。競合技術としてAdobe社が開発しているFlashが挙げられます。

Silverlightの前身は、Windows Presentation Foundation(WPF)を様々な環境で実行する理念のもと、WPF/E(EはEverywhereを指す)と呼ばれていました。その後、Silverlightと名称が変わり、2007年9月に1.0がリリースされます。1.0では実装はJavaScriptベースであり、主にDRMのメリットを生かせる動画再生メインとしたエンタテイメント色の強いコンテンツが主流でした。さらにSilverlightがダブルバイト文字をサポートしていないなどの制限が多く、アプリケーションの開発環境としては不十分なものでした。

次のバージョンである2がリリースされたのは2008年10月になります。このバージョンから数値の表記から".0"が外されています。2で共通言語ランタイム(CLR)と動的言語ランタイム(DLR)でのプログラミングに対応します。ダブルバイト文字に対応し、大幅に標準コントロールが追加され、WPFにほぼ同じ感覚で開発ができるようになりました。アプリケーションの開発環境として必要最低限のものがそろったのはバージョン2といえるでしょう。

そして現行のバージョン3となります。3のリリースは2009年7月です。ブラウザ外実行は擬似3D表現などが新機能として追加されています。また、2009年11月には次期バージョンの4が発表されているという状況です(4の解説は後ほど行います⁠⁠。

このようにバージョンが上がるにつれ、Silverlightの開発は飛躍的に進歩を遂げています。Silverlight 4の正式リリースはこれからとなっていますが、Silverlight 4 Betaが発表され、その期待はますます高まってきています。

ここで、Silverlightとして主な特徴としていくつかの項目にまとめました。

Silverlightの主な特徴

クロスブラウザ、クロスプラットフォーム

OSでは、Windowsはもちろんのこと、MAC OS Xもサポートし、ブラウザはIE、FireFox、Safariで表示することができます。またLinuxでは、Moonlightというオープンソースプロジェクトで実装が進められています。

様々な言語で開発

Silverlightで使うことができる言語は、CLR(C#やVB.NETなどの共通言語ランタイム環境⁠⁠、DLR(IronRuby, IronPython, Managed Jscriptなどの動的言語ランタイム環境)など、多くの言語で開発することができ、それまでのプログラミング知識を活用することができます。特に.NETの開発経験がある方は、使い慣れたVisual Studioで開発できますので、スムーズに始められるでしょう。

デザインとロジックの分離

XAML(eXtensible Application Markup Language:ザムルと呼びます)を使うことで、デザインとロジックを分離した開発ができます。一般的に画面上のコントロールは1部品ごとにXAML+コードビハインドの対で構成されます。

一般的にはXAMLには画面レイアウト、画面要素のデザイン、そしてアニメーションといった、表層にかかわる部分を定義することができます。

デザイナーはExpression Blendを使い、画面レイアウトや画面要素のデザイン、アニメーションを定義します。それに対しデベロッパーはVisual Studioを使い、データの取得や表示といったアプリケーションの動作に必要な処理をコードビハインドに記述します。ファイルが分かれていることで、同時編集もできるため、デザイナーとデベロッパーの分業も容易です。

多くの標準コントロール

Silverlightには、ボタンやリストなどの標準コントロールが多く用意されています。これらのコントロールを利用することで作業効率を高めることができます。さらにCodePlexで公開されているSilverlight ToolKitをインストールすることで、利用できるコントロールを追加することができます。

多彩な表現力

Expression Blendを使うことで、コントロールへのデザイン適用も容易に行うことができます。そのほか、画面要素へドロップシャドウなどのエフェクト効果、3D効果を適用でき、広い表現の幅を提供しています。

実際のところ、これらの主な特徴はバージョン2から実現されていました。バージョン3および4では、2つの方向から改善が施されています。1つ目は更なる表現力の向上として、ブラウザ外実行など、実現できることの幅が広げること。そして2つ目はアプリケーション開発基盤としての整備です。Silverlightの兄貴分に当たるWPFでの開発と比べた場合、XAMLやC#、VB.NETを使った開発という所は同じでも、細かく見た場合にプログラムの書き方、コントロールの持つメソッドやプロパティというところは微妙に異なることがありましたが、WPFとSilverlightでプログラミング資産を共有化することが、徐々にできるようになっています。

最新情報(Silverlight 4)

現在、次期バージョンであるSilverlight 4 betaが公開されています。今後、Silverlightアプリケーションを開発していく上で、見逃せない新機能や改善ポイントを簡単に紹介します。

  • プリンタのサポート
  • Rich Text Areaのサポート
  • 各種コントロール追加
  • Commandのサポート
  • クリップボードのサポート
  • 右クリックのサポート
  • カメラ・マイクのサポート
  • 標準コントロールのマウスホイールサポート
  • Out-of-Browserの信頼実行モードのサポート
    • ローカルのファイルの読み書き
    • COM Automationサポートでほかのアプリケーションと連携でき、Officeアプリの操作などが可能

上に挙げたのはほんの一部ですが、Silverlight 3に比べ、表現力の向上はもちろんのこと、アウト・オブ・ブラウザでのローカルファイルアクセスや、COMを利用したOffice製品との連携など、ビジネスアプリとしてSilverlightを使用することを強く意識した内容になっています。Silverlight 3まででは実現できなかったことや、実現するために複雑なプログラミングをしなければいけなかったことが、4で一気に解決できそうです[1]⁠。

余談ですが、英語版Silverlight公式サイトではいくつか事例が紹介されています。このリストは新着順に並んでいますので、初期の映像配信にフォーカスしたコンテンツから、現在の高機能なアプリケーションへと、Silverlightコンテンツの移り変わりを感じることができます。

図1 英語版Silverlight公式サイトのShowcase
図1 英語版Silverlight公式サイトのShowcase

開発環境の準備

それでは、次回でSketchFlowを使ったサンプルを解説していきますが、その前に環境を整備しておきましょう。

前項「デザインとロジックの分離」で挙げましたが、Silverlightの開発環境にはVisual Studio 2008とExpression Blend3の2種類のツールを使用します。

初めてSilverlightを試したいという方は、以下のような組み合わせで無償の環境を構築することができます。

画像

各インストーラーのダウンロードURLは以下のページにまとめられていますので参考にしてください。

SketchFlowとは

ここまでで、Silverlightについて紹介してきましたが、この連載の主役となるSketchFlowについての特徴を見ていきます。SketchFlowとは、Expression Blend 3で搭載されたプロトタイプ開発機能です。画面間の遷移やアニメーションの定義をGUI上で行えるため、ワイヤーフレーム状態で素早く動くものを簡単に作成し視覚的に確認することができ、クライアントとの意思疎通をスムーズにすることができます。

図2 SketchFlow
図2 SketchFlow

以下に、SketchFlowの主な特徴を挙げます。

手書きのようなワイヤーフレームスタイル

ワイヤーフレームにデザイン要素が入ってしまうと、クライアントとの意思疎通で誤解を生じることがあります。それを防ぐため、手書きで書いたようなスタイルが搭載されています。

SketchFlow マップ パネル

ワイヤーフレームを作成した場合、画面遷移図を別途作成することはよくあることだと思います。SketchFlowマップパネルでは、画面遷移図を描きながら必要な画面を随時追加することができます。

プログラミングすることなくモックアップを作成

実際に操作した感覚をつかむため、ワイヤーフレームが簡単に切り替わるだけのモックアップを作る場合があります。このときSketchFlowであれば、画面遷移やアニメーションをする程度のモックアップならばプログラミングなしで作成できます。また、ドラッグ&ドロップなどの特殊な振る舞いも、ビヘイビアを組み合わせて実現できます。必要であればカスタムビヘイビアをプログラミングすることで、独自の振る舞いも表現できます。

SketchFlowプレーヤー

SketchFlowタイプのプロジェクトをビルドした場合、SketchFlowプレーヤー形式で実行ファイルが生成されます。SketchFlowプレーヤーでは、実際にワイヤーフレームを操作して、画面遷移の動作を確認することや、SketchFlow マップから目的の画面を表示することができます。同時に、コメントの記入や手書き入力ができ、その情報は.feedbackファイルとして保存することができます。これを利用し、作成したSketchFlowプレーヤーファイルをクライアントに渡し、フィードバックファイルを返送してもらう、といった使い方が想定できます。

ドキュメントの出力

SketchFlowで行った作業を最終的にWord形式のドキュメントに出力することができるので、プロジェクトの成果物の1つとすることができます。

プロトタイププロジェクトへの変換

SketchFlowプロジェクトも、基盤は通常のWPFやSilverlightプロジェクトと変わりはありません。プロジェクト設定ファイルの編集やライブラリの追加削除をすることで、SketchFlowでの成果をプロトタイプ開発に活かすことができます[2]⁠。

第1回は事始めとして、SilverlightとSketchFlowの特徴を紹介していきました。第2回からは、SketchFlowを中心にサンプルを作成しながら解説していきます。実際に動かしながら使うことで、開発現場においての新たな広がりや、逆に機能として物足りないと感じる部分も出てきます。そういったところも踏まえ、セカンドファクトリーでの活用例もご紹介していきます。

おすすめ記事

記事・ニュース一覧