Programming::DynamicHTML - 簡易HTMLエディタ

アルバイトの関係で、今ブラウザ上で操作するWYSIWIGな簡易HTMLエディタを作っています。私が利用しているbloggerなんかもHTMLエディタ搭載で、これを利用してブログを書いています（が、勝手にタグが挿入されるのが嫌なので、あまりHTMLエディタが機能していませんが）。実際の所、どうやって実装するのかがちんぷんかんぷんだったので、今日で色々調べました。

調べていると、どうもdesignModeの値をいじったらいいらしいようで、サイトのソースを見ながら勉強させてもらいました。これを使えば、ブラウザからドキュメントの入力が可能となる、つまりbody要素の子ノードとしてTextノードをワシワシ記入可能になるわけです。

が、WYSIWIGなHTMLエディタにするためには、フォントをboldにしたりitalicにできなければいけません。どうするんやーと思っていたら、mozillaのサイトで、リッチテキスト編集の仕様なるものがあり、ここを参照しながら作ってみたらいとも簡単にフォントのスタイルが変更できることがわかりました。他にリンクを張ったり、画像を挿入したり。

…で、実際にHTMLソースに落とすにはどないすんねん？って話になるわけでして。タグ名やらスタイルシートのプロパティの値なんかは取得できるようなので(node.tagName、node.styleを見る)、それからHTMLソースを作っていけ、と。ぐはーめんどくせー…しかしまぁ、子ノードを持たないbrやらimgやらをのぞけば、後は単調な作業なので、HTMLソースへ戻すコードを黙々と書きます。スタイルシートなんかはプロパティの種類が結構あるので、javascriptのeval関数大活躍です。メンバ名を格納した配列から動的に、プロパティが入っているかのチェックおよびタグの属性値を作る処理を作って実行。数十もいちいち手書きでif文書いていられませんしね。（注：今調べたら、node.innerHTMLでソースが取得できることがわかりました。私の苦労って一体…(;´д`)）

今のところ、MozillaとIEの違いを気にすることなく書けているのでいい感じです。しかし、DOMの事を意識して書いていると、なんかブラウザって一つのインタプリタであって、ブラウズするためだけのソフトウェアじゃないんやなぁって感じがしてきました。Webブラウズするためにブラウザを使っていても、本領が対して発揮できて無くて、DHTMLによる一つのアプリケーションを作り上げて動かして、ってとこまでやると、ブラウザの機能を使ってるな、って思えるんじゃないかとか思いました。