2022年4月30日土曜日

Cozy Web/Tag

前回紹介したとおりCozy WebではHTMLページを動的に生成するための機能として、テンプレートエンジンScalateによるSspやJade(Pug)を提供しています。

SspやJadeでは、基本的にプログラミング言語の断片をHTMLに埋め込む形になります。プログラミング機能をフルに使えるので、リッチな動的コンテンツを作成できるというメリットがある反面おまじない的なコードが必要になったり、アプリケーションロジックがプレゼンテーション層であるWebページに混入しがちになるといった問題がでてきます。

この問題に対してCozy Webではタグ機能を用意しました。タグ機能はCozy Webが提供する様々な機能をビュー層で簡単に使えるようにするための機能を提供します。拡張タグをHTML内に埋め込むことで、HTMLページの動的機能を簡単に実現することができます。

SSP

まずSSPによる動的ページについて確認しておきましょう。

以下はSSPによる動的ページです。

<%@ var context: ViewContext %>
<html>
    <head>
	<title>HelloTag</title>
    </head>
    <body>
	<p>現在の時刻は${context.datetime}です。</p>
    </body>
</html>

まずページ内で使用する変数として、以下の行でViewContextを格納する変数contextを定義しています。

<%@ var context: ViewContext %>

そして、以下の行でViewContextオブジェクトのdateTimeメソッドを呼び出し、その結果をpタグ内の文章に埋め込んでいます。dateTimeメソッドは現在時刻をロケール、タイムゾーンに対応した文字列で返します。

	<p>現在の時刻は${context.dateTime}です。</p>

HelloTag

Cozy Webのタグを使用したWebアプリケーションHelloTagを作成します。

アプリケーション

以下のHTMLはCozy Webタグを使用して前出のSSPと同じ動作をします。

<html>
    <head>
	<title>HelloTag</title>
    </head>
    <body>
	<p>現在の時刻は<c:datetime/>です。</p>
    </body>
</html>

以下の行で現在時刻を埋め込みたい場所にタグc:datetime配置しています。Cozy WebではHTML内に配置されたc:datetimeを現在時刻に変換します。

	<p>現在の時刻は<c:datetime/>です。</p>

SSPなどのようなプログラミング成分はなく、動的なコンテンツ部分を宣言的に定義することができます。

配備

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

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

起動

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

$ cozy web

実行

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

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

curl -v http://localhost:8080/web/HelloTag/index.html

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

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

> GET /web/HelloTag/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: Sat, 30 Mar 2022 18:30:00 GMT
< Content-Type: text/html;charset=utf-8
< Transfer-Encoding: chunked
< Server: Jetty(9.4.38.v20210224)
< 
<!DOCTYPE html>
<html>
    <head>
	<title>Hello Tag</title>
    </head>
    <body>
	<p>現在の時刻は2022年4月30日18時30分00秒です。</p>
    </body>
</html>

まとめ

今回はCozy WebのTag機能を説明しました

Tag機能を使えば、通常のHTMLにタグを埋め込むだけで動的コンテンツのWebページを作成することができます。

次回は動的コンテンツを実現する要の機能であるコントローラー機能を説明します。

諸元

Cozy
0.0.5
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

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