TeedaでHTMLプロトタイプを作成する際のガイドライン

Teeda 
このエントリーの内容を下記のページに反映させて頂きました。
http://teeda.seasar.org/ja/html_for_prototype.html


お客様と外部仕様を確認する目的でプロトタイプを作成するフェーズにおいて、TeedaのHTMLテンプレートを作成する際の注意点を自分なりにまとめてみました。

外部仕様を明確にするためにある程度の作り込みはしますが、このフェーズでHTMLテンプレートを最終形態まで作り込むことは想定していません。

重要事項

文字コード（推奨）

UTF-8

HTMLファイルの命名規約

HTMLファイルは、ラクダ文字（１文字目は小文字）にします。

良い例
hogeFuga.html
悪い例
hoge_fuga.html

拡張子

Teedaに認識させるHTML
.html
Teedaに認識させないHTML
.htm

コンテンツの形式

xhtml形式


参考URL: XHTMLの書き方と留意点
http://www.kanzaki.com/docs/html/xhtml1.html

画面遷移

リンク
相対パスでリンクを貼っておく
フォーム
ボタンにJavaScriptを書く

ディレクトリ構成

以下の構成とします。

webapp
 + css
 + img
 + js
 + view
   + subapplication1
   + subapplication2
   + subapplication3

サブアプリケーション（≒ディレクトリ）の粒度は、属人性が出やすい箇所です。業務的にはユースケースを意識して、システム的には「別サブアプリケーションに移るとPageのプロパティ状態が破棄される」を意識して作成するようにします。

繰り返し項目のネスト

表示の場合のみ可能。

HTMLの雛形

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form id="form">


</form>
</body></html>

※ Dolteng から生成したHTMLを使っても良い。

formタグ

formタグは実装方針によって、作り方がぶれるので、HTMLプロトタイプ作成時には記述せずに、開発時に記述するようにします。
formタグは付け忘れて開発時に悩むケースが多いので、以下のようにbodyタグの前後に予め記述しておく。

<body>
<form id="form">

...

</form>
</body>


xhtmlの注意点

空要素タグを />で閉じる

良い例

<br />

悪い例

<br>

※ ブラウザの誤認識を避けるために /> の前にスペースを置くこと。

全てのタグ（要素タイプ名、属性名）は小文字で記述する

ただし、te: で始まるTeeda専用のタグや属性名は例外とする。
例：

<te:includeChildBody />

タグの属性値

属性の値は必ず引用符で囲む　（例：width="100" ）

終了タグを省略しない

 <ul>
   <li>ある項目</li>
　</ul>

※ liの閉じタグの省略は不可。

&はあらゆるところで &amp;と記述する

ただし、クエリーストリングの & はそのまま記述しても良い。
Teedaに限った話ではありませんが、クエリーストリングの & についても、&amp; と記述することを推奨します。

良い例

<a href="and.html?aaa=aaa&amp;copy=bbb">bbbb</a>

悪い例

<a href="and.html?aaa=aaa&copy=bbb">bbbb</a>

上記の悪い例は、クエリーストリング内の &copy が © と誤認識されてしまいます。

& でもうまく動作するケースもありますが、&amp; を推奨するのHTMLの仕様に準拠することで不毛なトラブルを避けるためです。

興味のある方は、下記をご覧下さい。
[RFC1866] 8.2.1. The form-urlencoded Media Type
http://www.ietf.org/rfc/rfc1866.txt

属性の省略書式は使わない

良い例

<input type="radio" name="bar" checked="checked" />

悪い例

<input type="radio" name="bar" checked>


余力があればやる事項

インデント

プロジェクトごとで決めておく。
推奨は スペース２個

エラーメッセージ用のスタイルシート

onTeedaErrorという名称のスタイルシートを設定しておくと
自動的にバリデーションにエラーになった時に、指定された色を入力項目に設定します。

例：

<style type="text/css">
.onTeedaError {
  background-color: red;
}
</style>

コンディション機能（条件によって表示・非表示）

条件によって表示・非表示する箇所はdivタグ、もしくは、spanタグで囲い、そのタグに isもしくはisNotで始まるid属性をつけておく。

例：

<div id="isAaa">
...
</div>

画面項目(spanタグ)

変数であることを意識する場合は、spanタグやdivタグで囲っておく。
id属性も書いておく。idの値は、余力があれば書いておき、なければ "" でOK。

モック用JavaScript

アプリ実行時に不要となるMock用JavaScriptは
mockから始めるid属性を持つタグで囲っておく。

<script id="mockJavaScript" type="text/javascript">
...
</script>



修正履歴：

  • 「&はあらゆるところで &と記述する」を修正
  • 「属性の省略書式は使わない」の良い例、悪い例が逆になっていたミスを修正
  • 「formタグの内容」を修正。
  • 「HTMLの雛形」を修正。
  • 「インデント」の記述を追加。