ウェブテンプレートとは？
デザインテンプレートやテーマは、新しいウェブサイトを作成する際の出発点として使用できる、予め設計されたウェブサイトのレイアウトです。ヘッダー、フッター、ナビゲーションメニュー、その他の一般的なUI要素など、予めデザインされた要素とともに、ページの基本的な構造とレイアウトが提供されます。 デザインテンプレートは通常、HTML、CSS、JavaScriptで作成され、ウェブサイトのブランドやスタイルに合わせて、コンテンツ、画像、色を変更してカスタマイズすることが可能です。ウェブデザインの経験やリソースが限られている場合でも、豊富なコーディングの知識を必要とせず、プロフェッショナルな外観のウェブサイトを作成できます。 WordPressなどのCMSでも広く利用され、テンプレートマーケットプレイスから購入するか、インターネット上のさまざまなソースから無料でダウンロードすることができます。これらのテンプレートは、さまざまな業界やウェブサイトの種類に対応した幅広いスタイルとデザインで提供されており、ユーザーの特定のニーズに合わせて簡単に変更することができます。 Content Repository 7でもテンプレートを使用することができますが、アクセスされる際のHTTPメソッドやURLの拡張子によってもテンプレートを切り替えることができるため、この仕組みを利用することで、一般的なテンプレートとは別の使い方もできます。 今回の記事では、あまり知られていないウェブテンプレートの使い方をご紹介します。
ウェブサイトの見た目を変える
ブログでサイト全体の見た目を変更したり、eコマースでより商品の魅力が伝わりやすいデザインへ最適化したりできます。これは、一般的なデザインテンプレートと同様の使い方です。
web.template = 'spring'
入力フォームを作成する
お問い合わせフォームなどで、入力フォームの表示用にGET.form-input.html.gsp、入力内容の送信用にPOST.form-input.html.gspというように、アクション別にウェブテンプレートを作成することで、一つのコンテンツで入力フォームを実装できます。アクセスされる際のHTTPメソッドによって、適用するテンプレートを切り替えます。
web.template = 'form-input'
出力形式を変える
例えば、ウェブページ表示用にcontent.html.gsp、CSV出力用にcontent.csv.gsp、XML出力用にcontent.xml.gspというように、出力形式別にウェブテンプレートを作成しておけば、一つのコンテンツを基に様々な形式でデータ出力できます。アクセスされる際のURLの拡張子によって、適用するテンプレートを切り替えます。
web.template = 'content'
ウェブテンプレートの使い方
ウェブテンプレートの実装工程は以下です:
- ウェブテンプレートの作成
- コンテンツへの適用
1. ウェブテンプレートの作成
ウェブテンプレートはGSPまたはGroovyファイルとして作成し、/content/WEB-INF/templatesフォルダーに保存します。サブフォルダーを作成して、その中に保存することもできます。
<%
def item = api.cms.Item.create(context).with(resource);
def title = item.getString("ogp_title");
def description = item.getString("ogp_description");
%>
<html>
<head>
<% WebAPI.include("/public/inc/analytics.gsp") %>
<meta charset="utf-8">
<meta name="description" content="$description">
<title>$title</title>
<meta property="og:type" content="article">
<meta property="og:title" content="$title">
<meta property="og:description" content="$description">
コンテンツのプロパティーをresourceオブジェクトから取得したり、WebAPI.includeを使って他のコンテンツを読み込むこともできます。
2. コンテンツへの適用
File Browserで目的のファイルを表示して、web.templateプロパティーに/content/WEB-INF/templatesをルートとした相対パスを設定します。 選択肢（Choice）ファセットを作成して適用するのがおすすめです。
設定できたら、コンテンツを表示してテンプレートが適用されることを確認します。Web Page Editor上ですぐに確認できます。
ウェブテンプレートを使いこなしましょう！
この記事では、Content Repository 7でのウェブテンプレートの使い方をご紹介させて頂きました。ウェブテンプレートを使いこなして、ウェブ制作の引き出しを増やしましょう。
