私は、マークアップエンジニアという言葉は知りませんでしたし、ぶっちゃけ CSS で盛り上がる世界が存在しているということも理解できませんでしたが、以下のエントリの言わんとしていることは賛成です。

ただ、一つ違和感がありました。

IT戦記 - マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開）より

(X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。

JavaScript をごりごり書いている私が言うのもなんですけど、そんなこと言っちゃったら、Web 系エンジニア全体が微妙な気が・・・。CSS がバッドノウハウの塊で、極めるほどの本質的な奥行きがないなら、JavaScript もある意味同じ気がします。ぶっちゃけ「ブラウザ上なのにこんなことできて凄い凄い！」という世界ですからね。(--;　VC なら凄くねぇ！

# デモ、VC ノホウガムツカシイあるヨ。

つまり、私が感じている違和感は、本質と表層の捉え方なんだと思います。

http://twitter.com/amachang/statuses/191263472 より

「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。

私としてはデザインと JavaScript を同列においているのが少し気に食わないわけです。本質的な奥行きを持つデザインと、表層的な奥行きしかない JavaScript で比較するなんて。JavaScript のノウハウの少なくない部分は、言語が改善されれば（あるいはフレームワークやライブラリによって）消えゆく「べき」ものです。CSS ハックの大半がブラウザ（主に IE）の改善とともに消えゆくように。本質的な奥行き感で言えば、デザインと UI プログラミングくらいなら、結論として納得感があるんですけど。

# 絵のセンスがない私にとっては、絵描きさんやデザイナさんは尊敬の対象です。

UI に関係するプログラミング言語の変化はめまぐるしいです。つい最近まで主流だった VB も Delphi も Java + Swing も生き残っているとは言いがたいです。変化の激しいこの世の中で、JavaScript だって長く生き残るかどうかはわからないわけですよ。Ajax や Comet だって、本質的な部分には非常に奥行きがあるわけですが、表層に限って言えばあまり言うことはないわけです。近頃は Ajax.Request とか dojo.bind とか書けば Ajax してくれますから。

でも、UI に関係するプログラミングは実に奥が深いです。下手な書き方をするとすぐにメンテ不能やテスト不能（VB や Delphi のフォームみたいに）に陥ります。また、ユーザが直接触る部分ですから、工夫の余地は無数にあります。これらは、言語によらない本質的な難しさであり、価値です。

もちろん、今使っているプログラミング言語に精通することは大切です。でも、IT の世界は歴史が浅く道具の変化が激しいので、本質的なスキルは何か見極めていかないといけないんじゃないかなと思います。CSS の後に JavaScript では・・・あまりにも短期的な視点で食っていくためというのがアリアリ。そりゃ、食わにゃ死にますが、長期的かつ本質的なスキル開発を促しても良いんじゃないかな？、と思いました。

あ、でも、本エントリの言わんとしていることには賛成です。第二の何かは、Rails している人も、PHP やっている人も、JavaScript をやっている人にも、等しく必要なんだってことです。Java している人にもね！

以下、余談。

○ 余談１

とはいえ・・・C/C++ 言語の世界は変化が少ない・・・というか、変化はしているのだろうけど、プログラミングそのものが奥行きを持っている気がします。対象領域の違いから来るものでしょう。C/C++ だってアプリの世界なら同じ問題を抱えていると思います。

○ 余談２

スタンドアロン（Delphi + VCL でも Java + Swing でも VB でもいいけど）の世界を知っていると、HTML + CSS + JavaScript（＋LAMP）が、意外と理にかなっていて面白い世界なのが良くわかります。Web 系技術が凄くないと連呼する人はいるけど、また、私もそう思うけど、これまでのやり方よりは優れているんです。個別に見ると新しい技術はなくても、組み合わせて使うと新しいみたいな感じです。
実際、Kodougu（Ruby on Rails + JavaScript で実装されたブラウザ上で動作するモデリングツール）は、Java + Swing や C# + Windows.Forms で実装された同系統のソフトよりもはるかに短いコード（＝メンテしやすい）で実装できています。やはり、Web 2.0 のときに技術的にも何かが起こったんだなって感じます。「気づき」のあるなしとか些細なことなんですけど。

「お知らせ:「コナミコマンド」を実装しました」によると、コナ○コマンドはできるらしいです。コードを見てもらうとわかりますが、if 文で普通に分岐しています。これはこれでお手軽な実装ですが、こういうものを見ると一般化してみたくなります。

上記サイトより抜粋：

var konmaiFlag = 0;
function konmaiCommand(konmaiKey){
	if (konmaiKey == 38 & konmaiFlag == 0){//上
		konmaiFlag = 1;
	}else if (konmaiKey == 38 & konmaiFlag == 1){//上
		konmaiFlag = 2;
	}else if (konmaiKey == 40 & konmaiFlag == 2){//下
		konmaiFlag = 3;

キーの配列を受け取ったら実行してくれるクラスがあると便利ですよね。特に以下のような書き方ができたら楽しいですね。

// 上、上、下、下、左、右、左、右、b、a
var keys = [38,38,40,40,37,39,37,39,66,65];
var processor = new KeyCommandProcessor(keys, onSuccess, onError);

作成してみました。以下にサンプルページ＋全ソースコードがあります。
キー入力サンプルページ（IE/Firefox）

でも、上記の実装だと、波○拳を繰り出すことはできません。なぜなら、複数のキーの同時押しができないからです。この手の実装はゲーム開発者にとっては当たり前のものだと思いますが、馴染みがないとなかなか難しいです。ス○２の波○拳の場合、下、下右、右、パンチです。私の記憶が正しければ。ここでは、↓、↓→、→、A を実現するようにします。とりあえず以下のような書き方をしたいものです。

// 下、下右、右、a
var keys = [40,[40,39],39,65];
var processor = new KeyCommandProcessor(keys, onSuccess, onError);

作成してみました。以下にサンプルページ＋全ソースコードがあります。ポイントは入力したキーを複数個持つことです。prototype.js とか使って配列を操作する機能を強化すれば、半分くらいのコードで書けると思います。でもまぁ、ここまで来るとあまり、手軽なものにはなりませんね。
キー入力サンプルページ（IE/Firefox）

実は現時点でも結構手抜き実装（格闘ものならもっとキー操作は厳密にする方が良いです。）ですが、ずいぶん進歩した気がしますね。上記のコードは全てパブリックドメインです。かなりバグがあると思いますが、適当に料理してやってください。

Kodougu の機能をアップロードしたので、Kodougu を使って Kodougu の設計を書いてみました。モデリングツールのデータモデル（いわゆるメタモデル）ではなく、メタメタモデルの部分です。関連が折れ曲がっていますが、線を折る機能はまだ実装していません。以下の図では裏技で実現しています。本機能の実装をお待ちください。

多重度はテキストで表現しています。近いうちにメタモデルを整備して関連で実現できるようにします。

Kodougu に以下の機能を追加しました。
(1) 図の凍結機能（図を編集不能にする機能）
詳しくはマニュアルをご参照ください。

図を凍結したKodougu


Metaelement のインスタンスは、UML でいうところの Class, Usecase などです。Metaattribute は値型の属性（整数や文字列）、Metareference は参照型の属性を表します。Metaattribute の例は Class 名です。Metareference は、Package が複数の Class を持つような場合を表現するために利用します。

Metanode はそのモデルの表記を表現します。多重度が複数になっているのは、一つの Metaelement が複数の表記を持っている場合があるからです。たとえば、UML のインタフェースには、ロリポップと分類子表記（矩形表記）があります。

うーん、まだまだ表現能力不足です。

Ruby で URL エンコーディングを行ってくれる CGI.escape メソッドでは、スペースをプラス（+）に変換します。（仕様どおりの動作だと思います。）しかし、JavaScript でデコードを行う decodeURIComponent() 関数では、+ をスペースには変換してくれないようです。したがって、Ruby でスペースを含む文字列を URL エンコードをして JavaScript でデコードすると、プラスがデコードされずに残ってしまいます。

Kodougu でこの問題にあたってバグが発生したので、とりあえず、Ruby で URL エンコードした文字列のプラスを %20 に置き換えました。%20 はスペースに変換してくれるようです。なにやらこの手の問題は微妙にエンジニアを悩ませますね。。。

Kodougu では、要素のエディタを dojo.widget.Dialog で作っています。ところが、要素の編集を行って Dialog を閉じてから、もう一度開いたときに、編集が反映されず古い情報が表示されてしまいました。

Dojo では、デフォルトで Dialog や ContentPane などの中身はキャッシュされるようです。Dialog を show する前に、以下のように書くとキャッシュをクリアできるようです。

dialog.refreshOnShow = true;

それにしても、Web アプリというのはキャッシュとの戦いですね。レスポンスを良くするにはキャッシュが必要ですが、キャッシュのクリアし忘れによって思わぬバグに遭遇することもある・・・ということです。難しいですね。

要は、私のように英語力が無い人間が dojo を使えるようになるにはどうしたらいいか考えてみました。

dojo といえば、豊富な機能を持った人気の JavaScript フレームワークです。しかし、マニュアルが豊富ではなく、日本語情報が少ないなどの理由から、使いこなすのはなかなか大変です。リファレンスは存在しますが、正直これを見て使えるようになるものでもありません。（あるいは、これを見て使えるスキルがあるのなら、dojo を使いこなすことに苦労するとも思われません。）

特に、dojo の widget はプログラムから生成する方法もあれば、DOM 要素に特定の属性を定義してやることで、自動的に生成する方法もあります。リファレンスだけを見て使えるような代物ではありませんが、The Dojo Book を参照するのも英語力が無いとしんどいでしょう。

そこでどうするのかというと、リリースをダウンロードしたら、テストコードを参照します。dojo.widget のテストは親切で、テストコードを見ると、5 分で使えるようになります。ドキュメントが豊富ではない、あるいは日本語ではない場合はまずはテストコードを見る、これはどんなオープンソースプロダクトにも言えることかもしれませんね。

たとえば、dojo のタブを調べる場合は以下を参照します。
/tests/widget/test_TabContainer.html

あるいは、プログラムから widget を生成する例は、以下です。
/tests/widget/test_createWidget.html

ちなみに、最近は日本語の情報としては以下が良さげです。dojo のまとめサイトっぽくなっています。
Dojo/JavaScript Toolkitのメモ

FireFox で、以下のような DOM ノードを含むドキュメント（下記は SVG）が存在するとします。

JavaScript で以下のように記述するとします。

alert(node_397);

すると、上記の g ノードが 表示されてしまうようです。FireFox からは、標準どおり document.getElementById でアクセスしてくれと怒られます。node_397 はローカル変数として別の場所で定義した（つもりだった※）のですが・・・。

※ これが原因で、Kodougu で、要素を作成した後関係線が作れなくなるというバグが発生していたようです。orz 後で修正バージョンを上げます。

日々世相に疎くなっているような気がしますが・・・Google Gears というものが発表されて、世間の注目を集めているようです。Google Gears をインストールするとブラウザ（IE/Firefox）を拡張して、新しい JavaScript の API を提供してくれます。API には、ローカルにデータとアプリ（html と js）を保存する機能が含まれていることから、オフラインでも Web を使えるようになる技術として注目を集めています。

世の中全てがブラウザで済んでしまう時代が近づいていますね。Kodougu でも使えそうなので、少しわくわくしています。より簡単に対応できるように、Google Gears のプログラミング作法を調査しておきますかね。

とりあえず以下のような記事を見つけました。

【ハウツー】早速プログラミング! Google Gearsを使ったアプリを作ってみよう
(1) Google Gearsで使われている技術 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/articles/2007/06/01/gears2/index.html

Google Gears・・・何かに似ていると思ったら、CodeGear に語呂が似ているんだ。こんな激動の時代に Delphi なんて生き残っていけるのかなぁ・・・。

dojo は複数の JavaScript ファイルを一つにまとめることができます。

dojo は、dojo.require(名前空間名); というような書き方をすると、ダイナミックに JavaScript をロードしてくれます。しかし、個別のファイルをダイナミックにロードすると時間がかかってしまいます。そこで、ビルドしてファイルを一つにすると、Web ページの読み込みを高速化できます。（また、ダイナミックロード時は JavaScript がブラウザにキャッシュされていないようです。）

Kodougu を試された方はお気づきかもしれませんが、Kodougu は起動に数秒かかります。環境によりけりですが、起動時間のうち、JavaScript の DL 時間が 0.5 秒 から 5 秒程度かかっています。時間を計ったわけではありませんが、Kodougu では dojo に関するファイルを一本化するだけで八割方削ることができました。

以下、ビルド手順です。dojo 本家のリファレンスはこちらです。

■ 前提条件
JDK 1.4.2 以降（1.5 以降推奨）
Ant 1.6.5 以降

■ 手順
1. ソースコードのダウンロード
私が調べた限りでは、dojo の HP から DL できる Ajax Edition にはビルドスクリプトが含まれていませんでした。Subversion から チェックアウトしてください。
http://svn.dojotoolkit.org/dojo/tags/release-0.4.2/
（2007/5/14 時点での最新タグ）

2. hoge.profile.js の作成
以下のような Profile を作成します。ビルド時の依存関係を記述するためのファイルです。dependencies には、dojo.require(); で指定した名前を記述してください。

var dependencies = [
 	"dojo.io.*",
	"dojo.event.*",
	"dojo.xml.*",
	"dojo.graphics.*",
	"dojo.io.BrowserIO",
	"dojo.widgets.*",
	"dojo.widgets.Button"];
load("getDependencyList.js");

プロファイルは {{Dojo Dir}}/buildscripts/profiles においてください。命名規則（*.profile.js）を守ると作業が楽です。

3. ビルドの実行
{{Dojo Dir}}/buildscripts/ に移動して、以下のようなコマンドを実行してください。

ant -Ddocless=true -Dprofile=kodougu clean release intern-strings strip-resource-comments

• Dprofile という引数にプロファイル名（*.profile.js の * の部分）を指定してください。

{{Dojo Dir}}/release/dojo/dojo.js が生成されます。このファイルに、全ての JavaScript が含まれます。

dojo のリファレンスの「Including Non-Dojo Resources」を参照すれば、自作の JavaScript をビルドに含める方法もわかります。（dojo.provide() してやる必要がありますが・・・。）

以上、dojo のビルド手順でした。

Kodougu で comet を実装する必要があるのですが、自分で実装するのもしんどいので、cometd を使ってみることにしました。

■ 注意
本記事は、cometd の trunk のヘッド（2007/5/7 時点）を参照しながら書いています。あなたが読んでいる時点で、本記事の情報が古くなっている可能性があります。

■ 環境
Windows XP SP2

■ 準備（必要なソフトウェアのインストール）
1. Python 2.4.4（インストーラあり、EasyInstall もインストールすべし）
Python Japan User's Group

※ EasyInstall のインストール方法は少し下のほうに記述してあります。

2. Twisted Python 2.4.0（インストーラあり）
http://twistedmatrix.com/trac/
※ 最新の 2.5.0 では、Twisted Web2 との互換性の問題で、正常に動作しません。

3. Twisted Web2 0.2.0 のインストール
http://twistedmatrix.com/trac/wiki/TwistedWeb2
python setup.py install

4. simplejson 1.7.1（EasyInstall でインストール）
http://cheeseshop.python.org/pypi/simplejson
easy_install simplejson

5. path 2.2
http://www.jorendorff.com/articles/python/path/
python setup.py install

6. cometd のインストール
6.1. cometd のチェックアウト
以下のアドレスからチェックアウトしてください。
http://cometd.googlecode.com/svn/trunk/
6.2. cometd-twisted フォルダ内の setup.py を書き換えてください。
data_files という項目を、「/etc/cometd」から「scripts」に書き換えてください。
6.3. setup.py の実行
python setup.py install
6.4. cometd.tac の編集
＜＜Python Install Dir＞＞\scripts\cometd.tac で設定（ポートやログファイルなど）を変更することができます。必要に応じて編集してください。

正直、Python に詳しくないと、きついと思います。私は Python にはまったく詳しくないので、この辺は結構きついです。わかりにくいところは質問してください。

補足：EasyInstall のインストール
x.1. 以下のファイルをDL
http://peak.telecommunity.com/dist/ez_setup.py

x.2. 以下のコマンドを実行
python ez_setup.py

■ cometd の起動
＜＜Python Install Dir＞＞\scripts フォルダ内で以下のコマンドを実行してください。
twistd -noy cometd.tac

補足：原因不明のエラー
私の環境では、＜＜Python Install Dir＞＞\Lib\site-packages\twisted\python\log.py の 228 行目をコメントアウトしないと、正常に動作しませんでした。原因については、現在調査中です。

# err()

■ dojo（0.4.2）からの呼び出し
Publisher/Subscriber モデルになっているので、簡単に使うことができます。以下におおよその使い方を書きますが、cometd の exmaples に dojo を使った例が豊富にあるので、参照しながら進めるようにしてください。

1. dojo.io.cometd の読み込み
dojo.require("dojo.io.cometd");

2. dojo.io.cometd の初期化
cometd.init({}, "http://127.0.0.1:8080/cometd")
※ 第一引数は、オプション設定。何が設定できるのかは不明。調査中。
※ 第二引数は、cometd サーバの URI。

3. 購読開始
cometd.subscribe("/channel/name", true, this, "acceptMethod")
※ 第一引数は、購読するチャンネル名。
※ 第二引数は、調査中。false にするとチャンネル名の先頭に "/cometd" が付加されるが何の意味があるのか・・・。
※ 第三引数は、メッセージ受信時のスコープになるオブジェクト（だと思う。。。）。
※ 第四引数は、メッセージ受信時のメソッド名。

4. メッセージの配信
cometd.publish("/channel/name", {name: "hoge"})
※ 第一引数は、配信先のチャンネル名。
※ 第二引数は、配信データ。

補足：IE、Opera で、Syntax Error が出る場合
以下のファイルの 510 行目に「}), }」というような記述がある場合、「})}」というように修正してください。私はこの修正で正常に動作するようになりました。
/dojo/src/io/cometd.js

補足：FireFox を使っている場合の問題
私の環境依存の問題である可能性がありますが、同一 PC 上で、FireFox クライアントを二つ起動以上したとき、publish したメッセージをクライアントで受け取ることができないという現象が発生しました。現在、原因調査中ですが、私は IE と FireFox など異なるブラウザであれば問題は発生していないので、テストはその組み合わせで行っています。

以上、cometd の使い方でした。