Dreamweaver CS5×SOY CMS　Dreamweaverと相性のよいCMS「SOY CMS」

本記事では、Dreamweaverと親和性の高いCMSの一つである「SOY CMS」の紹介と、Dreamweaverとの連携方法について解説します。

SOY CMSとは？

まずは、Dreamweaverと連携して利用できるCMS「SOY CMS」の特徴について、簡単にご紹介いたします。SOY CMSはオープンソースライセンス（GPL Ver.2）にもとづき公開されている汎用のWebサイト向けCMSです。2008年3月に正式版が公開され、現在はバージョン1.2.7bが最新のものとなっています。

ブログ型CMSとの違い

SOY CMSはコンテンツ（サイトの内容）をデザインおよびサイト構造から分離して管理、運営することを前提に設計されています。ブログ型のCMSでは、トップページ、アーカイブページなどのサイト構成と記事投稿により管理されるコンテンツがブログの構造にしたがって最初から紐づいており、ブログ以外の構造のサイトに導入するときは、いったんサイトの構造を再構成しなければなりません。

それに対しSOY CMSでは、コンテンツをサイト内の任意のページの任意の場所に出力できるため、HTMLファイルによるサイト制作の場合と同様にサイトマップを自由に設計し、複数のページにまたがって表示されるコンテンツを設定することができます。サイト全体への導入はもちろん、新着情報の表示にだけに使う、ブログには他のCMSを使う、Flashサイトのバックエンドだけで使う、といった柔軟かつ部分的に利用することができます。図にあるような複雑なページ構成でも、簡単にCMS化できるのがSOY CMSの魅力の一つです。

SOY CMSのインストールで、簡単に複数サイト／ブログを管理できる

SOY CMSはサイト構造が自由なだけではなく、一つのシステムで数の制限なく複数のサイト／ブログが管理できます。SOY CMSにおける「サイト」とは、任意の数のページ構造とコンテンツがセットになった管理上の最大の単位で、管理者はサイトごとに権限を設定します。システムにログイン可能な管理者であっても、管理権限の付加されていないサイトの編集を行うことはできません。

また、SOY CMSでは一つのサイトの中にいくつでもブログを作成できます。たとえば、企業サイトで新着情報ブログと商品カタログブログを持ちたい、というような設定も可能です。

制作者（管理者）と運営者それぞれのアカウントで管理／更新ができる

SOY CMSではサイトごとに管理者に付与される権限レベルによって、使用する管理画面も異なるものになります。つまり、サイト構築時やリニューアル時に使用する管理画面と普段コンテンツの編集のみ行う管理画面とが別になっています。日常の管理ではシンプルな必要最小限の情報しか表示されない画面を使用することで、運用上のストレス軽減や誤操作の防止を図っています。

プラグインや専用アプリで簡単に機能拡張できる
問い合わせフォームやメルマガ配信も

SOY CMSには「プラグイン」ならびに「SOY App（ソイアプリ）」という二つの拡張手段が備わっており、CMSの枠を超えた柔軟な機能追加が可能になっています。 Webサイト制作で頻繁に利用する問い合わせフォームなどは「SOY Inquiry」という専用アプリケーションがあり、簡単にフォーム制作、フォームのデータ管理（CSVなどでの保存）を行うことができます。メルマガ配信には「SOY Mail」という専用アプリケーションがあります。双方とも、SOY CMSをインストール済みの環境に追加してインストールする形で利用することができます。

テンプレートはDreamweaverで編集／作成できる

SOY CMSには「テンプレート同期プラグイン」という、テンプレート情報をHTMLファイルに出力することができるプラグインが内包されています。このプラグインを使って、出力されたHTMLファイルに編集を加え、再度CMSに反映することができます。HTMLの編集にはDreamweaverを利用することで、これまでのサイト制作のノウハウを生かしてテンプレート制作を行うことができます。また、3月にリリースされたSOY CMSのDreamweaver専用スニペットを使うことで、テンプレート記法の記述も簡単に行うことができます。これらのTIPSについては後半でご紹介します。

SOY CMSのテンプレート記法はHTMLのコメントタグにより実装されているため、Dreamweaverのデザインビューに影響を与えることなくテンプレートファイルの編集を行うことが可能です。SOY CMSとの相性はDreamweaver CS5のバージョンアップにより、より高いレベルに仕上がりました。

またSOY CMSのテンプレートタグの性質上、各要素にアタリ文字などが簡単に挿入できる点もデザインビューで編集しやすいポイントと言えます。まずは、上記のようにSOY CMSで構築中のWebサイトのテンプレートをDreamweaverで編集する方法についてご紹介します。

1. SOY CMSのテンプレート同期プラグインの準備をする

前項のとおり、SOY CMSにはテンプレートを静的HTMLとして編集できるプラグイン、「テンプレート同期プラグイン」が内包されています。この「テンプレート同期プラグイン」の使い方を簡単にご紹介します。

※本チュートリアルはすでにSOY CMSにてサイト構築済みの状態を想定しています。サイト構築済みで無い方は、初期のサンプルサイトなどをご利用頂き、進めてください。

「テンプレート同期プラグイン」は標準で内包されているプラグインですが、初期値ではプラグインが未使用状態となっています。まずはプラグインを有効にしましょう。

SOY CMSのプラグインのタブをクリックし、プラグイン一覧ページにアクセスします。画面中の「アクティブでないプラグイン」の中にある、「テンプレート同期プラグイン」を選択し、「このプラグインを使用する」をクリックします。

これでプラグインが有効になりました。早速プラグインページ内にある、「ファイルに書き出す」をクリックして、構築済みのサイトのテンプレートをHTML ファイルに出力します。

これでテンプレートがHTMLファイルとして出力されました。デフォルトではSOY CMSをインストールしたディレクトリ内に「exportディレクトリ」が生成され、出力されます。

2. Dreamweaverでテンプレートファイルを編集する

サーバにSOY CMSをインストールしている場合は、exportディレクトリ内のHTMLファイルをローカルにダウンロードしてください。

シームレスにDreamweaverで編集したHTMLファイルをSOY CMSに反映するには、Dreamweaverでサイト定義の設定を行い、FTP／SFTPなどでサーバのexportディレクトリとローカルディレクトリが同期できる状態を構築することをお勧めします。

出力されたHTMLファイルをDreamweaverで開きます。本サンプル画面のように正しく画像を表示させるには、HTML内に指定されているCSSと画像パスに合わせてそれぞれのファイルを設置する必要があります（本サンプルではDreamweaver側でサイトルート指定を行って表示しています）。

HTMLの編集には特に留意点は無く、通常のHTMLファイル同様の編集操作が可能です。Dreamweaverの機能も通常のHTMLファイル同様、利用することが可能です。 HTML内にDreamweaverのテンプレート機能やライブラリ機能を記述して管理すれば、CMSのブロック機能を使わずとも、各HTMLパーツの共通管理などを行うことができます。編集完了後、再度CMSに反映します。

3. Dreamweaverで編集したテンプレートファイルをSOY CMSに反映する

SOY CMSをサーバにインストールしている場合は、exportディレクトリを最新のHTMLに同期、または上書きしてください。exportディレクトリのHTMLが更新されていれば、「テンプレート同期プラグイン」の画面にて編集済みのHTMLをリストアップしてくれます。管理画面のプラグインページから「テンプレート同期プラグイン」ページにアクセスしてください。

「ファイル⇒テンプレート」の部分に変更があったHTMLがリストアップされます。デフォルトでは編集済みのHTMLにすべてチェックが入っています。反映したくないHTMLがあれば、チェックを外します。最後に、「ファイルから読み込む」ボタンを押して、SOY CMSに編集されたテンプレートHTMLを反映します。

※本作業前に、念のためexportディレクトリのバックアップをお勧めします。

これでSOY CMSに編集したHTMLが反映されました。この機能を使えば、SOY CMSの管理画面上でHTMLを編集すること無く、これまでのWeb制作同様、Dreamweaver上でテンプレートとなるHTMLを作成することができます。

次ページからは3月にリリースされたばかりのSOY CMSのテンプレート記法の記述をサポートする、Dreamweaver専用のスニペットについてご紹介します。合わせてSOY CMSのテンプレート記法についてもご紹介します。

SOY CMSのテンプレート記法をサポートするDreamweaver用のスニペットは、下記のSOY CMSのWebサイトよりダウンロードしてください。

• http://www.soycms.net/
• http://www.soycms.org/viewtopic.php?f=19&t=613

ダウンロードページよりSOY_CMS.mxpをダウンロードしたら、mxpファイルを実行でスニペットをインストールします。

※スニペットをインストールする前に、Dreamweaverを終了させてください。起動したままの場合は正しくスニペットが反映されない場合があります。

mxpファイルを実行するとAdobe Extension Managerが起動します。
「承認する」を選択し、インストールを進めてください。

インストールが成功すると下記のような表示となります。インストールが完了すれば、Adobe Extension Managerは終了させてください。

スニペットのインストール完了後、Dreamweaverを起動します。サイドメニューのスニペットに「SOY CMS」が追加されていることをご確認ください。

新着表示用のCMSタグをスニペットを使って書く

では、先ほどインストールしたスニペットを使ってテンプレートに利用する専用タグを書いて見ましょう。今回はWebサイトの新着表示エリアをサンプルとして書きます。サンプルサイトはSOY CMSの開発元の日本情報化農業研究所のWebサイトです。ここでは下記の画面のようにトップページに新着ブログのタイトルを反映する方法をご紹介いたします。

まずこのエリアのHTMLと要素を確認しましょう。

ブロックタグの挿入

要素は上から日付、タイトル、内容となります。まずは、このエリアをブロック化し、「news」という名前を付けます。ブロックタグはスニペット→標準ブロック内にあります。

ブロックタグを挿入するために、コードビューで新着表示部分のHTMLタグを選択します。コードを選択した状態のまま、サイドメニューにあるスニペット内の「ブロック」をダブルクリックします。

すると、画面のようにHTMLの上下にブロックタグが挿入されました。

このままでは名称未設定のブロックとなりますので、「***」の部分を「news」に変更します。コードビューに直接記述してください。

ブロックの設定自体はSOY CMS上で行いますので、続いて作成時刻、タイトル、内容それぞれに専用タグを埋めていきましょう。

作成時刻タグの挿入

ブロックタグの挿入と同じように、コードビューで日付の部分を選択し、スニペット→標準ブロック→「作成日時(Y/m/d)」をダブルクリックして作成日時用のタグを埋め込みます。

埋め込まれた後のHTMLタグは以下となります。

タイトル・内容のタグ挿入

タイトルタグ用のタグは二種類あり、すでにリンク先の情報も持った場合のタグと、タイトルだけを表示するタグがあります。リンク先のaタグ自体にクラスを指定するなどの場合はタイトルタグとリンクのタグを両方指定することになります。今回はaタグ、タイトルタグそれぞれを指定し、埋め込みたいと思います。

まずは、コードビューでタイトル部分を選択し、スニペット→標準ブロック→「記事リンク」をダブルクリックし、リンクを指定します。リンクの指定が終わったら、次に再度タイトル部分をコードビューで選択し、スニペット→標準ブロック→「記事タイトル」をダブルクリックし、タイトル用のタグを指定します。これでタイトルの指定は終わりました。続けて内容部分も埋め込みましょう。

記事内容をコードビューで選択し、スニペット→標準ブロック→「記事本文」をダブルクリックします。これで新着部分のコード作成は完了しました。作成したHTMLが下記となります。

このように、スニペットを使えば、それぞれの専用タグを覚えなくても簡単にSOY CMS専用タグを記述することができます。最後にCMS側に新着ブログを表示するための設定、ブロックの設定を行います。

新着ブログを表示するためにブロックの設定を行う

新着ニュースブログをトップページに表示するためには、ブログ側のラベル設定が完了している必要があります。ブログのラベルを「What's New」に設定します（ブログ作成時に生成したラベルを利用して問題ありません）。

次にトップページのブロック設定に移ります。トップページには前段で記述したテンプレートタグが記述されていることを確認し、HTML編集領域上部にある、「ブロック」タブを選択してください。未設定のブロックのnewsブロックの「設定する」をクリックしてください。

ブロックの新規追加の設定画面（ウィザード）が表示されます。今回は指定されたラベル、「What's New」を複数件表示したいので、ラベルブロックを選択し、「次へ」をクリックしてください。

次にブロックの詳細を設定します。まずは表示するラベルを選択しましょう。新着ブログ用のラベル、「What's New」ラベルを選択してください。次に表示件数の設定です。トップページに何件記事を表示するか、また何件目から何件目を表示するかを設定します。例えば2件目～4件目と設定すれば、一番新しい記事はこのブロックに表示されません。SOY CMSではこれらのブロック設定を複数行うことで、複雑な表示ルールも簡単に設計することが可能です。

今回はサンプル値として1件目～3件目を設定しました。これで設定の保存を行います。

これでブロックの設定は完了しました。最後にトップページ編集画面の下部にある「更新」をクリックし、テンプレートを保存しましょう。

さあ「ページを確認」をクリックしてブロック設定反映後のトップページを確認しましょう。下記の画面のように新着ニュースブログの記事が表示されていればブロックの設定が成功しています。お疲れ様でした。

本稿はここまでとなります。これらのTIPSはSOY CMSの機能のほんの一部です。ぜひ、これを期にDreamweaverの制作ノウハウを生かしたSOY CMSサイトの構築にチャレンジして頂ければ幸いです。

SOY CMSに関する疑問や質問は公式サイトのフォーラムや、Twitterにて受け付けています。SOY CMSはオープンソースソフトウェアとして、開発元と利用者のコミュニティによって支えられています。是非これらのサイトにご参加頂き、ご活用頂ければと思います。