m:idを減らすテクニック」でした。頑張りますよ!さて、Mayaaを手なずけるテクニックを色々紹介してきました。今回までで基本的なテクニックは大分紹介しました。あと1,2回で終わると思います。ここまで読んでくださった方は気づいていると思いますが、僕のブログはMayaaの基本を押さえている方が実際にサイトを作ろうとした時の指針となるように書いています。Mayaaを使う方は事前に公式ドキュメントを一通り見ていただくことをおすすめします。ヘッダー・フッター・共通部品はiframeタグをうまく使うテンプレートエンジンの必須機能として、ヘッダーやフッターなどの共通部品を実現する、includeとかimportとかの機能があげられるでしょう。Mayaaではこれをコンポーネントと呼び、insertプロセッサーによって実現します。使い方は公式サイトの通りですので割愛します。ここではこれを実際に使うときの問題点とテクニックを紹介します。common.FOOTER_HEREという名前でヘッダ・フッタを出力するm:idを発行したとします。(m:id名の分類はHEREになります。m:id="common.HEADER_HERE">ここにヘッダが表示されます。m:id="common.FOOTER_HERE">ここにヘッダが表示されます。</div>このテンプレートをサーバーで実行すると、ヘッダー・フッターの部分に共通部品が表示されます。テンプレートファイルを直接開くとここにヘッダが表示されます。メインコンテンツここにヘッダが表示されます。なってしまってなんだか簡素です。サーバーに上げなくてもデザインの確認ができるMayaaの良さが半減しています。divタグの中身を都度書く一番単純な方法は、ヘッダ・フッタテンプレートのソースコードをコピペしてdivタグの中身に書いてしまうことです。susumuis.info</small></div>この方法は確かにデザインを確認することができましが、共通部品のデザインを変更すると、都度すべてのテンプレートを書き換える必要があって、作業量が爆発します。iframeタグをうまく使うそれではどうするかというと、おすすめなのがiframeタグです。iframeタグはまさしく、HTMLの仕組みだけで、ページのコンポーネント化を実現する機能です。実際にはあまり積極的に使われません。サーバーで実行した時は直接内容が書かれているということが実現できます。呼び出し元のテンプレート側にはこのように書きます。m:id='common.IMPORT_HERE></iframe>ただ、これだけでは、ページを開いた時に、スクロールバーが出てしまいます。iframeは縦横サイズが固定だからです。そこで、JavaScriptで魔法を書けます。jQueryを使用している前提で書くとこうなります。});});これでロードされた際に、縦横サイズが画面にピッタリフィットするようになります。これで大体の場合OKです。chromeのみ、この方法では上手く行きません。fileスキーマでアクセスした時、iframe内のDOMにアクセスすることが制限されてしまうためです。起動オプションを都度付けることが出来るなら、次の起動オプションを付けて起動することで制限を回避することが出来ます。–allow-file-access-from-filesあるいは、簡易的なWebサーバーを立ててしまって、httpプロトコルでアクセスする方法もあります。common.FOOTER_HEREなどの部品を都度、default.mayaaの中に登録しても良いのですが、更に前回紹介したテクニックを使用して、iframeタグのsrc属性のパスをそのままinsertプロセッサーのpath属性に突っ込むm:idを作ってしまいましょう。これさえあればどんなページのm:idの追加することなくコンポーネント化できます。事前に以下のような関数を作っておきましょう。/>便利だよ\(^o^)/ただし、このテクニックは、TemplateSuffixに"/"があるケースでは、上手く動かない時があります。はじめから、TemplateSuffixに"/"を使うテクニックは使わないようにしましょう。コメントをキャンセルメールアドレスが公開されることはありません。