Wijmoインターフェースを紹介したいと思います。

Wijmoは、JavaScriptライブラリです。ブラウザで表示される画面のユーザーインターフェースを快適にしてくれます。商用ライセンスとGPL3のデュアルライセンスで公開されています。Novius OS等で利用されています。以下では、Novius OSの管理画面のブログ記事一覧ページを題材にWijmoを紹介してみます。

コンテンツの並べ替え

Novius OS のブログ記事の管理画面です。初期では日付順に並びます。新しい記事が上、古い記事が下にならびます。

リスト上部のタブをクリックすると、その項目で並べ替えができます。
公開状態で並べ替えすると、下のようになります。

同じ項目をもう一度クリックすると、その項目でソートするのは同じですが、順序が逆になります。jQueryのライブラリにTablesorterというものがありますが、似ている部分があります。

ブログの記事だと、並べ替えできてもメリットはあまりないかもしれませんが、帳票等を表示する場合はこういった並べ替えができると嬉しいですね。

幅の変更

リスト上部のタブの端を動かすと、項目の幅を変更することができます。

項目順序の変更

リスト上部のタブを動かすと、項目順序を変更することができます。
下の画像は、「日付」タブを動かしたところです。

ページ送り

ブラウザ画面の大きさを測定して、1ページに表示する行数を決めています。このため、画面が大きい場合は1ページに多くの記事が一度に表示されます。画面が小さい場合は1ページに少しの記事が表示されます。1ページに収まらない場合は、ページ送りが自動で表示されます。
下の画像は、画面を小さくした例です。上の画像と比べると、1ページに表示される行数が減り、ページ下部にページ送りが表示されています。

「画面サイズをチェックしてから描画する」という仕組みは、便利な面もありますが、最初の表示は少し遅く感じられます。Novius OSの場合は、管理ページでのみ、Wijmoの機能を使うようにして、ウェブサイト閲覧者の快適さを損なわないように配慮しています。