2022年6月30日木曜日

Cozy Web/Bootstrap

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上に公開されているものを使用する設定になっています。

view plainprint?
  1. -@val model: ViewModel  
  2. !!! 5  
  3. html(lang="ja")  
  4.   head  
  5.     meta(charset="utf-8")  
  6.     meta(name="viewport" content="width=device-width, initial-scale=1")  
  7.     link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous")  
  8.     =model.pageTitle  
  9.   body  
  10.     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")  
  11.     =model.content  

ポイントは以下の2つの設定です。

view plainprint?
  1. =model.pageTitle  
view plainprint?
  1. =model.content  

前者はページのタイトルをhead要素内に設定します。

後者はページの内容をbody要素内に展開します。

なお、ここではJadeを用いてページの定義をしていますが、HTMLやSSPを用いてもかまいません。

共通テンプレートはタグ混じりの本文文書がなく、タグによる骨格だけの文書になるので、Jadeでは構造を簡潔に見通しよく記述できるためJadeを採用しました。

Webページ

WebアプリケーションのWebページとしてindex.htmlを用意します。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>HelloBootstrap</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>HelloBootstrap</h1>  
  7.     <table class="table">  
  8.         <thead>  
  9.         <tr>  
  10.             <th scope="col">#</th>  
  11.             <th scope="col">First</th>  
  12.             <th scope="col">Last</th>  
  13.             <th scope="col">Handle</th>  
  14.         </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.         <tr>  
  18.             <th scope="row">1</th>  
  19.             <td>Mark</td>  
  20.             <td>Otto</td>  
  21.             <td>@mdo</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <th scope="row">2</th>  
  25.             <td>Jacob</td>  
  26.             <td>Thornton</td>  
  27.             <td>@fat</td>  
  28.         </tr>  
  29.         <tr>  
  30.             <th scope="row">3</th>  
  31.             <td colspan="2">Larry the Bird</td>  
  32.             <td>@twitter</td>  
  33.         </tr>  
  34.         </tbody>  
  35.     </table>  
  36.     </body>  
  37. </html>  

このページにはBootstrapの設定はありませんが、table要素のclass属性にBootstrapの定義するクラスであるtableを使用しています。

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/を取得します。

/web はCozy上のWebアプリケーションのホームです。その配下のHelloBootstrapが、先程作成したディレクトリHelloBootstrapに対応するもので、ディレクトリ名がアプリケーション名になっています。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloBootstrap/  

取得結果は以下になります。無事登録したHTML文書を取得することができました。

HTML文書には期待通りBootstrapの各種設定が自動的に行われています。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.   </head>  
  8.   <body>  
  9.     <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>  
  10.       
  11.         <h1>HelloBootstrap</h1>  
  12.         <table class="table">  
  13.             <thead>  
  14.             <tr>  
  15.                 <th scope="col">#</th>  
  16.                 <th scope="col">First</th>  
  17.                 <th scope="col">Last</th>  
  18.                 <th scope="col">Handle</th>  
  19.             </tr>  
  20.             </thead>  
  21.             <tbody>  
  22.             <tr>  
  23.                 <th scope="row">1</th>  
  24.                 <td>Mark</td>  
  25.                 <td>Otto</td>  
  26.                 <td>@mdo</td>  
  27.             </tr>  
  28.             <tr>  
  29.                 <th scope="row">2</th>  
  30.                 <td>Jacob</td>  
  31.                 <td>Thornton</td>  
  32.                 <td>@fat</td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <th scope="row">3</th>  
  36.                 <td colspan="2">Larry the Bird</td>  
  37.                 <td>@twitter</td>  
  38.             </tr>  
  39.             </tbody>  
  40.         </table>  
  41.           
  42.   </body>  
  43. </html>  

このページは以下のように表示されます。

次の例

次の例として以下のHTML文書をrich-table.htmlとして用意します。

このHTML文書では、table要素のclass属性にBootstrapの定義するクラスであるtable, table-striped, table-hoverを使用しています。

またtr要素のclass属性にBootstrapの定義するクラスであるtable-primaryを使用しています。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Rich Table</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Rich Table</h1>  
  7.     <table class="table table-striped table-hover">  
  8.         <thead>  
  9.         <tr class="table-primary">  
  10.             <th scope="col">#</th>  
  11.             <th scope="col">First</th>  
  12.             <th scope="col">Last</th>  
  13.             <th scope="col">Handle</th>  
  14.         </tr>  
  15.         </thead>  
  16.         <tbody>  
  17.         <tr>  
  18.             <th scope="row">1</th>  
  19.             <td>Mark</td>  
  20.             <td>Otto</td>  
  21.             <td>@mdo</td>  
  22.         </tr>  
  23.         <tr>  
  24.             <th scope="row">2</th>  
  25.             <td>Jacob</td>  
  26.             <td>Thornton</td>  
  27.             <td>@fat</td>  
  28.         </tr>  
  29.         <tr>  
  30.             <th scope="row">3</th>  
  31.             <td colspan="2">Larry the Bird</td>  
  32.             <td>@twitter</td>  
  33.         </tr>  
  34.         </tbody>  
  35.     </table>  
  36.     </body>  
  37. </html>  

実行

curlコマンドによってローカルホストの8080ポート上の/web/HelloBootstrap/rich-table を取得します。

view plainprint?
  1. $ curl http://localhost:8080/web/HelloBootstrap/rich-table  

取得結果は以下になります。無事、登録したHTML文書にBootstrapの各種設定を行ったHTML文書を取得することができました。

view plainprint?
  1. <!DOCTYPE html>  
  2. <html lang="ja">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta content="width=device-width, initial-scale=1" name="viewport" />  
  6.     <link crossorigin="anonymous" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />  
  7.     <title>Rich Table</title>  
  8.   </head>  
  9.   <body>  
  10.     <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>  
  11.       
  12.         <h1>Rich Table</h1>  
  13.         <table class="table table-striped table-hover">  
  14.             <thead>  
  15.             <tr class="table-primary">  
  16.                 <th scope="col">#</th>  
  17.                 <th scope="col">First</th>  
  18.                 <th scope="col">Last</th>  
  19.                 <th scope="col">Handle</th>  
  20.             </tr>  
  21.             </thead>  
  22.             <tbody>  
  23.             <tr>  
  24.                 <th scope="row">1</th>  
  25.                 <td>Mark</td>  
  26.                 <td>Otto</td>  
  27.                 <td>@mdo</td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <th scope="row">2</th>  
  31.                 <td>Jacob</td>  
  32.                 <td>Thornton</td>  
  33.                 <td>@fat</td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <th scope="row">3</th>  
  37.                 <td colspan="2">Larry the Bird</td>  
  38.                 <td>@twitter</td>  
  39.             </tr>  
  40.             </tbody>  
  41.         </table>  
  42.           
  43.   </body>  
  44. </html>  

このページは以下のように表示されます。

まとめ

今回はCozy Webの共通テンプレート機能を用いて、Bootstrapを用いたWebアプリケーションを作成しました。

特にコントローラの設定も不要で、単に共通テンプレートを所定の場所に置くだけで、Webアプリケーションのページに共通の設定を行うことができました。

次回は共通テンプレートを使って、ページに共通構造を導入してみます。

諸元

Cozy
0.0.6
投稿者 時刻: 0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)