JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る

ドラッグアンドドロップ、マウス選択、パン、ズームなどができるWebアプリケーション

アプリケーションの例

　ここまでは個々の対話要素を1つずつ見てきましたが、今度はそれらをすべて組み込んだ、総合的なアプリケーションを作成してみましょう。図6と図7は、「Magic, The Gathering」というカードゲーム用の架空のダッシュボードです。この対話ダッシュボードはブラウザウィンドウの全面を使っており、そこでユーザーがカードを並べ替えたり、カードを何枚か選択してグループ化したり、ズームして詳細を見たり、デッキ全体を見渡しながらダッシュボードの端から端までパンしたりすることができます。動いているところを見た方がずっと分かりやすいので、こちらのYouTubeビデオで確認してください。

図6　「Magic, The Gathering」用の架空のダッシュボード：カードをシャッフルしているところ。

図7　「Magic, The Gathering」用の架空のダッシュボード：ズームレベルを変えてカードをグループ分けしているところ。

　実際のコードは、これまで見てきたコードを合成しただけのものです。もう少しおもしろくするために、［Shuffle］ボタンをクリックすると、animate()メソッドによってスムーズなアニメーションでカードがランダムに並べ替えられるようにしましょう。

$('#shuffleCards').click(function() {
  // reset panning
  $('#universe').css('top', 0).
                 css('left', 0).
                 css('bottom', 0).
                 css('right', 0);

  var maxWidth = Math.round($('#container').width()*0.3) ;
  var maxHeight = Math.round($('#container').height()*0.3);

  $('.model').each(function(model) {
    var top = Math.round(
      $('#container').height() / 3 +
      Math.random()*maxHeight*2 - maxHeight);
    var left = Math.round(
      $('#container').width() / 3 +
      Math.random()*maxWidth*2 - maxWidth);

    var movement = {'top': top, 'left': left};
    $(this).animate(movement, 1000);
  });    
});

これからの課題

　本稿では、静的なWebページを魅力的な対話型のアプリケーションに変換する方法を紹介しました。JavaScriptとjQueryのDOM操作関数を利用して、従来はもっぱら重たいクライアントアプリケーションのものとされていた複雑な対話を再現しました。このような対話は、今やブラウザウィンドウという軽量な環境でも実現できるようになったのです。

　マウスジェスチャやキーボードイベントのバインドなど、まだ取り上げていない機能が数多くあります。自然な流れで考えれば、次のステップは、このデモインターフェースを発展させて、完全なデスクトップ/レイアウトマネージャにすることです。そのためには、リアルタイムのフィルタリング、レイアウト、データミューテーション、さらには外部データプロバイダとのやり取りをするモデルが必要になるでしょう。私はこの目的でオープンソースプロジェクト「Rhizosphere」を立ち上げました。このプロジェクトでは、JavaScriptによる究極の対話型エクスペリエンスと斬新なデータ視覚化を実現することを目指しています。