Cozy Webでは通常のHTMLに加えて、以下の4つのフォーマットをサポートしています。
- Mustache
- Mustache派生の独自マークアップ
- Scaml
- HamlのScala版
- Jade
- Pug派生の独自マークアップ
- Ssp
- VelocityやJSPなどのHTML埋め込みフォーマットのScala版
これらのフォーマットはテンプレートエンジンScalateを使用して実現しており、フォーマットの仕様はScalateの提供するものになります。
今回はこの中でSspとJadeの2つのフォーマットを使ったWebページを試してみます。
HelloSsp
Ssp(Scala Server Pages)はVeloicyやJSPなどと同系統のHTMLにマークアップするフォーマットです。Scalate独自のフォーマットで、埋め込みプログラミング言語にScalaを使用しています。
HTMLをベースに必要箇所だけマークアップする方式なので習得が容易です。またお勧めはできませんが、プログラミング言語によるロジックをマークアップで記述することが可能です。
アプリケーション
以下のindex.sspを用意します。
基本的に通常のHTMLで、"$｛"と"｝"で囲まれた「new java.util.Date()」がScala言語の埋め込み部分です。
<html>
<head>
<title>Hello SSP!</title>
</head>
<body>
<h1>Hello SSP!</h1>
<p>今日は ${new java.util.Date()} です。</p>
</body>
</html>
配備
cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloSspを作成します。
このHelloSspディレクトリに前述のindex.sspを作成すればOKです。
起動
Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。
$ cozy web
実行
curlコマンドによってローカルホストの8080ポート上の /web/HelloSsp/index.html を取得します。
/web はCozy上のWebアプリケーションのホームです。その配下のHelloSspが、先程作成したディレクトリHelloSspに対応するもので、ディレクトリ名がアプリケーション名になっています。
curl -v http://localhost:8080/web/HelloSsp/index.html
取得結果は以下になります。無事登録したHTMLファイルを取得することができました。
-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。
取得結果は以下になります。無事登録したHTMLファイルを取得することができました。
-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。
> GET /web/HelloSsp/index.html HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.76.1
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Mon, 28 Mar 2022 22:02:47 GMT
< Content-Type: text/html;charset=utf-8
< Transfer-Encoding: chunked
< Server: Jetty(9.4.38.v20210224)
<
<!DOCTYPE html>
<html>
<head>
<title>Hello SSP!</title>
</head>
<body>
<h1>Hello SSP!</h1>
<p>今日は 2022年3月29日 です。</p>
</body>
</html>
HelloJade
SspはHTMLをベースにマークアップを入れる方式なので習得も容易ですが、HTML言語から引き継いでいる特性としてマークアップがやや煩雑です。
文章の中にマークアップする場合にはHTML言語が適していますが、HTML文書の構造などを記述する場合には冗長な表現になりがちです。
Jadeはタグの木構造を簡潔に記述することに適したフォーマットです。Jadeは現在ではPug( https://pugjs.org/ )と変名されていますが、ここではScalateの用語法を踏襲してJadeを使用します。Jadeはタグの木構造を簡潔に記述することに適したフォーマットです。Jadeは現在ではPug( https://pugjs.org/ )と変名されていますが、ここではScalateの用語法を踏襲してJadeを使用します。
アプリケーション
以下のindex.jadeを用意します。
タグの木構造をインデントで記述します。HTML文書を簡潔に記述することができます。
html(lang="ja")
head
title Hello Jade!
body
h1 Hello Jade!
p
| 今日は
= new java.util.Date()
| です。
:markdown
Jadeを使うとMarkdownで文章を書く事ができます。
配備
cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloJadeを作成します。
このHelloJadeディレクトリに前述のindex.jadeを作成すればOKです。
起動
Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。
$ cozy web
実行
curlコマンドによってローカルホストの8080ポート上の /web/HelloJade/index.html を取得します。
/web はCozy上のWebアプリケーションのホームです。その配下のHelloJadeが、先程作成したディレクトリHelloJadeに対応するもので、ディレクトリ名がアプリケーション名になっています。
curl -v http://localhost:8080/web/HelloJade/index.html
取得結果は以下になります。無事登録したHTMLファイルを取得することができました。
-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。
取得結果は以下になります。無事登録したHTMLファイルを取得することができました。
-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。
* Trying ::1:8080...
* Connected to localhost (::1) port 8080 (#0)
> GET /web/HelloJade/index.html HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.76.1
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Mon, 28 Mar 2022 22:04:28 GMT
< Content-Type: text/html;charset=utf-8
< Transfer-Encoding: chunked
< Server: Jetty(9.4.38.v20210224)
<
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello Jade!</title>
</head>
<body>
<h1>Hello Jade!</h1>
<p>
今日は
2022年3月29日
です。
</p>
<p>Jadeを使うとMarkdownで文章を書く事ができます。</p>
</body>
</div>
</html>
まとめ
Cozy WebではHTML文書記述に以下の5つのフォーマットを使用することができます。
- HTML
- Mustache
- Scaml
- Jade
- Ssp
前回HTML文書を使用する方法を紹介しました。
HTML文書をHTMLフォーマットで作成したものは、そのまま配備するだけでWebで表示することができます。
ただ、動的な要素を持っているページの記述の場合には動的生成が可能な文書フォーマットを使用する必要があります。Cozy WebではScalateがサポートしている4つのフォーマットが使用可能になっています。
今回は、その中のJadeとSspの2つについて使用方法を説明しました。MustacheやScamlも同様にそれぞれのフォーマットでページを記述するだけなので、簡単に使用できると思います。
次回はArcadiaが提供するタグ機能を紹介する予定です。
諸元
- Cozy
- 0.0.4
投稿
