NetAdvantageとSilverlight 4の最新機能で作るTwitterクライアント

インフラジスティックス・ジャパンは4月15日、.NET 開発者のため無償セミナー「Developer Days 7(以下、DevDays7)」を開催した。Developer Daysは、日本におけるUX(User eXperience)向上を目指し、インフラジスティックスやマイクロソフトのエバンジェリストをはじめとした各方面の識者を講師に招いて開催されている技術セミナー。特にマイクロソフトによるVisual StudioやSilverlight、WPFの最新技術動向や、それを活用したUX向上手法などを紹介するセッションが行われている。

第7回目である今回は、正式公開が間近に迫ったMicrosoftのRIAプラットフォーム「Silverlight 4」や統合開発環境「Visual Studio 2010」などに関する最新技術情報を含む内容となり、開発者の注目を集めた。本稿ではそのうち、インフラジスティックスのコンポーネントスイート「NetAdvantage for Web Client」の活用術を紹介した、同社デベロッパーエバンジェリストの山田達也氏によるセッションの内容をレポートする。

なおSilverlight 4は翌日の16日に正式公開され、Visual Studio 2010は日本語版が4月20日から提供される予定となっている。

Silverlight 4時代のNetAdvantage

インフラジスティックスの「NetAdvantage for Web Client」は、ASP.NET AJAXおよびSilverlightに対応したコントロールを含む、RIA開発用のツールスイート製品である。山田氏はDevDays参加者へのアンケート集計結果をもとにSilverlightの需要が増していることを指摘、その波がSilverlight 4の登場によってさらに加速するだろうと予測している。

特にSilverlight 4ではブラウザ外でのアプリケーション実行の機能が大幅に強化されており、対応プラットフォームもWindows PCだけでなくIntel版のMac OS Xや、今後登場する予定のWindows Phoneなどに広がっている。APIの面でも、IME制御や右クリックのサポート、印刷APIの追加、クリップボード活用の強化など、従来バージョンで望まれていた多くの機能が新たに追加されているという。

そんな中、インフラジスティックスではNetAdvantage for Web Client 2010 Volume.1(次期バージョン、以下NetAdvantage 2010.1)のリリースと同時にSilverlight 4対応版を提供する予定とのことで、山田氏によるセッションはこのNetAdvantage 2010.1とSilverlight 4をの活用例としてTwitterクライアントを作成するという内容だった。

Twitterクライアント作りで学ぶNetAdvantage新機能

山田氏はサンプルとして作成するTwitterクライアント(NATwitter)のユースケースを図2.1のように定義した上で、セッションではそのうちのUI部分に深く関連する「閲覧」「効率良く閲覧」「検索」について、NetAdvantageおよびSilverlight 4を活用してどのように開発するかを紹介した。

Twitterクライアントを作る場合、Twitter APIを介してTwitterの各機能にアクセスすることになる。NATwitterはブラウザ外で実行できるクライアントアプリケーションとし、さらにオフライン状態でもログ等の利用できるようにしたとのこと。これはSilverlight 4のブラウザ外実行機能を活用することで実現できる。UI関連部分では、実装のポイントとして以下の4点を挙げている。

1. データ(Tweet)をどうやって表示するか
2. メニューやダイアログはどうするか
3. データ視覚化の方法
4. その他のユースケースへの対応

山田氏は、各ポイントにおいて活用できるSilverlightおよびNetAdvantageのコントロールを取り上げ、特にSilverlight 4対応で実現した新機能を活用した実装について、デモを交えて紹介している。たとえば1つ目のポイントであるTweetの表示部分については、次のようなコントロールが候補として挙げられるという。

• データグリッド(xamWebGrid) - データをグリッド状に表示するビューで、大量のデータの扱いに長けている
• ツリービュー(xamWebTree) - データを階層構造で表示するビューで、ロードオンデマンドでの表示が可能
• タイルビュー(xamWebTileView) - データをタイル状に展開するビューで、情報の視認性がよくインタラクティブな操作が可能

以下の図はxamDataGridを利用したTweetの表示例である。NetAdvantage 2010.1ではフィルター機能が強化されており、特定の条件のTweetのみを表示するなどの操作が容易に実現できるという。そのほかにも条件フォーマットやアンバウンド列、列テンプレートなどといった新機能が追加されているため、大量のTweetデータをユーザの望む形で表現することが可能とのことだ。

2つ目のポイントであるメニューやダイアログに活用できるコントロールとしては、以下の候補が挙げられている。

• メニュー(xamWebMenu) - 標準的なメニュー
• Outlookナビゲーション(WebOutlookBar) - OutlookスタイルのUX
• リボン(xamWebRibbon) - Windows 7 Scenic RibbonスタイルのUX
• ダイアログ(xamWebDialogWindow) - 汎用ダイアログ

このうち2010.1で追加されたのはxamWebRibbonで、これによってMS Officeアプリケーションと同様のリボンコントロールを持ったUIが容易に作成できるようなったという。

データ視覚化については、Twitterクライアントの場合は時系列でTweetを並べたり、ハッシュタグで分類したりといったニーズが考えられる。そこでデータのタイムライン表示を実現するxamWebTimelineや、重み付けされたタグキーワードを利用できるxamWebTagCloudなどのコントロールが活用できるとのことである。

上記の機能のほかにも、ユーザの作業情報を保存したり、オフライン時にもログを参照したいといったニーズが考えられる。そのような多様なシナリオに対応するために、NetAdvantageではさまざまな汎用フレームワーク機能を搭載しているという。これらは単独で使うだけでなく、複数組み合わせての利用にも対応しているとのことだ。

Silverlight 4およびNetAdvantage 2010.1を活用することで、インタラクティブなUI、データ処理、そしてネットワーク機能などを余すところなく利用したリッチなUXを容易に実現することができるという。特にNetAdvantageでは、使用頻度が高いながらもSilverlightに標準で含まれていないようなコントロールが多数提供されているとのこと。ぜひ実際に試してみて、その実力を実感してほしいと山田氏は語っている。