ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ブラボーこんな直感的操作が実現できるなんて!

複数ファイルから必要なものだけをピックアップする場合、ShiftやCtrlキーを押して選んだり、マウスをドラッグして範囲指定するなんてのが当たり前になっていました。しかしこれが直感的かと言われると、そうでもないですよね。そこで試して欲しいのがWrangleです。


まずはデスクトップでトライ。並んだ写真をなぞっていくと、線が描かれてその下にある写真が選択状態になります。


一筆書きでやる必要はなくて、何回も線を引いて追加できます。

Wrangleはスマートフォンにも対応しているとのことで早速iPhoneでもトライしてみました。


写真が並んでいます。この状態でタッチしながら指を動かしてみます。


おお、ちゃんと選択されました。


デモ動画です。選択した後Deleteボタンを押すとちゃんと選択されているというのが認識されているのが分かります。

Wrangleはこれまでの一つ一つを細かく指定するファイル選択方式ではなく、より直感的に必要なファイルをなぞっていく方式になっています。キーになっている技術はCanvasとJavaScriptのタッチイベントです。そのため最低でもIE9以上で、タッチイベントをサポートしたFirefox 6以上、Chrome 22以上、Mobile SafariやAndroidなどかなり制限される模様です(Android 2.2はサポートされていません)。

Wrangleの選択方式は指でなぞって大雑把に選択する場合に良いと思います。ごく小さな範囲を厳密に指定するといった場合には向かないでしょう。また、解除が全体でしか行えないため、間違って選択してしまった場合は最初からやり直しになってしまいます(Undoを実装する必要がありますね)。

Wrangleのサイトではカウボーイが投げ縄をもって家畜を誘導している写真が掲載されています。カウボーイよろしくささっと格好よくファイルを選択できると気持ちがいいです。Webに限らずアプリでも使えると便利ではないでしょうか。

Wrangle jQuery Plugin | Playground from ZURB

zurb/wrangle

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2