最近のWebアプリ開発で利用したフロントエンド関係のあれこれ

CSS フレームワーク
スタイルシートツール SCSS
vim プラグイン zen-coding
gem
JavaScript ライブラリ
Web サービス
プラグインや Web サービスを探す時やデザイン・レイアウトを考える時に参考になった Web サイト

Rails を利用した Web アプリ開発をするときにフロントエンドまわりで利用したライブラリやフレームワーク,Tips などをまとめて、簡単に感想を書く。

CSS フレームワーク

僕の CSS フレームワークの使途は基本的にパーツのデザインや装飾だけだった。ボタンやフォーム、ラベルやアイコンなどをかっこ良くするために使った。グリッドシステムなどによる全体のレイアウトの構成には使わなかった。正確には、試したみたけれどうまいこと使えずに終わったというかんじ。

TwitterBootStrap

エンジニアに人気の CSS フレームワーク。人気なだけ合って使いやすい。ボタンやフォームもかっこよかったし、アイコンもたくさんあった。 Rails ではアイコンの拡張 gem もあったので、尚良かった。 ※ gem あり

TwitterBootstrap がはやりすぎていたので、似たようなフレームワークを使ってみた。こちらも Bootstrap に劣らずボタンやフォーム、ラベル、アイコンなどがあって、充分に利用できた。フォームがちょっと面倒だったが、僕の使途的にほとんど Bootstrap と変わらなかった。ただ、アイコンは Bootstrap と比較してソーシャル系サービスのものが明らかに豊富だった。 js を用いたアニメーション機能も充実しているようだが、あまり実用的ではなく、逆に UI や UX の低下になると思ったので全く使わなかった。 ※ gem あり

twitter-bootstarp-rails : TwitterBootstrap の Rails への導入を楽にしてくれる gem
maxmertkit-rails : Maxmertkit の Rails への導入を楽にしてくれる gem
kaminari : ページネーションの作成をしてくれる gem。Bootstrap と似たようなデザインを組めるので合わせて使うと良い感じ
crummy : パンくずリストの作成補助をしてくれる gem。デザインもわりと融通が効いたのでよかった。
font-awesome-rails : twitter-bootstarp-rails のアイコンを拡張してくれる gem。アイコンはたくさん使ったので重宝した。

JavaScript ライブラリ

jNotify.jquery.js : フォームの作成が成功したときや失敗したときなどに使う通知機能を実装できるライブラリ。シンプルでかっこ良くて良い感じだった。
timeSlider.js :「何時から何時まで」といったような時間の入力をするのをかなり楽にしてくれるライブラリ。スライダー画像が出てきて、そこにあるつまみをドラッグすることで調整できる。時間入力は面倒なので、これは良かった。
heightLine.js : ブロック要素の高さを揃えてくれるライブラリ。これはかなり実用的。重宝した。
footerFixed.js : コンテンツの高さが不足して、画面下部まで及ばない時にフッターが上がってきてしまうような時に、それを解消してくれるライブラリ。これを使えば、コンテンツの高さにかかわらずフッターは下部に固定される。CSS で対策するよりもよっぽど簡単だったので重宝した（使い方は超簡単で、固定したいフッターに「id=:“footer”」を付与するだけ）。
jqTransform.js : フォームのデザインをかっこ良くしてくれるライブラリ。これは確かにカッコイイ。しかも導入も超簡単。ただし、幅の調整などちょっとしたカスタマイズをするためにはソースコードをいじらなくてはならないので、その辺は要注意。
jquery-ui.js : これは、ドラッグ＆ドロップ機能の実装やカレンダーの実装に利用した。かなり助かった。カレンダーのデザインも◎。

Web サービス

OneClickCSS : HTML コードを貼り付けて生成ボタンを押すと、それに応じた SCSS とか CSS とか LESS のコードを吐いてくれる。タイプミスや、階層構造のミスもなくなるので良かった。 http://css.miugle.info/
SubttlePatterns : フリーの背景画像などを提供してくれるサービス。フリーなのにクオリティ高い（と感じた）し、閲覧性も高く利用しやすかった。 https://www.toptal.com/designers/subtlepatterns/

プラグインや Web サービスを探す時やデザイン・レイアウトを考える時に参考になった Web サイト

かちびと.net
Coliss
バンクーバーのうぇぶ屋
Design Walker（※ 現在はリンク切れ）
Web クリエイターボックス
Web Design RECIPES（※ 現在はリンク切れ）
見出しデザイン.com

最近のWebアプリ開発で利用したフロントエンド関係のあれこれ

CSS フレームワーク

TwitterBootStrap

Maxmertkit

YAML

スタイルシートツール SCSS

vim プラグイン zen-coding

gem

JavaScript ライブラリ

Web サービス

プラグインや Web サービスを探す時やデザイン・レイアウトを考える時に参考になった Web サイト

h3pei

関連記事