ページ

2006年12月26日火曜日

JavaScript で LINQ 風のことをやる

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>

Wikipedia Explorer beta

Wikipedia Explorer beta より

Wikipedia Explorer というものが紹介されています。これは WPF を使ったアプリケーションで、Wikipedia の内容を表示したり、関連している単語を 3D で表示したりするものみたいです。ClickOnce アプリケーションとして公開されているので .NET Framework 3.0 が入っていればすぐに実行できます。

なかなかおもしろいと思うんですが、残念ながらソースは公開されていないみたいです。あと、ja.wikipedia.org には対応していないみたいです。

2006年12月25日月曜日

WPF/E のドキュメントと QuickStart

Getting ready for the new year with a refreshed "WPF/E" SDK より

WPF/E SDK のドキュメントがアップデートされたようです。
“WPF/E” (codename) Software Development Kit (SDK) Community Technology Preview (Dec 2006) もタイトルは Dec CTP と以前と変わっていませんが、日付が 2006/12/22 になっています。試しにいったん WPF/E SDK を削除してから入れなおしてみましたが、確かにファイルのタイムスタンプは変わっているようです。が、どこがどう変わったのかはよくわかりません。

あと、WPF/E SDK ドキュメントが
http://msdn2.microsoft.com/en-us/library/bb188266.aspx
こちらで公開されるようになった、あと、QuickStart が
http://wpfesdk.members.winisp.net/quickstart/
こちらで公開されたということみたいです。(今見てみたら左側のメニュー部分がうまく動いてないようですが、おそらく WPF/E SDK に入っている QuickStart と同じものじゃないかと思います) 

WPF/E Pad

WPF/E Pad より

XAML Pad の WPF/E 版という感じの WPF/E Pad が紹介されています。上記記事のスクリーンショットの画像が WPF/E Pad へのリンクになっています。そう、WPF/E Pad 自体が WPF/E で書かれているみたいです。テキストエリアの XAML を適当に編集して 「Load」 ボタンを押すと反映されるようです。

ソースもダウンロードできるので実用的価値よりも WPF/E のサンプルとしておもしろいかも。

2006年12月22日金曜日

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

Create cross browser vector graphics with Dojo より

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

2006年12月19日火曜日

Don't Click It

http://dontclick.it

すごいドメイン名ですね。Don't Click It (クリックするな)
勇気を持ってw アクセスしてみると全面に 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 キャンペーン

Local Search Japan Promotion より

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

2006年12月13日水曜日

Visual Studio 2005 日本語版で WPF/E する方法

Using WPF/E with International Versions of Visual Studio より


WPF/E SDK Dec CTP を入れるとスタートメニューに 「Install WPFE VS Template」 というのが追加されます。しかし、こいつを実行しても 「このテンプレートは Visual Studio 2005 Web Application Projects に依存してるからダメ」 と言われてテンプレートを入れることができません。で、依存しているという Web Application Projects が VS 日本語版には入れることができないので、WPF/E Template も入れることができません。(参考: MSKK ASP.NETアプリケーションマーティング担当者(鈴木祐巳,Masami Suzuki)Weblog


この問題の解決法が上記記事で紹介されています。(解決法というか、Template がやってくれることを手動でやるっていう感じですが)
主要なところだけ大雑把に訳すと、



  1. Visual Studio で Web サイトをファイルシステムに新規作成する (メニューの 「ファイル」-「新規作成」-「Web サイト」)
  2. その Web サイトの下に "js" という名前のフォルダを作り、上記記事に添付してある wpfestuff.zip ファイルの中の agHost.js と eventhandlers.js をコピーする
  3. wpfestuff.zip ファイルの中の plugin.xaml を Web サイトのメインフォルダにコピーする
  4. あとは、wpfestuff.zip ファイルの中の Default.html をコピーして使うか、もしくはこれの内容みたいな感じで aghost を作ればいい。

という感じです。


実際にやってみると、確かに VS 2005 上で WPF/E な開発ができるようになりました。けど、上の手順を見ればわかるとおり 「必要な .js と .xaml と .html を入れただけ」 です。XAML をデザインビューでデザインできるわけではないみたいです (Cider が使えない)。また、直接 XAML を編集するときにもインテリセンスが効きません。


XAML のインテリセンスは WPF とは namespace が違うために効かないんだと思いますが、WPF/E SDK Dec CTP をインストールすると C:\Program Files\Microsoft SDKs\WPFE\Help\XSD フォルダに wpfe.xsd が入っています。こいつをプロジェクトに含めてやればインテリセンスが効くようになります (一部、波線が消えないみたいですが、インテリセンスがないよりはまし)。もちろん、C:\Program Files\Microsoft Visual Studio 8\Xml\Schemas あたりに放り込んでもいいと思いますが、その辺はお好みで。


あと、上記の記事には 「WPF/E Dec CTP では XAML の中の international text はサポートされていない」 とあります。まさか、日本語が表示できないなんてことは、、、と思いやってみると、表示できませんね。「non-English を使いたいときは画像を貼り付けてくれ」 だそうです。

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

Calc 5: Online 3D Calculator より

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

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

で、当然 「グラフはどうやって描いてるの?」 というのが気になりますw もちろん、ポストバックして gif に描いてるなんてことはありません (それじゃ、なんにもおもしろくないしw)。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 がこれを使っているのかどうかは知りません)。

ラインを描画する

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> なんですね。なるほどなぁ。

2006年12月8日金曜日

ユーザー エクスペリエンス ガイドライン

ユーザー エクスペリエンス ガイドライン より

エバンジェリストの大野さんが Vista と WPF のデザインガイドラインを紹介されていました。残念ながら今のところ英語のみとのことです。「今のところ」 ということはそのうちには日本語化されるのかな?

WPF の方をちらっとだけ見てみましたが、すべきこと、してはだめなことを箇条書きにしてある程度のシンプルなものですね。

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

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 みたいなデバイスで使うことを想定しているような感じがありますから、これはこれでいいのかも知れませんが。

UniveRSS - 3D な RSS Reader

UniveRSS - a 3D Vista RSS reader

WPF で作られている 3D な RSS Reader です。実用的なのかどうかは知りませんw
ただ、XP SP2 環境では動かせませんでした。ソースを見ると Microsoft.Feeds.Interop とかを参照しているので IE7 の Feed API なんかが必要なんだと思います。(for Vista となっているので IE7 を入れても XP SP2 では動かないのかもしれませんが)

Healthcare (WPF のサンプル)

WPF Healthcare sample source is out より

WPF のデモというと必ずと言っていいほど登場する Healthcare ですが、ソース込みでダウンロードできるようになってました。
http://wpf.netfx3.com/files/folders/applications/entry6608.aspx
バイナリも入ってますので Avalon Patient Monitoring\bin\Release\Avalon Patient Monitoring.exe を起動してやれば動きます。XP SP2 上の .NET Framework 3.0 RTM でちゃんと実行できました。もちろん、Visual Studio 2005 でビルドもできました (いろいろと警告が出ますが)。

2006年12月7日木曜日

Script# 0.2.0.0

WPF/E and Script#?より

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

ASMX を STA スレッドで動かす方法

Running ASMX Web Services on STA Threads より

MSDN Magazine 2006/10月号の Wicked Code が紹介されています。
まだよく読んではいませんが、ASP.NET はデフォルトで MTA で動いてるけど、うまいこと HttpHandler を書いてやって .asmx を STA で動かすっていうことみたいです。(違かったらすみません)

# 必要になることがあるのかどうかはわからないけど、
# こういうネタには反応してしまうw

2006年12月5日火曜日

Anders Hejlsberg 氏と Chris McConnell 氏の対話ビデオ

Anders Hejlsberg and Chris McConnell: Reflections on LINQ, Desktop Search, WinFS, Functional and Intentional Programming より

Anders Hejlsberg 氏と Chris McConnell 氏の対話ビデオです。
Anders Hejlsberg 氏は、まぁ、ここを見ている人には説明不要でしょうw
Chris McConnell 氏は Desktop Search チームのアーキテクトだそうです。Channel9 の人が McConnell 氏に会ったときに 「Anders とはまだ会ったことがないんだよな。Desktop Search がらみで LINQ のこととかについて話してみたいな。あと、彼が Intentional Programing についてどう思ってるのかとか」 なんて話があって、「そこに Anders がいるから話そうよ。撮影するね」 となったみたいです。(軽いなw) TechEd のスピーカーラウンジで撮影されたものだそうです。

んが、聞き取れないなぁ。翻訳とは言わないから transcript が欲しいなぁ。

My Web Pages Starter Kit

Final version of ‘My Web Pages Starter Kit’ is here より

CodePlexMy Web Pages Starter Kit というのがあるそうです。
私はダウンロードもしてませんが、これは ASP.NET 2.0 ベースの個人向け CMS で、設定も簡単で、ファイルベースで、もちろんソースもついてて、というようなものみたいです。今は英語とドイツ語のみみたいですが、多くの他の言語のローカライゼーションキットも入手可能になると書かれてます。

読め: Optimizing WPF Application Performance

Required Reading: Optimizing WPF Application Performance より

MSDN Library に入っている Optimizing WPF Application Performance は必読だそうです。

Snoop - WPF アプリのデバッグ用ツール

Check out Snoop - a very useful tool for debugging WPF applications より

Snoop というツールが紹介されています。WPF アプリ用の Spy++ という感じで、ウインドウの構成やメッセージ (イベント) なんかを表示できるようです。

WPF で Vista ガジェットを作る

Writing a Gadget in Visual Basic and Windows Presentation Foundation より

WPF で Vista ガジェットを作る方法が紹介されています。
iframe を使って貼り付けるというのがよくありますが、これは COM として公開したコントロール (ActiveX コントロール) の表示面に ElementHost を貼り付けといてそこで WPF を動かしているみたいです。当然 HTML には ActiveX コントロールを貼り付けるわけですね。
# うれしいのかなんなのかちょっと微妙だなw

windowsvistaretail.com

Preparing for Windows Vista retail on www.windowsvistaretail.com より

なにやら
http://www.windowsvistaretail.com/index.html
こんなサイトが紹介されています。
ちゃんと
http://www.windowsvistaretail.com/index_jp.html
日本語もあります。 
1月末のコンシューマー向け Vista を販売する側の勉強用みたいなんですが、なんでこんなアニメーションなんだろw しかも、ドメイン名まで取ってw