Fusic Developers Weblog

Archive for the ‘JavaScript’ Category

{ 2012.8.17 }

ボックス間移動のUI考

category：JavaScript｜author：yamamoto｜tag：UI｜comment：non

こんにちは山本です。
なんとも小難しいタイトルにしてしまいましたが、今回は技術というよりはUIについて書きたいと思います。

要素を左から右へ移動させる

Webに携わっている方なら誰もが以下のようなUIを見た・扱ったことがあるんじゃないでしょうか。

※ボタン押しても動作はしません

複数の選択肢から、任意の項目だけ選びたい場合によく使われますね。

最近では、上のようなHTMLだけのシンプルなUIは見かけなくなりましたが、これだと何が問題なんでしょうか。
自分なりにちょっと考えてみたいと思います。

■問題点
1,左のリストが膨大な量だった場合、探すのが大変
2,移動させるのに「選んで」「ボタン」の２クリック必要
3,ぱっと見て、何をしたらいいのかわからない
4,左の領域と右の領域の意味がそれぞれわからない
5,項目名が長い場合、デザインが崩れる可能性
6,普通

かなり主観も混じっています。
6なんかは、普通と言ってもシンプルですし好む人もいるでしょう。
3や4は、アフォーダンス（※）に絡むことで、「右へ」ボタン一つとっても、何をどうしたらどういう動きをするのかが予測しづらいです。

※アフォーダンス
環境がユーザーに対して与える「意味」のこと

blog.livedoor.jp/lunarmodule7/archives/3283889.html

の記事がわかりやすかったです。

ただ、1と2は優先度が高いのかなと思います。
項目が100個あったら探す気も失せますし、100個全部右に移そうと思ったら200クリック必要です。

1の解決策としては、絞り込み機能の付加でしょうか。
項目名を対象に、文字入力による絞り込み機能を付けたいところです。

2については色々あると思います。
ドラッグアンドドロップでの移動、選択と同時に移動、複数同時選択して移動、など。
最近の傾向が何かはわからないですが、ドラッグアンドドロップはよく見る気がします。
ただ、それだとジェスチャーに制約のあるスマホでは操作が難しいですね。
選択と同時に移動、もアクションは減りますが、但し書きを徹底しないと逆にユーザーのストレスになるかもしれません。

う〜ん、大変。。。

解消策

以上の1,2の問題を解消したのが以下のUIになります。

弊社JavaScriptの巨匠・島田が作ってくれたものをベースに改良して作りました。
ポイントとしては、左のリストの絞り込みを行う機能を付け、ボタンの操作で左右の移動が可能となってます。
移動のアクションのためのボタンにはラベル名を付けています。
ここは、文字よりも、押すことで次のアクションが予測できるようなアイコンを当てるとよりいいのでしょう。

ただ、しっかりとメッセージ性のある簡潔な文字をあてています。「選択」とすることで、ユーザーはこのリストから選択するんだ！ということを自覚し、「解除」も、リストから外すことを明確に意識させることができるかなと思います。
また、項目名が長くなっても折り返すのでデザイン崩れは起きないのと、補助的に「全選択」「全解除」ボタンもあります。

ボタンの色は妥当か、複数同時に選択する場合はどうするか、といった課題もありますが、かなり使いやすくなったのではないかと思います。

よりよい使い勝手を求めて

上記の解消策でも、実際に使ってみると問題も出たりするでしょうし、改良していく必要があると思います。
ちょっとした機能一つとっても考慮することが多いので、他にも、いろんな人がいろんなケースで、どのようにしていけばいいか、何がより正解に近いか、頭を悩ましていることと思います。
UXデザインという言葉がよく聞かれるようになり、製品の使い勝手が重視されるようになってきたので、いろんな方との意見交換や事例の収集ができればなと思います。

{ Page Top }

{ 2011.7.2 }

rails と jquery treeview でディレクトリツリーをらくらく実装する

category：JavaScript, ruby｜author：t-kawano｜tag：jQuery, Rails, ruby｜comment：2

ども、Fusic 河野です。
だいぶ久しぶりですね。

今度の rubykaigi2011 に参加させて頂くこととなりました！
会場で見かけたら、ぜひお気軽にお声をかけてくださいませ。

[rubykaigi2011]
rubykaigi.org/2011/

それと、もう一つ告知です。
来る７月２８日（木）、福岡で活動している Androidの会福岡支部、九州GTUG、
HTML5+α福岡、iDevQ、そして、AppleKnight の４つのコミュニティが
福岡県Ruby・コンテンツ産業振興センターに集結し、同時に勉強会、懇親会を行います。

ご興味のある方は、ぜひともご参加ください！！
参加登録は下記のリンク先より facebook にて参加表明をお願いいたします。

[futuresync]
futuresync.jp/

さて、わたくし、前回の記事でも書きましたが、主に ruby on rails を
やっており、ZENPRE の iPhone アプリを担当させていただいてます。

今回とあるお客様の rails 案件にて、ツリービューを作る必要がありました。
一から作ろうかと思っていたところ、jquery ui の treeview を見つけ、
使ってみたので、簡単なサンプルとともにご紹介をします。

いやー、それにしてもコレ凄く便利です！！

まずは、バージョン確認です。

$ ruby -v
ruby 1.9.2p0 (2010-08-18 revision 29036) [i686-linux]
 
$ rails -v
Rails 3.0.9

rails のプロジェクトを作成します。

$ rails new treeview_test
$ cd treeview_test/
$ rm public/index.html

prototype.js を削除ります。
サヨナラ〜、お元気で〜♪

$ vim Gemfile
 
gem 'jquery-rails'
 
$ rails g jquery:install

ツリービューを表示するためのコントローラを作成します。

$ rails g controller Treeviews index
$ vim routes.rb
 
  root :to => "treeviews#index"

そして、本日の主役のご登場！
jquery treeview を下記よりダウンロードします。
bassistance.de/jquery-plugins/jquery-plugin-treeview/

js や css、jpg などを rails の各ディレクトリにコピーします。
画像は、images に “treeview” というディレクトリを
作成し、そこにコピーしています。
そして、jquery.treeview.css に記載されている画像のパスを
ちょっと変更します。

　images/xxxx → ../images/treeview/

treeview を取り込みます。

$ vim app/views/layouts/application.html.erb
 
<!DOCTYPE html>
<html>
<head>
  <title>TreeviewTest</title>
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'jquery.treeview' %>
  <%= javascript_include_tag 'jquery.treeview.edit' %>
  <%= javascript_include_tag 'jquery.treeview.async' %>
  <%= csrf_meta_tag %>
</head>
<body>
 
<%= yield %>
 
</body>
</html>

ツリービューを表示するため view を書き換えます。

$ vim app/views/treeviews/index.html.erb
 
<script type="text/javascript">
$(document).ready(function(){
  $("#example").treeview({});
});
</script>
 
<ul id="example" class="filetree">
	<li><span class="folder">Folder 1</span>
		<ul>
			<li><span class="file">Item 1.1</span></li>
		</ul>
	</li>
	<li><span class="folder">Folder 2</span>
		<ul>
			<li><span class="folder">Subfolder 2.1</span>
				<ul>
					<li><span class="file">File 2.1.1</span></li>
					<li><span class="file">File 2.1.2</span></li>
				</ul>
			</li>
			<li><span class="file">File 2.2</span></li>
		</ul>
	</li>
	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
		<ul>
			<li><span class="file">File 3.1</span></li>
		</ul>
	</li>
	<li><span class="file">File 4</span></li>
</ul>

完成です！！
いやー、ほんとめちゃくちゃ簡単ですね！！
まー、これだけだと寂しいのとせっかくの rails も意味がないので
rails にディレクトリ一覧を返す関数を作成し、ajax 使って
ディレクトリ階層を動的に表示できるように変更します。
おー！rails っぽいですね！

routes にパスを追加します。

$ vim config/routes</code>
 
  match '/treeviews/get_dir_list' => 'treeviews#get_dir_list'

さっきの view を書き換えます。

$ vim app/views/treeviews/index.html.erb
 
<script type="text/javascript">
$(document).ready(function(){
  $("#example").treeview({});
  $("#example2").treeview({
		url: "<%= treeviews_get_dir_list_path %>"
  });
});
</script>
 
<h4>通常のツリービュー表示</h4>
 
<ul id="example" class="filetree">
	<li><span class="folder">Folder 1</span>
		<ul>
			<li><span class="file">Item 1.1</span></li>
		</ul>
	</li>
	<li><span class="folder">Folder 2</span>
		<ul>
			<li><span class="folder">Subfolder 2.1</span>
				<ul>
					<li><span class="file">File 2.1.1</span></li>
					<li><span class="file">File 2.1.2</span></li>
				</ul>
			</li>
			<li><span class="file">File 2.2</span></li>
		</ul>
	</li>
	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
		<ul>
			<li><span class="file">File 3.1</span></li>
		</ul>
	</li>
	<li><span class="file">File 4</span></li>
</ul>
 
 
<h4>sync させたツリービュー表示</h4>
<ul id="example2" class="filetree"></ul>

treeview の url に先ほど routes に追加したパスを記載します。

controller もゴニョゴニョと追加します。

$ vim app/controllers/treeviews_controller.rb
class TreeviewsController < ApplicationController
 
  def index
  end
 
  def get_dir_list
    root_flg = (params["root"] == "source") ? true : false
    path = "./"
    path = params["root"] unless root_flg
    arry = []
    d = dir_list(path, arry)
    render :json => arry || [], :layout => false
  end
 
protected
  def dir_list(path, arry=[], root_flg=false)
    Dir.glob("#{path}/*").map do |d|
      classes = "file"
      classes = "folder" if FileTest.directory?(d)
      hasChildren = (FileTest.directory?(d)) ? true : false
    	h = {"id" => d, "text" => File.basename(d), "path" => File.dirname(d), "expanded" => false, "classes" => classes, "hasChildren" => hasChildren, "children" => []}
      arry << h
    end
    arry
  end
 
end

dir_list() の関数でディレクトリ情報の hash を作成し、view 側に json で返します。
返された json を treeview 側が解析してツリービューを表示します。
返す hash の id のところがミソでして、ここにパスを記載していると
treeview にてディレクトリを選択された場合、params["root"] に選択された
ところのパスが渡されます。
一番上のルートの場合には、params["root"] には、”source” という文字が渡ってきます。

今回もいつもの如くソースは github にあげてます。
また、サンプルをここに置いてますので実際の動作を確認できます。
今回始めて dotcloud を使ってみました。
これまためちゃくちゃ便利ですねー！
dotcloud で rails を動かす方法とかは、また次回にでも、デモ。

それでは、良い rails ライフを〜。

[ソース]
github.com/sora0513/TreeViewTest

[デモ]
8befe980.dotcloud.com/

{ Page Top }

{ 2010.12.24 }

[jQuery プラグイン]draggableの使い方

category：JavaScript｜author：hagiwara｜tag：draggable, fac2010, javascript, jQuery｜comment：non

アドベントカレンダーも最終日になりました。

誕生日プレゼントに次いで、アンカーというクリスマスプレゼントまでもらってしまった、弊社安元に続いてまさかの4回目の登場の萩原です。

~~まぁ今年はクリスマスは中止なわけですが~~

[jQuery プラグイン]draggableの使い方

今回はjQueryプラグイン、draggableの紹介をします。

draggableはその名の通り、divやsqpnなどのドラッグ＆ドロップを簡単に実装できるプラグインです。

まずはこちらからｊQuery UIをダウンロードします。

その中から以下のjsファイルを使用します。
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js

実際のコードを見てもらった方が早いと思うので早速コードを。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').draggable({
			helper:'clone',//ドラッグ時に要素を複製する
			opacity:'0.5',//不透明度の指定
			drag:function(){},//ドラッグ中
			stop:function(){}//ドラッグ終了時
	});
	})
</script>
<div style="border-color:black;border-style:solid;border-width:1px;width:50px;">
	テスト
</div>あああ

draggableにはいくつもオプションが準備されていまして、ドラッグする時の要素の動きから、
ドラッグ中やドラッグ終了時に関数を指定することもできます。
関数の中ではthisを使うことでドラッグ中の要素を取得することもできますので、
DIVを左の枠から右の枠に移すと言った動きを作ることもできます。

(というか今回draggableを使用した目的がそれでした。)

他にもたくさんオプションが準備されていますので、多分一通りはできるのではないかと思います。

少しは役に立つかもしれない化学知識

毎度おなじみになってきた化学知識コーナー第4回です。
皆さんクロロホルムってご存知だと思います。
ドラマとか推理アニメとか~~バーローとか~~に出てくるあれです。
ハンカチにクロロホルムをしみこませて、かがせることで即おねんね、という描写が良くなられてますが、あれは大ウソです。

化学ではかなり一般的に使われるもので、主に水に溶けないものを溶かすことに使われています。
蒸発しやすく結構強烈な匂いがします。(少なくとも私は苦手です･･･)

まぁ匂いを把握していることからわかるとおり、嗅いだら即気絶するようなものじゃありません。
濃厚なクロロホルムを10分以上かぐと気絶したりするらしいですが･･･

何でクロロホルムがあんな扱いなのか不思議ですね。
昔麻酔に使われていたせいらしいですが・・・

あ、因みに絶対に試したりしないで下さいね。
発がん性とかありますし。

総括

最後なんで簡単に総括もさせていただきます。
アドベントカレンダーをご覧下さった皆さん、Fusicの皆さん、24日お疲れ様です。
感想としては、まず結構登場人物が割と偏っていたなぁという感じですね。
担当を決めるルーレットをテストしていた際は、特に偏ったりしていなかったようなのですが･･･
特に、企画者の小山が一人だけ当たらないという展開あり、4回当たりが二人もと･･･
社内もある意味スリリング(?)な24日でした。

内容も汎用的に使えそうなものから、なかなかコアなものまで多様な記事が登場しました。
記事の傾向から弊社の何某はどういった分野が得意か、等もわかったんじゃないかなと思います。

最後に

これで、Fusicアドベントカレンダーはおしまいです。
普段Fusicブログに登場しない人物も登場していい企画だったなと思います。
それではまたお会いしましょう。

Fusicアドベントカレンダーエキストララウンド(!?)にご期待下さい？

{ Page Top }

Fusic Developers Weblog

Archive for the ‘JavaScript’ Category

ボックス間移動のUI考

要素を左から右へ移動させる

解消策

よりよい使い勝手を求めて

rails と jquery treeview でディレクトリツリーをらくらく実装する

[jQuery プラグイン]draggableの使い方

[jQuery プラグイン]draggableの使い方

少しは役に立つかもしれない化学知識

総括

最後に

Official

tag