SOY CMSとDreamweaverの連携 ―CSS Nite in KANSAI, LP1 プレセッションのフォローアップ

2010年1月25日にアップルストア心斎橋にて行われたCSS Nite in KANSAI LP1プレセッションにて、SOY CMSの概要を開発元の代表、古荘さんとお話する機会を頂きました。

この記事では簡単に当日のセッション内容を紹介します。
photo by おかだよういち（s-style-arts）

また、当日はアップルストアでの発表という事もあり、Macにローカルサーバ環境、MAMPを準備してSOY CMSのデモを行いました。これからMacで気軽にSOY CMSを試してみたいという方は、MAMPでSOY CMSを試すという記事も公開しておりますので、よろしければ合わせてご覧ください。

当日のスライドですが、slideshareにページを若干端折って公開しております。

当日はCMSを利用していない利用者向けであった為、概要説明が多くを占めたのですが、後半にSOY CMSとDreamweaverとの連携デモ（テンプレートファイルをDreamweaver等のエディタで制作・編集する）を行いました。

これを簡単にブログ上でご紹介します。

SOY CMSには"テンプレート同期プラグイン"というものがあり、これを利用してDreamweaverと連携してテンプレートを編集します。

"テンプレート同期プラグイン"は標準でSOY CMSに含まれているため、新たにダウンロードを行う必要はありません。
(※右のスライドは古荘さん作成)

※本記事ではすでにSOY CMSでサイト構築済みの状態を想定して記事を進行します。

SOY CMSのプラグインのタブをクリックし、プラグインページにアクセスします。
デフォルトでは"テンプレート同期プラグイン"は有効になっていないので、アクティブでないプラグインの中にある、"テンプレート同期プラグイン"を選択し、”このプラグインを使用する”をクリックします。

プラグインが有効になったら、プラグインページ内にある、"ファイルに書き出す"をクリックして、テンプレートファイルを静的htmlに出力します。

テンプレートファイルは一般的なhtmlとして出力されている為、Dreamweaverを含め、通常のhtmlエディタで編集可能です。デフォルトでは、サイトのディレクトリ内の"export"フォルダに出力されます。

出力されたhtmlをDreamweraverで開きます。このhtmlを編集し、再度CMSに反映します。ちなみに、こちらのhtml内にDreamweraverのテンプレート機能やライブラリ機能を埋め込んで管理しておけば、CMSのブロック機能以外でも、パーツの共通管理等を行えます。

編集が完了したhtmlが"export"フォルダに入っていれば、再度"テンプレート同期プラグイン"ページにアクセスすれば、編集済みのhtmlをSOY CMSがリストアップしてくれます。

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

※1 本作業前に、念のためはじめに出力した"export"フォルダのバックアップをお勧めします。
※2 テンプレートファイルのバージョン管理機能もあるため間違って編集しても復元する事ができますが、それについては別の機会にご紹介します。

以上が簡単に、SOY CMSのテンプレートファイルをDreamweaverで編集する方法となります。
今後もDreamweaverなど、htmlエディタを使って簡単にSOY CMSのテンプレートを管理する方法については、引き続き本ブログで紹介していく予定です。

Dreamweaver(R)は Adobe Systems Incorporated（アドビシステムズ社）の米国ならびに他の国における商標または登録商標です。