プラカンブログSTAFF BLOG

2015.06.15

システム開発者が必要にせまられて使うCSSフレームワークのすすめ

framework

こんにちは、システム開発のまついです。僕が開発する管理機能の多くはフォーム(フォーム部品)とテーブルタグで構成されたページが遷移していくというお決まりの基本のパターンでプログラム開発も慣れたものですが、テンプレートのデザインコーディングが苦手でした。
例えばボタン画像をちょっと右に寄せるとかが(ポジションに関係するところ)うまく直せなくて、やっと直してもIEで見たら「あれっおかしい」となって・・・”楽しくありません”。

そんな僕でしたが、数年前にCSSフレームワークという言葉を見かけて、どうせデザイナー用のツールやろと最初思っていたのですが、よくよく目にするので気になって調べてみますと「コレ使えるやろーーー」と感動してさっそく試してみました。
これが、初CSSフレームワーク、「Twitter Bootstrap」でした。 

CSSフレームワークはデフォルトでデザインスタイルが用意されているので、クラスやIDを与えるだけで完成して、細かなことは気にしなくてよくなりました。
また、レスポンシブは管理機能に必要ないのですが、標準でレスポンシブになってたりします。

Twitter Bootstrapは、用途目的に応じたファイルを選んでロードするみたいでファイルが重く、デザインスタイルにも特徴があって、管理機能のデザインページとしてはちょっと好き嫌いが分かれる感じがして、もっと地味で軽いフレームワークは無いものかと思いました。

その後、Kubeフレームワークという地味で軽いフレームワークを見つけていくつかの案件で使いました。
軽くてシンプルなデザインなので文句無しなのですが、基本コピペコーディングの僕にはサンプルが少なくて困りました。
現在は、Kubeよりサンプルが多く、シンプルで癖のないデザインを提供しているCascadeフレームワークというのを使っています。

いちどお試しあれ

さて一方、本業のシステム開発でのフレームワークはPHPフレームワーク(Codeigniter)です。
CakePHP、Zend、Symfony、Ethna、など乱立している中で、社内の開発条件と使いやすさで決めました。
当時Codeigniterはベータ版みたいな感じで知名度も低く、「日本Codeigniterユーザ会」ぐらいでしか情報を得られませんでした。
しばらくして「Codeigniter徹底入門」という解説本が出たときはすぐに買いに行きました。
(Codeigniterはコードイグナイタと読みます)
現在では結構人気がでて、求人の選択条件に入るほどになりました。

僕がCodeigniterを選んだ条件は、下記4点で、特に4.は決め手になりました。
1.当時はPHP4の案件がまだあったのでフレームワークが対応している必要があった。
2.学習に時間をかけたくなかった。直観で使えるものがほしかった。
3.実行環境が一般的である。
4.実行が早い(これが一番の決め手になった。他のフレームワークも検証したが、とにかく表示が遅かった。)

フレームワークを使って開発する事で、
・セキュリティーを考慮したプログラム開発が楽になった。
・仕様が類似した案件へのコードの再利用が楽になった。
・デザインテンプレートとプログラムコードが分かれているので、それぞれの担当者で分業が可能になった。

ここまでで、CSS、PHPと来たので、次はJavaScriptですが、当然Javascriptにもフレームワークがあります。
AngularJSという人気注目度ナンバー1があります。
でも、社内ではだれも使ってません。

次回は、IEの開発者ツールのエミュレーション機能で、IE7から10までをエミュレートできる件を予定しています。

この記事は、MATUI が書きました。