サッポロビールにおけるテンプレート活用事例

はじめに

私が所属する株式会社ビジネス・アーキテクツでは、2007年6月にサッポロビール・コーポレートサイト（以下、サッポロビールWebサイトと呼称）のリニューアルを行い、私はその中でテンプレート設計・構築を担当しました。この記事では、このサイトにおいてDreamweaverテンプレートをどのような目的で、どのような形で使用しているかを解説します。

多くのページでDreamweaverテンプレートを使用

本サイトでは、全体で200～300ページある中、製品情報などの更新が頻繁に発生する部分の多くをDreamweaverテンプレートとして実装しました。以下がその実際のページとテンプレートとの比較です。

ホーム

ブランド一覧（ビール）

個別商品ページ（ヱビスビール）

個別商品ページ（ビアファイン）

情報の更新だけでなく、ページ追加もクライアント側で

このうちビアファインのページはリニューアル時には存在しておらず、運用を行う中でクライアントが新製品の発売に合わせて作成したものです。他の商品ページと比較しても、遜色なくページが作成されています。

またビアファイン追加に伴ってサイトの構造も変化していますが、例えばビールのブランド一覧やローカルナビゲーションを見ても、それらの変更が正しく反映されていることがわかります。

このような経験、ありませんか？

例えばWebサイトを新しく作ったりリニューアルしたあとの運用の過程で、サイトに以下のようなことがおきた経験はありませんか？

• 画像は修正されているが、altが修正されていない
• ソースのコピーペーストを失敗したのか、レイアウトが崩れてしまった
• 特定の局面で使うパーツが用意されているのに使われていない
• とにかく目だ立たせようと、赤くて太い文字になっている

これらの問題はひとつひとつは小さく、修正も困難ではありません。しかしサイト内のいろいろなページで問題が発生していたり、どのような経緯で問題が発生したのかがわからない場合、調査・修正作業は膨大なものとなり、本来無用な負担がWebサイト制作者と運用担当者の両方に生じます。

マニュアルだけでは解決しづらい

しかし、このような問題が起きたからといって、正しくない運用を行った担当者にばかり責任があるわけではありません。その人は正しい運用の手順を知らないか、あるいは忘れてしまったまま、目の前にある作業をとりあえず終わらせる必要にせまられて実行しただけなのです。
このような問題は運用マニュアルによって解消される部分もありますが、それでも作業者がマニュアルの手順を正確に覚えなければなりませんし、また作業者が交代するたびに教育しなおすことは避けられません。つまり運用時の作業が頻繁に発生するWebサイトでは、必ずしもマニュアルだけで万全とは言えないのです。

「どうしたいか」を共有→「何をしていいか・いけないか」を可視化

この問題を解決するには、まずwebサイトを作成するとき、あらかじめ「運用時にどのような作業が発生するか」つまり「どうしたいか」をWebサイト制作者と運用担当者が協力して細部まで綿密に洗い出し、共有します。
そして明らかになった「どうしたいか」に対し「何をしていいか・いけないか」という視点で分解を行い、作業者が対象のページを見たときにそれがすぐわかる、つまり可視化を行います。この可視化とは、具体的には以下のポイントを満たすようにする、ということです。

• 作業の一連の流れを明示
• 対象のページを、実際のものと同じ見た目で編集
• 編集できる箇所を限定
• 編集できる箇所をわかりやすく表示
• 編集のしかたをコントロール

こうすると、作業者はこれから行おうとする一連の作業に対し、あらかじめ可視化されている「こうすればいい」という内容に忠実に従っていくだけで作業が終了するため、作業者のスキルや理解度の差によるミスが格段に発生しづらくなります。また作業者の精神的負担も減るため、その点でもミスが減ります。

Dreamweaverテンプレートで「作業の可視化」

Dremaweaverテンプレートはこの「作業の可視化」という点について非常に優れており、可視化に必要な機能の多くを備えています。

• 対象のページを、実際のものと同じ見た目で編集
  • デザインビューによって、実際のページに非常に近いレイアウトでページを編集することができます。
• 編集できる箇所を限定・編集できる箇所をわかりやすく表示
  • 編集可能領域を設定することで、指定した場所以外を編集できないようにロックできます。またデザインビュー・コードビューともに、編集できる箇所が一目でわかるように色分けされています。
• 編集のしかたをコントロール
  • リピート領域によって要素の繰り返しが行えます。またテンプレートオプションによって一ヶ所に入力した値を複数の要素に反映でき、さらに条件分岐による要素のオン・オフ・切り替えも行えます。

デザインビュー・編集可能領域

先ほどご覧いただいたビアファインのテンプレートです。
デザインビューによって、実際のページに非常に近いレイアウトで編集できることがわかります。また編集可能領域の項目名と枠線を見れば、どんな内容をどこに入力すれば良いかがすぐにわかります。

リピート領域

この4つのボタンが表示されている部分がリピート領域です。[+]ボタンと[-]ボタンで、ソースコードを崩すことなく項目を増減することができます。Webサイトを運用していく中で増減することがわかっている部分の全てに、この領域が設定されています。

Tips

リピート領域には現在の要素の順番を返す機能があるため、これを使って連番画像を自動で表示していくことが可能です。

応用すると奇数・偶数の判定もできるので、メニューの左右によってclass属性を付け替えることもできます *1 。
また、[▲][▼]ボタンによって、リピート領域内での順番を入れ替えが行えます。このサイトではインデックスページ上のメニュー項目をリピート領域として設定し、順番を入れ替えることでページへのユーザー流入数の調整を行っています *2 。

リピート領域内では、後述のテンプレートオプションが使えません。この領域内で要素のオン・オフを制御するには、リピート領域を入れ子にし、0個か1個かをリピート領域の増減で操作する方法があります。ただし、要素をオン・オフする方法が2種類存在することになってしまうので、使いどころは限られてきます *3 。

テンプレートオプション（値の一括反映）

テンプレートオプションのひとつめの使い方として、値の一括反映があります。このテンプレートでは[修正]-[テンプレートプロパティ]の 03_タイトル に「サッポロビアファイン」と入力することで

• title要素
• パンくずリストの現在地
• ページタイトル画像のalt

という複数の個所に入力したテキストが反映されます。他のページをコピーして新しくページを作るときなどに起こりやすい修正漏れを防ぐことができます。

テンプレートオプション（要素のオン・オフ・切り替え）

テンプレートオプションのもうひとつの使い方として、要素の出現をコントロールする機能があります。[修正]-[テンプレートプロパティ]の 05_販売アラートは、0を入力すると非表示となり、1を入力すると製造終了版として赤枠の注釈リスト、2を入力すると新発売版としてオレンジ枠の注釈リストがそれぞれ出現します。

Tips

• 条件分岐は入れ子にできるため、この例のように成分表ブロックと成分表の両方を表示としたときだけ出現する、という使い方もできます。
• 数値による条件分岐だけではなく、チェックボックスによる単純なオン・オフや、今回は使用していませんが「文字列の判定」「カラーピッカー」など、多彩な入力を選択できます。
• テンプレートオプションの項目名は、先頭に連番を振ることでリスト上の順番を制御できます。ページ上で出現する順番に連番を振っておくとよいでしょう。
• 項目名の中に条件文を直接書き込んでおくと、あとから作業者が使用するときの理解の補助となり、有効です。
• 項目名に日本語を書く場合は cond="_document['項目名’]” という書式にすると文字列として扱われ、エラーを回避することができます。

実はページを作るとき、ある程度は考えているはず

製品情報以外のカテゴリでも、更新が掛かる箇所はDreamweaverテンプレートとして各ページに展開しています。

知る・楽しむ

グルメ・レシピ

会社情報

多くのページに対し、これらの機能を盛り込んだDreamweaverテンプレート化を行うことは大変に思えるかもしれません。しかし、Webサイトを制作するときは運用のことを考えずに制作することは稀です。つまり、このようなケースのときにはこう対応する、ということはサイトを設計する時点で考慮しているはずなのです。
であれば、あとはどうDreamweaverテンプレートの形に落とし込むかを考え、実装すればよいだけです。

設計はあえて紙とペンで

サッポロビールWebサイトの場合は、仕様書とそれに基づいたデザインをまず紙に出力し、蛍光ペンで編集可能領域・リピート領域・テンプレートオプションなどを明示していきました。意外に思われる方もいらっしゃるかもしれませんが、実は素早く検討と修正を繰り返すことができ、またいくつかのページに対して同じ作業を行っていくうちに「このリピート領域はこちらでも使える」「このメニューブロックはこちらと同じもので行ける」というようなことが感覚的に見えてくるため、おすすめです。

注意点

• テンプレートの各項目名はこの時点で精査しておきましょう。入力内容や行える操作がわかりやすい名前であるか、ほかの項目名と整合がとれているか、細かいようですが後からの使いやすさに影響してきます。
• 各領域の親子関係について正しく理解した上で設計に着手するようにしましょう。たとえばリピート領域の中にオプション領域は設定できませんし、編集可能領域内に別の領域を設定する場合はテンプレートをネストする必要があります。

編集はテキストエディタで

テンプレートの制御はすべてコメントを利用したテンプレートタグで行われているため、実装時はDreamweaverのメニューを使用せず、テキストエディタを使用してテンプレートタグを直接書き込んでいきました。その際、以下のようなテキストをすぐに挿入できるような形（クリップボード拡張ツール、IMEに辞書登録など）にしておくと便利です。

• 編集可能領域：<!-- TemplateBeginEditable name="編集可能領域名" --><!-- TemplateEndEditable -->
• リピート領域：<!-- TemplateBeginRepeat name="リピート領域名" --><!-- TemplateEndRepeat -->
• テンプレートオプション（条件分岐コンテナ）：<!-- TemplateBeginMultipleIf --><!-- TemplateEndMultipleIf -->
• テンプレートオプション（条件分岐パターン）：<!-- TemplateBeginIfClause cond="_document['条件文']==パターン" --><!-- TemplateEndIfClause -->
• テンプレートオプション（初期パラメータ）：<!-- TemplateParam name="条件文" type="タイプ" value="パターン" -->

なおテキストエディタでなく、コードビュー＋スニペットでも同じことが実現できると思います。
この手法で作るときはDreamweaverをテンプレートの構文チェッカーとして利用しました。作成したテンプレートをDreamweaverで開くと、エラーがあった場合に該当箇所を指摘してくれるのです。

テンプレートからページ作成ではなく、ページからテンプレート化

この手法を応用すると、既にあるページをテンプレート化することもできます。
テンプレートから展開されたページには

• 参照するテンプレートのパス
• そのテンプレートで使用しているテンプレートタグがインスタンスタグに置き換えられたもの

が書き込まれており、これによってどのテンプレートからどんな形で作成されたかをDreamweaverが判断しています。なので、

1. 既存のページの要素を最小限にし、内容をサンプルに変える
2. テンプレートタグを書き込み、Dreamweaverテンプレートとして保存
3. そのDreamweaverテンプレートからページを新規作成して保存
4. 保存したページに書かれているテンプレートへのパス、インスタンスタグを実際のページにテキストエディタなどで移植
5. 移植したページをDreamweaverで開き、正常に開かれることを確認する

というステップを踏むと、もともとDreamweaverテンプレートありきでそこからページが作成されたような状態を簡単に作ることができます。インスタンスタグの詳細などは省きますが、こういう使い方もあるということを覚えておくと役に立つことがあるかもしれません。

マニュアルとセットで

作業を制限して可視化することで運用時の問題はかなり解消されますが、全体的な作業の流れを示したり、画像の作成方法などのページそのものの編集ではない部分を解説するには、やはりマニュアルが必要です。

サッポロビールWebサイトでは更新ガイドラインを用意しており、「新製品を追加するには」「製品を削除するには」など、サイトに対する修正を目的軸で分類し、そこに対して必要となる具体的な修正作業手順を説明するという形態を取ってます。

テンプレートが必要かどうか、常に考える

テンプレートを設計・開発していると、テンプレート自体を高機能化する方向に考えてしまいがちです。しかし、高機能なテンプレートと使いやすいテンプレートは必ずしも一致しません。

• ひとつのテンプレートで切り替えるのではなく、テンプレートを分割したほうがよいのではないか
• リピート領域やテンプレートオプションを使わず、編集可能領域によって直接書き込んだり、他ページからコピーしたりする程度でよいのではないか
• そもそもテンプレートにする必要がないのではないか
• テンプレート機能ありきでページを作ってしまっていないか
• CMSやSSIなど、サーバサイドで実現したほうが効率的ではないのか

などなど、検討できる選択肢を狭めてしまわないよう、常に「作業者がわかりやすいか」「楽になるか」「更新頻度はどのくらいか」「クオリティ維持に役立つか」というあたりを気にしつつ作成するのが、よいテンプレートを作るコツだと思います。