fitea.org

福井コンピュータ株式会社
小島富治雄
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

Download Report