Twitter bootstrapをよく参考にするけどフロントエンドフレームワークについて思うこと

Twitter Bootstrap というフロントエンド開発フレームワークが2011年の夏くらいに出ました。と時をほぼ同じくして、僕もその当時に携わっていたプロジェクトで同じようなフレームワークを作っていたので、Bootstrapはいいなあ、おしゃれだなあ、と思いつつ、作りかけのフレームワークの完成度を上げていきました。

バージョン1
バージョン2

その際、よくBootstrapのコードを眺めたり真似したりしていたんですが、さすが海外の天才が作ったのは違うよね、勝てないよね、と思っていたんですが、最近は、でもそこまでの機能はいらんよねと思うようになってきました。

IDEAxIDEAさんなんかがゾッコンらしい記事がありますが、そのくせ、「そのままのデザインはイヤだ」みたいな記事もときどき見ます。個人的には、WebサービスのUIは全部Bootstrapになればいいと思ってます。なぜか。デザインがいいから、とかじゃなくて「オレオレデザイン」じゃなくなるからです。保存ボタンや重要なアクションがあるボタンは青で、画面内で吹き出しが出たりページトップに戻ったりするボタンは白、みたいに共通の使い分けができるというのが理由です。

デザインが一般化すればするほど、Webサービスの利用目的を阻害する要因が減っていくはず、と考えます。iPad3の発表会でも、「デジタルデバイスが究極に進化すると、その存在を感じさせなくなる」という一言がすべてです。「このボタンは何だっけ」とか「あの操作をするにはどうすればいいんだっけ」という疑問は全部無駄な行動で、本当はそのボタンを押す目的があるはずです。編集した画像を忘れないように保存しておきたい、とか(保存を自動にすることでそれは達成されるけど気持ち的な問題もあるし)。ユーザにサービス自体の体験を向上させるためには、デザインも機能もすべてが透明になる必要がある、と僕は思っていて、現状、フロントエンド開発で最もそれに近いのはBootstrapじゃないかと思うのです。だからこそ、スキンはあんまり変えない方がいいと思ってます。ところで僕が作っているフロントフレームワークは、会社のプロジェクトで使ってるから公開できないんだけど、以下のような構成になっています。まあ別に公開しても驚きやしないんだけど。

HTML

HTML5 boilerplateをベースとした、すぐに使えるカラのHTML。各種meta タグ設置済み。
・head部にCSS、body下部にJSを読み込む。
・viewport
・Google Chrome Frame有効タグ
・Webアプリを作るのがメインというのもあるけど、HTML5レイアウトタグは使ってない。
・いつスマホ対応してもいいためにdata-role=headerとかのjQuery Mobile識別タグを積極的に利用。
・装飾のためにはid属性は使わない。レイアウトには使う。
・id属性はほとんどサーバサイドのフレームワークがフォームまわりで使ったりするくらい。
・JSで使う(ボタンとか、表示非表示とか)要素はdata-*属性を使う。たとえば、クリックするとトグルになるボタンと要素はこんな感じ。※ただしPCでの利用に限る。jQueryで属性セレクタなんて遅い!って言われそうだけど、4コアCPU時代にそんなこと言います?って問いたい。

<button data-click="toggle">ボタンで開閉</button>
<div data-toggle="toggle">最初は非表示</div>
<script>
$("button[data-click=toggle]").on("click",function(){
  $("div[data-toggle]").toggle();
});

JS

jQuery。jQueryぽいのまで自作して軽くなったとか言ってるツールもあるけど、ここはいろんな開発者が使いやすいように礼儀としてjQueryを選択すべきと判断。
Modernizr
respond.js
jQuery UI(ただしdialogとdatePickerぐらいしか使わないので、もっと軽いライブラリを探し中)
jquery.tipsy(ツールチップのため)
jquery.fancybox(外部ページ表示のダイアログ用。愛用のthickboxが開発停止になったから、今はこっち)

CSS

・命名は、レイアウトに関係するものはキャメル形式(headerContainerとか、glaoblNaviとか)
・レイアウトに関わらないものは適当(toggle_click_btnとか)。ただしダブルクリックで選択しやすいように、-より_を使うことが多い気がする。
・記述はscss
・hamlとcoffeescriptは使わない。みんなが開発しやすいため、基本のHTMLとJSは記述方式を変えない。ただしscss(sass)はcssと完全互換だから積極的に利用する。
・サーバ側がRubyで出来てるとかでは全くない。ローカルでcssを書くためだけにRuby(gem)を使う。css開発が捗る。
・以下はimport用にファイルを分けたscss。作るサービスによって必要なものだけをインポートする。
960.gs(レイアウトのscaffold)
normalize(共通リセット)
・CSS3用mixin(独自開発)
・タイポグラフィ
・タブ
・ページネイション
・モーダル
・ツールチップ
・テーブル(一覧画面、編集画面、詳細画面)
・フォーム(HTML5フォーム含む)
・ボタン(重要ボタン、ページ内アクションボタン、弱いボタンの3種類があると捗る)
・アイコン
ただしレスポンシブ用のスタイルをどこに置くかはまだ迷ってる。プロジェクトごとに違う、、

調整とか

FirefoxのPage speedでJSの圧縮、画像の圧縮を簡単に。
・画像はgifよりpng24(Photoshop)のほうが軽いので、ほとんどすべてpngで使う。
・CSSスプライトはCSSspriteGeneratorをよく使う。
・CSSやJSを連結するツールはまだ導入してない感じ。


さて。上記でとりあえずPC向けのWebサービス、Webアプリを作る場合は、フロント開発はほとんど必要なくて、既存のパーツの組み合わせでできる感じになってる。社内向けサービスとかは超早い。だけど、公開するサービスの場合はそうはいかない。利用がPC専用ならいいけど、スマホ向けの場合を考慮する必要があって、そこはまだまだ弱いという状況です。

Bootstrapは簡単だって言ってもスマホ向けサイトに読み込むと、まだまだファイルが重いしレンダリングも遅い気がする。再読み込み以降は早いけど、ファイルをダウンロードしてから画面レンダリングまで数秒かかるのはちょっとないなぁ、と。