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言語の埋め込み部分です。

view plainprint?
  1. <html>  
  2.     <head>  
  3.     <title>Hello SSP!</title>  
  4.     </head>  
  5.     <body>  
  6.     <h1>Hello SSP!</h1>  
  7.     <p>今日は ${new java.util.Date()} です。</p>  
  8.     </body>  
  9. </html>  

配備

cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloSspを作成します。

このHelloSspディレクトリに前述のindex.sspを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

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

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

view plainprint?
  1. curl -v http://localhost:8080/web/HelloSsp/index.html  

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

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

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

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. > GET /web/HelloSsp/index.html HTTP/1.1  
  2. > Host: localhost:8080  
  3. > User-Agent: curl/7.76.1  
  4. > Accept: */*  
  5. >   
  6. * Mark bundle as not supporting multiuse  
  7. < HTTP/1.1 200 OK  
  8. < Date: Mon, 28 Mar 2022 22:02:47 GMT  
  9. < Content-Type: text/html;charset=utf-8  
  10. < Transfer-Encoding: chunked  
  11. < Server: Jetty(9.4.38.v20210224)  
  12. <   
  13. <!DOCTYPE html>  
  14. <html>  
  15.     <head>  
  16.     <title>Hello SSP!</title>  
  17.     </head>  
  18.     <body>  
  19.     <h1>Hello SSP!</h1>  
  20.     <p>今日は 2022年3月29日 です。</p>  
  21.     </body>  
  22. </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文書を簡潔に記述することができます。

view plainprint?
  1. html(lang="ja")  
  2.   head  
  3.     title Hello Jade!  
  4.   body  
  5.     h1 Hello Jade!  
  6.     p  
  7.       | 今日は  
  8.       = new java.util.Date()  
  9.       | です。  
  10.     :markdown  
  11.       Jadeを使うとMarkdownで文章を書く事ができます。  

配備

cozyを起動するディレクトリにwebappsディレクトリに、アプリケーションのホームとなるディレクトリHelloJadeを作成します。

このHelloJadeディレクトリに前述のindex.jadeを作成すればOKです。

起動

Cozyをwebコマンドで起動するとWebプラットフォームとして起動します。

view plainprint?
  1. $ cozy web  

実行

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

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

view plainprint?
  1. curl -v http://localhost:8080/web/HelloJade/index.html  

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

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

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

-vスイッチが指定されているので、HTTPのプロトコルヘッダーも表示されています。

view plainprint?
  1. *   Trying ::1:8080...  
  2. * Connected to localhost (::1) port 8080 (#0)  
  3. > GET /web/HelloJade/index.html HTTP/1.1  
  4. > Host: localhost:8080  
  5. > User-Agent: curl/7.76.1  
  6. > Accept: */*  
  7. >   
  8. * Mark bundle as not supporting multiuse  
  9. < HTTP/1.1 200 OK  
  10. < Date: Mon, 28 Mar 2022 22:04:28 GMT  
  11. < Content-Type: text/html;charset=utf-8  
  12. < Transfer-Encoding: chunked  
  13. < Server: Jetty(9.4.38.v20210224)  
  14. <   
  15. <!DOCTYPE html>  
  16. <html lang="ja">  
  17.   <head>  
  18.     <title>Hello Jade!</title>  
  19.   </head>  
  20.   <body>  
  21.     <h1>Hello Jade!</h1>  
  22.     <p>  
  23.       今日は  
  24.       2022年3月29日  
  25.       です。  
  26.     </p>  
  27.     <p>Jadeを使うとMarkdownで文章を書く事ができます。</p>  
  28.   </body>  
  29.   </div>  
  30. </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)