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

Leave a reply

これは Mayaa Advent Calendar 2015 の6日目です。昨日は「MayaaでWebサイトのビューを実装するときに押さえておくべき基本テクニック3 – m:idを減らすテクニック」でした。まだまだ頑張りますよ！

さて、Mayaaを手なずけるテクニックを色々紹介してきました。今回までで基本的なテクニックは大分紹介しました。あと1,2回で終わると思います。

なお、ここまで読んでくださった方は気づいていると思いますが、僕のブログはMayaaの基本を押さえている方が実際にサイトを作ろうとした時の指針となるように書いています。初めてMayaaを使う方は事前に公式ドキュメントを一通り見ていただくことをおすすめします。

いしがみメソッド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に"/"を使うテクニック
は使わないようにしましょう。

参考

コメントを残す