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
0 件のコメント:
コメントを投稿