いまさら聞けない「Twitter Bootstrap」とは？ (1/2)
2013年06月11日 11時00分更新
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。
そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。
この連載では、特にスタートアップで注目を浴びているフロントエンドツール「Twitter Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。まずはTwitter Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。
Twitter Bootstrapの特徴
Twitter Bootstrapは、米ツイッターが開発・提供しているフロントエンドツールです。オープンソースで公開されており、誰でも無償でダウンロードしてすぐに使えます。
Twitter Bootstrapは、Webデザインができないエンジニアでも、見た目をすばやく整えられるツールとして位置づけられています。最近では、管理画面などの非公開部分でTwitter Bootstrapを適用しているWebシステムを多く見かけますし、新規Webサービスのリーンスタートアップに使われるケースも多くなってきました。
Twitter Bootstrapがこれだけ使われているのには、4つの理由があります。
1.デザイナーに頼らず見栄えよくできる
Twitter Bootstrapを利用するメリットは、何といってもエンジニアがデザイナーに依頼することなく、自力で「ほどよい」デザインのサービスをが作れることです。実際、無機質なHTMLのページにTwitter Bootstrapを導入しただけでも見栄えはぐっとよくなりますので、その効果はすぐに実感できるでしょう。
2.カスタマイズも簡単である
カスタマイズも比較的簡単にできます。HTML5とCSSの基礎的な知識は必要ですが、その学習コストを割いてでも、いちからデザインするのに比べれば、利用するメリットは十分あるでしょう。
3.「コンポーネント」でリッチなUIも実装できる
Twitter Bootstrapは一般的にCSSフレームワークとして認知されていますが、CSSフレームワークにはない「コンポーネント」の概念があります。コンポーネントの実体はjQueryのプラグインで、JavaScriptのコードを一切書かなくてもリッチなUIを作れるのが特徴です。
HTML/CSSの初心者や、デザインが苦手なエンジニア、JavaScriptがあまり得意でないWebデザイナーにも手軽に使えますし、JavaScriptを書かずに済むので開発工数を削減できるメリットがあります。
4.レスポンシブWebデザインにも対応
Twitter BootstrapではレスポンシブWebデザインもカバーされています。レスポンシブWebデザインは、スマートフォンなどでPCとは別のレイアウトを提供する手法で、デバイスの画面サイズに併せてCSSが自動的にデザインを変更します。
レスポンシブWebデザインは、「モバイルファースト」と言われる時代では必要不可欠な手法であると筆者は考えています。Twitter Bootstrapでは基本的なレスポンシブWebデザインのテンプレートが用意されていますので、それに倣って作っていけばよいでしょう。
このように、Webアプリケーション開発のフロントエンド全般を網羅し、CSSフレームワークの枠を超えた「フロントエンドツール」がTwitter Bootstrapなのです。
こんなに使われているTwitter Bootstrap
すでにTwitter Bootstrapを利用して作られたWebサービスはたくさんあり、利用範囲は多岐に渡ります。
いくつか代表的な例を紹介しますので、実際に確認してみましょう。
ドットインストール
「ドットインストール」は「3分動画でマスターする初心者向けプログラミング学習サイト」です。ドットインストール内でもTwitter Bootstrapの基本的な使い方が解説されています。
tipshare
「tipshare（ティップスシェア）」は日々見つけた「役に立ったこと」を記録するTips共有サイトです。
Built With Bootstrap
「Built With Bootstrap」は、Twitter Bootstrapで作られたさまざまなサイトを紹介するショーケースです。また、Built With Bootstrap自体もTwitter Bootstrapで制作されています。
紹介したサイトへアクセスすると、ひとくちにTwitter Bootstrapといっても、少し手を加えるだけでまったく違ったデザインを提供できることがわかります。
