libro
www.tuyano.com
初心者のためのGroovy/Grails入門

GSPのカスタムタグを使おう (4/4)

作成:2013-10-19 08:30
更新:2013-10-19 08:30

■SiteMeshによるレイアウト用タグについて

GSPによるページ作成を行うとき、ぜひ覚えておいて欲しいのが「SiteMesh」です。これはWebページにレイアウト機能を導入するためのフレームワークです。これを利用することで、簡単にレイアウト機能が使えるようになります。

これは、実際に試してみるのが一番でしょう。index.gspの<head>タグ内に、以下のタグを追加してください。
<meta name="layout" 
    content="main" />
作業はたったこれだけ。アクセスすると、綺麗にレイアウトされたページが表示されます。

SiteMeshは、あらかじめ用意しておいたレイアウト用のテンプレートを使ってページをレイアウトし表示します。この機能を利用するには、ページに以下のタグを用意しておくだけです。
<meta name="layout" content="レイアウト名" />
contentには、使用するレイアウトの名前を指定します。ここで名前を指定すると、「views」内の「layouts」フォルダの中からテンプレートを検索し、それを使ってページをレイアウトします。例えば、下のサンプルではcontent="main"としていますが、これにより「layouts」内のmain.gspをレイアウトのテンプレートして使うようになります。

このmain.gspは、デフォルトで用意されているレイアウト用テンプレートです。このテンプレートは、自分で簡単に作成することができます。その基本的な書き方を整理すると以下のようになります。
<html>
<head>
    <title>
        <g:layoutTitle default="デフォルトのタイトル" />
    </title>
    <g:layoutHead />
</head>
<body>
    <g:layoutBody />
</body>
</html>
ここでは、いくつかのカスタムタグが使われています。ざっと説明しましょう。

<g:layoutTitle>
これは、タイトルを表示するものです。ビューテンプレートにある<title>の内容をそのままこのタグで出力します。

<g:layoutHead />
ビューテンプレートにあるヘッダー関連タグをこれで出力します。これにより、テンプレートのヘッダーとコンテンツ表示用のビューテンプレートのヘッダーが融合できます。

<g:layoutBody />
ここにビューテンプレートのボディ部分をはめ込み表示します。

――では、実際にこれらを利用して簡単なレイアウトを作って利用してみましょう。下のリスト欄にサンプルを挙げておきます。「layouts」フォルダ内に「mylayout.gsp」という名前で保存をしておきましょう。そしてindex.gspの<meta>タグを以下のように変更します。
<meta name="layout" content="mylayout" />
これでオリジナルのレイアウトを使ってコンテンツを表示できるようになります。いくつものページがあっても、これで簡単に共通の表示がされるようにできますね。


■テンプレートのロード
ここでは、レイアウトへの追加要素としてフッターを別ファイルで用意してあります（下リスト参照）。これは以下のようなタグを記述して読み込みます。
<g:render template="footer" />
この<g:render>タグは、templateに指定したテンプレートファイルをレンダリングし、その場に出力します。ただし、注意すべきはtemplateの名前です。

例えば、template="footer"とした場合、それにより読み込まれるファイルは「_footer.gsp」となります。必ず冒頭にアンダースコアキャラクタ（_）がつくのです。footer.gspでは読み込まれませんので注意しましょう。


このレイアウト用タグを知っていれば、自分でオリジナルのレイアウトを簡単に作成することができます。いくつものページで統一されたデザインで表示されるようにするためには、レイアウト機能は必須です。非常に簡単なものですので、ぜひ使えるようになっておきましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※mylayout.gsp

<html>
<head>
    <title><g:layoutTitle default="デフォルトのタイトル" /></title>
    <g:layoutHead />
    <style type="text/css">
    body {color: #006600;}
    h1 {background: #99ff99;font-size: 14pt;padding: 5px;}
    h2 {font-size: 12pt; font-weight: bold;}
    p {font-size: 10pt;}
    </style>
</head>
<body>
    <g:layoutBody />
    <g:render template="footer" />
</body>
</html>


※_footer.gsp

<p style="border-bottom:solid 1px; text-align:right;">copyright libro 2013.</p>
※関連コンテンツ

「初心者のためのGroovy/Grails入門」に戻る