1 福井コンピュータ株式会社 小島 富治雄

自己紹介 2

お話する内容  Silverlight とは何か?  Silverlight を使う10の理由  二つの Silverlight  Silverlight の構成  Silverlight プログラミング  Silverlight の今後  資料 3

Silverlight とは何か? 4

Demo  野村證券 バーチャル店舗 branch.jp/silverlight/index.html branch.jp/silverlight/index.html  GyaO Mac対応  Silverlight VirtualEarth Viewer 5

最近の話題  Microsoftの「Silverlight」、北京 オリンピックの中継に大々的に採 用される gets-a-high-profile-win-2008-bejing-olympics/ gets-a-high-profile-win-2008-bejing-olympics/  Microsoft Updateで1月22日から Silverlightの配信を開始 /01/21/18173.html /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 のデモ  電子カルテ デモ  旭山動物園 aict.jp/asahiyamazoo.xbap aict.jp/asahiyamazoo.xbap 10

Microsoft.NET 入門 11

.NET アプリケーション 例1 12 ファット クライアント

.NET アプリケーション 例 2 13 シン クライアント

サーバー クライアント型アプリケーション UI配布/保守オフライン ファット クライアント ○×○ シン クライアント △◎× 14

ファット クライアント改善案  WPF UI を更にリッチに  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向けには「Moonlight」 という名前でリリース予定

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 JavaScript XAML

2.0 のアーキテクチャ 38 Webサーバ ASP.NET ファイル HTML JavaScript XAML DLR (Python/Jscript/Ruby)

Silverlight プログラミング 39

Silverlight 動作環境  OS Windows XP SP2 Windows Vista Mac OSX Linux対応は、Moonlight ○ ○ Linux版Silverlight「Moonlight」のアルファ版 はほぼ完成――開発責任者が明らかに 40

Silverlight 動作環境  ブラウザ Internet Explorer 6～ FireFox 1.5～ Safari 41

Silverlight 開発環境  ミニマム メモ帳 Web サーバー (Apache か何か) 42

Silverlight 開発環境  マキシマム Visual Studio Silverlight Extension Microsoft Expression Blend 2 (α版) IIS 43

Demo  oworld/hello.html oworld/hello.html  oSilverlight/hellosilverlight.html oSilverlight/hellosilverlight.html  diaplayer/mediaplayer.html diaplayer/mediaplayer.html  game/lifegame.html game/lifegame.html  oPython/TestPage.html oPython/TestPage.html 44

Hello World! Silverlight Hello World 45 XAML Silverlight コントロール

Demo: Hello World!  ミニマム開発 テキスト エディタ 46

Demo: Hello 47 Webサーバ ファイル hello.html

Demo: HelloSilverlight 48 Webサーバ ファイル hellosilverlight.html + hellosilverlight.html.js, Silverlight.js hellosilverlight.js HelloSilverlight.xaml

Demo: MediaPlayer (1) 49 Webサーバ ファイル MediaPlayer.xaml mediaplayer.html + mediaplayer.html.js, Silverlight.js

Silverlight 開発環境  マキシマム開発 for Silverlight 2.0 Visual Studio Silverlight Extension Microsoft Expression Blend 2 (α版) IIS (ASP.NET用) 50

Demo: MediaPlayer (2) 51 Webサーバ Default.aspx + Default.aspx.js, Silverlight.js MediaPlayer.xaml ASP.NET Default.aspx.cs Default.aspx.designer.cs

Demo: LifeGame 52

Demo: HelloPython 53 Webサーバ ファイル TestPage.html + hellosilverlight.html.js, Silverlight.js Page.xaml page.py

Demo: Silverlight Spy 

様々な開発言語  HTML (ASP.NET)  JavaScript  XAML  ネイティブ コード C#、Visual Basic.NET等による  動的軽量言語 Python、Ruby、Jscript 55

宣言型 プログラミングと 手続き型 プログラミング  マークアップ  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.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公式サイト  Silverlight特集  Silverlight Showcase  Silverlight Gallery  1.1 Alpha September Refresh Samples  Silverlight.NET Form Controls Demo (Silverlight 2.0)  野村證券 バーチャル店舗 70

Silverlight サイト  GyaO Mac対応  Silverlight VirtualEarth Viewer  FOX MOVIES.com  Silverlight MovieShow beta  Grand Piano  REMIX07 Tokyo  GQ WATCH  The MS Team Silverlight Video Puzzle Demo 71

入門用サイト  Silverlight 開発者向けガイド - クイックスタート ドキュメント  はじめての Silverlight er01.mspx er01.mspx  Silverlightは次世代のJavaScriptフレームワーク？ (松原 晋啓)  NETを知らない人でも分かるSilverlight入門 (松原 晋啓)  Silverlight入門 (赤坂 玲音)  Silverlight 1.1 Alpha QuickStart Documentation (英語)  MSDN フォーラム ― Silverlight ― Silverlight 1.1 フォーラム JA/ShowForum.aspx?ForumID=1860&SiteID=7 JA/ShowForum.aspx?ForumID=1860&SiteID=7 72

書籍  『Microsoft Silverlight 完全解説』 アスキームック 73

Enjoy Silverlight! 74