2008年5月29日 matarillo

Silverlight2 Managed JS BubbleMark

Metalink » Bubblemark update

translated to Managed JS by matarillo.
http://inomata.lolipop.jp/blogdata/bubblemark/ (for Silverlight2 RTW)

Known behaviors

FPS is limited to “maxframerate”. Default value is 60 (fps).

2008年5月29日 matarillo

テキストエディタでSilverlight2 #2: XAMLについて

前回のつづき。

4. コードの説明

前回のHello Worldはこんなコードだった。

Import("System.Windows.Browser.HtmlPage");
HtmlPage.Window.Alert("Hello, World!");

では、この2行を説明しよう。

1行目のImport文にまず驚く。Import？なにそれ？しかも大文字で始まってて気持ち悪いし。その気持ちは分かるが、これは”Managed” JSだ。ぶっちゃけ.NETなもんで、我慢してください。
Silverlight2で動作するように最小限に切り詰められたMini CLR (Common Language Runtime)上で動作するDLR (Dynamic Language Runtime)がこのManaged JSを解釈し実行している。よって、.NETというかCLRとの相互運用性があるし、逆に言うと多くの機能はCLRのクラスライブラリとして提供されるので、相互運用せざるを得ない。

話を戻すと、このImport文は、CLRのクラスライブラリで提供されているクラスをManaged JSで利用するための組み込み関数だと思えばよい。ここでは、System.Windows.Browser名前空間に定義されたHtmlPageクラスを利用するためにImportしている。
なお、Javaのimport文とは異なり、Import文を書かないとそのクラスは使えない(フルネームで”System.Windows.Browser.HtmlPage”と書いてもエラーになる)。そういう意味ではjavaよりはpythonのfrom…import文と似ている。

2行目ではさっそくこのクラスを使っているのだが、どう使っているのかというと、HTMLブリッジと呼ばれる機能で、ブラウザのHTML DOMやJavaScriptにアクセスするのに使う。
HtmlPageクラスは(インスタンス化せずに使う)静的クラスであり、このクラスの静的プロパティであるWindowプロパティは、ブラウザのJavaScriptに組み込まれているwindowオブジェクトのラッパーを返すのだ。
あとはJavaScriptを知ってれば使えるはず(メソッドやプロパティが大文字で始まるという気持ち悪さを我慢すれば)。というわけで今回はwindow.alertを呼び出してみたというわけ。

5. Hello World その2

しかし、わざわざSilverlight2を動かしておいてブラウザのJavaScriptを使うなんて、意味がなさ過ぎる。なので、ちゃんと(?)Silverlight自身にHello Worldを出力させるのもやってみよう。
しかし、ここで新たに覚えなければいけないことが出てくる。XAMLだ。実は、Silverlightの描画エリアを使うためには、1つはXAMLファイルを書いておかないといけないのだ。
でも、XAMLなんか覚えたくない、書きたくないという人もいるだろうから、極力XAMLを書かない方向でこの連載記事は進めて行きたい。
ということで今回書いてもらうXAMLはこちら。ファイル名はapp.xamlとでもしておこう。

<Canvas
  x:Class="System.Windows.Controls.Canvas"
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Canvas>

男は黙ってCanvasタグ1つ。ちょっと名前空間がうるさいけど、これも我慢してほしい。
XAMLにはHello, World!の文字が含まれていないことに注目。Hello, World!はManaged JSでやってみよう。

続いて、app.jsxを書き換える。

Import("System.Windows.Application");
Import("System.Windows.Controls.Canvas");
Import("System.Windows.Controls.TextBlock");
var root = Application.Current.LoadRootVisual(new Canvas(), "app.xaml");
var tb = new TextBlock();
tb.Text = "Hello, World!";
root.Children.Add(tb);

これで完成。実行は前回と同様、chiron /b でよい。
Silverlight HelloWorld 2

6. コードの説明

今度のapp.jsxは7行。順に説明する。

1..3行目はImport文。これは説明してある。ただ今回インポートするクラスは前回とは違うものになっている。Applicationクラス、Canvasクラス、TextBlockクラスだ。
Applicationクラスは、Silverlight2アプリケーションのエントリポイントとなり、アプリケーションの動作を決定するクラスだ。動的言語を使わずに(C#などで)開発する場合はこのクラスを継承してアプリケーションを作ることになるが、動的言語の場合はDLRがうまくやってくれるので問題ない。

4行目。DLRが用意してくれたApplicationクラスのインスタンスを取得し、LoadRootVisualメソッドを呼ぶ。このメソッドでSilverlight2の描画エリアを初期化する。第1引数は描画エリアのルートとなるUI要素、第2引数はルートのUI要素を初期化するXAMLファイルだ。今回はCanvasタグだけを持つapp.xamlファイルを指定する。Canvasタグ以外は何もないんだから、このxamlファイルは無くてもいいんじゃないかと思うが、無いとエラーになるので仕方なく指定する。ちなみに戻り値は第1引数で指定したオブジェクトが帰ってくる。今回はCanvasオブジェクトだ。

5..7行目は想像が付くだろう。テキストを描画するためのTextBlockオブジェクトをインスタンス化し、”Hello, World!”という文字列を指定し、CanvasオブジェクトのChildrenプロパティ(UI要素のコレクション)に追加している。

何でCanvasオブジェクトにDraw○○みたいなメソッドが用意されてないんだ？と疑問に思った人もいるかもしれない。
でもこれは、Mini CLR上でUI要素を拡張して独自のコントロールを作って再利用するのをやりやすくするためのモデルなのだ。
それにしてもUI要素をコードで追加していくのは面倒だが、こっちはXAMLで解決するというのが設計方針のようだ。今回はルート要素を表現するXAMLしか書かなかったが、実際には各種の要素を入れ子にしたXAMLを書くのが普通であり、そのXAMLを適用すれば自動的にオブジェクトツリーが形成されるようになっている。そのあたりのことは次回以降に。

2008年5月27日 matarillo

テキストエディタでSilverlight2 #1: Hello World!まで

kaorunさんの記事の2番煎じのような気もするのだが、気にせず始める。
とりあえずのゴールは、BubbleMarkをManaged JSで実現すること。

といってもいきなりサンプルコードをダウンロードさせるのも面白くないから、Step By Stepで、かつなるべく説明を多めにしようと思う。

1. SDKの導入

Silverlight 2.0 Beta 1 プラグインのインストール
SDKの前に、Silverlight 2.0 Beta 1をインストールしておく。
Install Microsoft Silverlight 2 Beta 1(英語, Windows/Mac)
Dynamic Languages SDKのダウンロード
うまくインストールできたら、次はSDKだ。
WindowsユーザーならDownload Centerで入手できるSilverlight 2 Beta 1 SDKでもいいのだが、これだとMacの人はどうしようもない。ここでは、動的言語を使って開発する人向けのDynamic Languages SDKを使うことにする。これならWindowsでもMacでも大丈夫だ。
CodePlex: Silverlight Dynamic Languages SDK(英語, 要 .NET Framework 2.0以降)

注意: for Mac User

Dynamic Languages SDKに含まれているchiron(ケイロン: ギリシャ神話から)というツールは.NETアプリケーションである。MicrosoftはMac OS向けの.NET Frameworkをリリースしていないが、chironをMacで動かす方法はある。Monoだ。MacユーザーはMonoもインストールしておこう。
Download Mono(英語, Linux/Windows/Mac/Solaris)

2. プロジェクトの作成

プロジェクト作成といっても特別なファイルを作るわけではない。

パスを通す
コマンドプロンプトまたはターミナルからchiron.exeを実行できるようにしておく。Windowsであれば「システムのプロパティ」→「詳細設定」→「環境変数」でPATH変数の値を書き換えておけばよい。
プロジェクトフォルダの作成
どこに作っても良い。そのフォルダを基点に作業することになる。
作成したフォルダの中にサブフォルダを作る。この中に置いたファイルをchironを使ってパッケージングする。名前は何でもいい。ここでは仮に”app”という名前としておく。
Silverlightをホストするhtmlファイルの作成
プロジェクトフォルダの直下に置いておくのなら名前は何でもいい。中身にはSilverlightを起動する<object>タグが必要になる。他にもエラー出力などのためにも以下のようなファイルを作っておくと良い。
```
<html>
<head>
  <title>Silverlight Application</title>
</head>
<body>
  <div id='errorLocation' style="font-size: small;color: Gray;"></div>
  <div id="silverlightControlHost">
    <object id="silverlightControl" data="data:application/x-silverlight,"
      type="application/x-silverlight-2-b1" width="400px" height="300px">
      <param name="source" value="app.xap"/>
      <param name="background" value="white" />
      <param name="initParams" value="debug=true, reportErrors=errorLocation" />
      <param name="windowless" value="true" />
    </object>
  </div>
</body>
</html>
```
ここで注目してほしいのは<param name=”source” value=”app.xap”/>である。”app.xap”というのはchironによってパッケージングされたSilverlightアプリケーションである。ファイル名は(2)のサブフォルダ名に合わせておく。

3. Hello World その1

BubbleMarkに挑戦する前に、まずはHello Worldを済ませておこう。以下、作成するファイルはすべて”app”サブフォルダの中に置く。

AppManifest.xaml 設定ファイルの作成 (省略)
本当はAppManifest.xamlという名前の設定ファイルを作らないといけないが、作っていなかった場合はchironがデフォルトの設定内容でxapファイルを作る。Hello Worldであればデフォルトで問題ないので省略する。
app.js (またはapp.jsx)の作成
動的言語でSilverlightアプリケーションを作る場合のエントリポイントとなる。ファイル名は”app”にする(追記：変える時は起動パラメータで指定することができるそうだ。thanks っきさん)。拡張子は、Managed JSの場合は.jsまたは.jsx。IronPythonの場合は.py。IronRubyの場合は.rbにすること。
とりあえずapp.jsxという名前にする。内容は以下。
```
Import("System.Windows.Browser.HtmlPage");
HtmlPage.Window.Alert("Hello, World!");
```
chironの実行＆Hello World実行
ここまでできたら、プロジェクトフォルダをカレントディレクトリにして、
```
chiron /b
```
と実行する。するとchironが開発用Webサーバを立ち上げ、ブラウザが起動するはず(Silverlight2に対応してないブラウザが起動してしまった場合は、対応ブラウザで同じURLにアクセスすること)。

カレントディレクトリの一覧が表示されている。この状態で最初に作っておいたhtmlをクリックする。すると、chironがappサブフォルダの中身を動的にパッケージしてくれて、Silverlightアプリケーションが起動する。

無事アラートが表示されただろうか。
……よく見ると、これはブラウザのjavascriptエンジンがアラートを表示させているだけだ。もっとマシな方法はないのか。そのあたりは次回に。

2008年5月24日 matarillo

デジイチ入手

中古で入手。
D50

さっそく撮ってみると……
remote controller
え……ただのリモコンがなんか小洒落た感じに……

別のものを撮ってみる。

ぐはっ、これは破壊力抜群。腕がなくてもこの写真。

2008年5月23日 matarillo

宇宙に思いを馳せ続けた人、Google APIが縁でなんとNASAから招待される

なんて煽るとどこかの有名海外ニュースサイトみたいな話に聞こえるが、これ日本の話ね。

柏井勇魚さんはサイエンスファンを自認している。“Junkyard Review”と題したメモの中で、宇宙に関するニュースを多く綴っている。

そんな勇魚さんがGoogleSatTrackという、Google APIを利用して国際宇宙ステーション(ISS)の現在位置を表示するサービスを作り、公開したところ……。

以下は勇魚さんのtwitterからまるっと引用。(上が古く下が新しい発言になるように並び替え。)

lizard_isana
NASAからお手紙が着いた。開けるとき手が震えた。”cordially invites you” と書いてあった。泣いた。
09:42 PM May 21, 2008 from web

lizard_isana
@tomix これまでの経緯。GoogleSatTrackをたいそう気に入ってくれたCBS Newsの中の人と懇意に→リクエストが来る→2週間ほとんど寝ずにバージョンアップ→CBSの人大喜び→「打ち上げ見に来ない？プレスサイトに招待するよ」→「まじで！、絶対行く！」(続く) …
約18時間前 from TwitterFox 返信: tomix

lizard_isana
@tomix (続き)→プレスサイトは報道関係者用ビザが必要…orz → (何かミラクルなことが起きる) → NASAからVIP席への招待状が届く …
約18時間前 from TwitterFox 返信: tomix

lizard_isana
@tomix というわけなのです。自分の作品を誰かが気に入ってくれて、それが縁で子供の頃からの夢が叶う、というなんだか嘘のようなほんとの話。 …
約18時間前 from TwitterFox 返信: tomix

lizard_isana
@tomix 今回の打ち上げなので、29日出発です。あと一週間。
約16時間前 from TwitterFox 返信: tomix

勇魚さんおめでとうございます！楽しんできてください！！

(追記：23:07)勇魚さんご自身による今回の顛末！

2008年5月20日 matarillo

Silverlight2でClient-side database storage(2)

前記事の続き。

まずはSQLの実行テスト。
うーん、”.”以外だとこけるな。

WHATWG HTML5の仕様に沿ったJSのライブラリとしてまとめるのにはまだたどり着かない。

(追記1)あ、こけてるのは俺が書いたダミー実装クラスじゃん。(NotImplementedException投げてる。)お恥ずかし。本実装しなきゃ。

(追記2)よし、これで直ったかな？

(追記3)ソースコードはここ。

2008年5月20日 matarillo

Silverlight2でClient-side database storage(1)

というのが適切なサイズの問題になるなあと、dashmarkを横目で見ながら思ったので、やってみている。

Silverlight2における分離ストレージの話はっきさんのwikiにまとめられている。KKI_++
RDBMS実装はSharpHSQLをSilverlight用にすこし修正して使う。
JavaScriptからSilverlight2のクラスを呼び出す話はcoma2nさんがネタにしている

なーんだ、かなり小さなサイズまで分割されているではないか。こういうところはFlashより楽なところかも。
できたらCodeReposかGoogle Codeあたりにつっこんで報告します。

2008年5月18日 matarillo

典型的な、あまりに典型的な

前に記事を書いた話題がまだ続いている。

「典型的」と言ってもね、typicalとstereotypedとではニュアンスが変わってくるし、それももめる原因になるなあ。
もちょっとこう、You vs. I ではなく Problems vs. Us で論じたほうが良いわけなんだが、Problemsの中にJavaを入れるのは下策ではないのか。
たとえばね、「典型的」という言葉を「典型的なSI脳」とかにしたらどうだよ。ここでは、「典型的なSI脳」＝世間的な潮流に乗っかることがエンタープライズとか大規模とかでは重要という考え方、ぐらいの意味。「メインストリーム幻想（ファンタジー）」とでも言うか。
そうすると、「典型的なSI脳」だと、自分の頭で考えることが逆にマイナスだったりする場合もある。それは、技術的に優れていることよりも、技術者の調達とか教育とかを低リスクにすることの方が重要だと信じているから。
で、「典型的なSI脳」を持ったJava開発者のことについて論じてみてはどうか。

上のような定義だと、「典型的なSI脳」を持ったRuby開発者なんてきっとほとんどいないことだろう。それが良いことなのかは別だけどね。
SI脳。yes, I Know. 腹減ったからカレー食おう。

(追記)ひがさんとこでは「サラリーマンプログラマ」＝技術的な興味はほとんどなく仕事として黙々とこなしている人、という定義で話を進めてるな。それはruby界にはほとんどいなくて、でもそれが良いことであるとは限らないことも同じ。

2008年5月15日 matarillo

Visual Studioの拡張性

ちょっと甘く見ていた。そういやVisual Studio SDKというのがあったのだった。

これはVS 2008 SDKのスクリーンショット。サンプルが多数ある。

この類の日本語情報がVSUGに集まってくるといいんだけどね。
ただなあ……無償で配布しているExpress Editionだと機能拡張に制限がある(その上、VS SDKがインストールできない)のがなあ……

2008年5月14日 matarillo

Graphvizの陰に日本人研究者あり

【注意：このエントリは主題が発散しています】

グラフ構造可視化ツールとして有名なGraphviz。
グラフ構造を記述するdot言語とあわせて、FOSS界ではかなり使われていると思う。

これと目的を同じにするツールがMS Researchから出ている。MSAGLだ。
これ、以前はGLEE(Graph Layout EnginE)という名前で、無償でダウンロードできたんだが、今は名前を変えて、しかも有償になってしまった(Windows Marketplaceで販売している)。
残念だなーと思っていたが、昔のGLEEが今でもダウンロードできるようだ。

話は逸れるが、QuickGraphという.NETのライブラリがある。これはグラフ理論に基づくデータ構造とアルゴリズムのライブラリだが、描画部分はGraphvizとGLEEの両方に対応している。

閑話休題。

で、このどちらも、グラフ構造を自動レイアウトするツールなわけだが、両者のドキュメントを読むと、日本人の名前が出てくる。
杉山公造教授だ。
詳細は研究テーマ紹介ページに書いてあるが、グラフを自動描画するアルゴリズムを複数考案し、うちひとつには杉山教授の名前がついているのだ。
(論文の共同執筆者である三末和男准教授もグラフ自動描画の研究をされている)

以上、とくに落ちはない。敬意と感謝をささげつつ、ツールを使うのであった。

	lizard_isana NASAからお手紙が着いた。開けるとき手が震えた。”cordially invites you” と書いてあった。泣いた。 09:42 PM May 21, 2008 from web
	lizard_isana @tomix これまでの経緯。GoogleSatTrackをたいそう気に入ってくれたCBS Newsの中の人と懇意に→リクエストが来る→2週間ほとんど寝ずにバージョンアップ→CBSの人大喜び→「打ち上げ見に来ない？プレスサイトに招待するよ」→「まじで！、絶対行く！」(続く) … 約18時間前 from TwitterFox 返信: tomix
	lizard_isana @tomix (続き)→プレスサイトは報道関係者用ビザが必要…orz → (何かミラクルなことが起きる) → NASAからVIP席への招待状が届く … 約18時間前 from TwitterFox 返信: tomix
	lizard_isana @tomix というわけなのです。自分の作品を誰かが気に入ってくれて、それが縁で子供の頃からの夢が叶う、というなんだか嘘のようなほんとの話。 … 約18時間前 from TwitterFox 返信: tomix
	lizard_isana @tomix 今回の打ち上げなので、29日出発です。あと一週間。約16時間前 from TwitterFox 返信: tomix

平々毎々 (Hey hey, My my)

rock and roll can never die.

月別アーカイブ: 2008年5月