ドロップダウンとチェックボックスの合わせ技 jQuery UI MultiSelect Widget

https://github.com/ehynds/jquery-ui-multiselect-widget

ドロップダウンを展開すると項目にチェックボックスが付いていて、簡単に複数選択ができる。
また、選択されている項目の表示方法も豊富。フィルターをかけられるなど機能がとにかく多い。
リストボックスの複数選択をするならこれにした方が UI 的には優しい紀がする。

Facebook風オートコンプリート複数項目フィールド jQuery Tokeninput

Facebook 風のUIを使いたいということになって、いろいろライブラリを探してたらこれが一番よさげだった。

jQuery Tokeninput

導入方法も簡単。
ダウンロードしてきた javascript や sytlesheet を配置し、ロードする。
以下のスクリプトを記述。

javascript

/path/ にはレスポンスが json な URL を指定すると、非同期でリクエストします。
また、あらかじめデータを用意して置くことも可能です。

var data = [{id: 1, name: "あいうえお"}, {id: 2, name: "かきくけこ"}];

リンク先のデモを見てもらえばわかりませすが、テーマがデフォルトでは3種類用意されています。
facebook 風にするには…

とします。他にもオプションはたくさんあります。
全部は載せませんが、使えそうなヤツを…。

検索の設定

  • method

リクエストを飛ばすときのHTTP method。デフォルトは GET 。

  • queryParam

クエリストリングの名前。デフォルトは q 。

  • minChars

最低何文字目から検索をするか。 デフォルトは1文字目から。

  • propertyToSearch

検索対象の属性を指定。デフォルトは name 。
初期値の設定

  • prePopulate

初期値のオブジェクトを設定。デフォルトは null 。上で記載している data のように書けばいい。
表示の設定

  • htmlText

テキストフィールドをクリックしてドロップダウンラベルが表示されるが、そのときに表示されるテキスト。
デフォルトは “Type in a search term” 。

  • noResultsText

検索結果がなかったときに表示されるテキスト。デフォルトは “No results” 。

  • searchingText

検索中に表示されるテキスト。デフォルトは “Searching…” 。

  • theme

テキストボックスのテーマ

その他、コールバックなどもありますよ。

redcar を利用してみる

http://redcareditor.com/

Mac で開発している方が使用されている Textmate
クローンである redcar を使ってみました。

インストール方法は上記 URL にある通り。
ただし、 sudo は必要ないかも。
JRuby で動くので java の環境も必要。

軽く動かしてみたところ、結構軽いです。
キーバインドが慣れてないのでアレですが、 snippet も充実しているので
それを覚えたらコーディングは早くなりそう。
Textmate で不満が上がっている日本語の処理も問題ありません。

これから少しずつ使っていこうかと。

ウインドウのリサイズ

ubuntu でウインドウのリサイズが非常にしにくい!
リサイズのカーソルに変化するエリアが1ピクセルしかないんじゃないかと思うくらい。
先生に聞いたらやっぱり方法がありました。

ウインドウ上で Alt + マウスのホイールを押しながらドラッグ

右下近くでやれば右下のリサイズと位置でリサイズの方向がきまります。

ちなみに、移動は

ウインドウ上で Alt + マウスの左ボタンを押しながらドラッグ

ubuntu だけではなく、多くの Linux でできるようです。
Window Manager に依存しているようです。

wubi を使ってみる

普段は virtualbox を使って ubuntu を使用していた。
やはり VM 環境ということもあって、動きはよくなかった。
メモリがあまり載っていないので ubuntu に余裕がなかった。

ということで、ホストに ubuntu を入れようとデュアルブート
考えたが、 MBR を汚したり、パーティションをいろいろ切らないと
いけないのも面倒だったので wubi を使用した。

wubi は Windows パーティションに ubuntu をインストールするというもの。
起動はデュアルブートになる。しかし、 MBR は上書きしないので、 Windows
ブートローダを使用する。
具体的には…

Windows 起動 : MBR → Windows
ubuntu 起動 : MBRGRUBubuntu

ubuntu をアンインストールした際には、インストール前の状態に戻るので安心。

欠点は、専用のパーティションを作らないのでディスクアクセスの速度が若干低下しているところか。

emacs init.el の再ロード

init.el をちょこちょこ修正していると、再起動して反映させるのが
面倒くさい。そこで検索しているときにサジェストで出てきていた
再ロードを調べてみた。

M-x eval-buffer

これだけ。らくちん。

execjs うんたらで rake aborted!

環境:ubuntu11.10, rails3.1.1

アプリを生成し、 bundle insall を実行し、
rake db:create したら、以下のエラーが。

Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.

先生に聞いたら、以下が必要っぽい。
execjs は書かなくても依存性でインストールされているっぽいけど念の為。

gem 'execjs'
gem 'therubyracer'

bundle install 後には問題なく rake db:create が成功しました。

OSX Lion 環境では起こらなかったが…。環境依存なのかしら。