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