Bootstrap 4 tutorial

Getting started (2): カスタマイズ / ビルド / Webpack / アクセシビリティ

CSSのカスタマイズ

バージョン4以上のBootstrap CSSのソースファイルは Sass (⇒ Wikipedia)で記述されており、現在のBootstrapは拡張用Sassソースを自分で書き、Bootstrap Sassソースコードをインポートしてカスタマイズする方法を推奨している。ただし当然ながらSassの習得が必須で、さらに開発ツールの知識も必要なため初心者にはややハードルが高い。

CSSのオーバーライド

バージョン3.1.1まではソース(当時はSassではなくLess)のコンパイルは行わず、コンパイル済み(配布版)CSSの後にカスタマイズ用CSSを追加して設定をオーバーライドする方法を推奨していた。この方がより簡単で追加ツールも必要ない。

本チュートリアルはSassを知らなくても理解できるようにこの昔の方法を採用して部分的にCSSをオーバーライドしており、具体的には次の2箇所に用いている。

パンくずリスト - セパレータの変更
フォーム - 文字のカスタマイズ/多言語対応 - CSSコード例ボタンで表示

基本的にはBootstrap CSSの後にそれを上書きするように設定すればよい(考え方としても分かりやすい)。ただしCSSセレクタの優先順位に注意(Bootstrapソースを検索してそれと同じCSSセレクタを使うのが確実)。

Sassソースからのカスタマイズ

現在の推奨方法はSassソースからの拡張で、ややレベルは高いがカスタマイズの自由度ははるかに高い。

拡張用Sassファイルを作成
- カスタマイズ用変数を定義して値を設定
- Bootstrap Sassコードをインポート
- (オプション) 必要に応じて追加スタイルを記述
(必須) SassファイルをCSSへコンパイル
(必須) Autoprefixerでベンダープリフィクスを設定(追加)
(オプション) CSS圧縮ツールで最適化

しかし公式ドキュメントには(事前準備としての)SassとAutoprefixerのツール説明がほとんどない(Sass経験者用のコード解説しか書かれていない)。そこで初心者からでもカスタマイズを習得できるように専用チュートリアルを作成した。

⇒ カスタマイズ法のチュートリアルに進む(別サイト)

別サイトにした理由は単なる解説ではなく読者が実際に操作できるようにするため。npmパッケージ形式になっており、ツールのインストールやカスタマイズ(ビルド)作業すべてを実際にnpmコマンドで行う事ができる。

Bootstrapのビルド

配布版を利用する場合は読む必要なし。しかしスタイルのカスタマイズには(Autoprefixerが必須なので)npmの知識が必要になる。スタイルをカスタマイズしたいが方法が分からない人は一回これを実際にやってみるとよい勉強になる。

BootstrapのソースファイルはGitHubにあり Releases ページで全バージョンのソースを入手できる。ここではGitHubから入手したソース(バージョン4.0.0以上)からビルドやテストを行う方法を説明する。

まず実行環境として次の2つが必要(インストール方法が分からない人は各自検索すること)。

node.js (メインのビルドツールとしてnpmを用いる)
Ruby (ドキュメント生成用 - jekyllを用いるために必要)

またドキュメントには書かれていないが、一部のバージョンでテストツールがJavaに対する依存性を持つ。もしテスト実行時に「Javaが利用できない」というメッセージが出る場合はJava環境(JRE)をインストールすること。

ツールのインストール

GitHubのソースからビルドする事前準備として開発ツールをインストールする。⇒ 手順

まずGitHubソースを展開
ディレクトリ内に移動(package.json と Gemfile のある場所)
node.js用ツールをインストール ⇒ npm run install
Ruby用ツールをインストール(ドキュメント生成に必要) ⇒ (sudo) bundle install
- Unix系環境では必要に応じ先頭に sudo が必要
- bundle コマンド(Bundler)が入っていない場合は要インストール ⇒ (sudo) gem install bundler

ビルドコマンド

Bootstrap 4はビルド用ツールとしてnpmを用いる。コマンド一覧は npm run で表示できるが、それより package.json の "scripts": フィールドを直接読んだ方が仕組みがよく分かる(お勧め)。主なコマンドだけ示す。⇒ コマンド

npm run dist - CSSとJavaScriptのビルドを実行し./dist ディレクトリに出力
npm test - ビルド実行後にテストも実行
npm run docs - ドキュメント用のCSSとJavaScriptを生成しlintを実行
npm run docs-serve - ドキュメントサイトのローカルサーバ起動 ⇒ http://localhost:9001/

Webpack

(2018年8月現在) Webpack はWeb開発で最もメジャーなツールの一つだが、開発ペースが非常に早くBootstrap公式ドキュメントが追い付いていない(記述が不十分)。

そこで最新バージョン(具体的にはWebpack 4とBootstrap 4の組み合わせ)で動作するサンプルプロジェクトを作成した。詳しくは次のGitHub repoを参照(実際に動くものでなければ意味がない)。

webpack-bootstrap-starter (GitHub)

本チュートリアルもWebpackでビルドしているが、難解にならないようJavaScriptやCSSのバンドル、カスタマイズは行っていない(CDNを利用)。あえてWebpackを使ったのは単純に今最もメジャーで多くの人に馴染みがあると判断したため。

アクセシビリティ

Webアクセシビリティの標準仕様はW3Cにより WAI-ARIA としてまとめられている。⇒ リファレンス

具体的には次の2種類のアクセシビリティ属性が用いられる。

ロール属性(例) role="navigation"
ARIA属性(例) aria-expanded="false"

本チュートリアルでは各コンポーネントの構造説明の際に用いるアクセシビリティ属性を具体的に示す。

⇒ 説明例(モーダル) (リンク先に進みで表示、さらにでアクセシビリティ属性を展開)

またBootstrapはアクセシビリティ用ユーティリティとして .sr-only と .sr-only-focusable を用意している(⇒ スクリーンリーダ)。これらについても利用しているコンポーネントの構造説明の際に示す。