Web 開発

  • [アーティクル]

Bootstrap によるレスポンシブ Web サイトのビルド

Keith Pijanowski

ユーザーがモバイル デバイスで皆さんのサイトの URL をタップするのは時間の問題でしかありません。でも、そのサイトがデスクトップ専用に設計されているためスマートフォンでは利用できないとしたら、そのサイトを見ようとするでしょうか。おそらく、もっとモバイル向けのサイトに移ってしまうでしょう。そのため、モバイル フォーム ファクターを具体的に意識して UX を設計し、スマートフォンでもサイトとのやり取りを手軽に楽しめるようにすべきです。

以前は、Web サイトでモバイルとデスクトップの両方をサポートするには異なるコード ベースが必要でした。しかし現在は、モバイル、タブレット、デスクトップ、さらには大画面デスクトップでさえ、1 つのコード ベースですべてサポートできる Web ページ用 UI フレームワークが登場しています。このようなツールでモバイル Web 開発者の悩みがすべて解決するわけではありませんが、開発プロセスが大幅に容易になることは事実です。ただし、Web サイトにとってそのフレームワークが最適かどうかを判断しなければなりません。

今回は、このようなツールの 1 つで、Visual Studio 2013 の Web アプリケーション テンプレートの多くに含まれる Bootstrap の概要を示します。Bootstrap は、レスポンシブ Web デザイン (RWD) を実現するフレームワークです。RWD は、どのフォーム ファクターでも受け入れ可能な表示エクスペリエンスを 1 つのコード ベースで提供することを目標とした、Web サイト設計のアプローチです。概要を説明した後、Bootstrap のようなフレームワークが Web サイトにとって適切かどうかを判断するのに役立つ要素をいくつか検討します。

始まり

Web ソフトウェア業界は、Bootstrap のようなソリューションが登場する現在までに、ある程度の進化の過程を経験しています。気まぐれな進化は 1998 年に始まり、進化の過程ではワイヤレス マークアップ言語 (WML)、コンパクト HTML、XHTML モバイル プロファイルなどが現れては消え、最終的に HTML5 がすべてのデバイスにおける次世代 HTML 標準になったのは 2009 年のことです。モバイル Web 用マークアップの標準が進化する一方、ハードウェア、モバイル ブラウザー、帯域幅も飛躍的な進歩を遂げています。プロセッサは高速になり、モバイル ブラウザーはどのような Web ページでも (たとえモバイル デバイス用に設計されてなくても) 表示できるほどに進化し、帯域幅も広がりました。こうして環境が整えられたため、後は開発者しだいというのが現状です。

開発者は、他の開発者向けにツールを作成することを好みますが、モバイル Web も例外ではありません。現在では 10 種類以上の多様な UI フレームワークが市場に出回っています。アプローチはどれも異なり、Web サイトにもそれぞれ要件があるため、そのうちの 1 つのフレームワークを "最高" と評するのは公平ではありません。今回 Bootstrap を取り上げたのは、導入レベルが明確で、ドキュメントが充実し、ASP.NET Web アプリケーション テンプレートに含まれているためです。

Bootstrap とは

Boostrap は、Web サイトをビルドするためのレスポンシブ UI フレームワークです。Bootstrap フレームワークは、他の Web 開発用フレームワークの多くと同様、CSS クラス、UI コンポーネント、および jQuery プラグインのコレクションです。また、軽量なフレームワークと考えられています。つまり、JavaScript よりも CSS を多く利用して処理を実行します。軽量とは考えられていますが、Bootstrap ツールを使用した Web ページはやはり、特定のフォーム ファクター専用に作成されたページに比べると、レンダリングにより多くの処理を必要とします。そのため、Bootstrap フレームワークを用いた Web ページを設計、開発、テストする場合、パフォーマンスを考慮することが重要になります。

Bootstrap では多くのことが自動的に行われます。また、ある特定フォーム ファクターの既定の動作をカスタマイズしながら、他のフォーム ファクターとの関係を見栄えよく適切に保つことが簡単に行えます。Bootstrap バージョン 3 の CSS クラスは、モバイル、タブレット、デスクトップ、さらには大画面デスクトップで実行されるブラウザーの一般的な幅を具体的にターゲットにしています。Bootstrap CSS クラスを使用して、HTML5 の要素に注釈を付けることができます。通常 Bootstrap で最も使用される CSS クラスは、行と列を使用してページ レイアウトを整えるクラスのコレクションである、Bootstrap グリッド システムに関するクラスです。このグリッド システムについては、後ほど詳しく説明します。

Bootstrap は、サイトの UI 作成用に多くの UI コンポーネントを備えています。たとえば Button dropdown (ボタン ドロップダウン)、Button group (ボタングループ)、Dropdown (ドロップダウン)、Navbar (ナビゲーション バー)、Breadcrumb (階層リンク)、Media object (メディア オブジェクト)、Pagination (改ページ位置の自動修正)、Progress bar (進行状況バー) などがありますが、これはほんの一部です。これらのコンポーネントの多くはコンポーネント自体がレスポンシブ、つまり、ブラウザーの幅に応じてレンダリングが変化します。たとえば、強力なコンポーネントの 1 つであるナビゲーション バーは、デスクトップの画面の幅全体を使ってメニュー オプションを表示するメニュー バーが、スマートフォンではドロップダウン メニュー バーでメニュー オプションを表示するわかりやすいコンパクト版に自動的に変化します。このドロップダウン メニュー バーはユーザーがナビゲーション バーをタッチするとアクティブになります。

高度な UI 機能が必要な場合、Bootstrap にはカスタム jQuery プラグインのコレクションがあり、Carousel (カルーセル)、Collapsible panel (折りたたみ可能パネル)、Modal dialog prompts (モーダル ダイアログ プロンプト)、Popover messages (ポップオーバー メッセージ) などを利用できます。

作業の開始

Visual Studio 2013 の ASP.NET Web アプリケーション テンプレートを使用してプロジェクトを作成すると、Bootstrap の CSS ファイルと Javascript ファイルが自動的にプロジェクトに含められます。図 1 は、Web アプリケーション テンプレートを表示する [新しいプロジェクト] ダイアログ ボックスを示しています。Bootstrap には jQuery も必要です。Visual Studio 2013 Web アプリケーション テンプレートの Bootstrap を使用する場合、JQuery v1.10.2 を備えた Bootstrap v3.0.0 を使用することになります。Visual Studio 2012 の Web アプリケーション テンプレートを使用する場合は、これらのファイルがプロジェクトに含められません。また、[ファイル] メニューの [新しい Web サイト] からプロジェクトを作成した場合も Bootstrap は自動的には含められません。

Visual Studio 2013 の [新しいプロジェクト] ダイアログ ボックスの ASP.NET Web Application テンプレート
図 1 Visual Studio 2013 の [新しいプロジェクト] ダイアログ ボックスの ASP.NET Web Application テンプレート

最新版の優れた Bootstrap と jQuery を使用する場合は NuGet を使用してプロジェクトを更新します。また、Visual Studio 2013 より前のバージョンの Visual Studio を使用している場合は、NuGet を使用して Bootstrap を入手できます。Bootstrap サイト (getbootstrap.com、英語) では、CDN にホストされる Bootstrap へのリンク方法が説明されています。これはパフォーマンスに大きなメリットがあります。

Bootstrap グリッド システムを試す

Bootstrap は 12 列のレスポンシブ レイアウトとして知られるレイアウトを提供します。任意の行数でページをレイアウトできますが、列数は 12 でなければなりません。この 12 列はブラウザーの横幅を均等に分割して配置されます。開発者は Bootstrap CSS クラスを使用して、ある HTML 要素がいくつの列を占有するかを指定します。これは、Windows Phone や Windowsd 8 の XAML 開発者が使い慣れているグリッド システムとは異なります。XAML グリッド システムの場合は、ページ レイアウト内に任意の数の行と列を配置でき、開発者は行番号と列番号を指定することでセルに各コントロールを配置します。Bootstrap グリッド システムを特に強力なのは、大画面デスクトップ、標準デスクトップ、タブレット、およびスマートフォンでそれぞれ異なる列幅を指定できる点です。たとえば一般的なレイアウト パターンの場合、一連の div を作成して、div 1 つが大画面デスクトップでは 2 列 (6 div が各行に収まる)、標準デスクトップでは 3 列、タブレットでは 4 列、スマートフォンでは 6 列 (2 div が各行に収まる) を占有するように指定します。このシナリオのコードを図 2 に示します。このコードは Bootstrap グリッド システムを構成する col* クラスを使用しています。色のクラス (gray、orange など) は、単純に div の背景に色を付けるだけです。図 3 と図 4 は、このページがデスクトップとスマートフォンでそれぞれどのようにレンダリングされるかを示しています。

図 2 Bootstrap グリッド システム使用時の一般的なレイアウト パターン

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

col-md-3 クラスを使用してデスクトップ上でレンダリングした図 2 の例
図 3 col-md-3 クラスを使用してデスクトップ上でレンダリングした図 2 の例

col-md-6 クラスを使用してスマートフォン上でレンダリングした図 2 の例
図 4 col-md-6 クラスを使用してスマートフォン上でレンダリングした図 2 の例

Bootstrap は、実際にはデバイスの種類を検出していない点に注意してください。Bootstrap はメディア クエリを使用して、CSS クラスを適用するかどうかを決めています。図 5 は、適用するカテゴリの基準となる幅の範囲と、前述の 4 カテゴリのクラスを示しています。

図 5 Bootstrap グリッド システム クラスのカテゴリ

カテゴリのプレフィックス フォーム ファクター ピクセル幅
col-xs-* スマートフォン 768 ピクセル未満
col-sm-* タブレット 768 ～ 991 ピクセル
col-md-* デスクトップ 992 ～ 1,200 ピクセル
col-lg-* 大画面デスクトップ 1,200 超のピクセル

 

固有の HTML 要素をレイアウトするときに、これらのカテゴリを任意に組み合わせて使用します。たとえば、次のコードは、各カテゴリのクラスを 1 つ使用します。

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

これは、以下の擬似コードとほぼ同じ意味を持ちます。

ブラウザーの幅が 768 ピクセル未満の場合、この div は使用可能な 12 列のうち 6 列にまたがり、画面の半分 (6/12) を占めます。

ブラウザーの幅が 768 ～ 991 ピクセルの場合、この div は使用可能な 12 列のうち 4 列にまたがり、画面の 3 分の 1 (4/12) を占めます。

ブラウザーの幅が 992 ～ 1,200 ピクセルの場合、この div は使用可能な 12 列のうち 3 列にまたがり、画面の 4 分の 1 (3/12) を占めます。

ブラウザーの幅が 1,200 ピクセルを超える場合、この div は使用可能な 12 列のうち 2 列にまたがり、画面の 6 分の 1 (2/12) を占めます。

カテゴリごとに列数を明示的に指定する必要はありません。また、特にカテゴリを指定していない場合は、サイズが小さい次のカテゴリが使用されます。たとえば、スマートフォンには固有のレイアウトが必要でも、タブレット、標準デスクトップ、大画面デスクトップには同じレイアウトを使用できる場合、指定するのはスマートフォンとタブレットのクラスだけです。この場合の指定は次のように行います。

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap は、標準デスクトップと大画面のデスクトップの両方のフォーム ファクターに、タブレットの設定を使用します。また、スマートフォンの既定クラスは col-xs-12 で、これは各 div を行全体に配置します。スマートフォンでこのレイアウトを使用できる場合は、上のコードを次のように削減できます。

<div class="col-sm-4"> {HTML elements here.} </div>

図 2 では行を指定していないことがわかります。Bootstrap グリッド システムは、現在の行が既に使用されている場合、または div に対して十分な空きがない場合、div を自動的に次の行に移します。以下の row クラスを使用すると、強制的に新しい行に配置することができます。

<div class="row">
  {Place columns here.}
</div>

なぜ 12 列なのでしょう。12 という数はこのグリッド システムのためにランダムに選んだ数のように思えるかもしれませんが、そうではありません。12 は割り切れる数が多く、この数によって構成の可能性に多くの余地が生まれます。たとえば、1、2、3、4、6、12 はすべて 12 列を均等に分割できます。これらの値を占有する列数に使用することで、それぞれ 12 列、6 列、4 列、3 列、2 列、1 列のコンテンツ レイアウトを生成できます。そのうえ、3 + 9、9 + 3、4 + 8、8 + 4 などの組み合わせを使用すると、コンテンツが魅力的な外観を持つレイアウトにになります。

Bootstrap のコンポーネント

Bootstrap には、20 を超えるコンポーネントが含まれています。これらのコンポーネントはそのままの状態でも使用でき、拡張も容易です。各コンポーネントの説明および使用例については Bootstrap サイトを確認してください。メディア オブジェクトのドキュメントでは、その使用法をデモするために REO スピードワゴンのミュージック ビデオを活用しています。80 年代に青春を過ごしてはいない方でも、一度は聴いてみることをお勧めします。

では、ナビゲーション バー コンポーネントを詳しく見てみます。このコンポーネントは、Web ページの先頭にメニュー バーを作成するために使用します。図 6 は、ナビゲーション バー コンポーネントを使用して、サイトのブランドと少数のメニュー オプションを配置したシンプルなメニューの作成方法を示しています。ブラウザーの幅が 768 ピクセルよりも広い場合は、ナビゲーション バーは図 7 のようにレンダリングされます。ブラウザーの幅が 768 ピクセルよりも狭い場合は、図 8 のようにレンダリングされます。この場合、ユーザーが横縞のボタンをタップすると、メニュー オプションが表示されます。

図 6 Bootstrap ナビゲーション バー コンポーネントの使用

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

幅 768 ピクセル以上のブラウザーにレンダリングしたナビゲーション バー
図 7 幅 768 ピクセル以上のブラウザーにレンダリングしたナビゲーション バー

幅 768 ピクセル未満のブラウザーにレンダリングしたナビゲーション バー
図 8 幅 768 ピクセル未満のブラウザーにレンダリングしたナビゲーション バー

もちろん、これは非常に単純な例です。ナビゲーション バーにはドロップダウン メニュー ボタンも含めることができ、検索機能を組み込むことも可能です。また、ナビゲーション バーの Brand 部分はテキストで表示していますが、画像を使用してもかまいません。

jQuery のプラグイン

Bootstrap には 10 個余りの jQuery プラグインがあり、Bootstrap サイトの JavaScript タブにドキュメントが用意されています。一見すると、HTML5 の要素を強化するために使用する CSS クラスであるという点で、先ほど説明したコンポーネントと機能が似ています。ただし、これらの CSS クラスによって jQuery のアクティビティがトリガされるのは、HTML 要素がレンダリングされるとき、または HTML 要素のさまざまなイベントが発生するときです。このようなプラグインを多用する Web ページは、パフォーマンスの問題をテストしておく必要があります。CPU が遅く、メモリが限定されるデバイスの場合は特に必要です。

プラグインの実行に必要な JavaScript は bootstrap.js 内に配置します。また、各プラグインをスタンドアロン ファイルとして使用することもできます。これにより、アプリが必要とするプラグインだけを配置でき、先頭ページのレンダリングが高速になります。

図 9 は、スライドショー機能を提供するカルーセル プラグインの使用法を示しています。ページ内に既に bootstrap.js または bootstrap.min.js へのリンクを記述していれば、準備は万全です。あるいは、ページに必要なのがカルーセル プラグインのみであれば、carousel.js にリンクしてもかまいません。

図 9 Bootstrap カルーセル プラグインの使用

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

図 10 は、Windows Phone でレンダリングされたカルーセル プラグインを示しています。カルーセル プラグインは、タブレット、デスクトップ、および大画面デスクトップの各フォーム ファクターに適したサイズに自動的に拡大します。

Windows Phone エミュレーターでレンダリングした Bootstrap カルーセルの例
図 10 Windows Phone エミュレーターでレンダリングした Bootstrap カルーセルの例

考慮事項

前述したとおり、Bootstrap はすべての状況に対応できるわけではありません。サイトで Bootstrap を採用することが適切かどうかを判断するために、考慮が必要な点がいくつかあります。

  1. 既存のサイトが長年にわたってパフォーマンスを調整済みで、サイトのユーザー向けに最適化が完了している場合は、作業を慎重に進めます。複雑で、利用頻度の高いページはプロトタイプを作成することをお勧めします。Bootstrap 対応のページが適切に機能しない場合は、モバイルサイトを構築し、自分ですべてコーディングすることを考えてください。Dino Esposito のコラム「既存 Web サイトのモバイル化」(bit.ly/1CaVEWR) に、モバイルサイトの構築方法が紹介されています。
  2. 新しく Web サイトをビルドする場合は、最も複雑なページや、利用頻度が最も高いと推測されるページのプロトタイプを作成します。ローエンドのデバイスや帯域幅が低いエリアでも正常に動作することを確認します。ページに問題があるとわかった場合は、そのページが適切に動作するように再設計を試みます。モバイルサイトのビルドも新しいサイトでは選択肢の 1 つですが、それは再設計がうまくいかなかった場合のみにします。
  3. Bootstrap グリッド システムやナビゲーションに使用するコンポーネントが、サイト設計を制限しすぎないようにします。Bootstrap 調査の早い段階で UX デザイナーに相談してください。個人的見解としては、Bootstrap のようなツールを使用するとモバイル サイト向けの設計を強いられることになり、そのためにページをすっきり整理された状態に維持せざるを得なくなります。ただし、Bootstrap を利用しても適切にブランドを表現し、対象ユーザーに適したエクスペリエンスを提供できるかどうかは、UX デザイナーが確認できるでしょう。

詳細情報とツール

Bootstrap を使用してサイトを開発する予定であれば、Bootstrap サイトでドキュメントが提供されている Bootstrap コンポーネントと jQuery プラグインをすべて調査することをお勧めします。Bootstrap サイトには役立つサンプルも数多く掲載されています。また以下のサイトも確認してください。

  • Bootswatch (bootswatch.com、英語) は Bootstrap 用のフリー テーマを扱っています。
  • WrapBootstrap (wrapbootstrap.com、英語) は低価格の Bootstrap テーマとテンプレートを扱っています。
  • Font Awesome (fontawesome.io、英語) は、CSS で簡単にカスタマイズ可能なフリーのスケーラブル ベクター アイコンを扱っています。
  • 「ASP.NET MVC 5 モバイル Web アプリケーションを Azure App Service に展開する」(https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-dotnet-deploy-aspnet-mvc-mobile-app/) では、Bootstrap を既存の Web サイトに適用することでサイトをモバイル フレンドリにする方法を説明しています。またこの記事では、サイトを Microsoft Azure に配置する方法も説明しています。

まとめ

今回紹介したのは Bootstrap UI フレームワークの簡単な概要にすぎません。Bootstrap に付属する CSS クラス、コンポーネント、およびプラグインをすべて完全に説明したわけではありません。Bootstrap サイトにアクセスして、利用可能なツールを徹底的に把握し、さまざまな UX 設計を実際に示しているサンプル ページを見て回ることをお勧めします。Bootstrap を使ってできることについて感触をつかむ場合は、同サイトのサンプルから始めてみてください。

Bootstrap などのフレームワークを利用して本格的に開発を進める前に、パフォーマンスとユーザビリティーを考慮します。重要なページのプロトタイプを作成して、Bootstrap を自身のサイトに採用できるかどうか、そして目的の結果を得ることできるかどうかを確認するのが最善の方法です。

Keith Pijanowski* は、エンジニアで起業家の仕事人間です。ソフトウェア業界で 20 年以上の経験があり、新興企業にも大企業にも勤め、コード作成から事業開発まで、さまざまな業務に携わってきました。連絡先は keithpij@msn.com または twitter.com/keithpij です。*

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Rick Anderson および Cephas Lin に心より感謝いたします。