flickrで直接やればいいことですがね、、
ＨＤＲ (High Dynamic Range) をキーワードにしてみた。

あら～、だめでした。Embed Code きかなかった＾＾
以下のように表示されるの期待していたのです。。。残念～。

iPaper ~ Scribd.com を試してみた。
フォントは、、むずかしいね。

Scribd j Font Test2   Scribd j Font Test2 Numaguchi

ただ、こういうのは面白いかも。いちいち PDF ビューワーとか開くまでもないものとかね。

How To Burn A CD   How To Burn A CD darthmat-ss Easy guide with pictures of how to burn a CD.

再生直後に出る、埋め込みプレーヤー右下の [HQ] ボタンをおしてね。高画質で鑑賞できます。
で、、、よくできてる～！！！

PC の逆襲の続編を期待したいところ・・・（そういう終わり方だし）

前回の投稿から時間が空いてしまった、、、（笑
Silverlight2 も Visual Studio Express Web Developer 2008 で使えるようになったし、Silverlight3 の話もチラリホラリと聞こえるようになってきて。Silverlight3 での H.264/AVC のサポート予定なんかを見ると、かなりの本気度合を感じられますが、、、、今日はまったく違うお話。

自分、正直、かなり「渋い」外見のノート PC を使っています。
もう 1 年以上も前に購入した dynabook ですが、Web オリジナルモデルの dynabook Satellite WXW というもの。これ。

http://www3.toshiba.co.jp/jdirect/catalog/satellite_wxw_70ew/index.htm

当時はかなりとんがった NotePC でしたが、、、いやぁ、最近のテクノロジに進化のスピードはすごい。今となっては「ふ~ん」なスペックになっちゃいました。

で、昔の IBM Thinkpad なんかはきちんと各種ドライバー類のアップデートしたり、そのドライバーを単体でダウンロードできたりしてたんですが、最近、特に NotePC はドライバーのアップデートも半年くらいすぎると「致命的な問題」がないかぎりあまりやらないような気が・・・また、VAIO TypeP で Windows 7 インスト祭なんかをみてても、ドライバー単独のダウンロードができないようなものが最近多い、、、みたいですね。

WXW も nVIDIA 8700M GT のディスプレィ ドライバーアップデートが 2007 年 8 月 23 日リリースの Version 7.15.11.5616 を最後に忘れられたような扱いになり、、、（笑

この VIDEO Chip、OEM というか Note 向けということでドライバーは nVIDIA サイトでは入手できなかったのですが、たまたま今日みると、、、ありゃ、新しいカテゴリがあるではないですか！

GeForce Release 179 for Notebook (Beta) Version 179.28 for Windows Vista 32-bit

リリースが 2008 年 12 月 18 日、、、先月かぁ、、、これは知らなんだ・・
対象となるのは、、ほっほ~ ノート/モバイル向けのビデオチップのほとんどが！
で、、、ありゃ CUDA もサポートして使えるようになるのかっ！

さぁ、、、どうする、、、アップデートするか、、、しないか、、、失敗したらめんどうそうだなぁ、、、ドライバのロールバックあるからいいか、、、

ちょっと悩んでみよ。。

[追記] 悩みのメモ ----------------------

1) 8700M GT のドライバは去年更新していた

まず、、、Display Driver は去年に更新していた。ドライバのプロパティから確認。

記憶があいまいだけど、そういえば一度「Microsoft Update」を通してドライバの更新がされたような、されないような、、、東芝のサポートサイトで確認しても WXW のダウンロード新着情報は 2007年11月を最後に行われていないので、、、サポートサイトから行ったものではないな、、、と。

つまり、今使っているドライバは半年程度前のもので、そんなに古くて、、、というわけではない。

2) nVIDIA の リリースノートを読むと、、、解像度リストに、、、WXW の解像度がないぞ。

http://us.download.nvidia.com/Windows/179.28/179.28_WinVista_Release_Notes.pdf

WXW は 1680 x 1050 という解像度。リリースノートの 8700M GT のサポート解像度を見ていくと、、、、、ない！

3) 東芝サイトに行け、、、といわれる(笑

その後ダウンロードだけでもしようかとダウンロードを試すも、ポイントしたリンクからは 404 Not Found でファイルが見つからず、ダウンロードできないことが判明。

このページや Notebook drivers ではなく、ダウンロード ドライバー ページ からモデルを選ぶ方法で行くと、システムチェックの ActiveX コントロールのインストールを求められるので喜んで（笑　インストール。さらに進むと以下の画面が。

東芝に行け、、、と。
ここまでいきついてよかったのは現在使っているドライバのバージョンは 176.26 の表記方法がわかったことでした。ダウンロードしようとしているベータが 179.28 です。

4) そこで結論は、、、

まぁ、、普通はやらないでしょうね、、、
ただ、去年のドライバアップデートは東芝のサイトからドライバをもってきてアップデートしてないはずなので、上記の３）は「そういわれても・・」ですね。
が、、、2009/1/24 ではやっぱりどうやっても Not Found…でダウンロードできず（爆

なのでしばらく様子見！
ここまで読んでいただいた方、期待に添えずごめんなさい。

Silverlight2 がベータから正式版になったら、また以前発生したのと同じように Deep Zoom も新しい Preview2 October 2008 版で作りなおさないと表示できていないことに気が付きました。
実はこの上 (↑) には Deep Zoom Preview2 (Silverlight2 対応) を使い、Microsoft Corp. の PhotoZoom サービスを使って、STSADM.EXE のあの大きなファイルを iFrame で貼りつけましたが、、、案の定 表示されず。（笑
Live Writer 上では iFrame 内のドメインが違っていても表示はするわけです。

ちなみに Link は以下。
http://photozoom.mslivelabs.com/Album.aspx?alias=CrieIlluminate&album=2&lc=1041

おおよそ、Photo Zoom のドメイン名が mslivelabs.com の時点で popfly と同じように iFrame タグは spaces.live では削除されるだろう、、、とは思っていました。。。

残念。live.com ドメインのサブドメインでも貸してあげればいいのに、、、と思うのは部外者だからねぇ、、、popfly.live.com や photozoom.live.com だったら問題ないだろうけど。

で、例の Tim さんの方法で Silverlight Streaming にあげてみた、、、
manifest.xml の version 指定が 2.0 だと、、、動かない？？　1.0 だと表示された。
あと、、、Window におさまってない、、、時間があったら調べてみよう。。

VC-1 の動画あげるくらいなら 10GB フリーの Silverlight Streaming は魅力的です。でも Application については Silverlight のバージョンがあがるたびに表示されなくなっちゃいますね。

と、、、やっぱり、Spaces が IFRAME のタグを削除しているし、、、Silverlight Streaming での IFRAME の Embed は使えるから、単純に IFRAME をとっているわけではなさそうですが。live.com で同じドメインか。

Live Writer や Web ブラウザの編集画面ではいいんだけど、投稿するときれいになくなるし。

Spaces で使えないのは、、、もったいない。

http://www.popfly.com/users/SNuma/SusetPhoto

[追記]
と、、、ところが、Popfly ってできあがった Mashup に Windows Vista/Live Gadget 作成の UI を持っているから、Spaces で使いたいときは Live Gadget にしなさい、ということなのかも。 

[最追記]
で、Live.com の Gadget にしてみたが・・・微妙だ。こういう使い方をしたいわけじゃなかった、、、。
登録して承認まで24時間くらいかかるのかな。そもそも Web パーツとしてしか Spaces で使えないから、記事には組み込めないみたいだし。
さらに、、Firefox での表示ではスクロールバーでるし。

とほほ。

Firefox 3 だと Silverlight が使えないとか、、、プラグインインストールしているのにインストールしろといわれるとか、ちょっとちょっと話題になっていますが、、、

Silverlight アプリケーション側（というか、サーバー側）で対応すると Firefox 3 でも Silverlight プラグインのインストール状況をきちんと認識してくれます。

元ネタは Silverlight の Program Manager の Tim さんのブログ、、、って、もうちょっと正式にこの情報の露出大きくしたほうが、、、、

Updating Silverlight.js and Firefox 3

結論から言うと、Firefox 3 に対応した Silverlight.js が出たので、それを使いなさい、、ということです。Firefox 3 対応の Silverlight.js は以下からダウンロード可能です。

MSDN Code Gallery: Silverlight.js

ちなみに、、、Silverlight Streaming Video は大丈夫ですが、Silverlight Streaming Application は zip ファイルの中に Silverlight.js が入っていたら、それを入れ替えることで Firefox 3 でも表示可能になります。

って、、、この、Silverlight.js の入れ替えって、、、今後頻繁にあったりすると、結構大変じゃない？

[追記]
Silverlight Streaming のプラットフォームを使っている場合、このあたらしい Silverlight.js にいれかえてもすぐには効果がでません。ブラウザ側のキャッシュをクリアにしても、再起動しても、やっぱり、あの「シルバーライトいれろ」画像がでます。

あくまで予想ですが、1日くらい経つとアプリケーション、プレーヤが表示されることから、どうやら CDN のキャッシュがクリアされるまでは、じっと我慢の子となるようです。

新しい Deep Zoom で作り直しが必要ですが、インフラ側の Silverlight Streaming が Silverlight2 の β2 に対応したようです。
[追記] Silverlight2 でまたまた、、、（笑　こちらを参照してください。

Silverlight Streaming を使った Silverlight アプリケーション ですが、Silverlight2 Beta2 をランタイムとしてインストールしてしまうと、Silverlight 2 ベースのアプリケーションが表示されなくなるという現象は前回のエントリでご紹介しました。

DeepZoom が見えなくなった、、、ですね。

今週末には対応するようです。元ネタは dev.live.com の Silverlight Streaming ブログ
Silverlight Streaming will soon be upgraded to Silverlight 2 Beta 2
http://dev.live.com/blogs/sls/archive/2008/06/16/361.aspx

Silverlight1 しばりの JavaScript ベースのアプリケーションは Silverlight2 Beta2 ランタイムでも問題なく表示されます。

あ、、、そういえば Video アップロードの問題ってどうなったんだろ？（笑

すっかり wmv と Encoder2 が吐き出す JavaScript を zip にしてアプリケーションとしてアップする方法に慣れてしまって、あまり不都合を感じなくなり、その後確認してないです。メディアプレーヤのスキンとか選べますしね。

そう考えると manifest.xml の <jsorder> どうなるん？みたいな疑問が沸くわけですが、さすが、、、Tim さん（Tech Evangelist) のブログにその記事が 5 月 18 日付でありました。

うーん、Windows Live Dev の Silverlight Streaming Blog のチェックはしていたのですが、、、不覚（笑

で、、、たまたまやたらと大きなサイズの画像ファイルがあったので、いっそのこと、Deep Zoom でやってみよー、ということで、Deep Zoom Composer で Silverlight2 の xap を作って、Tim さん紹介の manifest.xml でやってみたのがこちら。

[追記] あちゃ～！Silverlight2 は 2 でも、Beta2 を入れちゃうとアウト～！！！ ベータだからしょうがないか、、、、Beta 2 対応の新しい DeepZoomComposer が出てますね、、、
ちなみに Silverlight1 用に作ったものは Silverlight2 B1/B2 どちらでも動いているようです。

[追記] 微妙に複合してるなぁ。。。Silverlight2ベータ 2, New DeepZoom でも表示されない、、、。 ということは、、、Silverlight Streaming がベータ 2 に対応していない、、、。
Windows Live Dev の Silverlight Streaming Blog にありました・・・

http://dev.live.com/blogs/sls/archive/2008/06/09/351.aspx

This is a temporary situation that we are working hard to address promptly.

一生懸命対応しているようです。

[追記: Silverlight2] こちらも参照してください、、、

か、、、簡単すぎる、、、
Silverlight1.0 しばりでやっていますが、、、VWD2008 あたりで Blend との連携できるようになると Silverlight 2.0 いきたいところなんですが、、、そのうちできるという話もあり、できないという話もあり。

あれ？
Popfly の iframe が拒否される・・・
もう、、、

じゃ、リンクでｗ

 http://www.popfly.com/users/SNuma/SunsetPageTurn

ここしばらく Silverlight Streaming Video への wmv のアップロード後の処理に失敗していました。これまでほとんど処理（アップロード後のある種の変換、パッキング）に失敗したことがなかったので、Encoder 2 でためしてみたり、ビットレートを下げてみたりしたのですが、やはり、処理に失敗する、、、

 
Recently Uploaded Videos - Processing Status - Video could not be processed.

Encoder も Encoder 2 も、低めのビットレートも、VBR/CBR もいろいろやっても無理なので、「これは何かあるかなぁ～」と思って検索したら 4月24日のブログで、、、ありました（笑

http://dev.live.com/blogs/sls/archive/2008/04/24/280.aspx

結論から言えば、現在調査中で、、、wmv の処理を SLS Video アップロード後できない、、、みたいです。

ブログでは以下の方法を紹介しています。つまり、SLS Video を使わず、Applications として Player も含めてビデオを登録して利用する、、、ということです。Encoder 2 用の SLS プラグインがまだ出てないですからね。

といっても、manifest.xml を作るバッチファイルの紹介、、だけですが。（笑
知っている人はすでに <loadFunction>StartWithParent</loadFunction> がポイントだ、、、とうことです。

で、、、、動いてしまった、、、、うーむ。

ちょっとだけ Tips があります。
iframe 指定でも最初はいいのですが、どうやら一度cacheされてしまったものを再度表示すると、、、あらら、、フレームからはみ出してしまいます。それが気になるようでしたら ?Progma=no-cache を入れるといいようです。もちろん、キャッシュは使えなくなり、再描画のたびにダウンロードをしますが。

<iframe src="http://silverlight.services.live.com/invoke/55132/Sample%
20Folder/iframe.html?pragma=no-cache" scrolling="no" frameborder="0"
style="width:500px; height:400px"></iframe>

[追記] もしくは、私が試したところだと Encoder 2 の場合は autoStart をしない、というオプションがあるので、そちらのチェックをするとなぜかフレーム内に収まらない、、、なんてことはなくなりました。[追記おわり]

もうひとつは、バッファリングのテキストが iframe 指定のサイズの中だと折り返してしまいます。
そこで、player.xmal の <TextBlock x:Name="BufferingText" ... にある TextWrapping="Wrap"  を削除して、Canvas.Left を 265 から 270 に変更してみると、ちょうど良いポジションでバッファリングの進行状況を表示してくれます。

ですが、、、これで動くとなると、、、prototype の話しが。。。。

以前のエントリで書いた、Prototype の継承がされないのでなくて、prototype で指定したオブジェクトが「とんちんかん」なもの、、、、だから、継承されない、、、みたない話になっちゃうのかなぁ。

そういう意味では Encoder 2 が吐き出してくれたソースをじっくりみてみると、なんらかのヒントがあるかもしれませんね。

まだまだ時間かかるなぁ～。本当は Blend で Path と ベジェ曲線をいろいろやりたいのになぁ。

以前の ドラッグ＆ドロップ で作成した JavaScript について・・・です。
Blend が吐き出したサンプルを元に、Prototype を使った JavaScripting を最初にしました。
開発環境のでデバック、通常の Web であれば問題なく動きます。

if (!window.SilverlightSite2)
    SilverlightSite2 = {};

SilverlightSite2.Page = function()
{
}

SilverlightSite2.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;
        this.timer = rootElement.findName("timer");
        //alert(this.timer.name);
        this.RecCanvas = rootElement.findName("RecCanvas");
        //alert(this.RecCanvas.name);
        this.isMouseDown = false;
        // Sample event hookup:   
        //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        this.timer.addEventListener("completed", Silverlight.createDelegate(this,this.timerTick));
        this.timer.begin();
        this.RecCanvas.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.mouseLeftButtonDown));
        this.RecCanvas.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.mouseLeftButtonUp));
        this.RecCanvas.addEventListener("MouseMove", Silverlight.createDelegate(this, this.mouseMove));
    },
    timerTick: function(sender, eventArgs)
    {
        this.timer.begin();
    },
    // Sample event handler
    mouseLeftButtonDown: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        this.isMouseDown = true;
        this.mouseX = eventArgs.getPosition(sender).x;
        this.mouseY = eventArgs.getPosition(sender).y;
        sender.captureMouse();       
    },
    mouseLeftButtonUp: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        this.isMouseDown = false;
        sender.releaseMouseCapture();
        this.timer.begin();
    },
    mouseMove: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        if (this.isMouseDown)
        {
            this.RecCanvas["Canvas.Left"] += eventArgs.getPosition(sender).x - this.mouseX;
            this.RecCanvas["Canvas.Top"] += eventArgs.getPosition(sender).y - this.mouseY;

        }
    }
}

この Prototype を使った方法だと、handleLoad 時に使用するオブジェクトを宣言してしまうので、のちのイベント発生時に sender から findName を使ってオブジェクトを探さなくて済みまます。

この JavaScript を Sliverlight Streaming (SLS) のアプリケーションとしてそのまま登録しても動かないことはさんざん書いてきました。SLS のアプリケーションとして登録して実行するということは IFRAME で Web ページに登録するわけです。




若干の変更(createDelegate を使わないなど）をし、使っている xaml、必要となる他の .js とともに zip ファイルに格納して Upload してみると、、、動かないんです。alert で検証すると undefined になっている部分があり、それを sender.findName で強引に動くようにしたり、変数定義をしたりして、JavaScript が以下になります。Blend が吐き出した Prototype のサンプルを使っていますが、実際はまったく Prototype になっていない「変な」 スクリプトになってしまった、、、と思います。オブジェクトを確認するために使った alert もあえて残しておきました。

if (!window.SilverlightSite2)
    SilverlightSite2 = {};

SilverlightSite2.Page = function()
{
}

var isMouseDown = false;
var mouseX = 0;
var mouseY = 0;

SilverlightSite2.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;
        this.rootElement = rootElement;
        this.timer = rootElement.findName("timer");
        //alert(rootElement);
        //alert(this.timer.name);
        this.RecCanvas = rootElement.findName("RecCanvas");
        //alert(this.RecCanvas.name);
        isMouseDown = false;
        // Sample event hookup:   
        //rootElement.addEventListener("MouseLeftButtonDown", this.handleMouseDown);
        this.timer.addEventListener("completed", this.timerTick);
        this.timer.begin();
        this.RecCanvas.addEventListener("MouseLeftButtonDown", this.mouseLeftButtonDown);
        this.RecCanvas.addEventListener("MouseLeftButtonUp", this.mouseLeftButtonUp);
        this.RecCanvas.addEventListener("MouseMove", this.mouseMove);
    },
    timerTick: function(sender, eventArgs)
    {
        sender.findName("timer").begin();
    },
    // Sample event handler
    mouseLeftButtonDown: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        //alert(isMouseDown);
        isMouseDown = true;
        //alert(isMouseDown);
        //alert(eventArgs.getPosition(sender).x);
        //alert(this.rootElement.name);
        mouseX = eventArgs.getPosition(sender).x;
        mouseY = eventArgs.getPosition(sender).y;
        //alert(mouseY);
        sender.captureMouse();       
    },
    mouseLeftButtonUp: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        //this.timer = sender.findName("timer");
        isMouseDown = false;
        //alert(isMouseDown);
        sender.releaseMouseCapture();
        sender.findName("timer").begin();
    },
    mouseMove: function(sender, eventArgs)
    {
        // The following line of code shows how to find an element by name and call a method on it.
        // this.control.content.findName("Storyboard1").Begin();
        //alert(sender);
        //alert(isMouseDown);
        if (isMouseDown)
        {
            var RecCanvas = sender.findName("RecCanvas");   
            RecCanvas["Canvas.Left"] += eventArgs.getPosition(sender).x - mouseX;
            RecCanvas["Canvas.Top"] += eventArgs.getPosition(sender).y - mouseY;

        }
    }
}

なので、、、Blend が吐き出してくれるサンプルはまったく使わないで、Prototype を利用しない Scripting のほうが「混乱」しなくてすみそうなんですよねぇ。。

if (!window.SilverlightSite2)
    SilverlightSite2 = {};

var isMouseDown = false;
var mouseX = 0;
var mouseY = 0;

function handleLoad(control, UserContext, rootElement)
{
        rootElement.timer = rootElement.findName("timer");
        rootElement.RecCanvas = rootElement.findName("RecCanvas");
        isMouseDown = false;
        rootElement.timer.addEventListener("completed", this.timerTick);
        rootElement.timer.begin();
        rootElement.RecCanvas.addEventListener("MouseLeftButtonDown", RecMouseLeftButtonDown);
        rootElement.RecCanvas.addEventListener("MouseLeftButtonUp", RecMouseLeftButtonUp);
        rootElement.RecCanvas.addEventListener("MouseMove", RecMouseMove);
}

function timerTick(sender, eventArgs)
{
        sender.findName("timer").begin();
}

function RecMouseLeftButtonDown(sender, eventArgs)
{
        isMouseDown = true;
        mouseX = eventArgs.getPosition(sender).x;
        mouseY = eventArgs.getPosition(sender).y;
        sender.captureMouse();       
}

function RecMouseLeftButtonUp(sender, eventArgs)
{
        isMouseDown = false;
        sender.releaseMouseCapture();
        sender.findName("timer").begin();
}

function RecMouseMove(sender, eventArgs)
{
        if (isMouseDown)
        {
            var RecCanvas = sender.findName("RecCanvas");   
            RecCanvas["Canvas.Left"] += eventArgs.getPosition(sender).x - mouseX;
            RecCanvas["Canvas.Top"] += eventArgs.getPosition(sender).y - mouseY;

        }
}

Mike Harsh のブログでとっくの昔 (2008年1月)に紹介されていますが、Online Training の LYNDA.COM で SILVERLIGHT V1.0 のオンライントレーニングが無料で公開されています。

Silverlight Essential Training (LYNDA.COM)

Mike Harsh といえば MIX などでもいくつかのセッションを持っている Silverlight の Program Manager のようですが、この LYNDA.COM の Online トレーニングの出来がなかなか良いわけで。

Drag & Drop などもここから習得。

まだ全部は見てませんが、トータル4時間半の11部構成。（イントロとクロージングを除く）
What's Silverlight? から始まって、実行環境、ツールの紹介、XAML、JavaScript と広範囲にわたって Silverlight をカバーしてます。

視聴は QuickTime が必要。英語ですが、画面がとてもクリアですし、使われているサンプルコードなどもダウンロードできるので、あまり困らないんじゃないかな、と。

おすすめです。

if (!window.SilverlightSite2)
    SilverlightSite2 = {};

SilverlightSite2.Page = function()
{
}

SilverlightSite2.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;
        this.timer = rootElement.findName("timer");
        this.RecCanvas = rootElement.findName("RecCanvas");
        this.isMouseDown = false;
        this.timer.addEventListener("completed", Silverlight.createDelegate(this,this.timerTick));
        this.timer.begin();
        this.RecCanvas.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.mouseLeftButtonDown));
        this.RecCanvas.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.mouseLeftButtonUp));
        this.RecCanvas.addEventListener("MouseMove", Silverlight.createDelegate(this, this.mouseMove));
    },
    timerTick: function(sender, eventArgs)
    {
        this.timer.begin();
    },
    // Sample event handler
    mouseLeftButtonDown: function(sender, eventArgs)
    {
        this.isMouseDown = true;
        this.mouseX = eventArgs.getPosition(sender).x;
        this.mouseY = eventArgs.getPosition(sender).y;
        sender.captureMouse();       
    },
    mouseLeftButtonUp: function(sender, eventArgs)
    {
        this.isMouseDown = false;
        sender.releaseMouseCapture();
        this.timer.begin();
    },
    mouseMove: function(sender, eventArgs)
    {
        if (this.isMouseDown)
        {
            this.RecCanvas["Canvas.Left"] += eventArgs.getPosition(sender).x - this.mouseX;
            this.RecCanvas["Canvas.Top"] += eventArgs.getPosition(sender).y - this.mouseY;
        }
    }
}

前回のエントリの [ドラック & ドロップ] はデザイン的にはなにもしてませんが、プログラミングの要素というものを XAML には一切いれないようにするには？なんてことを考えていました。

イベントハンドラに関しても XAML 側には記述せず、JavaScript で addEventListener を使って宣言する、などです。

結果的に XAML のほうは以下のようになったわけです。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="500" Height="480"
    x:Name="Page"
    Loaded = "pageOnLoad">
    <Canvas.Resources>
        <Storyboard x:Name="timer"/>
    </Canvas.Resources>
    <Canvas.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
    </Canvas.Background>
    <Canvas Width="99" Height="100" Canvas.Left="65" Canvas.Top="84" x:Name="RecCanvas">
        <Rectangle x:Name="Rec1" Width="90" Height="90" Opacity="0.195" Fill="#FF000000" Canvas.Left="9" Canvas.Top="10"/>
        <Rectangle x:Name="Rec1b" Width="90" Height="90" Fill="#FF1AABCA"/>
    </Canvas>
</Canvas>

デザインに関係ないところが上述の黄色ボールドの部分。四角形とその影が入っている Canvas には一切イベント関連は記載せずに、JavaScript 側で要素に対するイベントの追加を行っています。

空の <Storyboard> は timer 処理のために必要で、 xaml 側での作成をプログラマからデザイナにお願いすることになるんでしょうね。。。

ドラッグ & ドロップだとこれでいいですが、アニメーションをデザインの一部として考えて作成しようとした場合は話がややこしくなってきます。Storyboard でアニメーションのタイミングや場所を指定するのであれば、デザイナーの思ったように Blend でアニメーションを作成して、そのアニメーションが動くイベントと対応する Storyboard の name をプログラマに渡す、、、ということになるのでしょうか。

Canvas 名が xxxx の上にマウスがきたら、Storyboard の yyyy を動かして、マウスが離れた止めてください。

みたいな感じでコミュニケーションすることになるのかな。

JavaScript のほうは Prototype を使ったテンプレートをもとに修正しているので、汚すぎます。（笑
ちゃんと Prototype を使わないお作法にして修正します。。。

ドラッグ＆ドロップ on Silverlight Streaming のテスト。

２００８年4月１８日の段階では、Silverlight Streaming Application (SLSA) では JavaScript の Prototype による継承が行なわれていないみたい、、、。

Prototype の中で this. を使ってオブジェクトへのプロパティの追加を行っても、イベントハンドラの中では undefined になってしまう。Blend2.5 からのデバックではローカルの IIS 上ではもちろん動くのだけど、SLS にアップロードして SLSA にすると動かなくなるのはプロトタイプによる継承がされないから、、、なのかな。[追記　4/26/2008] Encoder 2 が吐き出す .js は manifest.xml を追加するだけで、個人の Web サーバーでも SLS の Iframe でも動くことから、指定の仕方がまずいと思います。prototype によるプログラミングはどうも可能なようです。

なので、イベントハンドラに渡される第一引数 (sender) から findName で要素を探して設定してあげると動く、、、というのが現状みたい。

Blend2.5 が吐き出してくれる Prototype ベースの Javascript の雛型は使えない、、、と今のところは考えて Javascript を弄ると動くことは動きますねぇ、、。

Silverlight Plug-in じゃないけど、、、
こういうのをみるとインスパイアされますよねぇ。

http://www.piclens.com/

自分のデスクトップで試してみたものを Silverlight Streaming Video にしてみました。

Longhorn のときにこんな感じのデモンストレーションをいっぱいみたような気が、、、（笑
あと、この PicLens プラグインを入れると、Google Image や Flickr を開くと、そこに表示されている画像に PicLens プラグインのための再生ボタンが追加されるのも、、、なるほどね。

silverlight の downloader オブジェクトを使うことができましたが、いかんせん、javascript / prototype を使ったプログラミングをあまりに知らなすぎは困るので、いろいろと探してみてます。

なんか、ツボにはまっているのが以下の連載。

JavaScript クイックスタート　builder - ZDNet Japan

それと MSDN マガジンの以下の記事。

オブジェクト指向の手法によって高度な Web アプリケーションを作成する

で、上記のリンクをとるためにグっぐっていたら、、、、あー、やっぱり Blend2/2.5 から変わったんだ、、、というブログエントリが。VWD 2008 Express Edition か。これならフリーだから使ってみるかぁ。

Expression Blend 2 と Visual Studio 2008 で Silverlight 1.0 しばりな開発

Javascript ってすごいなぁ、といまさらながら。
動いた page.xaml.js をあらためてみて、、、へぇ～これって、そんな意味なんだ、、、なんてことも多数（笑

まぁ、仕事じゃないので、あせらず、ゆっくり。

いろいろな情報が錯綜しているように見えましたが、、、できました！（といっても、この記事を開いた時点で走っているので・・・笑）最後の心の拠り所は、MS社員が書いていた Live Dev Blog の「zip ファイルが使えるようになったから downloader で利用可能」＝ Silverlight Streaming Application で使えるはず、、、でした。

どうも、、、最後はやっぱり javascript のお作法で引っかかっているような気がします。それはそれで後々調べるとして、、、後日まとめてみよう。

でも、とりいそぎ、、ポイントは

1) Sliverlight Streaming Application でも downloader オブジェクトの作成は可能
2) SilverlightControl は getHost() で取得
3) (ここは調査・まとめが必要) this.downloader ではなく、グローバルで宣言して使用（ほんとわかってないな・・・たぶん）

にしても、、、すっきりした～（エイプリル・フールじゃないことを祈る）

あ、あとものすごく重要なのは、、、、確認には FireFox を使うこと！FF のエラーコンソールがなかったら、たぶんここまでたどりつけなかった・・・このオブジェクトにはプロパティがない、とか、メソッドがないとか、デバックするに必要な情報を FireFox なら取得することができるので。