連載
» 2018年08月02日 05時00分 公開

Angular TIPS:BootstrapをAngularアプリで利用するには?(ng-bootstrap)

ng-bootstrapを使って、CSSフレームワーク「Bootstrap」の機能を、Angularのコンポーネント/ディレクティブ構文で利用する方法を解説。

[山田祥寛(http://www.wings.msn.to/),著]
「Angular TIPS」のインデックス

連載「Angular TIPS」

【対応バージョン】

 Angular 6以降。


 Bootstrapは、Mark Otto/Jacob Thornton氏らによって開発されたCSSフレームワーク。最初の安定バージョンが2011年8月にリリースされた後、敏速にバージョンアップを進め、執筆時点での最新バージョンは4.1です。以下のような理由から幅広い開発者に受け入れられ、フロントエンド開発において定番ともいえるフレームワークの1つとなっています。

  • 決められたスタイルクラスを適用するだけで、リッチなデザインを簡単に適用できる
  • レスポンシブデザインにも対応し、画面サイズに応じた最適な表示を単一のソースで実装できる
  • アコーディオンパネル、タブパネル、ページネーションなど、よく利用するUIをウィジェットとして提供
  • テーマを利用することで、デザインのカスタマイズも簡単

 ng-bootstrapは、このBootstrapのラッパーで、これを利用することで、Bootstrapの機能をAngularのコンポーネント/ディレクティブ構文で呼び出すことが可能になります。以下は、ng-bootstrapで提供されている主なコンポーネントです。

ng-bootstrapの主なコンポーネント(出典: https://ng-bootstrap.github.io/) ng-bootstrapの主なコンポーネント(出典: https://ng-bootstrap.github.io/)

 本稿では、数あるコンポーネントの中でもタブパネルを例に、ng-bootstrapの基本的な用法を解説します。なお、以下の手順は、Angular CLIを作成したプロジェクトを前提としています。Angular CLIについては別稿「Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行」を参照してください*1

*1 ng-bootstrapを動作するには、Angular 6以上が前提です。


ng-bootstrapを利用するための準備

 Angular-CLIはng-bootstrapに標準で対応しており、以下のコマンドでプロジェクトに組み込むことができます。

【1】ng-bootstrapのインストール

 Angular 6で追加されたng addコマンドを利用します。

> ng add @ng-bootstrap/schematics
Installing packages for tooling via npm.
…… 中略 ……
+ @ng-bootstrap/schematics@2.0.0-alpha.1
…… 中略 ……
added 2 packages in 12.449s


ng-bootstrapをインストールするコマンドライン

【2】タブパネルの実装

 これで既存のプロジェクトに対して、ng-bootstrapが組み込まれるので*2、後は、メインコンポーネントから<ngb-tabset>/<ngb-tab>要素(コンポーネント)を呼び出してみましょう。

*2 具体的に変更されるコードについては、後述します。


<div>
  <ngb-tabset activeId="quick">
    <!--[1]タブを定義-->
    <ngb-tab id="self" title="独習">
      <ng-template ngbTabContent>
        基本から応用まできっちり学びたい方にお勧め
      </ng-template>
    </ngb-tab>
    <ngb-tab id="pocket">
      <!--[2]タイトルはテンプレートとしても定義可-->
      <ng-template ngbTabTitle><b>ポケット</b>リファレンス</ng-template>
      <ng-template ngbTabContent>
        手のひらサイズのコンパクトな辞書<br />
        逆引きで、動作確認用のサンプルも満載。
      </ng-template>
    </ngb-tab>
    <ngb-tab id="quick" title="速習">
      <ng-template ngbTabContent>    
        サクッと学べる解説書。<br />必要な知識が凝縮され、短時間での学習に最適。
      </ng-template>
    </ngb-tab>
    <ngb-tab id="app" title="アプリケーションプログラミング">
      <ng-template ngbTabContent>
        開発の勘所と手順をしっかりマスター
      </ng-template>
    </ngb-tab>
  </ngb-tabset>
</div>

タブパネルを生成するためのコード(app.component.html)

タブによる切り替えが可能なパネル タブによる切り替えが可能なパネル

 個々のパネルを表すのは<ngb-tab>ディレクティブの役割です([1])。<ngb-tab>で利用できる属性には、以下のようなものがあります。

属性 概要 デフォルト値
id タブのid値
title タブのラベル
disabled タブを無効化するか false
<ngx-tab>ディレクティブの属性

 タブパネルの本体は、<ng-template>要素(テンプレート)で表します。ただし、その際はngbTabContentディレクティブでコンテンツ本体であることを宣言します。

 同じく、複雑なラベルを指定するならば、title属性の代わりに<ng-template>要素(テンプレート)も利用しても構いません([2])。その際は、タブコンテンツと区別できるよう、ngbTabTitleディレクティブを付与しておきましょう。

 あとは、タブ全体を<ngb-tabset>要素でくくるだけです。<ngb-tabset>で利用できる主な属性には、以下のようなものがあります。

(a)activeId属性

 デフォルトでアクティブにするタブのid値を指定します。

(b)type属性

 タブの表示形式を決めます。tabs(デフォルト)の他、pillsを設定することでボタン式のタブパネルを生成できます。以下に例を示します。

<div>
  <ngb-tabset activeId="quick" type="pills">
    <!--省略-->
  </ngb-tabset>
</div>

type属性の値を"pills"に

pills式のタブパネルを生成 pills式のタブパネルを生成

(c)orientation属性

 タブの表示方向を表します。horizontal(水平方向。デフォルト)の他、verticalにすることで、タブを垂直方向に並べられます。

<div>
  <ngb-tabset activeId="quick" orientation="vertical">
    <!--省略-->
  </ngb-tabset>
</div>

orientation属性の値を"vertical"に

タブを縦に並べる タブを縦に並べる

(d)justify属性

 タブの並びを指定します。設定値は、start(左寄せ)、center(中央寄せ)、end(右寄せ)、fill(文字量によって分割)、justified(等幅割)です。

<div>
  <ngb-tabset activeId="quick" justify="justified">
    <!--省略-->
  </ngb-tabset>
</div>

justify属性の値を"justified"に

タブを等幅に配置(justifiedにした場合) タブを等幅に配置(justifiedにした場合)

補足:ng-bootstrapを手動でインストールする場合

 ng addコマンドを利用する他、ng-bootstrapをnpm installコマンドでインストールすることもできます。ng addコマンドは、「以下の手順をほぼ自動で賄ってくれる」と考えればよいでしょう。以下の内容は、ng addコマンドが何をしているのかを理解する参考にもしてください。

【1】ng-bootstrapのインストール

 以下のコマンドを実行します。

npm install --save @ng-bootstrap/ng-bootstrap bootstrap


npmによるng-bootstrapのインストール

【2】スタイルシートを登録する

 アプリに組み込むべきBootstrapのスタイルシートを登録しておきます。これには、angular.jsonファイル*3からstylesパラメーターを編集します。既定で記述されているstyles.cssファイルは、Angular CLIがデフォルトで用意したスタイルシートです。初期状態では空なので、不要であれば消しても構いません。

*3 Angular CLIの設定ファイルです。以前は、.angular-cli.jsonという名前でした。


{
  // …… 中略 ……
  "build": {
    // …… 中略 ……
    "options": {
      {
        // …… 中略 ……
        "styles": [
          "src/styles.css",
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
          }
        ],
        // …… 中略 ……
      }
    },
    // …… 中略 ……
  }
}


Bootstrapのスタイルを組み込むためのコード(angular.json)

【3】nx-bootstrapをメインモジュールに登録する

 ng-bootstrapで利用するコンポーネントは、あらかじめメインモジュールで登録しておきます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng-bootstrapのコンポーネントを登録するためのコード(app.module.ts)

 NgbModuleは、ng-bootstrap本体を表すモジュールです。これでng-bootstrapが有効になりました。

「Angular TIPS」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。