Dreamweaverのテンプレートと連携するスニペットを作ってみました

プログラム(機能)関連の開発の話題
アバター
yama
管理人
記事: 2846
登録日時: 2009年7月29日(水) 02:50

Dreamweaverのテンプレートと連携するスニペットを作ってみました

投稿記事by yama » 2009年11月29日(日) 10:29

※実際にちゃんと試してないので(しかも今朝思いつきで一部を書き換えて試してない)何か問題があるかもしれませんが、だいぶ前に作ったスニペットなので公開しときます。そんなに完成度は高くないので、変だと思ったところがあれば適当に改良してやってください。

Dreamweaverのテンプレートファイル(拡張子dwt)及びテンプレートで作った通常のインスタンスファイル(拡張子htmlなど)をMODxのテンプレートとして読み込みます。動作イメージはスニペット「IncludeFile」と似ていますが、当スニペットでは [*content*] などのリソース変数を書く必要がありません。Dreamweaverの「編集可能領域」をそのままリソース変数・テンプレート変数に変換しますので、編集可能領域名をあらかじめ「content」などにしておいてください。

編集可能領域名をMODxの変数に変換するので、編集可能領域内にダミーのデザインコードを書いておくことができます。デザイナーが「こんな感じで作ってみました」と作ったテンプレートをそのまま何も手を加えずに使えるので便利です。デザイナーはMODxのことを意識することなくサイト構築に参加できます。

ライブラリ名はチャンクに変換します。WayfinderやDittoなどで出力する部分をライブラリブロックとして作っておけば、デザイナーはメニューや新着情報一覧のブロックをダミーのイメージで作り込んで、そのままFTPでアップロードしてテンプレートとして適用させることができます。

ただしMODx担当者は、あらかじめこれらのブロックの出力をダミーのイメージのとおりに作り込んでおく必要はあります。いったん作ってしまえば、MODx担当者が出張などで留守にしていても、デザイナーは自分の判断でテンプレートのデザインに手を加えることができるため便利です。

Templatesディレクトリ(Dreamweaver既定)のdwtファイルを読み込む

コード: 全て選択

[[dwtinc? &file=`mysite.dwt`]]

任意のディレクトリに置いたテンプレートファイルを読み込む

コード: 全て選択

[[dwtinc? &file=`/assets/templates/mysite.html`]]

タイトルのパターンを指定する

コード: 全て選択

[[dwtinc? &file=`mysite.dwt` &title=`[*pagetitle*]-[(site_name)]`]]


    編集可能領域名をMODxの変数名と合わせる
    Wayfinderなど動的出力ブロックはライブラリ(チャンク)で
    dwtファイルを読み込む場合は画像やリンク記述は絶対パスで( /images/pict.jpg など)
がポイントです。(※dwtファイルでの相対パスの扱いはいずれ対応予定)

IncludeFileだとDreamweaverでテンプレートデザインに手を入れるたびにMODx関連の記述を戻したり消したりするのが面倒だと思いますが、これを使えばDreamweaverで作ったファイルがそのまま使えるので便利だと思います。TYPO3などでは昔からできてたことですが、習得しやすいMODxでこういうことができるとよいなと思いました。

コード: 全て選択

<?php

/* Setting */
if(empty($title)) $title = '[*pagetitle*]|[(site_name)]';

/* Ready */
$search_dir = MODX_BASE_PATH . Templates . '/';
if(strpos($file, '/') === 0)
{
  $file  = MODX_BASE_PATH;
  $file .= preg_replace('@^' . MODX_BASE_URL . '@', '', $file);
}
elseif(strpos($file, '/')===false)
{
  $file = $search_dir . $file;
}
$tv_pattern = '<!-- [a-zA-Z]+?BeginEditable.+?name="(.+?)".+?[a-zA-Z]+?EndEditable[^>]+>';
$tv_pattern = '@' . $tv_pattern . '@ms';
$ck_pattern = '<!-- #BeginLibraryItem "/Library/(.+?)\.lbi".+?<!-- #EndLibraryItem[^>]+?>';
$ck_pattern = '@' . $ck_pattern . '@ms';

/* Main */
$tplfile = file_get_contents($file);
$tplfile = preg_replace($tv_pattern, "[*$1*]", $tplfile);
$tplfile = str_replace('[*doctitle*]', '<title>' . $title . '</title>', $tplfile);
$tplfile = preg_replace($ck_pattern, '{{' . "$1" . '}}', $tplfile);
return $tplfile;
?>
kazuike
メンバー
メンバー
記事: 453
登録日時: 2009年8月12日(水) 12:53

Re: Dreamweaverのテンプレートと連携するスニペットを作ってみました

投稿記事by kazuike » 2009年11月29日(日) 12:11

私もyamaさんと同じようなことを考えていて、ちょっとびっくりしました。 :o
(考えてみれば当然なんですが)

私の方は、実装方法がちょっと違ってて、
プラグインとモジュールを組み合わせて、…
ということをやりかけていまして、
12月か1月ぐらいには表に出したいと考えているのですが…

そういえば、6月の情報交換会に参加された人には、このことを何人かにお話ししましたね。
それから、もう5ヶ月も経っている… :oops:
▼ウェブ屋のCMS→modxヒキダス流(備忘録)
http://d.hatena.ne.jp/hikidas_ikeda/
アバター
yama
管理人
記事: 2846
登録日時: 2009年7月29日(水) 02:50

Re: Dreamweaverのテンプレートと連携するスニペットを作ってみました

投稿記事by yama » 2010年5月30日(日) 12:01

久しぶりにコードを眺めてみたら各部がおかしいことに気がつきました。開発途中の中途半端なコードを間違って貼り付けてしまったのかも。
ろくにテストしてないですが、修正版をアップしておきます。
なお、dwtファイル中の相対パスを自動的に変換する機能を追加しておきました。dwtファイルでは相対パスはディレクトリひとつぶんずらして記述されますが、これを自動的に修正します。よく確認してませんがこれで動くはず。

エンコード変換を自動的に行なうものも添付しておきます。静的ファイルのページも同時に運用したい時に便利だと思います。
添付ファイル
dwtinc.zip
(823 バイト) ダウンロード数: 136 回
dwtinc_mbconvert.zip
(949 バイト) ダウンロード数: 582 回

“開発関連の話題” へ戻る