BootstrapはレスポンシブWebデザインを可能にするWebフレームワークです。
Bootstrapを使う場合、Webの全ページにBootstrapの設定を行う必要がありますが、これを手作業で行うと大変です。
Cozy Webでは、共通のページレイアウトを設定して、これを必要な全ページに自動的に適用する機能を提供しています。この機能を用いてBootstrapのWebページを作成してみます。
HelloBootstrap
Bootstrapを用いたWebアプリケーションHelloBootstrapを作成します。
準備
cozyを起動するディレクトリのwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloBootstrapを作成します。このディレクトリHelloBootstrapをアプリケーションのホームディレクトリとなります。
共通テンプレート
Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。
Bootstrapの本体はCDN上に公開されているものを使用する設定になっています。
-@val model: ViewModel !!! 5 html(lang="ja") head meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous") =model.pageTitle body script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous") =model.content
ポイントは以下の2つの設定です。
=model.pageTitle
=model.content
前者はページのタイトルをhead要素内に設定します。
後者はページの内容をbody要素内に展開します。
なお、ここではJadeを用いてページの定義をしていますが、HTMLやSSPを用いてもかまいません。
共通テンプレートはタグ混じりの本文文書がなく、タグによる骨格だけの文書になるので、Jadeでは構造を簡潔に見通しよく記述できるためJadeを採用しました。
Webページ
WebアプリケーションのWebページとしてindex.htmlを用意します。
<html> <head> <title>HelloBootstrap</title> </head> <body> <h1>HelloBootstrap</h1> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </body> </html>
このページにはBootstrapの設定はありませんが、table要素のclass属性にBootstrapの定義するクラスであるtableを使用しています。
実行
curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/を取得します。
/web はCozy上のWebアプリケーションのホームです。その配下のHelloBootstrapが、先程作成したディレクトリHelloBootstrapに対応するもので、ディレクトリ名がアプリケーション名になっています。
$ curl http://localhost:8080/web/HelloBootstrap/
取得結果は以下になります。無事登録したHTML文書を取得することができました。
HTML文書には期待通りBootstrapの各種設定が自動的に行われています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /> </head> <body> <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <h1>HelloBootstrap</h1> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </body> </html>
このページは以下のように表示されます。
次の例
次の例として以下のHTML文書をrich-table.htmlとして用意します。
このHTML文書では、table要素のclass属性にBootstrapの定義するクラスであるtable, table-striped, table-hoverを使用しています。
またtr要素のclass属性にBootstrapの定義するクラスであるtable-primaryを使用しています。
<html> <head> <title>Rich Table</title> </head> <body> <h1>Rich Table</h1> <table class="table table-striped table-hover"> <thead> <tr class="table-primary"> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </body> </html>
実行
curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/rich-table を取得します。
$ curl http://localhost:8080/web/HelloBootstrap/rich-table
取得結果は以下になります。無事、登録したHTML文書にBootstrapの各種設定を行ったHTML文書を取得することができました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /> <title>Rich Table</title> </head> <body> <script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <h1>Rich Table</h1> <table class="table table-striped table-hover"> <thead> <tr class="table-primary"> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </body> </html>
このページは以下のように表示されます。
まとめ
今回はCozy Webの共通テンプレート機能を用いて、Bootstrapを用いたWebアプリケーションを作成しました。
特にコントローラの設定も不要で、単に共通テンプレートを所定の場所に置くだけで、Webアプリケーションのページに共通の設定を行うことができました。
次回は共通テンプレートを使って、ページに共通構造を導入してみます。
諸元
- Cozy
- 0.0.6