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

第1回 SilverlightとSketchFlowの紹介

この記事を読むのに必要な時間:およそ 3 分

みなさんこんにちは。この連載では,昨年に発売された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)⁠

※1
開発環境の関係上,本連載のサンプルはSilverlightバージョン3で解説していきます。

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

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

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

著者プロフィール

杉下高仁(すぎしたたかひと)

Flash3から携わるインタラクションデザインの経験を生かし,2001年セカンドファクトリーに参加。創業期(本人は在学中)よりアルバイトとして現場に関わっていたこともあり,アプリケーション開発に対する UXの重要性をリアルに感じてきた。入社後インタラクションデザイナーとして業務を行う傍らソフトウエア開発 のノウハウを学び,双方の視点からクライアントを真に満足させることをポリシーとして現場を牽引する。

資格として,経済産業省認定テクニカルエンジニア(情報セキュリティ),経済産業省認定ソフトウエア開発技術者,Microsoft MVPなど多数保有。

URLhttp://www.2ndfactory.com/


落合健太郎(おちあいけんたろう)

在学中に情報の視覚化とインタラクションデザインについて研究し,多摩美術大学情報デザイン学科情報デザインコース卒業後,知識だけではなく実際のアプリケーション開発に生かしたいと,2007年セカンドファクトリーに参加。

UIの可能性を最大限発揮すべく,入社後はテクノロジーの領域を限定せず,製品プロトタイプや,デバイス向けUI等,デザインとシステムの融合が強く求められる案件に従事。今後の開発には欠かせないインタラクティブな操作を実現できる技術者として活躍中。

URLhttp://www.2ndfactory.com/
Twitter:http://twitter.com/nxxdle

コメント

コメントの記入