JavaScriptで実現するユーザーインターフェース「portal interface」とは
Web 2.0と聞くようになって、いろいろな用語が生まれてきた。正確には生まれたと言うよりはよく耳にするようになった。
Lightboxのようなインターフェースを「ポップアップ」と言う人も多いだろうが、あれはどちらかというとモーダルインターフェースだ。他にもフィッシュアイやアコーディオンなど、いろいろなインターフェースがJavaScriptで実現されている。今回はそんな話だ。
名古屋グランパスのホームページやEC Cubeと呼ばれるECのCMS、さらにはiGoogleなんかでも使われているインターフェース。
コンテナ（ボックス、ウィジェット）をドラッグアンドドロップで閲覧者が好きなようにレイアウトできる仕組みを「portal interface（ポータルインターフェース）」というらしい。これは調べていてわかった。
ユーザーの「マイページ」なんかがあるサイトではユーザーインターフェースとして非常に有効なものだと思う。大まかな仕組みは非常に簡単だと思う。ドラッグで要素をつかみ、任意の場所に要素を入れ込み（insert）、元のものを削除する（remove）。ただ、ドラッグ中の要素を半透明にしたり、座標によって要素をスナップさせて入れ替えるという仕組みがあると、たとえライブラリを使ってもかなり手間な処理になるだろう。
これを実現する手段としてはライブラリのプラグインを利用するほかはない。メジャーなライブラリで実現可能なものを調べてみた。
- prototype.jsベース
http://blog.xilinus.com/prototype-portal/test/index.html - jQueryベース
http://www.trilancer.com/jpolite/ - MooToolsベース
http://thejadeddeveloper.com/moo/webBox/
日本語で検索してもあまりヒットしないですが、英語で検索してもめぼしいヒットがない。日本語よりはもろんヒットはするが。まぁ自分たちで実装しているほうが多いということだろうか。
ちなみにシステムと組み合わせたとき、要素の順序をどのように持たせるべきなのかということを今考えている。Yahoo! UIもポータルインターフェースのライブラリを提供しているが、これの場合はCookieにJSON形式（URLエンコードされている）を登録して次回アクセス時も同じレイアウトを行えるようにしている。これは非常に便利。だがデフォルトの配置を初めての訪問者に対して記憶させるという処理が必要になるだろう（サンプルはリストから配置するようになっている）。もしかしたらこの仕組みも持っているんじゃないかと思ったが、そこまでは調べていない。