福井コンピュータ株式会社 小島 富治雄
DESCRIPTION
Silverlight 入門. 福井コンピュータ株式会社 小島 富治雄. 2008/01/25 「 Ajax & AIR & Silverlight 入門」セミナー. 自己紹介. お話する内容. Silverlight とは何か ? Silverlight を使う 10 の理由 二つの Silverlight Silverlight の構成 Silverlight プログラミング Silverlight の今後 資料. Silverlight とは何か ?. Demo. 野村證券 バーチャル店舗 - PowerPoint PPT PresentationTRANSCRIPT
1
福井コンピュータ株式会社福井コンピュータ株式会社小島 富治雄小島 富治雄
自己紹介
2
小島富治雄
IT技術
福井コンピュータ
アジャイル
マイクロソフト系C#
マイブーム
万年筆
豆腐屋ジョニー
ジャグリング
自転車通勤
.NET
お話する内容 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-aic
t.jp/asahiyamazoo.xbap
10
Microsoft .NET 入門
11
.NET アプリケーション 例 1
12
ファット クライアント
クライアント サーバー
(.NET Framework) Windows Vista Windows Server 2003
(.NET Framework, IIS)
ASP.NET Web サービスWindows アプリケーション
.NET アプリケーション 例 2
13
シン クライアント
クライアント サーバー
SafariMac OSX Windows Server 2003
(.NET Framework, IIS)
ASP.NET アプリケーション
サーバー クライアント型アプリケーション
UI 配布 /保守 オフライン
ファット クライアント
○ × ○シン クライアント
△ ◎ ×14
ファット クライアント改善案
WPFUI を更にリッチに
Click Once配布 /保守を楽に
SQL Server Compactオフラインに強く
15
シン クライアントの改善案
ASP.NET AJAX標準技術を使ってよりリッチなUI
Silverlightマルチ プラットフォームなままで更にリッチに
16
ASP.NET
マイクロソフトのリッチ クライアント技術
17
クロス
プラッ
トフォー
ム
表現力
XHTML/CSS
ASP.NET AJAX
Silverlightサーバー
に .NET
クライアントの
Web ブラウザに
プラグイン
サーバー、クライアントを問わない
クライアントに .NET
Windows フォーム WPF
Silverlight を使う 10 の理由
18
Silverlight を使う理由 1/10 マイクロソフトが本気 ( マジ )
19
Silverlight を使う理由 2/10
20
奇麗な動画 PC と Macintosh 上での
WMV ファイル等の再生をサポート
Silverlight を使う理由 3/10
21
ベクターベースのグラフィック
Silverlight を使う理由 4/10
22
簡単にアニメーション
Silverlight を使う理由 5/10
23
マークアップ( XAML )をコードと分離 デザイナと開発者のコラボレー
ション 色々と分離
Silverlight を使う理由 6/10
24
クライアントとサーバーの環境を問わない Windows と Macintosh に対
応 Linux 向けには「 Moonligh
t 」という名前でリリース予定
Silverlight を使う理由 7/10
25
主要な Web ブラウザに対応 IE 、 FireFox 、 Safari ダウンロードサイズも
1.2Mbytes 以下と軽量
Silverlight を使う理由 8/10
26
WPF との互換性 サブセット WPF アプリケーションへのス
ケールアップの容易性 .NET 技術
「 Mac で .NET ネイティブコードが動く ! 」
Silverlight を使う理由 9/10
27
HTML や ASP.NET との親和性
Silverlight を使う理由 10/10
28
わくわく感のある新技術 C# 3.0/Visual Basic .NET 9.0 LINQ (Language Integrated Query : 統合言語クエリ )
XAML (eXtensible Application Markup Language) XML ベースのアプリケーション画面記
述用言語 LL (Lightweight Language: 軽量で動的
な言語 ) Python 、 Ruby 、 JavaScript
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 のアーキテクチャ
37
Web サーバ
ASP.NET
ファイル
HTML
Silverlight
プラグイ
ン
JavaScriptXAM
L
2.0 のアーキテクチャ
38
Web サーバ
ASP.NET
ファイル
HTML
Silverlight
プラグイ
ン
JavaScript
XAML
.NET
ネイディ
ブ
コー
ド
(C#/VB.NET
によ
る)
DLR (Python/Jscript/Ruby)
Silverlight プログラミング
39
Silverlight 動作環境 OS
Windows XP SP2Windows VistaMac OSXLinux 対応は、 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 (α 版 )
IIS43
Demo http://www2.shos.info/silverlight/helloworld/hello.html http://www2.shos.info/silverlight/HelloSilverlight/hellosilverlight.html http://www2.shos.info/silverlight/mediaplayer/mediaplayer.html http://www2.shos.info/silverlight/lifegame/lifegame.html http://www2.shos.info/silverlight/HelloPython/TestPage.html
44
Hello World!<html xmlns="http://www.w3.org/1999/xhtml">
<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></body>
</html>45
XAML
Silverlightコントロール
Demo: Hello World! ミニマム開発
テキスト エディタ
46
Demo: Hello
47
Web サーバ
ファイル
hello.html
Demo: HelloSilverlight
48
Web サーバ
ファイル
hellosilverlight.html
+ hellosilverlight.html.js,
Silverlight.js
Silverlight プラグイ
ン
hellosilverlight.js
HelloSilverlight.xaml
Demo: MediaPlayer (1)
49
Web サーバ
ファイル
Silverlight
プラグイン
MediaPlayer.xam
l
mediaplayer.htm
l + mediaplayer.htm
l.js, Silverlight.js
Silverlight 開発環境
マキシマム開発 for Silverlight 2.0 Visual Studio 2008 + Silverlight Extension
Microsoft Expression Blend 2 (α 版 )
IIS (ASP.NET 用 )50
Demo: MediaPlayer (2)
51
Web サーバ
Default.aspx
+ Default.aspx.js, Silverlight.js
Silverlight
プラグイン
MediaPlayer.xam
l
ASP.NET
Default.aspx.csDefault.aspx.designer.cs
Demo: LifeGame
52
<<XAML>>LifeGameBoard.xaml
<<C#>>LifeGameBoard.xaml.cs
<<XAML>>LifeGameButton.xaml
<<C#>>LifeGameButton.xaml.cs
<<HTML>>lifegame.html
<<JavaScript>>lifegame.html.js
<<XAML>>Page.xaml
<<C#>>Page.xaml.cs
<<JavaScript>>Silverlight.js
<<C#>>ゲーム
<<C#>>ゲームデータ
<<C#>>ゲーム.盤 <<global>>
<<C#>>
列挙
11
*1
レンダリング
ユーザーインタフェイス
UIロジック
ビジネス ロジック
Demo: HelloPython
53
Web サーバ
ファイル
TestPage.html + hellosilverlight.htm
l.js, Silverlight.js
Silverlight プラグイ
ン
Page.xaml
page.py
Demo: Silverlight Spy http://www.firstfloorsoftware
.com/SilverlightSpy/
54
様々な開発言語 HTML (ASP.NET) JavaScript XAML ネイティブ コード
C# 、 Visual Basic .NET 等による 動的軽量言語
Python 、 Ruby 、 Jscript55
宣言型プログラミングと手続き型プログラミング マークアップ
<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.GetElementbyNamedocument.GetElementbyID
XAMLsilverlightControl.content.findName(x:Name)
マネージコード[Scriptable] 属性
61
マネージコードから
HTMLHtmlPage.Document.GetElementID
XAML<Rectangle x:Name="rectangle">
rectangle.Opacity = 0.5;
62
DLR から
XAMLrectangle.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/chapter01.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