はじめに
みなさんは、普段業務でJavaやPHPなどでWebアプリケーションを作成するとき、次のような画面を目にすることはありませんか？
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。
そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。
しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソコンからのアクセスのみではなく、スマートフォンやタブレットなどのマルチデバイス環境でアプリを動かしたいという顧客の声は、いまやシステムの必須要件になりつつあります。
本記事では、次のようなかっこいい画面を簡単に開発できるBootstrapをご紹介します。
対象読者
本記事は、次の方を対象にしています。
- HTML5/CSS/JavaScriptを使ってWebアプリケーションの画面作成ができる方
- デザインに自信のない方
Bootstrapとは？（1）
Webシステムの開発の現場の多くは、短納期で高品質な開発を求められています。そのためビジネスロジックの開発には、なんらかの開発フレームワークやライブラリなどを使っている場合が、ほとんどでしょう。フロントエンド開発でも、フレームワークを使わない手はありません。
「Bootstrap」は、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための「CSSフレームワーク」です。
Bootstrapであらかじめ用意されたフレームワークに則り、UI部品を組み合わせると、フラットデザインをベースにした、見栄えの良いフロントエンドの開発ができます。そのため、開発工数を大幅に削減できるだけでなく、デザインが苦手なエンジニアでも、ユーザビリティの高い画面の開発が可能になります。
Bootstrapは、Twitter社で作られたもので、過去のバージョンは「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」という名前になっています。執筆時の最新バージョンは3.1.1です。
Bootstrapの主な特徴は次のとおりです。
洗練されたデザインのUIを作るためのCSSフレームワーク
Bootstrapは、フラットデザインがベースになっています。シンプルで分かりやすいユーザインターフェースを開発できます。
特に、モバイルファーストを意識したUIコントロールが豊富に揃っていて、これらを組み合わせることで、モダンなユーザインターフェースが容易に作成できます。
Bootstrapが提供する代表的なUIコントロールは次のとおりです。
| 名前 | 説明 |
|---|---|
| テーブル | データの一覧などを表示するための表 |
| フォーム | 入力ボックスやラジオボタン/チェックボックスなど |
| ボタン | フォームコントロールで使用するsubmitボタン |
| イメージ | 画像の表示。デバイス幅に応じて自動でサイズを調整 |
| グリフアイコン | 機能を分かりやすく表すためのアイコン |
| ドロップダウンメニュー | クリックまたはタップすると下方向に項目が表示されるメニュー |
| ナビゲーションバー | Webアプリの機能を一覧表示するメニュー |
| パンくずリスト | ユーザにどの階層でオペレーションしているかを知らせるリスト |
| ページ送り | 1ページに収まりきらない情報を複数ページに分けて表示するコントロール |
| ラベル | 情報を目立たせるために文字に飾りをつけたコントロール |
| バッジ | 未読件数のような数字を分かりやすく知らせるコントロール |
| アラート | 警告メッセージ |
| プログレスバー | 進捗状況を表すバー |
| リストグループ | メニューなどで使うリスト |
以下は、Bootstrapを利用したWebアプリの例です。
なお、Webアプリ開発で使うときは、Bootstrapの公式サイトでサポートブラウザを確認しておく必要があります。
