Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webアプリをあっという間にカッコよく! BootstrapによるレスポンシブWebレイアウト

業務Webアプリケーションエンジニアのための「Bootstrap」入門 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/07/22 14:00

 本連載では、サーバーサイドJavaやPHPを使って業務アプリケーション開発を行う若手エンジニアのために、「Bootstrap」を使ってかっこいい画面を作成する方法をご紹介します。「プログラミングは好きだけど、デザインセンスに自信がない……」や「スマートフォンやタブレットでもきちんとレイアウトされたアプリを簡単に作りたい!」などを実現してくれる便利なBootstrapの使い方を、サンプルコードを交えて説明します。

目次

はじめに

 みなさんは、普段業務でJavaやPHPなどでWebアプリケーションを作成するとき、次のような画面を目にすることはありませんか?

ログイン画面の例
ログイン画面の例

 筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。

 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。

 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソコンからのアクセスのみではなく、スマートフォンやタブレットなどのマルチデバイス環境でアプリを動かしたいという顧客の声は、いまやシステムの必須要件になりつつあります。

 本記事では、次のようなかっこいい画面を簡単に開発できるBootstrapをご紹介します。

Bootstrapを使ったログイン画面の例
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を使ったサイトの一例
Bootstrapを使ったサイトの一例

 Bootstrapが提供する代表的なUIコントロールは次のとおりです。

Bootstrapが提供する代表的なUIコントロール
名前 説明
テーブル データの一覧などを表示するための表
フォーム 入力ボックスやラジオボタン/チェックボックスなど
ボタン フォームコントロールで使用するsubmitボタン
イメージ 画像の表示。デバイス幅に応じて自動でサイズを調整
グリフアイコン 機能を分かりやすく表すためのアイコン
ドロップダウンメニュー クリックまたはタップすると下方向に項目が表示されるメニュー
ナビゲーションバー Webアプリの機能を一覧表示するメニュー
パンくずリスト ユーザにどの階層でオペレーションしているかを知らせるリスト
ページ送り 1ページに収まりきらない情報を複数ページに分けて表示するコントロール
ラベル 情報を目立たせるために文字に飾りをつけたコントロール
バッジ 未読件数のような数字を分かりやすく知らせるコントロール
アラート 警告メッセージ
プログレスバー 進捗状況を表すバー
リストグループ メニューなどで使うリスト

 以下は、Bootstrapを利用したWebアプリの例です。

Bootstrapを使ったWebアプリの一例
Bootstrapを使ったWebアプリの一例

 なお、Webアプリ開発で使うときは、Bootstrapの公式サイトでサポートブラウザを確認しておく必要があります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

バックナンバー

連載:業務Webアプリケーションエンジニアのための「Bootstrap」入門

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5