Posts tagged as Silverlight

[Silverlight]Adobe AS3 Class Diagram Viewer

既に、Pepeさんやnitoyonさんが紹介している「Flex, ActionScript, AIR Posters」をWebで見れるようにしてみました。

Flex Team
Update on Flex, ActionScript, AIR Posters

中垣 茂 ( Shigeru Nakagaki ) | ブログ ( Flex, AIR, ColdFusion )
AS3, Flex 3, AIR ポスター...97メガっすか

てっく煮ブログ
AIR・AS3・Flex3のクラス相関図ポスターが公開中

 

申し訳ないですが、Silverlightです。
Silverlight 2.0 Betaのプラグインが必要なので見たい人は入れてください。

Microsoft Silverlight: Light Up the Web
http://www.microsoft.com/silverlight/default.aspx

 

Adobe ActionScript 3.0 Class Diagram Viewer - Silverlight 2.0 Beta
http://violentcoding.com/content/AdobeAS3ClassDiagramViewer/index.html

posters.pdfから1枚7,200×10,800ピクセル(解像度300相当)のPNG画像に書き出し、それら5枚を横に並べています。各画像のサイズは、22.3MB、32.3MB、32.7MB、24.1MB、30.0MBというボリュームです。

Adobe AS3 Class Diagram Viewer01

 

SilverlightのDeep Zoomという機能を使って表示してます。
MIX08で紹介されていたHard Rock Cafeのサイトで使っているやつです。

Hard Rock Memorabilia
http://memorabilia.hardrock.com/

マウスドラッグで画像の移動やマウスホイールで拡大縮小ができます。

Adobe AS3 Class Diagram Viewer02

Deep Zoomでは拡大縮小や移動を行っている最中に、結構な負荷がかかっています・・・。
CPU%で拡大縮小・移動時には80% - 90%位のスコアをたたき出しております。

 

作りはMSエバンジェリスト 大野さんの完コピです。

develop .net : Silverlight 2 の新機能 - Deep Zoom
http://blogs.msdn.com/mohno/archive/2008/03/12/silverlight-2-deep-zoom.aspx

develop .net : Silverlight 2 の新機能 - Deep Zoom(マウスホイール編)
http://blogs.msdn.com/mohno/archive/2008/03/12/Silverlight-2-Deep-Zoom-with-Mouse-Wheel.aspx

Related posts

[WPF]XBAPとSilverlight

まれに旭山動物園のサイト「Mother Earth 〜母なる地球」がSilverlightとか書かれているのを見るんだけど、違うんだ。

クロスプラットフォームでは無いWPFのブラウザ展開「XBAP」(拡張子[.xbap])なんだよ。
「XAMLブラウザアプリケーション」って言われたりする。

 

たぶんSilverlightが、Flashみたいなマイクロソフトのブラウザ・プラグイン → WPFがWebで動く → 「旭山動物園」みたいな流れで誤解してしまっているのかな。

でも、SilverlightだったらMacでも見られるよね。

 

まあ、この「XBAP」自体、Silverlightがリリースされて、今後目にする機会はあまり無いと思う。
業務アプリとか社内イントラなどの動作環境が特定・統一できるところで(Windowsでしかも.NET Framework 3.0以上が入れられて・・・)、目立たず使われる事があるくらいだろうな。

XBAPは基本的にWPFをブラウザ内で動作させているので、動作環境がVistaか.NET Framework 3.0が入ってるXPで、しかもブラウザはIEのみなんだよ。.NET Framework 3.5 (今はBeta)を入れればFirefoxでも見れるようになるけどさ。

旭山動物園はHTMLページ段階でIE判定が入っているからFirefoxは蹴られちゃう。(XBAPのURLを直接たたけば大丈夫だけど)

 

Silverlightと何が違うかっていうと、Silverlightはプラグイン上で動作しているけど、XBAPは違う。実はEXEが動いてる。

 

まず「.xbap」はURLを直接指定するか、HTMLのiframeの中で指定しなきゃブラウザで見る事ができない。さらに「.xbap」自体は数KBしかなくて、実際のコンテンツとなるアプリ実体の(サーバーに配置された)「.exe」を指定しているに過ぎないファイル。

そして、もっとややこしいことに、このEXEを実行しているのはブラウザではなく、System32あたりにある「PresentationHost.exe」みたいな名前のWPF実行環境が行ってる。

当然、普通に相対パスとか書いていると、このPresentationHost.exeが基準の相対パスになる。もろにローカルで動いている。またWPFだからといっても、ローカルで動くアプリケーションに比べるとブラウザ内で動く以上、セキュリティ系やパフォーマンス系でいくつかの制約もある。

しかも、Silverlightがでてきて、忘却の彼方へ向かってる。(実際、久しぶりに「XBAP」という言葉を思い出した)

 

「旭山動物園」がSilverlightと誤解されたままだと、「Silverlightで3Dを使った、あの旭山動物園みたいの作ってよ」って言われても作れないよ。Silverlightの1.1でもリリースの時に、3Dをサポートする予定はないし。コンテンツ自体は3D部分を除くか、疑似で表現すればSilverlightになりそうな気もするけど。

クロスプラットフォームで動くのはSilverlightだけ。

 

じゃあ、結局SilverlightはFlashと比べてどうなのって話になるんだろうけど、たぶん

  • .NET開発者がWebのリッチコンテンツを作れる
  • DLLが使える
  • JavaScript・Python・RubyでもOK
  • LINQでデータにアクセスできる
  • XAMLのランタイム時のパースや動的生成ができる
  • .NET Framework の連携開発

が主なところになるんかな。

.NETでWebリッチコンテンツを作れるってのが一番大きいんだろうけど、技術的興味じゃなくて、そういうモノを作りたいって思う人が.NET開発者にどれだけいるかにかかってるんじゃないかな。

 

あ、もうひとつ付け加えておくと、シンプルなXAMLならXBAPみたく直接ブラウザで見れる「LooseXAML」ってのもある。実際のコンテンツじゃなありえないだろうけど直接URLに「.xaml」を指定して見れるやつ。これもSilverlightじゃないよ。

 

Related posts

[Blend]Canvas.xaml用テンプレートを追加する

Expression Blendで[ファイル]メニュー - [新しいアイテムの追加]に、パーシャルクラスを持たないXAMLのみの「Canvas」を追加する方法です。

Canvas.xamlを生成するテンプレート定義を作って、テンプレート用ディレクトリに配置すれば、[新しいアイテムの追加]ダイアログに「Canvas」が追加されます。

Blend1_addNewItem_Canvas

 

Blendのテンプレート用ディレクトリは、
C:\Program Files\Microsoft Expression\Blend 1.0\Templates\ja\が基本で、さらにその中に言語別の「CSharp」「VisualBasic」というフォルダがあります。

で、それぞれのフォルダに配置されたテンプレート定義が使用言語プロジェクトの「新しいアイテムの追加」ダイアログで表示されるテンプレートとなります。

 

テンプレート定義の内訳は、以下の3つです。

  • Canvas.vstemplate
  • Canvas.xaml
  • Canvas.png

Canvas.vstemplateが定義ファイルで、Canvas.xamlは追加されるファイル、Canvas.pngはダイアログで表示されるアイコン用です。

 

ダウンロード:
Blend1.0用Canvasテンプレート定義:CanvasTemplate_blend.zip
解凍した「Canvas」フォルダを使用する言語用フォルダ内に置いてください。

パーシャルクラスのコードを必要としない今回のCanvas.xamlでは、C#・VBを区別する必要が無いので、ResourceDictionaryのテンプレート定義と同じように「ja」直下の
C:\Program Files\Microsoft Expression\Blend 1.0\Templates\ja\に3つのファイルを直接配置してもOKです。

 

「.vstemplate」ファイルでいろいろ設定するんですが、<ProjectItem>タグのSubTypeが”form”の場合、ダイアログの「コードファイルを含める」チェックボックス部分が有効になるので、その部分をグレーアウトするために、ResourceDictionaryにならってSubTypeは「Canvas」としておきました。

<ProjectItem TargetFileName="$fileinputname$.xaml" ReplaceParameters="true" SubType="Canvas">Canvas.xaml</ProjectItem>

 

あんまりWPFアプリケーション作成の場合に使い道は無いですが、Silverlight用のプロジェクトが作成できるBlend2を使う場合には、そこそこメリットがあるかもしれません。


ということで、Silverlight 1.1を作成できるBlend2では、パーシャルクラスを必要としないCanvas.xamlを使用することもあり、そんな場合の単独Canvas.xamlファイルを作成したいときに使えます。

 

Silverlight 1.1用プロジェクトの場合、UserControlの追加でもCanvasのXAMLファイルが作成されるんですが、VBやC#のコードも作成されるので、CanvasのXAMLを単独で使用したい時には、それらを削除する必要があります。

この時、Canvas用テンプレートを用意すれば、VBやC#のコードを削除する手間が省けます。

 

はい。ただそれだけです。

 

Blend2 August Previewにテンプレートを追加するには、
まず、C:\Program Files\Microsoft Expression\Blend 2 August Preview\Templatesに「en」の内容をコピーした「ja」フォルダを作成する必要があります。

そしてBlend 1の場合と同じように「ja」直下に「CSharp」「VisualBasic」というフォルダがあります。ちなみに「HTML」というフォルダはSilverlight 1.0用ですね。

 

ダウンロード:
Blend2 August Preview用Canvasテンプレート定義:CanvasTemplate_blend2.zip
解凍した「Canvas」フォルダを使用する言語用フォルダ内に置いてください。

 

「CSharp」とか「VisualBasic」にテンプレート用ファイルを配置するか、「ja」直下に直接ファイルを置くかすれば「新しいアイテムの追加」ダイアログに追加されます。

Blend2 AddItemDialog Orcas

 

Blend2 August PreviewではWPFアプリケーション用のプロジェクトの他に、Silverlight 1.1 用に2種類のプロジェクト(Visuau Studio 2005用とVisual Studio 2008 Beta(Orcas)用)があるので、Silverlight用に2つのテンプレート定義を追加します。

  • Canvas.vstemplate :WPF用テンプレート定義
  • Canvas.xaml :WPF用Canvas.xaml
  • Canvas_Silverlight2005.vstemplate :Silverlight 1.1(.NET)用テンプレート定義
  • Canvas_Silverlight.vstemplate :Silverlight 1.1(.NET Orcas)用テンプレート定義
  • Canvas_Silverlight.xaml :Silverlight用Canvas.xaml
  • Canvas.png :ダイアログ用アイコン

 

Silverlight用のテンプレート定義では「.vstemplate」内で、
Silverlight(.NET Orcas)用に<templategroupid>を「Silverlight」と指定し、

    <templategroupid>Silverlight</templategroupid>

Silverlight(.NET)のVisual Studio 2005用では「Silverlight2005」とすれば良いみたいです。

    <templategroupid>Silverlight2005</templategroupid>

 

WPF用とSilverlight用でCanvas.xamlが別なのはXAMLのネームスペースが異なるからです。

WPFアプリケーション用:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Sliverlight用:

xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

Related posts

[Silverlight]SWF+Silverlight1.1のサンプル更新

この前、SWFからExternalInterfaceを経由して、Silverlight 1.1 のDLLを使用するサンプル作ってみましたが、Silverlight1.1 が Alpha Refresh版となったことで、Alpha Refresh用にサンプル・ソースを変更しました。

[Flash]SWFからSilverlight 1.1のDLLを使う
http://violentcoding.com/blog/2007/06/10/archives/8

 

変更といっても、Silverlight.js差し替えたり、
CreateSilverlight.jsの中で「 Sys.Silverlight.createObjectEx({source: ’simple.xaml’,・・・」となっている部分で、最初の「Sys.」を消すぐらいで済みました。その他はSilverlightのプロジェクト名を変えたのでネームスペースを調整しています。

 

Related posts

[Flash]SWFからSilverlight 1.1のDLLを使う

SWFからSilverlight 1.1 AlphaのDLLを拝借する実験(Alpha Refresh対応版)。

Sliverlight 1.1ではJavascriptからC#/VBなどのマネージコードを呼び出す事ができます。

 

Sliverlight1.1でJavascriptからDLLのコードを呼び出すサンプルはSliverlightのQuickStartsを参考。

    Silverlight: QuickStarts > Interaction Between HTML and Managed Code > Calling Managed Code from JavaScript
    http://silverlight.net/QuickStarts/Dom/ManagedCodeAccess.aspx
    ※サンプルを試すにはSilverlight 1.1 Alpha Refreshが必要。
    このサンプルでは1×1pxのSilverlightが左上にある。

日本語での説明はこちらを参照してください。
(以前のSilverlight1.1 Alphaコードでサンプルは動作しない)
Silverlight: QuickStarts「JavaScriptからマネージコードを呼び出す」

 

Javascriptからできるってことは・・・
SWFからそのJavascriptをExternalInterfaceで呼び出せば良いだけでした。

動作サンプル:
Calling managed code from Javascript(+SWF)

swfcallsilverlight02.jpg

※要プラグイン
Adobe Flash Player 9
Microsoft Silverlight 1.1 Alpha Refresh

この動作サンプルではSilverlight部分を大きくしたり、SWF用に同じ処理内容のJavascriptを加えたりしています。

 

ソースダウンロード:

※動作サンプルはExternalInterfaceを使っているのでローカル環境(file:///・・・)では動かないかもしれません。確認はローカルサーバー等で試してください。

 

メモ:
Silverlight: QuickStarts「 JavaScript からマネージコードを呼び出す」のチュートリアルの注意
チュートリアル/ソースコードを試す場合には、

  • simple.xamlのクラス指定部分でネームスペース、アセンブリ名を調整する。
  • プロジェクトのプロパティでビルド先指定「CliantBin¥」を取り除く。
  • 「createsilverlight.js」をdefault.htmで指定している「CreateSilverlight.js」に名称変更する。

 

Related posts