前回「Cozy Web/レイアウト」ではBootstrapベースのレイアウトを持った共通テンプレートをWebアプリケーション全体で共通化して利用する方法について説明しました。
この共通テンプレートを、複数のWebアプリケーションで共有できると便利です。
このことを実現するため、Cozy Webでは複数のWebアプリケーションから共有できるWebライブラリを作成する機能を提供しています。
今回はこのWebライブラリについてみていきます。
LibHello
まず、Webライブラリとして使用するLibHelloプロジェクトを作成します。
プロジェクトの構成は、ここまで紹介してきた通常のWebアプリケーションと同じものになります。
準備
cozyを起動するディレクトリのwebappsディレクトリに、WebライブラリのホームとなるディレクトリLibHelloを作成します。このディレクトリLibHelloをWebライブラリのホームディレクトリとなります。
共通テンプレート
Webページで共有されるテンプレートとして以下のものをWEB-INF/layouts/default.jadeに作成します。これは「Cozy Web/レイアウト」で作成したものと同じものです。このテンプレートページでBootstrapに必要な設定を行っています。
- -@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")
- header
- =model.header
- =model.navigation
- div(class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto")
- div(class="row flex-grow-sm-1 flex-grow-0")
- aside(class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3")
- div(class="bg-light border p-1 h-100 sticky-top")
- =model.sidebar
- main(class="col overflow-auto h-100")
- =model.content
- footer
- =model.footer
部品ページ
Webページの部品はWEB-INF/partialsに格納します。いずれも「Cozy Web/レイアウト」で作成したものと同じものです。
ヘッダー
ヘッダーとして以下のheader.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapのクラスを設定しています。
- nav(class="navbar navbar-light bg-primary")
- div(class="container-fluid")
- span(class="navbar-brand mb-0 h1") Cozy Web
ナビゲーション・バー
ナビゲーション・バーとして以下のnavigation.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapの機能を用いてナビゲーション・バーを実現しています。
- nav(class="navbar navbar-expand-lg navbar-light bg-light")
- div(class="container-fluid")
- a(class="navbar-brand" href="#") Navbar
- button(class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation")
- span(class="navbar-toggler-icon")
- div(class="collapse navbar-collapse" id="navbarNav")
- ul(class="navbar-nav")
- li(class="nav-item")
- a(class="nav-link active" aria-current="page" href="#") Home
- li(class="nav-item")
- a(class="nav-link" href="#") Features
- li(class="nav-item")
- a(class="nav-link" href="#") Pricing
- li(class="nav-item")
- a(class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true") Disabled
フッター
フッターとして以下のfooter.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapのクラスを設定しています。
- nav(class="navbar navbar-light bg-secondary")
- span Cozy Web
サイド・バー
サイド・バーとして以下のsidebar.jadeをWEB-INF/partialsに格納しました。「Cozy Web/レイアウト」で作成したものと同じものです。Bootstrapの機能を用いてサイド・バーを実現しています。
- ul(class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate")
- li(class="nav-item")
- a(href="#" class="nav-link px-2 text-truncate")
- i(class="bi bi-house fs-5")
- span(class="d-none d-sm-inline") Home
- li
- a(href="#" class="nav-link px-2 text-truncate")
- i(class="bi bi-speedometer fs-5")
- span(class="d-none d-sm-inline") Dashboard
- li
- a(href="#" class="nav-link px-2 text-truncate")
- i(class="bi bi-card-text fs-5")
- span(class="d-none d-sm-inline") Orders
- li
- a(href="#" class="nav-link px-2 text-truncate")
- i(class="bi bi-bricks fs-5")
- span(class="d-none d-sm-inline") Products
- li
- a(href="#" class="nav-link px-2 text-truncate")
- i(class="bi bi-people fs-5")
- span(class="d-none d-sm-inline") Customers
構成
ここまでは、前回「Cozy Web/レイアウト」のLayoutBootstrapと一点を除いて同一の構成です。異なっているのは、index.htmlがないこと。Webライブラリなので必要ないためです。
HellLib
WebライブラリLibHelloを作成したので、このWebライブラリを使ったWebアプリケーションHelloLibを作成します。
準備
cozyを起動するディレクトリのwebappsディレクトリに、WebライブラリのホームとなるディレクトリHelloLibを作成します。このディレクトリHelloLibをWebライブラリのホームディレクトリとなります。
project.conf
使用するWebライブラリの定義はwepapp.confで行います。
- extend: LibHello
extendプロパティによって、親となるWebライブラリであるLibHelloを指定しています。この設定を行うことでWebライブラリの持っている機能をすべて引き継ぐことができます。
このwebapp.confをWEB-INFに格納します。
これで設定は完了です。
Webページ
共通ページデザインは、LibHelloのものがそのまま引き継がれるので、HelloLibではWebページの本体のみ作成します。
表示したい本文を記述したページをindex.htmlとして用意します。
これは前回「Cozy Web/レイアウト」で作成したWebアプリケーション「LayoutBootstrap」と基本的に同じ内容です。(タイトルだけ変更しています)タグのクラスにBootstrapのクラスを設定しています。WebライブラリLibHelloでBootstrap 5を活用したレイアウトを設定しているので、その効果があるはずです。
- <html>
- <head>
- <title>HelloLib</title>
- </head>
- <body>
- <h1>HelloLib</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>
実行
curlコマンドによってローカルホストの8080ポート上の/web/HelloLib を取得します。
- $ curl http://localhost:8080/web/HelloLib/
取得結果は以下になります。無事、登録した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>HelloLib</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>
- <header>
- <nav class="navbar navbar-light bg-primary">
- <div class="container-fluid">
- <span class="navbar-brand mb-0 h1">Cozy Web</span>
- </div>
- </nav>
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- </header>
- <div class="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">
- <div class="row flex-grow-sm-1 flex-grow-0">
- <aside class="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">
- <div class="bg-light border p-1 h-100 sticky-top">
- <ul class="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">
- <li class="nav-item">
- <a href="#" class="nav-link px-2 text-truncate">
- <i class="bi bi-house fs-5"></i>
- <span class="d-none d-sm-inline">Home</span>
- </a>
- </li>
- <li>
- <a href="#" class="nav-link px-2 text-truncate">
- <i class="bi bi-speedometer fs-5"></i>
- <span class="d-none d-sm-inline">Dashboard</span>
- </a>
- </li>
- <li>
- <a href="#" class="nav-link px-2 text-truncate">
- <i class="bi bi-card-text fs-5"></i>
- <span class="d-none d-sm-inline">Orders</span>
- </a>
- </li>
- <li>
- <a href="#" class="nav-link px-2 text-truncate">
- <i class="bi bi-bricks fs-5"></i>
- <span class="d-none d-sm-inline">Products</span>
- </a>
- </li>
- <li>
- <a href="#" class="nav-link px-2 text-truncate">
- <i class="bi bi-people fs-5"></i>
- <span class="d-none d-sm-inline">Customers</span>
- </a>
- </li>
- </ul>
- </div>
- </aside>
- <main class="col overflow-auto h-100">
- <h1>HelloLib</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>
- </main>
- </div>
- </div>
- <footer>
- <nav class="navbar navbar-light bg-secondary">
- <span>Cozy Web</span>
- </nav>
- </footer>
- </body>
- </html>
このページは以下のように表示されます。
Bootstrapの機能を活かしたレイアウト、カラーコーディネーションになっています。
小さな画面で表示すると、以下のようにメニューが折り畳まれて表示されます。Bootstrapのレシポンシブデザインが効いていることが分かります。
いずれも前回のLayoutBootstrapとタイトルを除いては同じ動きです。
効果
WebアプリケーションHelloLibで用意したファイルはindex.htmlのみです。
HelloLibはWebライブラリLibHelloを引き継いでいるので、LibHelloが提供しているBootstrapの機能を活かした共有レイアウトをそのまま利用できています。
まとめ
今回はWebアプリケーションの共通テンプレートをWebライブラリという形の部品として作成し、Webアプリケーションで使用する方法について説明しました。
Bootstrapベースで、ヘッダやフッタのレイアウトを共通テンプレートとしたWebライブラリHelloLibを作成しました。
このWebライブラリを使用することで、WebアプリケーションHelloLibはHTML文書index.htmlを作成するだけで、HelloLibが提供しているBootstrapベースの共通レイアウトを使用したリッチな画面を得ることができました。
Cozy WebのWebライブラリ機能を使用することで、Webアプリケーションの開発効率を飛躍的に向上させることができます。
諸元
- Cozy
- 0.0.6
投稿
