最近のWebアプリ開発で利用したフロントエンド関係のあれこれ
Railsを利用したWebアプリ開発をするときにフロントエンドまわりで利用したライブラリやフレームワーク,Tipsなどをまとめて、簡単に感想を書く。
CSSフレームワーク
僕のCSSフレームワークの使途は基本的にパーツのデザインや装飾だけだった。 ボタンやフォーム、ラベルやアイコンなどをかっこ良くするために使った。 グリッドシステムなどによる全体のレイアウトの構成には使わなかった。 正確には、試したみたけれどうまいこと使えずに終わったというかんじ。
TwitterBootStrap
エンジニアに人気のCSSフレームワーク。人気なだけ合って使いやすい。 ボタンやフォームもかっこよかったし、アイコンもたくさんあった。 Railsではアイコンの拡張gemもあったので、尚良かった。 ※ gemあり
Maxmertkit
TwitterBootstrapがはやりすぎていたので、似たようなフレームワークを使ってみた。 こちらもBootstrapに劣らずボタンやフォーム、ラベル、アイコンなどがあって、充分に利用できた。フォームがちょっと面倒だったが、僕の使途的にほとんどBootstrapと変わらなかった。ただ、アイコンはBootstrapと比較してソーシャル系サービスのものが明らかに豊富だった。 jsを用いたアニメーション機能も充実しているようだが、あまり実用的ではなく、逆にUIやUXの低下になると思ったので全く使わなかった。 ※ gemあり
YAML
個人的に、使いづらかった ※ gemあり？
スタイルシートツール SCSS
今まではcssでベタ書きしていたが、scssのほうが好き。 階層構造を作りながら記述できるので、予期しない箇所にデザインが反映されることも少なかったし、mixinにより同じスタイルの記述を減らすことができた。 ただし、Webアプリを本番環境に反映させる（productionで動作させるとき）にこの周辺でかなり苦労した。
vimプラグイン zen-coding
エディタはHTMLもスタイルシートもrubyコードも全てvimで書いた。
まだまだ全然使いこなせておらず、簡単なHTMLの記述にしか使っていない。それでも、< か >を打たずに明らかに少いタイプ量でHTMLコードを確実にミス無く組めるので、かなり助かったと感じる。
これはもっと使えるようになりたい。
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/