Author Archives: susumuis

About susumuis

メイドカフェによく居るWebエンジニア

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

いしがみメソッド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両方に関係ある何かを書きます！

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

MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック4 – ヘッダー・フッター共通部分の扱い

いしがみメソッド4. ヘッダー・フッター・共通部品はiframeタグをうまく使う

テンプレートエンジンの必須機能として、ヘッダーやフッターなどの共通部品を実現する、includeとかimportとかの機能があげられるでしょう。Mayaaではこれをコンポーネントと呼び、insertプロセッサーによって実現します。

使い方は公式サイトの通りですので割愛します。

ここではこれを実際に使うときの問題点とテクニックを紹介します。

問題点1: 親のテンプレートを直接開いた時、コンポーネントの部分が見えない

例えば、common.HEADER_HERE, common.FOOTER_HEREという名前でヘッダ・フッタを出力するm:idを発行したとします。（m:id名の分類はHEREになります。デザイナーから見たら「何かが」出力されることはwriteでもinsertでも同じだからです）

使う側はこの世になるでしょう

<div m:id="common.HEADER_HERE">
ここにヘッダが表示されます。
</div>
メインコンテンツ
<div m:id="common.FOOTER_HERE">
ここにヘッダが表示されます。
</div>

このテンプレートをサーバーで実行すると、ヘッダー・フッターの部分に共通部品が表示されます。しかし、テンプレートファイルを直接開くと

ここにヘッダが表示されます。
メインコンテンツ
ここにヘッダが表示されます。

となってしまってなんだか簡素です。サーバーに上げなくてもデザインの確認ができるMayaaの良さが半減しています。

解決案1: divタグの中身を都度書く

一番単純な方法は、ヘッダ・フッタテンプレートのソースコードをコピペしてdivタグの中身に書いてしまうことです。

<div m:id="common.HEADER_HERE">
<h1>○○のサイト</h1>
</div>
メインコンテンツ
<div m:id="common.FOOTER_HERE">
<small>copyright (c) 2015 susumuis.info</small>
</div>

この方法は確かにデザインを確認することができましが、共通部品のデザインを変更すると、都度すべてのテンプレートを書き換える必要があって、作業量が爆発します。この方針はダメですね！

解決案2: iframeタグをうまく使う

それではどうするかというと、おすすめなのがiframeタグです。
iframeタグはまさしく、HTMLの仕組みだけで、ページのコンポーネント化を実現する機能です。が、実際にはあまり積極的に使われません。

そんなiframeタグにinsertプロセッサーを適用すると、
* ローカルプレビュー時はiframeで見た目の確認ができる
* サーバーで実行した時は直接内容が書かれている
ということが実現できます。

呼び出し元のテンプレート側にはこのように書きます。

<iframe m:id='common.IMPORT_HERE></iframe>

ただ、これだけでは、ページを開いた時に、スクロールバーが出てしまいます。iframeは縦横サイズが固定だからです。

そこで、JavaScriptで魔法を書けます。jQueryを使用している前提で書くとこうなります。

$(function() {
    $('iframe[m\\:id="common.HEADER_HERE"]').load(
        function() {
            $(this).attr('frameborder', "0")
                .attr('scrolling', "no")
                .attr('width', "100%")
                .css('height', this.contentWindow.document.documentElement.scrollHeight + "px");
    });
});

これでロードされた際に、縦横サイズが画面にピッタリフィットするようになります。これで大体の場合OKです。

ただし、chromeのみ、この方法では上手く行きません。fileスキーマでアクセスした時、iframe内のDOMにアクセスすることが制限されてしまうためです。起動オプションを都度付けることが出来るなら、次の起動オプションを付けて起動することで制限を回避することが出来ます。

–allow-file-access-from-files

あるいは、簡易的なWebサーバーを立ててしまって、httpプロトコルでアクセスする方法もあります。

iframeタグのsrc属性をそのままinsertプロセッサーのpath属性にしてしまう

この方法で、common.HEADER_HERE, common.SIDEBAR_HERE, common.FOOTER_HEREなどの部品を都度、default.mayaaの中に登録しても良いのですが、更に前回紹介したテクニックを使用して、iframeタグのsrc属性のパスをそのままinsertプロセッサーのpath属性に突っ込むm:idを作ってしまいましょう。これさえあればどんなページのm:idの追加することなくコンポーネント化できます。

事前に以下のような関数を作っておきましょう。

function getDirectory(path) {
    return path.subatring(0, path.lastIndexOf("/"));
}

<e:insert m:id='common.IMPORT_HERE'
        path='${getDirectory(Packages.org.seasar.mayaa.impl.engine.EngineUtil.sourcePath) + $p("src")}' />

便利だよ＼(^o^)／

ただし、このテクニックは、TemplateSuffixに"/"があるケースでは、上手く動かない時があります。はじめから、TemplateSuffixに"/"を使うテクニック
は使わないようにしましょう。

参考

MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック3 – m:idを減らすテクニック

いしがみメソッド3. m:idを減らすテクニック

mayaaファイルはxmlなので、サイズが大きくなると、XMLエディタが重くなったりします。なので、なるべくなら、m:idは減らしたいと思ってきます。

1.m:idをパラメータ対応にする

m:idを減らすテクニックとして、同じようなメソッドをパラメータ化すればまとめられることが良く有ります。

そんな時は、こんな関数を作りましょう。

function $p(name, defaultValue) {
    var attr = originalNode.getAttribute(
        Packages.org.seasar.mayaa.impl.engine.specification.SpecificationUtil.createQName(name)
    );
    if (attr != null) return attr.value;
    attr = originalNode.getAttribute(
        Packages.org.seasar.mayaa.impl.engine.specification.SpecificationUtil.createQName(originalNode.getDefaultNamespaceURI(), name)
    );
    return defaultValue;
}

使い方はこんな感じです。例えば
一昨日書いたforプロセッサーの件は

<m:for m:id="LOOP_ITEM" init="${var loopItemIndex = 0;}" test="${loopItemIndex &gt; items.size() &amp;&amp; loopItemIndex &gt; toInt($p('max'), 999999)}" max="999999">
  <m:echo>
    <m:doBody />
  </m:echo>
</m:for>

事前に次の関数をload関数で読み込む外部jsファイルなどで読み込んでおいたとします。

function toInt(s, default) {
  try {
    return java.lang.Integer.parseInt(s);
  } catch (e) {
    return default;
  }
}

使うときはこんな感じに出来ます。

<div m:id="LOOP_ITEM" m:max="10">
  ...
</div>

このようにすることで、最初の10件のみを表示することができます。

この他にも、m:ifプロセッサーに対して常に条件を逆にするパラメータを作って、逆条件のためのm:id発行を減らすこともできます。（僕はそのためにプロセッサーを作ったりします。プロセッサーの独自作成については、後日説明します。）

PathAdjusterを効果的に使う

PathAdjusterは、画像などの相対パスを自動調整して、サーバー実行時に絶対パスに変換する機能です。本来はjpgなどの画像やjsファイルなどに使うものですが、独自のロジックを追加して、リンク先のURLをいい具合に変換すると、単なるリンクではわざわざm:idを発行しなくても良くなることが有ります。

公式マニュアル - 5-9. パス自動調整の設定を参照してパス自動調整機能をカスタマイズしましょう。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE provider
    PUBLIC "-//The Seasar Foundation//DTD Mayaa Provider 1.0//EN"
    "http://mayaa.seasar.org/dtd/mayaa-provider_1_0.dtd">
<provider>
    <pathAdjuster class="jp.example.MyPathAdjuster">
        <parameter name="enabled" value="true"/>
        <parameter name="force" value="false"/><!-- since 1.1.13 -->
    </pathAdjuster>
</provider>

そして、jp.example.MyPathAdjuster を作成しておきます。

package jp.example;
import org.seasar.mayaa.impl.builder.PathAdjusterImpl;
public class MyPathAdjuster extends PathAdjusterImpl {
  @Override
  public String adjustRelativePath(String base, String path) {
    if (path.endsWith(".html")) {
      return MyConst.SITE_ROOT_URL + "/" + path;
    }
    return super(base, path);
  }
}

実際のシステムでは色々なパス階層があると思うので、色々工夫してかけると思います。

参考PathAdjuster のカスタマイズ - marcie001のメモ

以前はPathAdjusterは、この他に、画像のタイムスタンプを出力してキャッシュに使うこともできます。。。などと以前は言っていましたが、ファイルのタイムスタンプをリアルタイムに検索するのも少なからず負荷がかかりますし、最近はcloudfrontなどのCDNを使うことも多かったりします。画像自体別サーバーに置くかもしれません。その辺り、サービスの規模や正確に合わせてください。そんな時も、PathAdjusterがプログラマブルであることが役に立つと思います。

まとめ

今回は、m:idを減らすテクニックを紹介しました。ただし、減らし過ぎにも注意してください。あくまで、デザイナーへの使いやすさを前提にしてください。

あまりやり過ぎると、結局混乱を招いてしまいます。こういう暗黙なことをやるときは、事前に説明しておきましょう。

susumuis Info

Webエンジニア susumuis の技術ブログ