○○box系Ajaxオーバーレイウィンドウ

EagleRay CMSのユーザーインタフェースの一部をAjaxなオーバーレイダイアログを使ったものに刷新中。以下いきさつ。

最近、Ajax/JavaScriptライブラリが揃ってきたことで、ブラウザの差をあまり気にせずにJavaScriptを活用することができるようになってきた。JavaScript登場から10年ほどの長い不遇の時代を経て、ここ2-3年の状況の変化は急激だ。Ajaxライブラリは、prototype.jsを代表とする低レベルAPIからはじまり、高度な視覚的エフェクトや新しいユーザーインタフェースを実現するものまで登場してきているようだ。JavaScriptは一から自分で書こうとすれば互換性の問題でリリース直後に即死必至な状況は昔と同じだろう。だからこういったライブラリを自分の道具として使えるようにしておく事が重要となってきている。

昔からWebアプリケーションの設計でよく思うこと。現在表示しているページを残したまま別のページを表示したい。というかダイアログのような機能を実現したい。てゆーかぶっちゃけ「戻る」を実装するのが面倒。そんな時簡単なのは<a href="..." target="_blank">で新規ウィンドウを開く方法。だけどメインと同じフルスペックの新ウィンドウが開いてしまうのはうっとうしいからダメ。他には、JavaScriptでwindow.open()する方法。これは目的どおりのミニウィンドウを出すことができるが、コーディングが面倒くさいしJavaScriptに依存してしまうのが問題だ。

そこでイマドキの方法。Ajax。

画像のオーバーレイ表示を実現するLightboxあたりから派生してきた「○○box系」のライブラリが色々あるようだ。リンクで別のページに遷移する代わりにモーダルダイアログのようにオーバーレイウィンドウを表示することができる。<a href=...>の記述をそのまま使えるので、JavaScriptが使える環境ならオーバーレイ。そうでなければ普通の遷移になる。なので開発、デバッグも楽。

実は僕は、かなりの「アンチJavaScript」派なんだけど、これなら使ってみようかな？という気になってしまった。

とても便利だけど、どういう所で使い、どういう所で使うべきでないかは、ちゃんとポリシーを持って使うべきだろう。重要なのは、オーバーレイとして表示された状態はURIで表現できないページになるということ。たとえば大元のLightboxは画像をオーバーレイ表示するものだったけど、これをやってしまうと、その画像のリソース位置をURIとして特定できず、ブックマークしたり、誰かに伝えることはできなくなってしまう。だからLightboxはいいとは思わない。オーバーレイ表示させるのは「そのページリソースを構成する部分」に限定させるべきだと思う。

使いどころを間違えなければWebアプリケーションのユーザーインタフェース設計の自由度を劇的に、しかも簡単に向上させることができる強力な道具になると思う。