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

-@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
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)