福井コンピュータ株式会社
小島 富治雄
1
自己紹介
福井コンピュータ
IT技術
マイクロソフト系
C#
.NET
アジャイル
小島富治雄
豆腐屋ジョニー
ジャグリング
マイブーム
自転車通勤
万年筆
2
お話する内容
 Silverlight
とは何か?
 Silverlight を使う10の理由
 二つの Silverlight
 Silverlight の構成
 Silverlight プログラミング
 Silverlight の今後
 資料
3
Silverlight とは何か?
4
Demo
 野村證券
バーチャル店舗
 http://www.nomura-
branch.jp/silverlight/index.html
 GyaO Mac対応
 http://www.gyao.jp/gaga/
 Silverlight
VirtualEarth Viewer
 http://silverlight.net/samples/1.1/virtualearthviewer/
5
最近の話題
 Microsoftの「Silverlight」、北京
オリンピックの中継に大々的に採
用される
 http://jp.techcrunch.com/archives/microsoft-silverlight-
gets-a-high-profile-win-2008-bejing-olympics/
 Microsoft
Updateで1月22日から
Silverlightの配信を開始
 http://internet.watch.impress.co.jp/cda/news/2008
/01/21/18173.html
6
Silverlight とは何か?
旧称
WPF/E
 WPF / Everywhere
Webブラウザのプラグイン
Microsoft
.NET 技術が基盤
RIA (Rich Interactive
Application) を提供
7
WPF?
.NET?
8
WPF?
Windows
Presentation
Foundation の略
.NET 技術のうちのひとつ
XAML (eXtensible Application
Markup Language) が特徴
 =XMLベースのアプリケーション画面記述用言語
9
WPF のデモ
電子カルテ
デモ
旭山動物園
 http://www.asahiyamazoo-
aict.jp/asahiyamazoo.xbap
10
Microsoft .NET 入門
11
.NET アプリケーション 例1
ファット クライアント
クライアント
Windows Vista
(.NET Framework)
Windows アプリケーション
サーバー
Windows Server 2003
(.NET Framework, IIS)
ASP.NET Web サービス
12
.NET アプリケーション 例 2
シン クライアント
クライアント
Mac OSX
Safari
サーバー
Windows Server 2003
(.NET Framework, IIS)
ASP.NET アプリケーション
13
サーバー クライアント型アプリケーション
UI
ファット クライアント
シン クライアント
配布/保守
オフライン
○ × ○
△ ◎ ×
14
ファット クライアント改善案
WPF
 UI を更にリッチに
Click
Once
 配布/保守を楽に
SQL
Server Compact
 オフラインに強く
15
シン クライアントの改善案
ASP.NET
AJAX
 標準技術を使ってよりリッチなUI
Silverlight
 マルチ プラットフォームなままで
更にリッチに
16
マイクロソフトのリッチ
ク
ロ
ス
プ
ラ
ッ
ト
フ
ォ
ー
ム
XHTML/CSS
クライアント技術
クライアントの
Webブラウザに
プラグイン
サーバー、クライ
アントを問わない
Silverlight
サーバー
に .NET
ASP.NET
ASP.NET
AJAX
Windows
フォーム
ク ライ アン
トに .NET
WPF
表現力
17
Silverlight を使う10の理由
18
Silverlight を使う理由 1/10
マイクロソフトが本気
(マジ)
19
Silverlight を使う理由 2/10
奇麗な動画
 PC
と Macintosh 上での WMV
ファイル等の再生をサポート
20
Silverlight を使う理由 3/10
ベクターベースのグラフィック
21
Silverlight を使う理由 4/10
簡単にアニメーション
22
Silverlight を使う理由 5/10
マークアップ(XAML)をコー
ドと分離
 デザイナと開発者のコラボレー
ション
 色々と分離
23
Silverlight を使う理由 6/10
クライアントとサーバーの環境
を問わない
 Windows
と Macintosh に対応
Linux向けには「Moonlight」
という名前でリリース予定
24
Silverlight を使う理由 7/10
主要な
Webブラウザに対応
 IE、FireFox、Safari
 ダウンロードサイズも1.2Mbytes
以下と軽量
25
Silverlight を使う理由 8/10
WPF
との互換性
サブセット
WPFアプリケーションへのス
ケールアップの容易性
.NET 技術

「Mac で.NETネイティブコードが動く!」
26
Silverlight を使う理由 9/10
HTML
や ASP.NET との親和性
27
Silverlight を使う理由 10/10
わくわく感のある新技術
C# 3.0/Visual Basic .NET 9.0
LINQ (Language Integrated Query : 統
合言語クエリ)
 XAML (eXtensible Application Markup
Language)
 XMLベースのアプリケーション画面記述
用言語
 LL (Lightweight Language: 軽量で動的な
言語)
 Python、Ruby、JavaScript


28
Silverlight を使う理由 10/10
(続き)
 新たな選択肢
 開発の選択肢
 ユーザーに新たな選択肢を示せる
 マルチ パラダイムが身近に
 宣言型プログラミング
○ ⇔ 手続き型プログラミング
 DSL (Domain Specific Language:
ドメイン特化言語)
29
Silverlight を使う理由 10/10
(続き)
楽しさ重要
30
余談…
新たな技術に出会ったときの気持ち
 「なんだか良く判らんなー」
 → この技術の意図はこういうことか!
 「これをまた覚えなきゃならんの
か…」
 これで書きたかったように書ける!
31
二つの Silverlight
32
Silverlight の二つのバージョン
33
Silverlight 1.0
リリース済み
XHTML+CSS
JavaScript
XAML
34
Silverlight 2.0
 現在 1.1 ― α版
 1.0 (XHTML+CSS、JavaScript、
XAML)
 CLR (Common Language Runtime)
 .NETのコード
○ C# や Visual Basic .NET 等で開発
 DLR (Dynamic Language Runtime)
 動的言語 (軽量言語)
○ Python、JScript、Ruby (α版)
35
Silverlight の構成
36
1.0 のアーキテクチャ
HTML
Silverlight
XAML
JavaScript
プ
ラ
グ
イ
ン
Webサーバ
ASP.NET
ファイル
37
2.0 のアーキテクチャ
HTML
ASP.NET
)
JavaScript
XAML
(Python/Jscript/Ruby)
Silverlight
DLR
.NET
(C#/VB.NET
ファイル
プ
ラ
グ
イ
ン
Webサーバ
コネ
ーイ
ドデ
に
ィ
よ
る
ブ
38
Silverlight プログラミング
39
Silverlight 動作環境
 OS
 Windows XP SP2
 Windows Vista
 Mac OSX
 Linux対応は、Moonlight
○ http://www.mono-project.com/Moonlight
○ Linux版Silverlight「Moonlight」のアルファ版
はほぼ完成――開発責任者が明らかに
 http://www.computerworld.jp/news/sw/68389.html
40
Silverlight 動作環境
ブラウザ
 Internet Explorer 6~
 FireFox 1.5~
 Safari
41
Silverlight 開発環境
ミニマム
 メモ帳
 Web サーバー (Apache か何か)
42
Silverlight 開発環境
マキシマム
 Visual Studio 2008 +
Silverlight Extension
 Microsoft Expression Blend 2
(α版)
 IIS
43
Demo
 http://www2.shos.info/silverlight/hell
oworld/hello.html
 http://www2.shos.info/silverlight/Hell
oSilverlight/hellosilverlight.html
 http://www2.shos.info/silverlight/me
diaplayer/mediaplayer.html
 http://www2.shos.info/silverlight/life
game/lifegame.html
 http://www2.shos.info/silverlight/Hell
oPython/TestPage.html
44
Hello World!
<html xmlns="http://www.w3.org/1999/xhtml">
XAML
<head>
<title>Silverlight Hello World</title>
<script type="text/xaml" id="xaml">
<?xml version="1.0" ?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<TextBlock Text="Hello World!" />
</Canvas>
</script>
</head>
<body>
<object type="application/x-silverlight">
<param name="source" value="#xaml" />
</object>
Silverlight
</body>
コントロール
</html>
45
Demo: Hello World!
ミニマム開発
 テキスト エディタ
46
Demo: Hello
Webサーバ
hello.html
ファイル
47
Demo: HelloSilverlight
ファイル
Silverlight
hellosilverlight.js
HelloSilverlight.xaml
プ
ラ
グ
イ
ン
+ hellosilverlight.html.js,
Silverlight.js
hellosilverlight.html
Webサーバ
48
Demo: MediaPlayer (1)
Silverlight
+ mediaplayer.html.js,
Silverlight.js
mediaplayer.html
ファイル
MediaPlayer.xaml
プ
ラ
グ
イ
ン
Webサーバ
49
Silverlight 開発環境
マキシマム開発
for Silverlight 2.0
 Visual Studio 2008 +
Silverlight Extension
 Microsoft Expression Blend 2
(α版)
 IIS (ASP.NET用)
50
Demo: MediaPlayer (2)
Default.aspx
+ Default.aspx.js,
Silverlight.js
Silverlight
MediaPlayer.xaml
プ
ラ
グ
イ
ン
Webサーバ
ASP.NET
Default.aspx.cs
Default.aspx.designer.cs
51
Demo: LifeGame
<<JavaScript>>
Silverlight.js
<<HTML>>
lifegame.html
レンダリング
<<JavaScript>>
lifegame.html.js
<<XAML>>
Page.xaml
1
ユーザーインタフェイス
1
1
*
<<XAML>>
LifeGameBoard.xaml
<<XAML>>
LifeGameButton.xaml
<<C#>>
LifeGameBoard.xaml.cs
<<C#>>
LifeGameButton.xaml.cs
UIロジック
ビジネス ロジック
<<C#>>
ゲームデータ
<<C#>>
ゲーム.盤
<<C#>>
ゲーム
<<C#>>
Page.xaml.cs
<<C#>>
<<global>>
列挙
52
Demo: HelloPython
ファイル
Silverlight
page.py
Page.xaml
プ
ラ
グ
イ
ン
+ hellosilverlight.html.js,
Silverlight.js
TestPage.html
Webサーバ
53
Demo: Silverlight Spy
http://www.firstfloorsoftware
.com/SilverlightSpy/
54
様々な開発言語
 HTML
(ASP.NET)
 JavaScript
 XAML
 ネイティブ コード
 C#、Visual Basic .NET等による
 動的軽量言語
 Python、Ruby、Jscript
55
宣言型プログラミングと
手続き型プログラミング
 マークアップ
<TextBlock FontSize="18" Text="Hello" />
 JavaScript、C#/VB.NET、
Python
var textBlock = new TextBlock();
textBlock.FontSize = 18;
textBlock.Text
= "Hello";
56
LINQ (参考)
// 「全位置の中の更新されたポジションについて、そのそれぞれが更
新される」
(1)
var position = new 位置();
for (position.X = 0; position.X < サイズ.X; position.X++) {
for (position.Y = 0; position.Y < サイズ.Y; position.Y++) {
if (this[position] != セルが生きていたかどうか(position))
更新(position);
}
}
(2)
(from position in 全位置
where 更新されたかどうか(position)
select position).
ForEach(position => 更新(position));
57
LINQ (参考)
// 「10回何かやる」
(1)
for (var index = 0; index < 10; index++)
DoSomething(index);
(2)
Enumerable.Range(0, 10).
ForEach(index => DoSomething(index));
(3)
10.Times(index => DoSomething(index));
58
マルチ パラダイム (参考)
手続き型
宣言型
関数型
 式の組み合わせ
シンボリック型
(⇔ 文章型)
 デザイナー (DSL)
59
組み合わせ自由自在
60
JavaScript から
HTML
 document.GetElementbyName
 document.GetElementbyID
XAML
 silverlightControl.content.findName(x:Name)
マネージコード
 [Scriptable] 属性
61
マネージコードから
HTML
 HtmlPage.Document.GetElementID
XAML
<Rectangle x:Name="rectangle">
rectangle.Opacity = 0.5;
62
DLRから
XAML
rectangle.Opacity = 0.5;
63
Silverlight の今後
64
現状 1.0
2Dグラフィック -- シェープ、マスキング、切り抜き、変
換(傾斜、回転、拡大/縮小、変形、マトリクス)
 アニメーション -- 直線アニメーション、離散アニメーショ
ン、スプラインアニメーション
 入力 -- マウス、キーボード、インク
 メディア – WMV、WMA、MP3
 イメージ – JPEG、PNG
 テキスト
 HTTPダウンローダー
 XAMLパーサー
 JavaScript DOM

65
現状 1.1アルファ











マネージドコード (CLR)
XAML拡張
ユーザーコントロール
キャンバス
ボタン (※1)
スクロールバー (※1)
スライダー (※1)
リストボックス (※1)
マウスイベント (※2)
キーボードイベント (※2)
リソースディクショナリ (※2)
※1 アルファ版ではサンプル・コントロールとして提供
※2 アルファ版では一部の機能のみ提供
66
近未来 2.0
 アルファ版の
(※1) と (※2)
 テキストボックス
 チェックボックス
 ラジオボックス
 チェックボックス
 グリッド
 スタックパネル
 ビューボックス
 データバインディング
 スタイリング
67
予定なし
WPF
にある以下の機能
ツリービュー
リッチテキストボックス
3Dベクタグラフィック
GPU処理
ブラウザ外での実行
オフライン実行
68
資料
69
Silverlight サイト

MicrosoftのSilverlight公式サイト
 http://www.microsoft.com/japan/silverlight/

Silverlight特集
 http://digitallife.jp.msn.com/feature/express/0712/

Silverlight Showcase
 http://silverlight.net/Showcase/

Silverlight Gallery
 http://silverlight.net/community/gallerydetail.aspx

1.1 Alpha September Refresh Samples
 http://silverlight.net/community/gallerydetail.aspx?cat=4&sort=1#vid232

Silverlight.NET Form Controls Demo (Silverlight 2.0)
 http://www.vectorlight.net/silverlight_net_form_controls_demo.aspx

野村證券 バーチャル店舗
 http://www.nomura-branch.jp/msn/
70
Silverlight サイト

GyaO Mac対応
 http://www.gyao.jp/gaga/

Silverlight VirtualEarth Viewer
 http://silverlight.net/samples/1.1/virtualearthviewer/

FOX MOVIES.com
 http://silverlight.net/fox/

Silverlight MovieShow beta
 http://silverlight.t-systems-mms.eu/MovieShow/

Grand Piano
 http://silverlight.net/samples/1.0/Grand-Piano/default.html

REMIX07 Tokyo
 http://www.event-information.jp/events/remixj07/default.htm

GQ WATCH
 http://gq.jp.msn.com/watch/gq_watch.htm

The MS Team Silverlight Video Puzzle Demo
 http://demo.themsteam.com/videopuzzle/
71
入門用サイト

Silverlight 開発者向けガイド - クイックスタート ドキュメント
 http://develop.net/devpreview/

はじめての Silverlight
 http://www.microsoft.com/japan/academic /kyozai/hajimete_silverlight/chapt
er01.mspx

Silverlightは次世代のJavaScriptフレームワーク? (松原 晋啓)
 http://www.atmarkit.co.jp/fwcr/special/silverlight/silverlight_1.html

NETを知らない人でも分かるSilverlight入門 (松原 晋啓)
 http://www.atmarkit.co.jp/fwcr/rensai2/silverlight01/silverlight01_1.html

Silverlight入門 (赤坂 玲音)
 http://codezine.jp/a/article/aid/1836.aspx

Silverlight 1.1 Alpha QuickStart Documentation (英語)
 http://msdn2.microsoft.com/en-us/library/bb404701.aspx

MSDN フォーラム ― Silverlight ― Silverlight 1.1 フォーラム
 http://forums.microsoft.com/MSDN-
JA/ShowForum.aspx?ForumID=1860&SiteID=7
72
書籍
 『Microsoft
Silverlight 完全解説』
 アスキームック
73
Enjoy Silverlight!
74
ダウンロード

Silverlight入門(1)(PowerPoint)