JavaScript 勉強中 (Google Data API, HTML5 canvas, etc.)

JavaScript を勉強中。言語仕様的には、微妙に嫌なところもあるが（変数のスコープとか、名前空間とか）、機能的には十分である。XSS で嵌まったが、JSONPで解決できた。と思いきや、Google さんの公開しているライブラリ群を使うとJSONPなんて自分で使わなくても、さらに簡単にいろんなことができてしまう。

特に驚いたのが、Spreadsheets Data API だ。Google DocsのspreadsheetにアクセスできるAPIで、ちょっとしたDBがわりに使うことができる。JavaScriptのクライアントライブラリは用意されていないが、Google Data API に則って作ってあるので、Google Data API を使えば JavaScript からも極簡単にアクセスできる。（ドキュメントやサポートが無いが、まあ、素直に作ってあるので何とかなる）。

そんな訳で、JavaScript + HTML5 (canvas, contenteditable) を使って、Mind Map エディターもどきを作ってみた。"Create Root Only" というデバッグ用のボタンを押すととりあえず、MindMap の編集ができる(がsaveできない)。"New" ボタンはMindMap用の新規spreadsheetをGoogle Docsに作成し編集する。saveできる。save したdocumentはOpen ... から開くことができる。

Mac OS X (leopard) + Chrome (dev), Safari, FireFox では動いている。

Tab ... 子ノード追加
Ret ... 下にノード追加
ALT + 矢印 ... ナビゲーション
ALT + Ret ... ノード内改行

FireFox の contenteditable では、未選択状態ではdelete が効かないので、選択してdeleteしないといけなかった。Safari(531)は、空や空白しかないelementがcontenteditableで編集できないので、初期値'.'を入れるようにしている。

まあ、そんな感じ。JavaScript + HTML5 の評価が僕の中で随分上がった。大規模なアプリケーションを書く気にはまだなれないが、ちょっとしたプログラムならデバッグもさほど苦ではない（クロスブラウザは除く）。JavaScript Console が良くできており、データ構造の可視化なんかはとても便利だ。静的な型解析とかでWarning とか出してくれる開発環境とかがあればより楽になるんじゃないかな。

モバイルでの使用も視野に入っているので、電力効率的にも良い方向に進むのではないだろうか。

Open File

New Document

jsmm 0.1