2022年3月31日木曜日

Cozy Web/HTMLフォーマット

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 件のコメント:

コメントを投稿

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