Silverlight入門(1)(PowerPoint)
Download
Report
Transcript Silverlight入門(1)(PowerPoint)
福井コンピュータ株式会社
小島 富治雄
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