blog ViolentCoding » Silverlight

[Silverlight]Silverlight 3 betaだとローカルでうんたら

e_s_jp — Wed, 08 Apr 2009 17:51:46 +0000

「Silverlight 3 betaだとブラウザで表示しているSilverlightのコンテンツをローカル（OutOfBrowser）でも使えるよ」の仕組みを適当に調べてみた。

もろもろの環境作って、以下のSilverlightのサイトにある「#11: Out-of-browser Experiences」ソースをダウンロードし、サンプルをビルドして試した。

Videos : The Official Microsoft Silverlight Site
http://silverlight.net/learn/videocat.aspx?cat=12#sl3

実行してみると、「MyTasks」というSilverlightコンテンツがlocalhostで立ち上がって、Silverlight上で右クリックしたらこんな感じ。「Install MyTasks onto this computer…」を選んでみた。

次に、ダイアログがでてきて、「OK」するとローカルにアプリとして展開、自動でローカルアプリになったSilverlightのコンテンツが普通のEXEウィンドウで立ち上がった。

んで、ウィンドウのタイトルバーに「MyTasks」ってあって、右クリックしてみると、今度は「Remove this application…」のメニューになってる。

ブラウザのSilverlightもまだ生きてて、こっちも「Remove this application…」になってた。かしこい。

どこにローカルに関連するファイルとかあるんかなーと見てみたら
Windows XPで「C:\Documents and Settings\[ユーザー]\Local Settings\Application Data\Microsoft」に「Silverlight」てのができてて、そん中に「Offline」ってフォルダがあった。（たぶんVistaだとRomingの中とか）

そのなかの「localhost.0」ってのが今回できたローカル用ファイルみたい。（localhost実行だからこんな名前なのかな？）

Windows XP
C:\Documents and Settings\[ユーザー]\Local Settings\Application Data\Microsoft\Silverlight\Offline\localhost.0

.xapとかある。なんかhtmlもあるんです。

htmlのobject タグのsourceが「value=”offline://localhost.0″」となってて、さっきの「localhost.0」を指してるっぽい。

で次。

デスクトップのショートカットのプロパティを見たら
「”C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe” localhost.0」だってさ。「sllauncher.exe」ってので動かしてるっぽい。
ここでもさっきの「localhost.0」がでてきた。

ふーん、だいたい分かったから、いたずらする。

そのSilverlightの内容が表示されてるローカルのEXEウィンドウにURLショートカットをD&Dします。

結果コレ。

タイトルバーは「MyTasks」のまま。

ローカル？でSilverlightを動かす「sllauncher.exe」ってやつは、ウィンドウ全体にIEコンポーネント（WebBrowserコンポーネント的なやつ？）を敷いてるのただのEXEってことですか？

結局IEだったとしたら、そりゃIEにFlash Playerが入っていれば、SWFがあるサイトだって動くよね。GoogleのURLショートカットからGmailへのログインだってOKだったよ。普通にWebのネットワークと繋がって、UIが全然ないIEってことだからそうなるよね。

んー、Out of Browserと、確かにWeb上のブラウザ外ではあると思います。

しかしながら、IEのセキュリティ設定をそのまま持ってるってことなの？

でも、なんつーかウェブ上でしてることと同じことではないの？。まだbetaだからってこと？。もっと劇的なローカルだからできることとか用意されてんのか？

Web上からだってローカルのストレージ（IsolatedStorage）は使えるんだし、よくわかんね。

Webから右クリックで・・・というのは良いアイディアだと思うのだけど、なんか拍子抜け。

なんというか、もっと直接.xapファイルをローカルEXEとして起動するみたいな仕組みに成ってるのかと思ってたけど、本当にこの適当に確認した仕組みのとおりだったら見せかけだけのギミックみたいでなんかつまんない。

あーでも、Macではどうやるんだろう？とかあるけど、このへんでおしまい。

ちなみにローカルデータの使用はC#のソースで以下になってた。

if (NetworkInterface.GetIsNetworkAvailable())
{
 // save online using web service
}
{
// use IsolatedStorage because we're offline
}

ってネットワーク上かどうかのフラグ判定して、Webかローカルのストレージ（IsolatedStorage）のどっちを使うか振り分ける感じだね。

なんだか、いろいろまだ不明点は残るけど、いちばんの収穫はif文でelseって省略できるのかな？って発見したこと。
知らなかったな、そんな書き方しないけど一度試してみよ。

[Silverlight]Adobe AS3 Class Diagram Viewer

e_s_jp — Sat, 15 Mar 2008 15:14:54 +0000

既に、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~~ Silverlight 3のプラグインが必要なので見たい人は入れてください。

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

Deep Zoom Adobe ActionScript 3.0 Class Diagram Viewer – Silverlight 3
http://violentcoding.com/content/AdobeAS3ClassDiagramViewer/index.html

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

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

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

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

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

[WPF]XBAPとSilverlight

e_s_jp — Wed, 24 Oct 2007 18:06:28 +0000

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

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

Web における Windows Presentation Foundation : XAML ブラウザアプリケーション

http://www.microsoft.com/japan/msdn/windowsvista/general/wpfandwbas.aspx

たぶん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じゃないよ。

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

e_s_jp — Thu, 30 Aug 2007 16:24:49 +0000

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

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

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

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

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

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\に３つのファイルを直接配置してもOKです。

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

Canvas.xaml

あんまり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 August PreviewではWPFアプリケーション用のプロジェクトの他に、Silverlight 1.1 用に２種類のプロジェクト（Visuau Studio 2005用とVisual Studio 2008 Beta(Orcas)用）があるので、Silverlight用に２つのテンプレート定義を追加します。

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)用にを「Silverlight」と指定し、

Silverlight

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

Silverlight2005

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"

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

e_s_jp — Thu, 16 Aug 2007 09:45:31 +0000

この前、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のプロジェクト名を変えたのでネームスペースを調整しています。

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

e_s_jp — Sat, 09 Jun 2007 15:55:56 +0000

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

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

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

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

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

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

ソースダウンロード：

SWF+Silverlightサンプル：動作サンプル(ExternalInterface連携)
SWF：Flex2プロジェクト
Silverlight単独：Visual Studio2008 Beta 2 ソリューション

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

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

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