DreamweaverテンプレートとSmartyテンプレートを同時に使うかつ、Dreamweaverで快適に編集する。

DreamweaverテンプレートとSmartyテンプレートを同時に使うかつ、Dreamweaverで快適に編集する。

今回やりたいこと

smartyテンプレートをDreamweaverで編集したい。
・さらにsmartyテンプレートにDreamweaverテンプレートを適用したい。
・でDreamweaverテンプレートから生成した普通のhtmlファイルもsmartyテンプレートファイル(tpl)もどっちも正常にプレビュー表示できる、かつブラウザでの実行も正常に表示したい!


結論としては実現可能!

前提

まず、そもそもsmartyを使う場合は文字コードSJIS(Shift_JIS)だと正常に表示ができない場合があるので、euc-jpもしくはutf8にしておいたほうがいい。
どうしてもShift_JISがいい場合は↓を参照。


ninnin.net blog: SmartyでSJISを使う

やり方

快適にSmartyテンプレートをDreamweaverで編集できるように

↓からsmartydwt_hack.zipをダウンロードして解凍してできるsmartyDWT.mxp(Dreamweaverエクステンション)をインストール。


DreamweaverでSmarty テンプレートをイケてる感じで編集しよう。 : ::yossy.blog::


これでまず、快適にSmartyテンプレートをDreamweaverで編集できるようになりました。

Smartyテンプレート(tpl)編集中にcssや画像がきちんと表示されるように

Smartyを使うとき、通常はサイトルートの下にtemplatesディレクトリを作ったりしますが、
そうすると、


「テンプレート呼び出し元のファイルとテンプレートファイルの置いてあるパスの深さが違うために、プレビュー画面でtpl中に記述されているcssjavascriptが正しく適用されず画像も表示されない→結果すごく崩れたプレビュー」


これを解決するためには、


Smartyのtemplates用ディレクトリをサイトルートと同じにする」
(設定方法はSmartyのマニュアルを参照)

これだけで解決です。つまり、

/index.php
/index.tpl
/admin/index.php
/admin/index.tpl


という感じにしてやれば常にテンプレート呼び出し元とテンプレートが同じパスにあるのでプレビューも綺麗。


(追記2008/06/29)
ちなみにこのようなセッティングにしていると、直でtplファイルにアクセスされたときにテンプレートファイルが不完全な感じで読み込まれて表示されちゃっていやなので、
これは.htaccessファイルを利用してtplファイルに直接アクセスできないように制御しておきましょう!!


.htaccessの記述例

<Files ~ "\.tpl$">
  deny from all 
</Files>

(追記2008/05/15)
yossyさんにコメントで教えていただいたのですが、smartyのtemplatesデイレクトリと呼び出し元ファイルのパスの深さの問題を解決するにはシンボリックリンクを貼るという方法もあるみたい↓


ホームページ制作日誌 - オーサリングソフトにおける相対パスの問題
Dreamwerver で Smarty (masha.webTechLog)
Windowsでシンボリックリンク - himazu blog
リンク/ジャンクション作成ツール


でもさらにDreamweaverテンプレートから呼び出し元と異なるパスの深さにtplファイルを生成する場合はもうひとつやっかいな問題があるな〜(詳細はコメント参照)


(追記2008/05/15)
ちなみに過去、framework(具体的にはcakephp)のテンプレート編集のしづらさ解消の別のアプローチとしてこんなDreamweaverExtensionも作ってみました↓
PublishX 〜htmlファイルの一部分を任意のパス・任意の拡張子で書き出すDreamweaver Extension〜 - Kemworld::Diary

ほか快適に編集するためのポイント

テンプレートでの編集可能タグ属性の指定

Dreamweaverの編集可能領域はタグの中の属性部分には設定できません。
たとえばbodyタグのidのみページごとに変更したい場合は、Dreamweaverテンプレートの編集可能タグ属性の指定を行い、テンプレートから生成したページごとにid属性を変更できるようにします。


やり方↓

テンプレートでの編集可能タグ属性の指定

ページに複数の編集可能な属性を設定して、テンプレートユーザーがテンプレートから作成されたドキュメントで属性を修正できるようにすることができます。サポートされているデータタイプは、テキスト、Boolean (真/偽)、カラー、および URL です。
編集可能タグ属性を定義するには :

   1. ドキュメントウィンドウで、編集可能なタグ属性を設定するアイテムを選択します。
   2. [修正]-[テンプレート]-[属性を編集可能にする] を選択します。

      [編集可能なタグ属性] ダイアログボックスが表示されます。
   3. 編集可能にする属性ごとに、ダイアログボックスに情報を入力します。

      ダイアログボックスへの入力の詳細については、[編集可能なタグ属性] ダイアログボックスのオプションの設定を参照してください。
   4. [OK] をクリックします。

      編集可能なタグ属性を作成すると、コードにテンプレートパラメータが挿入されます。テンプレートドキュメントには属性の初期値が設定され、テンプレートからドキュメントが作成されるとパラメータを継承します。これにより、ユーザーはテンプレートから作成されたドキュメント内のパラメータを編集できるようになります (詳細については、テンプレートプロパティの修正を参照してください

テンプレートでの編集可能タグ属性の指定


ページごとの属性の変更方法(ちょっとわかりづらい)↓
[編集可能なタグ属性] ダイアログボックスのオプションの設定

#  テンプレートから作成されたドキュメントを開きます。
# [修正]-[テンプレートプロパティ] を選択します。

[テンプレートのプロパティ] ダイアログボックスが開き、使用できるプロパティのリストが表示されます。このダイアログボックスには、オプション領域および編集可能タグ属性が表示されます。
# [名前] リストでプロパティを選択します。

ダイアログボックスの下部の領域に、選択したプロパティのラベルと割り当てられている値が表示されます。
# プロパティラベルの右側のフィールドで値を編集し、ドキュメントのプロパティを修正します。


たとえばフィールドの値を

{$id}


とかにしておけば、smartyテンプレート呼び出し元のphpファイルで

<?php
$smarty->assign("id","Home");
?>


とassignしてばっちり表示できる(これわりと重要)。

javascriptSmartyによるパースを回避することでエラーを防ぐ。

BooLog 1.0 | SmartyとJavaScriptより

<script language="Javascript" type="text/Javascript">

<!--

function func() {

  なんとか;

}

//-->

</script>


は{}のせいでsmartyでパースエラーが発生してしまうので、

{literal}

<script language="Javascript" type="text/Javascript">

<!--

function func() {

  なんとか;

}

//-->

</script>

{/literal}


というふうにしてSmarty構文解析を回避するか、

<script language="Javascript" type="text/Javascript" src="なんたら.js"></script>


というふうに外部ファイル読込にする。


オススメは

<!-- {literal} -->

<script language="Javascript" type="text/Javascript">

<!--

function func() {

  なんとか;

}

//-->

</script>

<!-- {/literal} -->


とDreamweverテンプレートに記述しておけば、そのテンプレートから普通のhtmlを生成したときもsmartyタグはhtmlコメントとしてスルーされるので問題なく正常に表示できる(これも重要)。


以上のようにしておくと、


Dreamweaverテンプレートから普通のhtmlファイルを生成した場合もsmartyテンプレートファイル(tpl)を生成した場合、どちらも正常にプレビューを表示できるかつブラウザでの表示も正常」


という感じになる。

だからこうしておけば


phpとか必要ないとこは普通にDreamweaverテンプレート使ってhtmlファイル生成。
php必要なとこはDreamweaverテンプレート使ってsmartyテンプレート作成。


というのをストレスなく行うことができる。
ほぼこんな感じで快適にDreamweaversmartyテンプレートを快適に編集できるのでは。


※ただ、Dreamweaverテンプレートからtplファイルを生成すると相対パス絶対パスに書き換えられたままになっちゃうのでそこは一括置換とかで相対パスに戻さないといけない。
(どっかいじればどうにかなるんだろうけど、大変そうなので深く追求してない)


もしくは「一度htmlファイルとして生成して保存→拡張子をtplに変える」とか。

もっと快適にするには!

さらにもう一歩踏み込んで、


「デザインに関わる部分(htmlとかtpl)はDreamweaverで編集、プログラム部分(php)はEclipseのPDTで編集」


とするとすこぶる快適!


DreamweaverEclipseもどちらも外部エディタ等でプロジェクトに含まれるファイルが編集されると自動的にそれを察知して同期・更新してくれるのですごく快適です!!
やり方としてはDreamweaverのサイトルートとPDTのプロジェクトルートを合わせるだけです♪


Eclipse PDTに関しては↓を参照。
Eclipse3.3でPDT1.0とXdebugを使ってPHP開発環境を整える。 - Kemworld::Diary