Contents
  1. DebugWindow
  2. 注目をあびる優れた検索エンジン
  3. wema
  4. Nifty Corners++ Update
    1. ダウンロード
    2. niftypp.html
    3. niftypp2.css
    4. 議論
    5. リンク
  5. sIFR
  6. Nifty Corners++
    1. download
    2. 使い方
    3. で、
  7. Buzz Game
  8. Giant Steps
  9. Ruby on Rails
  10. Gonzui CSS対応
  11. Gonzui JavaScript対応
  12. JavaScript at SourceForge
    1. TinyMCE
    2. IE7
    3. HtmlArea
  13. Google Maps
    1. AlphaImgFactory
    2. Ajax
    3. versionの違い
    4. 動的生成
    5. 使いまわしがききそうな部分
    6. 他の分析
  14. 2005-03-18
  15. Ajax
    1. Ajaxを説明する時に絶対使ってはいけない用語
  16. VML
    1. 誰も知らないけど実はイケてる技術
    2. で、
    3. Mozilla SVG
  17. RealtimeWiki
  18. Wikiばな Vol.4
  19. Rast
  20. Break it
  21. David Elsewhere
  22. インデント記法
    1. Occam
    2. Tab wars
    3. Haskell Occam Python
    4. links
  23. Interaction 2005
  24. Senna
    1. Rast - N-gram based full-text search system
    2. モリタポAPI
  25. install Subversion
    1. on Debian Woody
  26. International Symposium on Wikis
  27. JavaScript Programming

0503

DebugWindow

以前、debug.jsを紹介したが、それの改良版としてDebugWindowを作った。 debug.jsの場合は外部Windowが出るため、SP2などではポップアップが ブロックされ、うまく出なかったりする。また、複数のWindowで一つの Windowが共有されるが、それぞれのWindowに出てほしい状況などがある。 そこで、それぞれのWindowにwemaのような浮遊するブロックをおき、 debug messageが表示されるような仕組みにした。 以前のdebug.jsよりも、かなり使いやすくなっていると思う。

0.3では、closeボタンを追加しました。

0.2では、FirefoxとIEで動作します。それ以外は未確認。

0.1では、Firefoxで動作します。

注目をあびる優れた検索エンジン

全文検索エンジンというと、いままでは単語間を区切る、 いわゆる単語方式の検索エンジンが主だった。 しかし、いきなり最近になって、n-gram方式のフリーな検索エンジンが 三種類も公開されることになった。 Rast, Senna, HyperEstraierである。 それぞれ少しづつ異なった特徴をもっており、 用途によって選べる。

いままでは全文検索エンジンというと、大規模な文章セットをWebから 検索するシステムだったり、設定が面倒だったりして、用途が 限定されていた。 しかし、これらの注目をあびる優れた検索エンジン検索エンジンは、 様々な用途に組み込んで使うなど、用途が汎用的になっている。 今後様々なシステムにこれらの全文検索エンジンが塔載されるように なるのは必至であると思われる。

n-gram方式の利点は様々にあるが、検索精度が高くなるということ。 単語方式だと、「東京都府中市」という単語は、 「東京,都,府中,市」に分割してインデクシングされる。 しかし、n-gramだと、単語間の区切という情報を使わないため 「京都府」という検索語でもその文章がひっかかると。

もちろんいい面と悪い面とがあって、その状況では「東京都府中市」は ひかかってほしくないという用途もあるだろう。その場合にそういった 語句を除外するような条件を設定できるとうれしい。そのような 条件をどのように指示するのかという話になって、検索条件の 演算が必要になってくる。

単純な状況では三つともあまり変わらないかもしれないが、 そのような複雑な状況では、使い勝手の違いが徐々に出てくる。 実は三つとも、純粋なn-gramではなく、単語方式もある程度 サポートできるようになっていて、 そのような複雑な対象に対応できるように配慮されている。

そうすると、三つの違いを把握したり、それぞれのバッ、いや違った 注目をあびる優れたノウハウを蓄積したりする必要が出てきたりして、 奥の深さを探究する、大変楽しい一時が過せるようになるのではないか。 三つとも、だいたい半年後くらいには実用に供されるようになると思われる。 半年後のSDの特集は、 「Rast, Senna, HyperEstraierを使いこなす」 ではないかと予測してみたり。

wema

eto.comだけを見ている人は、wemaを作ったのはetoなんじゃないかと思うのではないかという説があった。たしかにそうかも!

なので宣伝しておきます。 wemaは元々、ふしはらかんさんの作によるものです。

このへんも見てみましょう。

Nifty Corners++ Update

Updateしてみた。どうでしょう。

ダウンロード

このへん→

niftypp.html

<style type="text/css">
div.day {
  -moz-border-radius: 5px;
  margin: 0 10%;
  background-color: #9df;
  border: 0px solid #37b;
}
</style>
<script type="text/javascript" src="niftypp.js"></script>

こんな感じに記述すると、それだけで角丸になる。 「-moz-border-radius」というのはMozillaの独自属性なのだが、 それをIEから読み取って、対応してやるという処理をしている。

もちろんMozillaのborder radiusを再現しているわけではなく、トリガとして だけ用いている。なので見た目が同じになるわけではない。 また、本来Mozillaであればこの属性だけで角丸を実現できるのだが、 見た目を一致させたいので、あえてFireFoxでも同様にNiftyCornersによる 角丸を追加している。

niftypp2.css

ul#nav li{
  -moz-border-radius-topleft: 5px;
  border-color: #e7e7e7;
  background-color: #FFC;

このように、上だけを丸めるということもできる。「上だけ」なのに、 「-moz-border-radius-topleft」と、topleftにしているのはMozillaの属性とし てはtopleft, toprightなどしか無いからだ。本来はそのへんを含む対応をで きるといいのだけど、とりあえず今回は、NiftyCornersの元々の仕様を保持し つつ、インタフェースを改善できるかをテーマとしていたので、保留とした。

議論

とりあえず、いっぱい論点が出てくると思うのだが、保留。 今日はつかれたのでここまで。

リンク

VMLでなんとかしておる。GJ!

アプローチとしてはかなり割切っていて、いい感じだね。

Nifty Corners++

Updateしたので、こちらをご覧ください。


例のCSSだけで角丸を作るという仕組み、かなりいいんじゃないかと思んです ね。でもいろいろとつっこみどころ満載であることは確か。一つ一つつっこみ どころにコメントしてもいいのですが、文句言うだけだったら何の意味もない ので、試しに自分なりの実装を作ってみました。一応名前をつけてみた。 「NiftyCornes++」です。

download

ここです→

使い方

この二つのファイルをおいて、ファイルを表示させてみてください。 Nifty Cornersと同じように角丸になると思います。 見た目でちょっと違うのは、borderがついているところ。

現在のところIEでしか動きません。FireFoxでも動くはずなんだけど、まだつ めきれていない。FireFoxで動かない理由は、もうすこしつっこめばわかりそ うなので、今日のところはこの現状でだしときます。

仕組みとして何が違うのかというと、JavaScriptにて、角丸の色を指定してい ないという点。StyleSheetsをよみとって、divのborderとbackgroundの色を取 得して、自動的に処理しています。こうすることによって、角丸にしたい classの名前を指定するだけで、後は自動的に処理してくれるようになります。 BGやborderの色を変更するときは、CSSを変更するだけですむ。borderをつけたく ないという場合は、幅が0のborderをつけて、色だけ指定してください。

border: 0 solid #fcc;

こんな感じにすれば、色を指定するだけということになります。 あえてborderから色を取得しているのは、そのdivをとりまく環境の色を取得 するのはとても難しいからです。

で、

これに何の意味があるのかという話は長くなるかな。要するに、CSSだけで色 を指定できるようにすることによって、メンテナンスコストが下げられるとい うこと。classを指定しているdivだったら、何でも角丸にできるので、tdiaryの テーマでも、MTのスキンでも、ほとんど何でも角丸にできる。追加するコードは ほんのわずか。

<script type="text/javascript" src="niftypp.js"></script>
<script type="text/javascript">
window.onload = function() {
  g_niftypp.make_round_div("day");
}

これを追加するだけで、ほとんどなんでも角丸にできると。ウマー。

もっと改良の余地はありますが、今日のところはここまで。

Buzz Game

おもろい。GooglePlotととふむWikiファンドが合体したみたいだな。

Giant Steps

teevee graphicsとか好きな人にはもう絶対でしょ。

Ruby on Rails

今日はRHG勉強会に参加して、Ruby on Railsについて学習してきた。 無茶苦茶勉強になりました。

ちょっとショックだったのは、もともとWikiエンジンだったものを拡張していって、 Webアプリケーションフレームワークになったっていうところ。

qwikWebも、基盤的な部分を整備していった結果、かなりフレームワーク的な ものへと拡張されている。例えば、

/test/FrontPage.html

というのは、内部的には、

site=test&pagename=FrontPage&action=html

という感じに展開されて、処理される。(本当はもうちょっと面倒だけど。) こうすることによって、Actionの中にmethodを追加するだけで、 どんどん機能を追加できるようにしている。

また、できるだけテストを楽に行えるようにしている。

  class TC_ActSample < Test::Unit::TestCase
    include TestSession

    def test act_hello
      session("/test/.hello")
      assert_xpath([:title, "hello, world!"], "//title")
    end
  end

これは、まず/test/.helloというURLにアクセスする。次に、結果となるxhtml ファイルからXPathによって//titleという部分を抜き出す。その中身が <title>hello,world!</title>であることを検査する、という意味になってい る。このような仕組みで、実際にブラウザ経由でWebをアクセスしたのとほぼ 同等の処理をテストすることができるようにしている。XPathでXML文章の内部構造を そのまま指定できるというのがポイント。こうすると、かなりピンポイントで 位置を特定してテストできる。いい感じ。

また逆に、方向性の違いも感じた。データ中心主義と、ドキュメント中心主義 の違いみたいか感じ? SQLでTable作ると、それがWebにそのまま反映されるという のは非常に面白いが、私が考えている方向性はどんなに先に進めてもそうは ならない。私はあくまでも、データではなくドキュメントを中心に考えているのだな と思いました。このへんの違いは考えてみると面白い。

Gonzui CSS対応

調子にのって、CSS対応を作ってみました。 これもまたad hocです。Keywordsは、css-mode.elからもってきました。 本当はクラス名やタグ名の対応もとれるといいんだけど、やってません。 やはりコードとしては、コピペ&sedです。

langscan-css-0.01.tar.gz こちらからどうぞ。

Gonzuiはいままでは完全にプログラマのためのものだったけど、CSSなども検 索できるようになると、Webデベロッパにも使い道が出てきて、いい感じなの ではないかと思ってみました。

Gonzui JavaScript対応

Miyagawaさんに影響されて、JavaScript対応を作ってみました。

langscan-javascript-0.01.tar.gz こちらからどうぞ。

作ったといっても、ほとんどJavaをJavaScriptに書き換えただけなんですけど ね…。Javaとほとんど同じなので、本当は継承みたいな仕組みにしたほうがい いのかもしれません。現状では単なるコピペ&sedです。

Javaには無くて、JavaScriptだけにあるKeywordsを追加しています。

var function with typeof

これはad hocに目で見て判断しました。本当は仕様書を見ないといけないと 思うが、やってません。

JavaScript at SourceForge

SourceForgeで、JavaScriptのプログラムをさがしてみた。

TinyMCE

JavaScriptでWYSIWYGを実現する。

% ./gonzui-import tinymce_1_43.tgz

よし、うまくいった。

IE7

名前がキャッチーだね。

IE6において、CSS2/CSS3などを使えるようにするというJavaScriptのライブラリ群。

HtmlArea

JavaScriptでWYSIWYGを実現する。って同じじゃん。

リリースしてないじゃん、と思ったらCVSにありました。

% ./gonzui-import --cvs :pserver:anonymous@cvs.sourceforge.net:/cvsroot/itools-htmlarea htmlarea

便利だなー。

Google Maps

Google Mapsのソースを読む。

コードはObfuscateされている。

  • クラス名は一文字か二文字に統一されてる
  • の直前の;は確実に消されてる
  • 改行や余分な空白は消去されてる

このように、機械的にコードを処理しているのは確実を思われる。

JavaScriptでアプリを組む欠点の一つは、ソースがクライアントで丸見えになっ てしまうことだ。完全に防ぐことはできないが、Obfuscateである程度は対処 できる。obfuscate の過程で転送量の削減もできるので一石二鳥という説もあ る。(もちろんこれはJavaアプレットでも同じだけどな。Flashはよく知らない。)

ここだとクラス名がちゃんと出ている。どうやってるのかな? あてずっぽうでクラス名をあてはめてるのかな? それにしてはよくできている。 InScriptで、グローバル変数、クラスなどを抜き出して見ることができる。

AlphaImgFactory

function AlphaImgFactory() {
}
AlphaImgFactory.count = 0;
AlphaImgFactory.createElement = function(M, Ac) {
  if (typeof arguments.callee.hasFilters == "undefined") {
    var zi = document.createElement("div");
    arguments.callee.hasFilters = typeof zi.style.filter != "undefined";
  }
  var f;
  if (arguments.callee.hasFilters) {
    f = document.createElement("div");
    f.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + M + (Ac ? '",sizingMethod=crop)' : '")')
  } else {
    f = document.createElement("img");
    f.src = M
  }
  return f;
};
AlphaImgFactory.create = function(M, i, n, S, top, Va, Ac, Ia) {
  return ImgFactory.create(M, i, n, S, top, Va, Ac, Ia, AlphaImgFactory.createElement);
};

かなりバッドです。やっていることは、画像を表示させているだけ。でも、 PNGファイルのアルファ値を使った透過機能を有効にさせたい。IEの場合は、 普通にIMGで画像を表示させてもそうならないので、DIVにCSSのDirectXフィル タ機能を使って画像を貼り付けている。こうすると、ちゃんとPNGの透過が有 効になります。

Ajax

function XmlHttpReqFactory() {
}
XmlHttpReqFactory.create = function() {
  if (typeof ActiveXObject != "undefined") {
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
  }else{
    return null;
  }
};

XMLHttpRequestオブジェクトの生成。

function Xslt(se) {
  this.stylesheet = se
}
Xslt.cache_ = new Object();
Xslt.isSupported = function(Ab) {
  return typeof Ab.transformNode != "undefined" ||
	 typeof XSLTProcessor != "undefined" &&
	 (XSLTProcessor.prototype && XSLTProcessor.prototype.importStylesheet);
};
Xslt.create = function(se) {
  return new Xslt(se);
};
Xslt.getCached = function(Ib) {
  return Xslt.cache_[Ib];
};
Xslt.cache = function(Ib, Jg) {
  Xslt.cache_[Ib] = Jg;
};
Xslt.prototype.transformToHTML = function(Ab, Za) {
  if (typeof Ab.transformNode != "undefined") {
    Za.innerHTML = Ab.transformNode(this.stylesheet);
  } else if (typeof XSLTProcessor != "undefined") {
    var xf = new XSLTProcessor();
    xf.importStylesheet(this.stylesheet);
    var qj = xf.transformToFragment(Ab,window.document);
    Za.innerHTML = "";
    Za.appendChild(qj);
  } else {
  }
};

XSLTのプロセッサを取得し、変換をかけている。 なぜサーバサイドで変換かけないのかよくわからないんだけど。

Xslt.asynchronousTransform = function(Ab, Za, Kc, nb, ya) {
  var Cc = Xslt.getCached(Kc);
  if (Cc) {
    try {
      Cc.transformToHTML(Ab, Za);
      if (nb) {
        nb();
      }
    } catch(b) {
    }
    return;
  }
  var Ue = Tickets.create(ya);
  var sc = XmlHttpReqFactory.create();
  Sd('<a href="'+encodeQuotes(Kc)+'">' + encodeXML(Kc) + "</a>", 0);
  sc.open("GET", Kc, true);
  sc.onreadystatechange = function() {
    if (sc.readyState == 4) {
      if (Ue.isValid()) {
        try {
          var Id = sc.responseXML;
          var Cc = Xslt.create(Id);
          Cc.transformToHTML(Ab, Za);
          Xslt.cache(Kc, Cc);
          if (nb) {
            nb();
          }
        } catch(b) {
	}
      }
    }
  };
  sc.send(null);
};

これがXMLHttpRequestを使っている部分。 受け取ってすぐにXSLTかけてるとは思ってなかった。

function parseXMLString(str) {
  try {
    if (typeof ActiveXObject != "undefined" &&
        typeof GetObject != "undefined") {
      var Id = new ActiveXObject("Microsoft.XMLDOM");
      Id.loadXML(str);
      return Id;
    } else if (typeof DOMParser != "undefined") {
      return(new DOMParser()).parseFromString(str, "text/xml");
    } else {
      return parseXML(str);
    }
  } catch(b) {
  }
  try {
    return parseXML(str);
  } catch(b) {
    return document.createElement("div");
  }
}

DOMのParseをしている。

まさしく絵に描いたようなAjaxですな。順番が逆か。 こういうのを見て、Ajaxというのを言いだしたわけだから。

function parseXML(T){
中略
}

JavaScriptでXML Parser書いてるよ…。こうやってXSLTに対応してない ブラウザにも対応するようにしてるんだな。涙ぐましい。

他、DOMと同等のものを実装するなどしている。要するに、対応してないブラ ウザは、それと同等な機能をJavaScriptで実装して提供していると。

versionの違い

過去のversionでは、ブラウザのタイプ分けによって処理を分岐させていた。 最新版ではversionによる分岐が最小限になっている。

XMLParserなどは初版には無かった。要するに、どんどん対応してないブラウ ザへの対応を進めているということか。

動的生成

d.prototype.createImageSegments=function(rb,Ab,La,ea){
...中略...
    var C = "http://www.google.com/maplinedraw?width=" + g + "&height=" + k + "&path=" + u;
    nd('<a href="'+C.xmlEscape()+'">' + C.xmlEscape() + "</a>",0);

これ使って線を描いている。

なるほど。こうやって線を描いているのか。

こんなコードかいてるやつがいる。GJ.

使いまわしがききそうな部分

(このあたりはmaps.1.jsが元になってる。最新版では消されてます。)

String.prototype.xmlEscape = function() {
  return this.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
};
String.prototype.jsEscape = function() {
  return this.replace(/\\/g,"\\\\").replace(/\'/g,'\\"').xmlEscape()
};
Array.prototype.clear = function() {
  while(this.length > 0) this.pop();
};

こうすればStringなどの基本クラスにメソッドを追加できるのか。便利だね。

document.getElementsByClassName = function(ia) {
  var ec = document.all;
  if (!ec) ec = document.getElementsByTagName("*");
  var ge = new Array();
  for (var a = 0; a < ec.length; a++) {
    if (ec[a].className == ia) {
      ge[ge.length] = ec[a];
    }
  }
  return ge;
};

クラス名を指定してelementをgetする。documentにメソッド追加すると便利なのか。

他の分析

ma.la氏のところでも、分析してます。さすがに秀逸です。

転送されているデータも含めた分析。XSLTの挙動などを確認するのに。

すごい勢いで解析かけてます。脱帽。

deobfuscation of Javascript code. これを使えば、Obfuscateされたコードがみやすくなります。 でも当然、クラス名の復元はできない。

2005-03-18

http://pro.html.it/esempio/nifty/ CSSだけで角を丸める。感動した。

Ajax

Ajaxに対する私の評価は、アンビバレントだ。

Ajaxで提唱されている技術の使い方は、実際には何年も前から存在していたも のであり、なんら新しいものではない。例えばXMLHttpRequestの説明のページ は、2002年4月、つま り約3年前に書かれたものだ。説明ページが3年前に書かれたということは、そ れよりも前から使える状態にあったということ。また、非同期にページの内容 を取得する技術そのものについても、それ以前からIFRAMEとJavaScript, DOM の組み合わせを使えばほぼ同等のことを行えた。それをオブジェクトとして使 いやすくしたのがXMLHttpRequestだ。つまり非同期通信そのものは、もっと前 から可能だった。

単なる技術の使い方に4文字の略称をつけると、とたんに新しい技術が生まれ たかのように扱われる。素人がそうであるのはいいとして、技術者や研究者で さえ同じように信じこんでいる姿を見ると、さすがにげんなりする。本当に技 術者や研究者の影響力というのは限定的なのだなと実感する。コンサル様様で ある。

でも、Ajaxを提唱した Jesse James Garrett氏は、 ユーザー中心デザインの本を書いてたりする、 実績のある優秀なコンサルだ。 あと、ブログ・ハンドブックを書いた レベッカ・ブラッドの夫であることでも有名だったりする。

ということで、Ajaxいいじゃないですか! Ajaxイケてる! Ajax最高!

  Ajax! Ajax!

    _  ∩ 
  ( ゚∀゚)彡  
  (  ⊂彡 
   |   |  
   し ⌒J  

もちろん実際には、昔から使える技術だったというのはたしかだが、それは一 部のブラウザでの話。様々なブラウザで同じように使えるようになったのはつ い最近だ。同様に、実際にアプリケーションにおいて使いこなすところが出て きたのも、本当につい最近だ。GMail, Google Suggest, Google Mapsなどの極 端な実例がでてきて、ようやく本当に使えるんだという実感を持てるにいたっ たということ。このような文脈で考えれば、今注目されはじめたのはおかしく ない。つまり、枯れた技術の水平思考、それがAjaxの実体である。

Ajaxを説明する時に絶対使ってはいけない用語

DHTML
これはDynamic HTMLの略で、JavaScript+CSS+DOMなどを組み合わせた技術の使い方につけられた名称。

CSSの出てきた当初、Microsoftはこのような技術の組み合わせを推奨し、それ にDynamic HTML、略してDHTMLという名前をつけていた。文字が踊ったり、画 像が飛びまわったりといった、ユーザビリティ最悪のページが量産された。 結果として、CSSやJavaScriptはイケてないという評価につながり、その後の 長い長い冬の時代を導く結果となった。

実際にはAjaxのコンポーネントである

Asynchronous JavaScript + CSS + DOM + XMLHttpRequest

と、DHTMLのコンポーネントである

JavaScript + CSS + DOM

とでは、AsynchronousとXMLHttpRequestしか違わない。

つまり、AjaxとDHTMLは、短い説明の字面しか追わなければ同じようなものに 見える。実際にはもちろん、技術の向かっている方向が違うので結果も違って くるのだが、過去に与えた悪印象はなかなか消せるものではない。そして、こ れこそがAjaxという新しい略称が必要だった理由である。

Push
通常はクライアントからサーバに情報を聞きにいくのだが、逆にサーバからクライアントに情報を送るというモデルにつけられた名称。

でも実際には単に定期的にクライアントからサーバに聞きにいっている、つま りポーリングしているだけで、原理的にPushである技術はほとんど無かった。

定期的にサーバに更新状況を聞きにいくというモデルを聞いて何か思い浮べた 人はいるだろう。そう、今普及しているアンテナや、RSSリーダと、モデルと してはまったく変わりない。(RSSはたいしたことが無い技術だと思わせたかっ たら、Pushという単語を使って説明するとよい。)

動的更新というメカニズムを説明すると、Pushと同じなんじゃないのと言われ ることがある。サーバ側の負荷が高まり、ネットワークのトラフィックが増大 するといった欠点をそのまま保持しているのは事実である。このへんを説明す る言い訳を考えておかないと、「論文だったら落します」って言われちゃうか ら気をつけてネ!

VML

誰も知らないけど実はイケてる技術

VML
Vector Markup Languageの略。ページ上にベクターグラフィックスを表示するための技術。

Google Mapsでヘビーに使われている。なぜイケてるのかを理解しようとしな い人には、「あのGoogleがヘビーに使ってるんですよ!」とだけ言うようにし よう。

VMLはベクターグラフィックスを指示するためのXML言語である。SVG (Scalable Vector Graphics)とキャラがかぶっていると思われるだろうが、そ れもそのはずで、実はこのMicrosoftが提唱したVMLと、Adobeが提唱した別の 規格との二つを統合したのがSVGという規格なのである。つまり、VMLはSVGの 祖先ということになる。

そうなのであれば、新しい規格であり、W3Cが勧告するSVGを使えばいいんじゃ ないかと思われるが、実はそうでもない。ブラウザと統合された実装がまだほ とんどないからだ。実はFireFoxにおけるサンプル実装はすでにあるが、まだ 正式版には含まれていない。現状で普及しているのは、AdobeによるSVG Viewerプラグインだけだ。

VMLの利点は、ブラウザと緊密に統合されている点にある。何でプラグインじゃ だめなの? ブラウザに統合されてなくちゃいけないの? という質問もあると思 うが、この説明はちょっと難しい。簡単に言えば、Google Mapsのようなものを 実現するのにこの手法が最適であるということ。

これはIEでしか動作しないため、実際に試してみたことのある人はとても少な いと思われるが、実際に使ってみれば、とてもカタくて安定した実装であるこ とに気が付くだろう。なぜかといえば、これはOfficeとの統合において必要と された技術だからだ。

VMLを試してみたことがある人はごくわずかだろうという話をしたが、しかし 実際にはVMLが使われているページはたくさん公開されている。なぜかと言え ば、WordからファイルをHTMLとしてセーブすると、そこにはVMLが使われるか らだ。Wordでは線を引いたり丸を描いたりすることができるが、そのような描 画を含むWordファイルをHTMLとして出力すると、それらの描画はVMLに変換さ れて保持される。これはExcelでもPowerPointでも同様である。つまり、 Officeで使われる描画全てが、IEでもまったく同様に表示されるようにするた めに必要な技術として、VMLが実装されたのだ。

誰も意識していないが実際には頻繁に使っている技術、それがVMLだ。 枯れた技術が大好きなGoogleがこの技術を選ぶ理由が、わかってくるだろう。

で、

本当のところを言えば実際に私がVMLを使ってみた経験で言うと、こりゃ駄目 だと思った。どんなにいい実装でも、IEでしか使えないし、しかも他のブラウ ザで使えるようになる可能性はない。ベクターグラフィックスはSVGというこ とでW3C的には決着ついたから、いまさらVMLの新規実装を試みる人はまずいな いだろう。SVGとの統合であればFireFoxで進められているから存在はしている が、遅々として進まないし、FireFoxオタクですら存在を知らない。なので、 FireFox使ってる人から「IEでしか使えないじゃん」という文句を聞かされる ことになる。本当に問題なのは、FireFox SVGが遅々として進んでいないこと で、つまりは逆ギレなんだけど、逆ギレしている人は往々にして自分が逆ギレ しているとは思っていない。なので、説得するのはあきらめて、ただその場を 立ち去ることにした。

ということでVMLをつっこんで使うのはやめたのだが、Google Mapsには驚いた。 たしかにここまでやればできるだろうと思った地点はあるにはあったが、それ をやるにはあまりにも多くの工数がかかるので、実装は不可能とあきらめた。 Google Mapsはそれをやっている。

何かといえば、VMLが使える実装、つまり約90%の人が使っているブラウザでは VMLを使って画面表示をして、それ以外の実装では動的にPNGファイルを生成し てそれを送りつけて表示させるようにしている。つまりサーバサイドでVMLを 解釈して画像に展開し、クライアントに戻すという処理をしている。これはも のすげー大変だと思うのだが、実際にそれをやっている。心底びっくりしました。

Mozilla SVG

  1. Go to the url "about:config"
  2. Type "svg" in the filter field
  3. Double-click the "svg.enabled" line so that the value is "true"

RealtimeWiki

qwikWebに、リアルタイム更新機能をつけてみました。

http://qwik.jp/HelloQwik/ActMonitor.html

負荷がたかいため、一旦機能を停止させました。

例えば、あるページを二人の人が同時に見ているとします。一人の人がページ を編集すると、もう一人の人のページが即座に書きかわるという機能です。

要するに、今流行りのAjaxです。

この機能はテスト中なので、JavaScriptエラーが起る可能性があります。 エラーなどありましたら、ぜひ教えてください。-> info at qwik.jp

Wikiばな Vol.4

http://wikibana.socoda.net/wiki.cgi?WikiBana%2fVOL%2e4%2f%a5%ec%a5%dd%a1%bc%a5%c8%a5%ea%a5%f3%a5%af%bd%b8 発表してきました。

とりあえず、shinoさんお疲れ様です!

いろいろあるけど、またー。

Rast

Rastがダウンロードできるようになっています。

ここから実際にためせる。

無茶苦茶はや! すげー好感触。

インデント記法

Pythonでは、インデントを用いてプログラムの構造を指示する。これはPython が始めて使った記法であると紹介されることがあるが、実はそうではない。

ここによれば、インデントによるプログラミング言語は、Haskell, Occam, Pythonがあるとのこと。

Occam

Origin
David May et al 1982, 1987.
Sample code
-- Pipelined parallel sort in occam 
--(from Pountain and May, A Tutorial 
-- Introduction to Occam Programming)

VAL numbers IS 100 :
[numbers + 1] CHAN OF INT pipe:
PAR
  PAR i = 0 FOR numbers
    input IS pipe[i] :
    output IS pipe[i+1] :
    INT highest :
    SEQ
      input ? highest
      SEQ j = 0 FOR numbers - 1
        INT next:
        SEQ
          input ? next
          IF
            next <= highest
              output ! highest
            next > highest
              SEQ
                output ! highest
                highest := next
    SEQ i = 0 FOR numbers   -- get unsorted 
      INT unsortednumber :  -- numbers
      SEQ
        input ? unsortednumber
        pipe[0] ! unsortednumber
    SEQ i = 0 FOR numbers   -- dump sorted
      INT sortednumber :    -- numbers
      SEQ
        pipe[numbers] ? sortednumber
        output ! sortednumber

ふむ。たしかにPythonっぽい。順序が逆だけど。 インデント記法は1982年からあるのか。知らなかった。

で、「教えて!Goo」を初めて使ってみたのです。いい感じです。

どうもありがとうございます。

Tab wars

WikiPediaはコピペするだけでこんな風にURLもコピーできるようになっている。 知らなかった。便利。

ちなみに私は、Tab大好きです。ソースコードの中で、Tab使いまくってます。

Haskell Occam Python

links

Interaction 2005

掲載ありがとうございます!

で、一言だけフォローしますと、「インターネット物理モデル」の作者は、

東泉一郎、島田卓也、岩政隆一、杉原聡、江渡浩一郎

の五人です。(順不動) 私一人というわけではありませんので、その点御了解下さい。

それでは、ひき続きInternet Watchをお楽しみ下さい。

Senna

いつのまにかSenna公開されてるね。よっしゃ使ってみっか。

svn co svn://dev.razil.jp/senna/trunk senna 

Rast - N-gram based full-text search system

こちらはまだ公開されていない。

3月中旬にソースコードを公開する予定です。

N-gramモテモテ。

モリタポAPI

install Subversion

on Debian Woody

http://subversion.tigris.org/project_packages.html ここを読む。

  • /etc/apt/sources.txt に以下の行を追加
deb http://people.debian.org/~adconrad/ woody subversion
  • apt-get now!
% apt-get install subversion

今日はeto.comも雪化粧をしている。

International Symposium on Wikis

まじかよ。行かないと!

ていうか、wiki researchersって、そんなにたくさんいるの?

Research paper and practitioner report submissions are due
April 29, 2005 

from http://www.shudo.net/diary/

JavaScript Programming

JavaScriptのプログラミングは面倒だ。

JavaScriptのプログラミングというと、いまだにWebページにコードにうめこ んで、ブラウザでreloadして動作確認するということをする人が多いだろう。 しかし、そのような前近代的なプログラミングをしていると、いつまでたって もまともに動くプログラムは書けない。もう21世紀なので、それらしいプログ ラミングスタイルを身につけよう。

まずは、alertによるメッセージ表示をやめる。JavaScriptでは状態を表示す る適切な方法が無いため、alertで状態を表示させることが多い。しかしこれ だとメッセージがでるたびにプログラムが停止し、いちいちOKをクリックしな ければならない。これが大変面倒であるため、デバッグメッセージの表示を挿 入するのをためらうようになり、なかなかバグの原因が発見できなくなるとい う悪循環が発生する。まず、下記を参照し、ここに書かれている手法でデバッ グメッセージを表示するようにするといいだろう。

同じく、inspectモドキもおすすめ。これを使うとオブジェクトの状態をまと めて表示できる。例えばdocumentに対してこれを使うと、どんなアトリビュー トを持っているのか、どんなメソッドが使えるのかなどをまとめて表示してく れる。仕様書を見たり、解説本を開いたりするよりも、この方法の方がずっと 正確で速い。また、この方法だと、いわゆる隠しメソッドやアトリビュートな ども発見できるため、解説本には書いてないようなアトリビュートを使えるよ うになる。

ここまでの工夫で、ようやくprintfデバッグができるようになるが、これでよ うやく普通のデバッグに追い付いただけで、全然楽にはなってない。テストコー ドを書けるようにならないといけない。JavaScriptで動くTestUnitライブラリ としてjsUnit がある。これは、W3Cによる仕様に準拠しているかどうかのテス トコードにも使われており、信頼性が高いと思われる。

さて、ここまでプログラミング・スタイルをブラッシュアップしてきたわけだ が、実は本当に一番難しいところは、まだ手がついていない。それは何かと言 うと、ブラウザ、OSの違いにおける挙動の違いだ。JavaScriptは、ブラウザを 経由してクライアント側でコードが実行されるため、プログラマはその各クラ イアントでの動作環境の違いを事前に把握し、吸収してやらないといけない。 JavaScriptの本当に一番難しい部分はこれである。ほとんど不可能に近いくら い難しい。これを自動化することができれば、ようやくJavaScriptのプログラ ミングも現代に到達したと言えるようになるのではないかと思われる。

Last modified: 2006-09-05