2012/03/31(土) Silverlightを囲む会 in 東京 #6 にて発表

1. Silverlightの今
++C++; 岩永 信之

2. 話すこと
 Silverlightの歴史振り返り
 Silverlightの何が良くて、何が悪い
 Silverlightのどういうところは残って
 どういうところは考え直しになるか

3. Silverlightの歴史
振り返り

4. 1.0: 当時(2007)の背景
バージョン  Flash全盛
Silverlight 1.0
 HTMLはブラウザー間の差異が…
 UIはオーサリングツールで作るもの
Silverlight 2
Silverlight 3
 当時の.NET開発者の声
Silverlight 4
 HTML DOMでUI作りたくない
 でもActionScriptもたいがい勘弁
Silverlight 5
 WPF がブラウザーで動けばいいのに

5. 1.0: Silverlightの登場
バージョン  最初のバージョン
Silverlight 1.0
 ふれこみは「WPF/E」
 EverywhereのE
Silverlight 2
 XAML＋JavaScript
Silverlight 3
 まだ.NETが載っていなかった
Silverlight 4
 XAML描画のところだけ
Silverlight 5
 ロジックはブラウザー経由でJavaScript便り

6. 2: 当時(2008)の背景
バージョン  実は1.0と同時進行
Silverlight 1.0β Silverlight 1.0 JavaScript
Silverlight 1.0
Silverlight 2
Silverlight 1.1α β Silverlight 2.0 .NET
Silverlight 3
…
Silverlight 4
Silverlight 5
 Visual Studio 2008
 始めからWPFに対応している初のバー
ジョン
 2005時代は、WPFすらVSのアドイン
 微妙に不安定

7. 2: .NETに対応
バージョン  ということで、.NETに対応しました
Silverlight 1.0
 C#がブラウザーで動く
 クラス書けば使えるタグが増える
Silverlight 2
Silverlight 3
 Expression Blend 登場
Silverlight 4
 UI開発はオーサリング ツールがあって
なんぼ
Silverlight 5

8. 3: 当時(2009)の背景
バージョン  Flashとの競争激化
Silverlight 1.0
 RIAがバズワード化
 新機能追加競争
Silverlight 2
 FlashもMXML(XMLベース)でUI記述
Silverlight 3
 データ バインディング
Silverlight 4  透視変換(疑似3D)
Silverlight 5  デスクトップ化(OOB, AIR)
 おい、9か月で新バージョンとか…

9. 3: どんどん高機能化
バージョン  ブラウザー外(OOB)実行
Silverlight 1.0  透視変換(疑似3D)
Silverlight 2  ピクセル シェーダー
Silverlight 3  DeepZoom
Silverlight 4  Smooth Streaming
Silverlight 5

10. 4: 当時(2010)の背景
バージョン  また9か月でリリース
Silverlight 1.0
 Flashとの競争のたまものか
Silverlight 2
 Visual Studio 2010
Silverlight 3
 WPF/Silverlightのエディター、やっと
安定した感あり
Silverlight 4
Silverlight 5

11. 4: 高機能化の反面…
バージョン  Webカメラ
Silverlight 1.0  コピペ、D&D、右クリック
Silverlight 2  昇格権限OOB
Silverlight 3  COMオートメーション
Silverlight 4
クロスプラットフォーム路
Silverlight 5 線、
徐々に捨ててる

12. 5: 当時(2011)の背景
バージョン  HTML5がだいぶ決まってきた
Silverlight 1.0  スマホ
Silverlight 2  iOS, Android…
Silverlight 3
Silverlight 4  ブラウザー プラグインでクロス プ
Silverlight 5
ラットフォームというのが無理に

13. 5: クロス プラットフォームあきらめ
バージョン  XNA統合
Silverlight 1.0  P/Invoke
Silverlight 2  GPUアクセラレーション強化
Silverlight 3  動画のトリックプレイ(変速再生)
Silverlight 4 クロスプラットフォームで
Silverlight 5 やるもんじゃない
 WPFと比べての不足埋め
 データ バインディング

14. そして今
バージョン  脱プラグインが加速
Silverlight 1.0
 クロス プラットフォーム狙うなら
HTML5
Silverlight 2
 高機能を狙うなら
Silverlight 3 プラットフォーム固有
Silverlight 4
 タブレット
Silverlight 5
 そろそろPC市場と逆転しそう？
 ARMプロセッサー
 ARM版Windows 8ではWin32 API未サポー
ト

15. 良いところ悪いところ
良かった部分(＝これからも有望)
悪かった部分(＝これからどうなるか)

16. 良いところ悪いところ
• XAML系UI＋DirectX系UI
• 動画(DRM、ストリーミン
○
グ)
• 共通型システム/メタデータ
• ブラウザー プラグイン
× • クロス プラットフォーム
• 全てを.NETで

17. XAML系UI: 登場以前
 プログラミング言語でUIを書いたら負けかな
private void UpdatePageData()
{
panel.RemoveAll();
for (int i = 0; i < pageItems.Count; i++)
{
var item = pageItems[i]; 前と変わってないものまで再生成
ビューに状態持っちゃって
var cardCharacter = item.Card;
CardThumbnailView card = card = CreateCardThumbnail(item);
て、仮想化†できない
thumbnailList.Add(card);
card.isDeckSet = item.IsDeckSet;
card.gameObject.SetActiveRecursively(true);
panel.AddItem(card.gameObject);
}
} • どこで、だれが、何を生成しているか全然わからない
• 実行してみるまで表示結果がわからない
• きっちりしたコード書くの大変(不正になりがち)
†画面に見えている分だけビューを生成

18. ○ XAML系UI: UIに特化した言語
 ということでXAML†
ツール連携:
表示結果が常に見える
HTML的な階層記述
XAML
† Extensible Application Markup Language

19. ○ XAML系UI: データ バインディング
 ビューからのデータ、ロジックの分離
XAML 「ここにXを表示したい」
ビュー(表示部分)を記述 という印だけを入れる
<ItemsControl ItemsSource="{Binding CardList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}"
Width="168" Height="254" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
+ View.DataContext = new CardListViewModel { … };
C#(VB, F#)
モデル(データ、ロジック)を記述
public class CardViewModel
{
public string ImagePath { get; }
}
public class CardListViewModel
{
public IList<CardViewModel> CardList { get; }
}

20. ○ XAML系UIとDirectX系UI
 2種類/2用途のUIフレームワーク
XAML系 DirectX系
メニュー型UI 低層API
• ユーザーの対話的操作 相補的 • メッセージ ループ
• イベント駆動 • 入力デバイス直アクセス
• 宣言的UI記述 • ピクセル単位の描画
デスクトップ アプリなど ゲームなど

21. ○ XAML系UIとDirectX系UIの混在
 両方使いたいことが多々
 部分的に低層APIを使って性能アップ
 ゲームでもメニューは普通にXAML書きたい
この辺り、
ゲームらしく、低層APIで描画
C#たん ステータス
装備
レベル 99 アイテム
次のレベルまで 0 パーティ
Silverlight 5 : XAML+XNA プレイ記録
所持金 1,000,000 G
Windows Phone プレイ時間30:15:00
7 : XAML+XNA メニューはXAMLで
設定
Windows 8 Metro : XAML+DirectX

22. ○ 動画
 動画周りは特許/ライセンス料問題が多い
 DRM(Digital Rights Management)
 この辺りが固まるまでは、HTML5で動画配信はなかなか
厳しい
 Smooth Streaming
 神動画配信と名高いIIJでの勉強会
 もちろん今日、この場も
 来週のC#ユーザー会†もこちらで動画配信していただきます
† 第77回codeseek勉強会＆第17回日本C#ユーザー会 勉強会
「C#とゲーム」
http://atnd.org/events/26442

23. ○ 共通型システム
 .NETクラスを書けば、UI要素増やせる
 ×コードでUI作ったり、
 ×独自属性増やしたりはどうかと思う
div = body.appendChild(
div = document.createElement( "div" ) );
<div data-win-control="WinJS.Binding.Template">
$.extend( div.style, { <div data-win-bind="style.backgroundColor: backgroundColo
minHeight: "100px", height: "auto", <div data-win-bind="textContent: title"></div>
padding: 0, borderWidth: 0}); <div data-win-bind="textContent: description"></div>
</div>
 言語中立でポータブル
 C#, VB, IronPython, IronRuby, etc.
 JavaScriptに束縛されない
 サーバーでもクライアントでもC#

24. × ブラウザー プラグイン
 ブラウザー ベンダーの意向次第
 かつては、デスクトップ、IEが支配的だったからこそ、
プラグインでいろいろやれた
 標準(HTML5)か、プラットフォーム固有かの2択
高度なUIがほしければ
環境B
クロス プラットフォーム 環境C プラットフォーム固有
を狙うなら標準ベースで 機能を使う
環境A
標準化指向 単一ベンダー指向
•○ 広い窓口 •○ 高機能
•× 機能が限られる •○ 迅速な新機能提供
•× 標準化に時間がかかる •× 狭い窓口

25. × クロス プラットフォーム
 GUI周りのクロス プラットフォームは非常に大変
 できたとしても最大公約数
 標準化は時間がかかる
 実装して初めてわかる仕様の漏れ
 バグ フィックスにも時間がかかる
 モデルだけポータブルに作る
 ビューの書き換えはある程度覚悟
 ビューの差し替えの効く技術が大事
 共通型システム、ビューとモデルの分離、サービス指向

26. × .NETで完結
 プラットフォーム固有機能を最大限引き出すには
やっぱりネイティブ
 4でCOM対応、5でP/Invoke
 それでも、COMもP/Invokeも、結構面倒
 WinRT/Windows Metadata
 ネイティブの側にメタデータを持ってもらう
 共通型システムがあるなら、実装がネイティブだろう
が.NETだろうが関係ない

27. まとめ

28. まとめ
 Silverlightは常に開発者の要望を受けて進化
 その一方で、時代背景の変化が激しく…
 良いところ(今後も続く傾向)
 XAML系UI + DirectX系UI
 動画関連
 共通型システム
 悪いところ(下火)
 ブラウザー プラグイン
 単一ベンダーでクロス プラットフォーム
 .NETで全部やる