MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック5 – その他雑多なテクニック

Leave a reply

これは Mayaa Advent Calendar 2015 の7日目です。昨日は「MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック4 – ヘッダー・フッター共通部分の扱い」でした。

ついに7日目です。これで一週間突破です。お付き合いいただきありがとうございます。

さて、いしがみメソッドも今日で最後です！ここまで紹介していなかったテクニックをざっと紹介していきます。

その前に一つお知らせ：3日目の記事に大事になことを書き忘れたので追記しています。「default.mayaaに書いたm:idには接頭辞"common."を付けよう！」先頭から読んできていただいていた方はこちらに戻ってお読みいただけると幸いです。昨日このルールを前提に書いてしまったことをお詫びいたします。

いしがみメソッド5. その他テクニック

1.テンプレート上のコメントは、ソース表示時に見えないようにする

以前も紹介しましたが、テンプレート上に <!--, --> 形式でコメントを記載すると、HTMLなので、ソース表示でエンドユーザーに見えてしまいます。

JSPにおける　<%--, --%> のような記述に対応するためにはどうしたらよいでしょうか？

以前以下の様な方法を紹介しました。

<!-- ${/* このコメントは見えません */} -->

ただ、テンプレート上に${/* */}を書くことはできるだけ禁止したいことと矛盾します。また、${}の内側は初回アクセス時にJavaScriptとJavaにコンパイルしているので、ちりも積もればなんとやら。大量に書くのに向かないかもしれません。

テンプレート上に書いた"m:"名前空間の属性はサーバー実行時に消えます。なので

<div m:comment="これは○○です">
</div>

こういったテクニックも使えるでしょう。

もっとブロックで要素を隠したいときは、以下のようにDUMMY領域を囲むm:idを作成し

<m:null m:id='DUMMY_TAG' />

次のようにする方が見通しがよいかもしれません。

<div m:id="DUMMY_TAG">
  <div>....</div>
</div>

場面場面で適宜使い分けてください。

2.文言はなるべくテンプレート側に書く

ケースバイケースですが、例えば男性か、女性かを返すm:id

<m:with m:id="SEIBETSU_HERE">
  <m:if test="${user.sex == 'm'}"><m:write valus="男性" />
  <m:if test="${user.sex == 'f'}"><m:write valus="女性" />
</m:with>

などを作るくらいなら

<m:if m:id="IF_MAN" test="${user.sex == 'm'}">
  <m:echo><m:doBody /></m:echo>
</m:if>
<m:if m:id="IF_WOMAN" test="${user.sex == 'f'}">
  <m:echo><m:doBody /></m:echo>
</m:if>

を作りましょう。

ただ、文言を動的に組み立てるような場合は、この限りではないので、適宜対応してください。

3.nekoHTMLパーサーをいじる

上級者向きですが、スマホサイトを作ろうとする場合は実質必須でしょう。くわしくはMayaaでHTML5のスマートフォンページを作る際にはまったことの内容のとおりです。

まとめ

いかがでしたか？ここまでのテクニックはこれまでにこのブログや勉強会のスライドで紹介したことです。しかし、一つ一つじっくり説明したのは初めてだと思います。

これらテクニックはテンプレートエンジンがMayaaだけでなく、Mixer2などの別のテンプレートエンジンでも通用するのではないかと思います。Mayaaアドベントカレンダーで言うのもあれですが、たとえ将来Mayaaが忘れられても、覚えてほしいと思います。

僕が経験で培ってきた細かなテクニックを世に残せてよかったです。

次回以降予告

明日からは、これらのテクニックをふまえたMayaaの拡張や、細かな開発補助ツール、フレームワークとの組み合わせなど、どんどん紹介していこうと思います。

10日は、Java EEアドベントカレンダーの当番でもあるので、合流して、Java EEとMayaa両方に関係ある何かを書きます！

明日からもよろしくお願い致します。

コメントを残す