Rspec / jQuery オートコンプリートをテストする


UIにいろいろJavascript使うわけですが、やっぱりテストがね。しにくいよね。
タイプした時に候補を提案してくれるUIをテストするマクロです。
オートコンプリートとか自動補完とか呼ぶのかな。

続きを読む

jQuery UI サーバーからデータを取得して自動補完する


jQuery Autocomplete はRailsアプリとか作ってるとタグ付けでよく使う。
複数タグを登録できるようにしたいよね。

続きを読む

Rails / できるだけ高速に画像をアップロードする


このブログでも画像をアプロードする機能は実装していて、とくに不便を感じていなかったのですが、[CANPATH](http://www.canpath.jp)のユーザーから要望があったので考え直すことにした。

続きを読む

:nth-of-typeと:notの組み合わせはうまくいかない


いろいろ悩んだけど、結局できないことがわかった。

続きを読む

画像を好みの位置でトリミングする / Rails + jQuery UI draggable


画像を投稿させるサービスで、ユーザーが推奨サイズ比率ではない画像をアップロードした場合、好みの位置でトリミングさせるやつを考えてみた。TwitterとかFacebookのカバー写真をアップロードした時のアレです。今回はズームとか無しで、縦方向のみの位置調整にしてみました。(画像のwidthは100%)

続きを読む

RailsでjQueryが動かないと思ったら


Railsを使ってて忘れがちな点。

Turbolinks

こいつがjQueryの動きを止めます。
といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。

※ Rails4からTurbolinksはデフォルトGemになりました。
※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。

Turbolinksとは
ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。

続きを読む

bootstrap-datepickerで期間を指定する場合のカスタマイズ


Twitter Bootstrap使ってるとどうもjQuery UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。jQuery UIは機能が凄いからいいけどね。

で、データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。

Stefan Petre
http://

続きを読む

Node.jsでロボットを動かす


これはもの作り心をくすぐるプロジェクト。

ロボット、つまりハードウェアにNode.jsをインストールして、
javascriptでロボットを制御してやろ

続きを読む

[もっとみる...] / [See more...] をjQueryで実装する(開閉できるタイプ)


欲しいもの

これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキス …more

↓moreをクリックすると↓

これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルな

続きを読む

Datepicker for Bootstrapで指定日を無効にする


ウェブサービスを作る際に必要になるDate picker。カレンダーが出てきて日付を選べるやつです。
jQuery UIにもあるのですが、twitter bootstrapを使ってる人はjQuery UIのデザインが許せないこともあるかと思います。そんな時にDatepicker for Bootstrapを見つけ出すかと。
jQuery UIのほうが機能的には凄いので、どっちがいいとは言えませんが、見た目を何とかして!という人はDatepicker for Bootstrapがいいかも。

2つのバージョン
まず、こっちじゃないです。

続きを読む