エンタープライズ向けBootstrap：PatternFlyの紹介

PatternFlyの日本語資料が非常に少ないので、紹介記事を書いてみる。

# PatternFlyとは

http://www.patternfly.org/

PatternFlyはRed Hatがスポンサーをしている、オープンソースのWeb UIフレームワーク。Bootstrap 3をベースにしている。

Bootstrapは、Webの汎用コンポーネントを集めたCSSライブラリだが、とくにWeb系のB2Cなサービスで使われているように思う。PatternFlyはRed Hatがスポンサーしているだけあって、エンタープライズ向けに特化していて、B2BなサービスやWebアプリケーションで使われることを想定した、一段高レベルのウィジェットやレイアウトがライブラリとして提供される。

なお、名前からも分かるように、元々はアプリケーションサーバの[WildFly](http://wildfly.org/)の管理コンソールなどで使われていたUI部品を統合して再利用しようという試みから生まれた。

# パターンライブラリ

というわけで、PatternFlyがどんなUIライブラリを提供しているかを紹介してみる。

バージョン 3.17.0 現在であるライブラリのカテゴリは、以下の8つ。

1. アプリケーションフレームワーク
2. カード
3. ユーザとのコミュニケーション
4. コンテンツの表示
5. ダッシュボード
6. データ可視化
7. フォームとコントロール
8. ナビゲーション

## アプリケーションフレームワーク

### ログインページ

http://www.patternfly.org/pattern-library/application-framework/login-page

![ログインページ](http://www.patternfly.org/assets/img/thumbnails/Login.png)

## カード

### 状態集計

http://www.patternfly.org/pattern-library/cards/aggregate-status-card

![状態集計](http://www.patternfly.org/assets/img/thumbnails/Agg-Card.png)

### トレンド

http://www.patternfly.org/pattern-library/cards/trend-card

![トレンド](http://www.patternfly.org/assets/img/thumbnails/Trend-Card.png)

### 使用状況バー

http://www.patternfly.org/pattern-library/cards/utilization-bar-card

![使用状況バー](http://www.patternfly.org/assets/img/thumbnails/Util-Bar-Card.png)

### 使用状況トレンド

http://www.patternfly.org/pattern-library/cards/utilization-trend-card

![使用状況トレンド](http://www.patternfly.org/assets/img/thumbnails/Util-Trend-Card.png)

## ユーザとのコミュニケーション

### 初期状態

http://www.patternfly.org/pattern-library/communication/empty-state

![初期状態](http://www.patternfly.org/assets/img/thumbnails/Empty-State.png)

### インライン通知

http://www.patternfly.org/pattern-library/communication/inline-notifications

![インライン通知](http://www.patternfly.org/assets/img/thumbnails/Inline-Notif.png)

### ポップアップ通知

http://www.patternfly.org/pattern-library/communication/toast-notifications

![ポップアップ通知](http://www.patternfly.org/assets/img/thumbnails/Toast.png)

### システム情報

http://www.patternfly.org/pattern-library/communication/about-modal

![システム情報](http://www.patternfly.org/assets/img/thumbnails/About-Modal.png)

### 通知センター

http://www.patternfly.org/pattern-library/communication/notification-drawer

![通知センター](http://www.patternfly.org/assets/img/thumbnails/Notification-Drawer.png)

### ウィザード

http://www.patternfly.org/pattern-library/communication/wizard

![ウィザード](http://www.patternfly.org/assets/img/thumbnails/Wizard.png)

## コンテンツの表示

### カード

http://www.patternfly.org/pattern-library/content-views/card-view

![カード](http://www.patternfly.org/assets/img/thumbnails/card-view.png)

### リスト

http://www.patternfly.org/pattern-library/content-views/list-view

![リスト](http://www.patternfly.org/assets/img/thumbnails/List-View.png)

### 表

http://www.patternfly.org/pattern-library/content-views/table-view

![表](http://www.patternfly.org/assets/img/thumbnails/Table.png)

## ダッシュボード

### ダッシュボード要素

http://www.patternfly.org/pattern-library/dashboard/dashboard-card

![ダッシュボード要素](http://www.patternfly.org/assets/img/thumbnails/Dash-Base.png)

### ダッシュボードレイアウト

http://www.patternfly.org/pattern-library/dashboard/dashboard-layout

![ダッシュボードレイアウト](http://www.patternfly.org/assets/img/thumbnails/Dash-Layout.png)

## データ可視化

### 曲線グラフ

http://www.patternfly.org/pattern-library/data-visualization/area-chart

![曲線グラフ](http://www.patternfly.org/assets/img/thumbnails/Area-Chart.png)

### 棒グラフ

http://www.patternfly.org/pattern-library/data-visualization/bar-chart

![棒グラフ](http://www.patternfly.org/assets/img/thumbnails/Bar-Chart.png)

### ドーナツグラフ

http://www.patternfly.org/pattern-library/data-visualization/donut-chart

![ドーナツグラフ](http://www.patternfly.org/assets/img/thumbnails/Donut-Chart.png)

### 温度分布図

http://www.patternfly.org/pattern-library/data-visualization/heat-map

![温度分布図](http://www.patternfly.org/assets/img/thumbnails/Heat-Chart.png)

### 直線グラフ

http://www.patternfly.org/pattern-library/data-visualization/line-chart

![直線グラフ](http://www.patternfly.org/assets/img/thumbnails/Line-Chart.png)

### 円グラフ

http://www.patternfly.org/pattern-library/data-visualization/pie-chart

![円グラフ](http://www.patternfly.org/assets/img/thumbnails/Pie-Chart.png)

### スパークライン

http://www.patternfly.org/pattern-library/data-visualization/sparkline

![スパークライン](http://www.patternfly.org/assets/img/thumbnails/Sparkline.png)

### 使用状況バー

http://www.patternfly.org/pattern-library/data-visualization/utilization-bar-chart

![使用状況バー](http://www.patternfly.org/assets/img/thumbnails/Util-Bar-Chart.png)

## フォームとコントロール

### 日付入力

http://www.patternfly.org/pattern-library/forms-and-controls/date-picker

![日付入力](http://www.patternfly.org/assets/img/thumbnails/Datepicker.png)

### 項目ヘルプ

http://www.patternfly.org/pattern-library/forms-and-controls/field-level-help

![項目ヘルプ](http://www.patternfly.org/assets/img/thumbnails/Inline-Help.png)

### 検索

http://www.patternfly.org/pattern-library/forms-and-controls/find

![検索](http://www.patternfly.org/assets/img/thumbnails/Search.png)

### 時間入力

http://www.patternfly.org/pattern-library/forms-and-controls/time-picker

![時間入力](http://www.patternfly.org/assets/img/thumbnails/Time-Picker.png)

### フォーム

http://www.patternfly.org/pattern-library/forms-and-controls/forms

![フォーム](http://www.patternfly.org/assets/img/thumbnails/Forms.png)

# ナビゲーション

### 垂直ナビゲーション

http://www.patternfly.org/pattern-library/navigation/vertical-navigation

![垂直ナビゲーション](http://www.patternfly.org/assets/img/thumbnails/Vert-Nav.png)

### 水平ナビゲーション

http://www.patternfly.org/pattern-library/navigation/horizontal-navigation

![水平ナビゲーション](http://www.patternfly.org/assets/img/thumbnails/Horizontal-Navigation.png)