クラウドマップ開発ブログ

「nessy（ネッシー）」は、企業データを検索、管理するサービスです。クラウドマップはここで企業マップを提供しました。

今回は”実験的な”プロジェクトで、色々な技術を試せる場となりました。特に技術開発では、javascriptでどこまでできるか、をテーマとしました。

これまで、クラウドマップのインターフェースはflashで作られていたのですが、少し重い(約300kb)というのと、どうしても使えないブラウザ機能などがありました。

例えば、リンクをホイールクリック等で開けない、リンクの訪問済み表示ができない、ブラウザの右クリックメニューが使えない、右クリックが（基本的には）使えない、ホイール操作がフォーカスしてからでないと効かない、などの問題点が挙がっていました。

この問題を解決するにはjavascriptで開発するしかないのですが、もともとはjavascritpとflash(flex)を比べて、flashを選択したわけです。その理由は、マップインターフェースが動的である程度の計算速度が要求されるのと、もともとやっていたjavaと構文体系が似ていて言語習得が容易であったのと、javascritp特有のクロスブラウザ問題に悩まされたくないと思ったからです。初期の開発はこれでよかったと思うのですが、よりよいものを求めるとなると、上述の問題点が気になるようになったのです。

最近になって、googleのChromeブラウザに代表されるようにjavascritpの処理性能が向上してきており(参：javascript css benchmark)、またjQueryのようなjavascritpのクロスブラウザ問題を吸収するライブラリの完成度も高まってきて、javascriptのデメリットが軽減してきました。そこで、javascritpでの開発に挑戦してみたという経緯です。

javascriptは初心者だったのですが、flash(flex)からjavascritpへの移行にあたって戸惑ったのは、javascritpの言語の特殊性です。javascritpはスクリプト言語で一見簡単そうですが、デフォルトではjava/flashのようなクラス定義やインポート機能は用意されておらず、prototype.jsのようなライブラリを利用するか、自前で作る必要があります。nessyのもう一人の開発者はjavascriptマスターであったのでいろいろとアドバイスをもらいながら、とりあえず自前で基本的なオブジェクト指向プログラミングができるように整備しました。

あとは、だいたいスムーズに開発でき、処理速度も満足いくもので(IEは少し重いですが)、データも軽くなりました(圧縮時50kb)。flashで培ったMVCによる設計や、速度向上のためのテクニック(例)なども組み入れることができました。最終的には、スクリプト言語であることと、変数操作の自由度の高さから、やりやすい言語であると思いました。ただ、クロスブラウザ問題にはまだ悩まされます(参：jQueryでもはまるクロスブラウザ問題まとめ)

nessyの他の技術解説は後ほど…