Ajax,js

Silverlight 1.0 beta と 1.1 alpha

青柳臣一 — Tue, 01 May 2007 09:49:00 GMT

4/30～5/2 の日程で MIX07 がラスベガスで開催されていますが、そこで Silverlight （コードネーム "WPF/E"）のいろいろが発表されたようです。

まず、Silverlight の新しいサイトが公開されています。
http://silverlight.net/

また、MSDN Silverlight Dev Center もあります。
http://msdn2.microsoft.com/en-us/silverlight/

これらを見るとわかるように同時に 1.0 beta と 1.1 alpha が公開されました。

Silverlight 1.0 beta
今まで Silverlight の最新版は Feb 2007 CTP でした（Feb 2007 CTP の公開されたときはまだ "WPF/E" という名前でしたが）。これの beta 版が今回リリースされた 1.0 beta です。CTP→1.0 beta の変更点は What's New in Silverlight (1.0 Beta and 1.1 Alpha)? にまとめられているようです。ざっと見たところ「細かいところはいろいろと変わっている」という感じでしょうか。

また、1.0 beta は "Go-Live" ライセンスとなったそうです。
あと、ダウンロードするときに「以下のライセンスを読んで "I Accept" をクリックしろ」と出てきます（今のところ英文です）。このライセンスに「2007年 8月 1日まで有効」とあります。ライセンス的に日付を切っているだけなのか、実際に時限装置が内蔵されているのかはわかりませんが、意外と短いです。少なくともそれまでには次の beta、もしくは、正式版がリリースされるってことなんだと思います。

Silverlight 1.1 alpha
発表的にはこちらの方がインパクトは大きいですが、Managed Code の実行をサポートした Silverlight の alpha 版です。
Silverlight 1.0 ではプログラムの部分は JavaScript で記述します。これが JavaScript だけではなく C#、Visual Basic などでも記述できるようになります。また、IronPython、IronRuby などでも記述できるようです。

私自身まだよくわかってませんが、フルバージョンの .NET Framework とはまったく異なったランタイムによって実行されるようです。"mini-CLR" といった書き方がされていることもあるようです。
さらに Dynamic Language Runtime （DLR）というダイナミックな言語（Python とか Ruby とか）のためのランタイムもあわせて発表されました。DLR は CLR の上に乗っかるという位置づけになるようです。この DLR が Silverlight の "mini-CLR" にも含まれているので C#、Visual Basic だけでなく Python や Ruby も使えるようになるということみたいです。
Silverlight の "mini-CLR" の BCL　（ベースクラスライブラリ）ですが、どの程度のクラスが用意されているのかよくわかりません。1.1 alpha SDK もダウンロードしてみたんですが、クラスリファレンスが見当たりません。Quick Start なんかを見てるみると XmlReader なんかを使ってたりもするんで、Web 上で使いそうなものはある程度は用意されているみたいなんですが。

Google Office

青柳臣一 — Wed, 18 Apr 2007 02:09:00 GMT

ZDNet.com : 「Google presentation app on the way」より

今　Web 2.0 Expo　というのをやってるそうですが、そこで Google CEO が Google Docs and Spreadsheets にプレゼンテーションアプリケーションを加えることをアナウンスしたそうです。

ちなみに Google Docs and Spreadsheets というのは http://docs.google.com/ のことですね。すでに Word （みたいなもの）と Excel （みたいなもの）がブラウザ上で動いてます。ちょっと試してみたことがある程度ですが、日本語も使えるようです。また、Google へのセーブだけでなく、.doc や .xls での保存もできますし、.pdf での保存もできます。
これに PowerPoint （みたいなもの）が加わるというわけですね。

すごいなぁ、Google。

JavaScript で LINQ 風のことをやる

青柳臣一 — Tue, 26 Dec 2006 11:09:00 GMT

Script and LINQ? より

いやぁ、おもしろいです。「JavaScript で LINQ 風の書き方なんて簡単にできるんじゃね？」という話が紹介されています。以下、理解したことを自分なりにまとめておきます。

まず JSON を使えば ^※1 Anonymous Type と Initializer みたいなことができます。
（※1 「JSON を使えば」っていうのもなんか変な言い方ですね。「JSON で使っている記法を使えば」と言ったらいいのかな？）

// JavaScript
var person = { Name: "Hoge Taro", Age: 20, Tel: "111-1111" };

これだけで C# の

// C#
class Person
{
    public string Name;
    public int Age;
    public string Tel;
}
Person person = new Person();
person.Name = "Hoge Taro";
person.Age = 20;
person.Tel = "111-1111";

とほとんど同じような意味になるわけです。
そして、配列だって

// JavaScript
var persons = [
    { Name: "Hoge Taro", Age: 20, Tel: "111-1111" },
    { Name: "Hoge Jiro", Age: 18, Tel: "222-2222" },
    { Name: "Hoge Saburo", Age: 15, Tel: "333-3333" }
];

と書けます。

さて、次に

// C#
var result = 
    from p in persons
    where p.Age <= 18
    select new {
        Name = p.Name,
        Age = p.Age
    };

といういかにも LINQ という書き方についてです。
さすがに標準の JavaScript でこういう書き方はできません。しかし、

// JavaScript
var result =
    persons.filter(function(p) { return p.Age <= 18; })
           .map(function(p) {
               return { Name: p.Name, Age: p.Age };
           });

と書けます。LINQ を Extension Method を呼び出す形で書いたときとよく似てますね。
JavaScript では配列は Array クラスですが、上記の filter とか map とかは Array クラスのメソッドです。どうやら Mozilla ではこういったメソッドがサポートされているようです。しかし、IE では「サポートされていないメソッド」となってエラーになってしまいます。

「んじゃあ、使えないじゃん」となるんですが、もともと JavaScript では実行時にメソッドとかを足していってクラス（みたいなもの）を作るわけです。ならば、Array クラスに filter とか map とかを自分で足してやればいいわけですね。

というわけで、以下のコードは IE6 でちゃんと動きました。
ちなみに、以下の filter とか map とかは一から自分で書いたわけじゃありません。Script# に含まれている sscorlib.js から拝借したものです（ちょっとだけ変更してますが）。
いやぁ、JavaScript ってすごいですね。この記事を読んだときは感動しちゃいました。

<script>
Array.prototype.filter = function(filter_function)
{
    var result = [];
    for (var i = 0; i < this.length; ++i)
    {
        if (filter_function(this[i]))
        {
            result[result.length] = this[i];
        }
    }
    return result;
}

Array.prototype.map = function(map_function)
{
    var result = [];
    for (var i = 0; i < this.length; ++i)
    {
        result[result.length] = map_function(this[i]);
    }
    return result;
}

var persons = [
    { Name: "Hoge Taro", Age: 20, Tel: "111-1111" },
    { Name: "Hoge Jiro", Age: 18, Tel: "222-2222" },
    { Name: "Hoge Saburo", Age: 15, Tel: "333-3333" }
];

var result =
    persons.filter(function(p) { return p.Age <= 18; })
           .map(function(p) {
               return { Name: p.Name, Age: p.Age };
           });

for (var i = 0; i < result.length; ++i)
{
    alert(result[i].Name + "," + result[i].Age);
}
</script>

Dojo でベクタグラフィックス

青柳臣一 — Fri, 22 Dec 2006 10:54:00 GMT

Create cross browser vector graphics with Dojo より

新しい dojo.gfx ライブラリは SVG、Canvas、VML の違いなんかを抽象化してくれるクロスブラウザなベクタグラフィックスライブラリだそうです。上記記事からリンクされている creating cross browser vector graphics with Dojo にはもう少し詳しい解説とサンプルなんかがあります。すごいなぁ。

Don't Click It

青柳臣一 — Tue, 19 Dec 2006 10:51:00 GMT

http://dontclick.it

すごいドメイン名ですね。Don't Click It （クリックするな）
勇気を持ってｗアクセスしてみると全面に Flush を貼り付けたサイトが表示されます。英語で「このインターフェースの中にボタンはないよ。代わりに違う方法でコンテンツをナビゲートするんだ。すぐになれるよ」みたいなことが書いてあります（かなり適当な訳）。で、"click here" のところをクリックすると、、、

そっから先はいっさいクリックが必要ない世界です。使い方はさわってればすぐにわかると思います。私はものすご～くおもしろいと思いました。
ちょっとすると突然アンケートが表示されます。"Do you miss the click within this interface?" この miss は「失敗する」じゃなくて「不自由する。さびしく思う」の方じゃないかと思うんですがどうでしょう？
　　「このインターフェースの中にクリックがなくてさびしい？」
　　　　"YES - I miss to click buttons a lot!" （はい、ボタンをクリックできなくてさびしいよ）
　　　　"NO - I am happy not clicking" （いいえ、クリックが無くてめっちゃハッピー）
こんな感じ？もちろんこのアンケートもクリックなしでサブミットできます。

ちなみに、クリックすると怒られます。Accidental か Intentional か（アクシデントか意図的か）を聞かれますので答えてあげてください。もちろん、クリックなしで。

このサイトのことは Don't Click It で知りました。

Live Search キャンペーン

青柳臣一 — Tue, 19 Dec 2006 09:35:00 GMT

Local Search Japan Promotion より

Live Search キャンペーン　なんてやってたんですね。

Calc 5 - 3D グラフも描けるオンライン電卓

青柳臣一 — Wed, 13 Dec 2006 07:59:00 GMT

Calc 5: Online 3D Calculator より

（さっきの CodeProject の記事も http://ajaxian.com/ で紹介されていて知りました）

3D グラフも描けるオンライン電卓 Calc 5 が紹介されています。右側の "Samples" のところを適当にクリックして OK ボタンを押すと結果が表示されます。

で、当然「グラフはどうやって描いてるの？」というのが気になりますｗもちろん、ポストバックして gif に描いてるなんてことはありません（それじゃ、なんにもおもしろくないしｗ）。IE の Developer Toolbar で見てみると <div> を配置して描いてるってわけでもないようです。
http://www.calc5.com/help.html の一番下によると canvas を使っているそうです。げっ、そんなものがあったんだ。まったく知らなかった。
　　Mozilla Developer Center の解説（日本語）
　　http://developer.mozilla.org/ja/docs/Drawing_Graphics_with_Canvas
ただ、IE は canvas をサポートしてないのでエミュレータを使わなくちゃいけなかった、とあります。検索してみると ExplorerCanvas などがあるようです（Calc 5 がこれを使っているのかどうかは知りません）。

ラインを描画する

青柳臣一 — Wed, 13 Dec 2006 06:23:00 GMT

Drawing lines in Mozilla based browsers and the Internet Explorer より

ブレゼンハムのアルゴリズムをもちいてラインを描画する方法が紹介されています。ディスプレイのようにピクセルで構成されているデバイスにラインを描画する場合、単に y = ax + b みたいな式を使うとあまりきれいな線になりません。そんなときに使うといいのがブレゼンハムのアルゴリズムです。上記リンク先は英語ですが、このアルゴリズムを日本語で解説しているサイトもたくさんあると思います。私は DDA （Digital Differential Analyzer：デジタル微分解析）って覚えてたんだけど、DDA が総称的で、ブレゼンハムが具体的なアルゴリズム名ってことでいいのかな？

いや、まぁ、そんなことはどうでもいいんですよ。上記の記事で気になったのは「HTML 上の JavaScript で setPixel とかっていったいどこに何を描いてるの？」っていうこと。ソースを見てみると setPixel は <div style="position:absolute;" /> を配置してるだけ。ピクセルは background-color で色をつけた <div> なんですね。なるほどなぁ。

ASP.NET AJAX のアクセシビリティ

青柳臣一 — Fri, 08 Dec 2006 11:48:00 GMT

ScreenReader Accessibility and Partial Updates in ASP.Net AJAX より

ASP.NET AJAX に限らず AJAX 全般に言えることですが、アクセシビリティってどうなんだろう？というのはちょっと気になってました。アクセシビリティにもいろいろあると思いますが、ここでは目の不自由な方が読み上げソフトを使って Web を閲覧するような場合を想定しています。

私はアクセシビリティについて詳しいわけじゃありませんが、それでも、HTML は読み上げやすい（読み上げに向いている）もんじゃないかと思うわけです。見てくれを CSS に追い出して、文章の構造だけをマークアップしてあれば読み上げ時のノイズも減るでしょうし。それが AJAX で動的にグリグリ変わっちゃったりしたら読み上げようがなくなっちゃうんじゃないかと思うわけですよ。

で、上記の記事ですが、現状の ASP.NET AJAX の UpdatePanel は市場にあるポピュラーなスクリーンリーダーソフトで完璧に読み上げることはできない、ということだそうです。で、部分的な更新（ポストバック）を行うページにドロップしとくだけでスクリーンリーダーへのアクセシビリティを提供してくれるコントロールを書いてみたそうです。I am posting the control herewith とありますからそのうちに公開されるんじゃないかと思います。

ちゃんとこういうことも考えているっていうのはうれしいですね。（上記記事にも、多くの政府機関から要求もされている、とありますから考えざるを得ないっていう面もあるんでしょうが）

もちろん、読み上げられればそれでいいというわけじゃなく、操作するという面からのアクセシビリティも考える必要はあると思います。WPF アプリなんかでも気をつける必要はありそうですね。さっき紹介した Healthcare なんかでもマウスなし・キーボードオンリーで操作してみようと思ったらほとんどできませんでした(^^; タブキーでフォーカス移動したらフォーカスがどこにあるのかさっぱりわからなくなっちゃうし、ボタンにショートカットキーも表示されてないし。まぁ、このデモは Tablet PC みたいなデバイスで使うことを想定しているような感じがありますから、これはこれでいいのかも知れませんが。

Script# 0.2.0.0

青柳臣一 — Thu, 07 Dec 2006 10:53:00 GMT

WPF/E and Script#?より

Script# が 0.2.0.0 になってます。
Script# っていうのは IL の替わりに JavaScript を生成する C# コンパイラです。HTML 内から呼び出す JavaScript を C# で書けるわけですね。もっともバージョンが 0.2.0.0 ってところからもわかるようにまだまだ実験的なものっていう感じです。「デバッグはどうやってすんのよ」とかいろいろと問題はあると思いますし。
で、今回のバージョンアップは WPF/E 対応みたいです。さすが、さっそくですね。たぶんバージョンアップと言ってもコンパイラとかが変わったわけじゃなくライブラリが追加されただけとかじゃないかと思います。