1 福井コンピュータ株式会社 小島 富治雄. 自己紹介 2 お話する内容  Silverlight とは何か?  Silverlight を使う10の理由  二つの Silverlight  Silverlight の構成  Silverlight プログラミング  Silverlight.

Presentation on theme: "1 福井コンピュータ株式会社 小島 富治雄. 自己紹介 2 お話する内容  Silverlight とは何か?  Silverlight を使う10の理由  二つの Silverlight  Silverlight の構成  Silverlight プログラミング  Silverlight."— Presentation transcript:

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

2 自己紹介 2

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

4 Silverlight とは何か? 4

5 Demo  野村證券 バーチャル店舗 http://www.nomura- branch.jp/silverlight/index.html 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

6 最近の話題  Microsoftの「Silverlight」、北京 オリンピックの中継に大々的に採 用される http://jp.techcrunch.com/archives/microsoft-silverlight- gets-a-high-profile-win-2008-bejing-olympics/ 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 http://internet.watch.impress.co.jp/cda/news/2008 /01/21/18173.html 6

7 Silverlight とは何か?  旧称 WPF/E WPF / Everywhere  Webブラウザのプラグイン  Microsoft.NET 技術が基盤  RIA (Rich Interactive Application) を提供 7

8 WPF?.NET? 8

9 WPF?  Windows Presentation Foundation の略 .NET 技術のうちのひとつ  XAML (eXtensible Application Markup Language) が特徴 ＝XMLベースのアプリケーション画面記述用言語 9

10 WPF のデモ  電子カルテ デモ  旭山動物園 http://www.asahiyamazoo- aict.jp/asahiyamazoo.xbap http://www.asahiyamazoo- aict.jp/asahiyamazoo.xbap 10

11 Microsoft.NET 入門 11

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

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

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

15 ファット クライアント改善案  WPF UI を更にリッチに  Click Once 配布/保守を楽に  SQL Server Compact オフラインに強く 15

16 シン クライアントの改善案  ASP.NET AJAX 標準技術を使ってよりリッチなUI  Silverlight マルチ プラットフォームなままで 更にリッチに 16

17 ASP.NET マイクロソフトの リッチ クライアント技術 17 表現力 XHTML/CSS ASP.NET AJAX Silverlight サーバー に.NET クライアントの Webブラウザに プラグイン サーバー、クライ アントを問わない クライアン トに.NET Windows フォーム WPF

18 Silverlight を使う10の理由 18

19 Silverlight を使う理由 1/10  マイクロソフトが本気 (マジ) 19

20 Silverlight を使う理由 2/10 20  奇麗な動画  PC と Macintosh 上での WMV ファイル等の再生をサポート

21 Silverlight を使う理由 3/10 21  ベクターベースのグラフィック

22 Silverlight を使う理由 4/10 22  簡単にアニメーション

23 Silverlight を使う理由 5/10 23  マークアップ（XAML）をコー ドと分離  デザイナと開発者のコラボレー ション  色々と分離

24 Silverlight を使う理由 6/10 24  クライアントとサーバーの環境 を問わない  Windows と Macintosh に対応  Linux向けには「Moonlight」 という名前でリリース予定

25 Silverlight を使う理由 7/10 25  主要な Webブラウザに対応  IE、FireFox、Safari  ダウンロードサイズも1.2Mbytes 以下と軽量

26 Silverlight を使う理由 8/10 26  WPF との互換性  サブセット  WPFアプリケーションへのス ケールアップの容易性 .NET 技術  「Mac で.NETネイティブコードが動く!」

27 Silverlight を使う理由 9/10 27  HTML や ASP.NET との親和性

28 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

29 Silverlight を使う理由 10/10 (続き)  新たな選択肢 開発の選択肢 ユーザーに新たな選択肢を示せる  マルチ パラダイムが身近に 宣言型プログラミング ○ ⇔ 手続き型プログラミング DSL (Domain Specific Language: ドメイン特化言語) 29

30 Silverlight を使う理由 10/10 (続き)  楽しさ 重要 30

31 余談… 新たな技術に出会ったときの気持ち  「なんだか良く判らんなー」 → この技術の意図はこういうことか!  「これをまた覚えなきゃならんの か…」 これで書きたかったように書ける! 31

32 二つの Silverlight 32

33 Silverlight の二つのバージョン 33

34 Silverlight 1.0  リリース済み  XHTML+CSS  JavaScript  XAML 34

35 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

36 Silverlight の構成 36

37 1.0 のアーキテクチャ 37 Webサーバ ASP.NET ファイル HTML JavaScript XAML

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

39 Silverlight プログラミング 39

40 Silverlight 動作環境  OS Windows XP SP2 Windows Vista Mac OSX Linux対応は、Moonlight ○ http://www.mono-project.com/Moonlight http://www.mono-project.com/Moonlight ○ Linux版Silverlight「Moonlight」のアルファ版 はほぼ完成――開発責任者が明らかに http://www.computerworld.jp/news/sw/68389.html 40

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

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

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

44 Demo  http://www2.shos.info/silverlight/hell oworld/hello.html http://www2.shos.info/silverlight/hell oworld/hello.html  http://www2.shos.info/silverlight/Hell oSilverlight/hellosilverlight.html http://www2.shos.info/silverlight/Hell oSilverlight/hellosilverlight.html  http://www2.shos.info/silverlight/me diaplayer/mediaplayer.html http://www2.shos.info/silverlight/me diaplayer/mediaplayer.html  http://www2.shos.info/silverlight/life game/lifegame.html http://www2.shos.info/silverlight/life game/lifegame.html  http://www2.shos.info/silverlight/Hell oPython/TestPage.html http://www2.shos.info/silverlight/Hell oPython/TestPage.html 44

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

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

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

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

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

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

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

52 Demo: LifeGame 52

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

54 Demo: Silverlight Spy  http://www.firstfloorsoftware.com/SilverlightSpy/ http://www.firstfloorsoftware.com/SilverlightSpy/ 54

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

56 宣言型 プログラミングと 手続き型 プログラミング  マークアップ  JavaScript、C#/VB.NET、 Python var textBlock = new TextBlock(); textBlock.FontSize = 18; textBlock.Text = "Hello"; 56

57 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

58 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

59 マルチ パラダイム (参考)  手続き型  宣言型  関数型 式の組み合わせ  シンボリック型 (⇔ 文章型) デザイナー (DSL) 59

60 組み合わせ自由自在 60

61 JavaScript から  HTML document.GetElementbyName document.GetElementbyID  XAML silverlightControl.content.findName(x:Name)  マネージコード [Scriptable] 属性 61

62 マネージコードから  HTML HtmlPage.Document.GetElementID  XAML rectangle.Opacity = 0.5; 62

63 DLRから  XAML rectangle.Opacity = 0.5; 63

64 Silverlight の今後 64

65 現状 1.0  2Dグラフィック -- シェープ、マスキング、切り抜き、変 換（傾斜、回転、拡大/縮小、変形、マトリクス）  アニメーション -- 直線アニメーション、離散アニメーショ ン、スプラインアニメーション  入力 -- マウス、キーボード、インク  メディア – WMV、WMA、MP3  イメージ – JPEG、PNG  テキスト  HTTPダウンローダー  XAMLパーサー  JavaScript DOM 65

66 現状 1.1アルファ  マネージドコード (CLR)  XAML拡張  ユーザーコントロール  キャンバス  ボタン (※1)  スクロールバー (※1)  スライダー (※1)  リストボックス (※1)  マウスイベント (※2)  キーボードイベント (※2)  リソースディクショナリ (※2) ※1 アルファ版ではサンプル・コントロールとして提供 ※2 アルファ版では一部の機能のみ提供 66

67 近未来 2.0  アルファ版の (※1) と (※2)  テキストボックス  チェックボックス  ラジオボックス  チェックボックス  グリッド  スタックパネル  ビューボックス  データバインディング  スタイリング 67

68 予定なし  WPF にある以下の機能 ツリービュー リッチテキストボックス 3Dベクタグラフィック GPU処理 ブラウザ外での実行 オフライン実行 68

69 資料 69

70 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

71 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

72 入門用サイト  Silverlight 開発者向けガイド - クイックスタート ドキュメント http://develop.net/devpreview/  はじめての Silverlight http://www.microsoft.com/japan/academic/kyozai/hajimete_silverlight/chapt er01.mspx 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 http://forums.microsoft.com/MSDN- JA/ShowForum.aspx?ForumID=1860&SiteID=7 72

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

74 Enjoy Silverlight! 74