HOME > 門田康弘のエントリー > DreamweaverでSmartyを扱う

日本発

不完全燃焼は一酸化炭素中毒のもと

DreamweaverでSmartyを扱う

---

2006年02月14日 21:22

弊社のフレームワークに欠かせないDWとSmartyの連携。 ですが、いくら8になりたてだからといってデフォルトの仕様ではちと厳しいオーサリング状況。

大きな問題点は、Smartyほかテンプレートの最大メリットである「テンプレート同士のインクルード{include}」がDWで再現されないこと。 ヘッダー・フッターは共有化部分の筆頭なので外部cssリンクが遮断されてしまうのは痛い。 このままではリアルタイムにデザインビューを確認しながらオーサリングというDWの強みを生かすことができません。

早速、Smartyの{include}をDreamweaverで再現する方法を2点ばかり見つけました。

＜Smartyの{include}をDreamweaverで再現する方法＞ 【１】Doug Felton Web Development & Design Service 【２】Use Smarty in Dreamweaver ※僕が採用したのは【２】（Use Smarty in Dreamweave）

また、Smartyのファイル構造は、html要素とtemplates要素とをサイトルートより上の階層で分けて構築されることも多いかと思います。cssやimageのリンクが編集段階で切れてしまうのもどうにかしたいものです。 そんな時は、 ＜smartyのファイル構造をDWで再現＞ 【３】リンク作成シェル拡張 for Windows 2000/2003/XP

でシンボリックリンクを作成し、擬似的にtemplates（テンプレート格納フォルダ）配下に/images/や/css/や/js/などを設置するとかなり効率Upです。

他にもいくつかDWのsmarty拡張機能を見つけたのでご紹介します。 ＜smartyタグをアイコンで表示＞ 【４】Smarty Tags for DreamWeaver http://www.contactlensesprice.com/smarty/ 上記サイトより「dreamweaver_smartytags.zip」をダウンロード

(あるいは、dreamweaverが置かれているフォルダ内の[\Configuration\ThirdPartyTags\]) に解凍したファイル群を全て置く（フォルダではなく複数ファイルを置く）

＜DW拡張機能でsmartyタグをツールバーのアイコンから挿入できる＞ 【５】Smarty Dreamweaver Tags Extension

---

【１】smarty includeをDW　includeとして使用するhttp://www.dougfelton.com/articles/16/dreamweaver-and-smarty Doug Felton Web Development & Design Services(Doug Felton Web Development & Design Services :: Articles)

---

STEP1 C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Extensions.txt を編集

16行目の「PHP,PHP3,PHP4,PHP5:PHP ファイル」を 「PHP,PHP3,PHP4,PHP5,TPL:PHP ファイル」（末尾にTPLを追加）に書き換える。 ※dw8ではデフォルトでtpl追加されているようです

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS, RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4, PHP5,TPL,LASSO,JSP,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,WML:すべてのドキュメント HTM,HTML,HTA,HTC,XHTML:HTML ドキュメント SHTM,SHTML,STM,SSI,INC:サーバーサイドインクルード JS:JavaScript ドキュメント XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML ファイル LBI:ライブラリファイル DWT:テンプレートファイル CSS:スタイルシート ASP,ASA:Active Server Pages ASPX,ASCX,ASMX,CS,VB,CONFIG:Active Server Plus ページ CFM,CFML,CFC:ColdFusion テンプレート AS:ActionScript ファイル ASC:ActionScript コミュニケーションファイル ASR:ActionScript リモートファイル TXT:テキストファイル PHP,PHP3,PHP4,PHP5,TPL:PHP ファイル LASSO:Lasso ファイル JSP,JST:Java Server Pages JSF:Fireworks スクリプト TLD:タグライブラリディスクリプタファイル JAVA:Java ファイル WML:WML ファイル EDML:EDML ファイル VBS:VBScript ファイル VTM,VTML:VTML ファイル

STEP2 C:\Program Files\Macromedia\Dreamweaver 8\Configuration\ServerBehaviors\PHP_MySQL\ に「include_smarty.edml」を置き、内容を下記とする

<participant> <searchPatterns whereToSearch="smarty"> <searchPattern paramNames="include_url"> <[CDATA[/{\s*include\s+file\s*=\s*["|']([^"']<b>)["|'][^}]</b>}/im]]> </searchPatterns> <translator> <searchPatterns whereToSearch="smarty"> <searchPattern paramNames="smarty_includeUrl"> <[CDATA[/{\s*include\s+file\s*=\s*["|']([^"']<b>)["|'][^}]</b>}/im]]> </searchPatterns> </translator> </participant>

STEP3 C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes\ MMDocumentTypes.xmlを編集

(1)「tpl,」の文字を削除（2箇所） <documenttype id="HTML" internaltype="HTML" winfileextension="htm,html,shtml,shtm,stm,tpl,lasso,xhtml" macfileextension="htm,html,shtml,shtm,tpl,lasso,xhtml" file="Default.html" writebyteordermark="false"> → <documenttype id="HTML" internaltype="HTML" winfileextension="htm,html,shtml,shtm,stm,lasso,xhtml" macfileextension="htm,html,shtml,shtm,lasso,xhtml" file="Default.html" writebyteordermark="false">

(2)「tpl,」の文字を追加（2箇所） <documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5" macfileextension="php,php3,php4,php5" file="Default.php" writebyteordermark="false"> → <documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic" winfileextension="php,php3,php4,php5,tpl" macfileextension="php,php3,php4,php5,tpl" file="Default.php" writebyteordermark="false">

STEP4 Lastly, if you're using a CSS file (and we hope you are) we need to tell Dreamweaver to use the CSS file at design time, and the way to do that is to click on the upper right hand corner of the Design panel. If you don't know where that is, you can also go to Window->CSS Styles in the menu up top in Dreamweaver. Again, click in the upper right hand corner of that panel and you'll see a menu choice "Design-time" which you can select and then browse to your CSS file, select it, and voila... your include files should now appear in Code View as text and in Design View a fully displayed page. One odd hitch we had: we declared two CSS files in our header, one for screen and one for print and for some reason or another, we could not get the above configuration to work until we deleted the line declaring the print version of our CSS file.

---

【２】smarty includeパスをDWで認識させる Use Smarty in Dreamweaver http://smarty.incutio.com/?page=SmartyDreamweaver

---

C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Translators に下記内容のファイル（任意.htm）を設置

うまくいかない場合は、下記の行を書き換える smartyRegExp = new RegExp("(" + LDELIM + "[ \t]<b>include[ \t]+file[ \t]</b>=[ \t]<b>[\"|'][ \t]</b>([^\"']<b>)[ \t]</b>[\"|'][ \t]*" + RDELIM + ")", "im"); smartyRegExp = new RegExp("(" + LDELIM + "[ \t]<b>include[ \t]+file[ \t]</b>=[ \t]<b>[\"|'][ \t]</b>([^\"']<b>)[ \t]</b>[\"|']+([^}]*)" + RDELIM + ")", "im");

<html> <head> <title>Smarty Include Tag Translator</title> <meta http-equiv="Content-Type" content="text/html; charset="> <script language="JavaScript"> </p> <p> /** </p> <blockquote><pre>* This translator will only work on this format: * {include file="foo.tpl"} * filename must surrounded by double or single quotes * if 'assign' or '[var]' attribute exists, it will not tranlated * the include tag must be in one line * extra spaces are allowed, e.g. { include file = " foo.tpl " } * all templates file suppose to stay in the same top 'templates' folder * you can include subfolder in the include tag * all other formats will be displayed as a simple 'inc' icon */ </pre></blockquote> <p> /** </p> <blockquote><pre>* define smarty delimiters </pre></blockquote> <p> */ </p> <p> var LDELIM = "{"; var RDELIM = "}"; </p> <p> function getTranslatorInfo() { var transArray = new Array(6); transArray0 = "SMARTY_INCLUDE"; transArray1 = "Smarty Include Translator"; transArray2 = "0"; transArray3 = "1"; transArray4 = LDELIM + "[ \t]*include"; transArray5 = "byExpression"; return transArray; } </p> <p> function translateMarkup( docNameStr, siteRootStr, inStr ) { var pos = 0; var patternFound = false; var outStr = ''; var depPath = ''; var remainInStr = inStr; smartyRegExp = new RegExp("(" + LDELIM + "[ \t]<b>include[ \t]+file[ \t]</b>=[ \t]<b>[\"|'][ \t]</b>([^\"']<b>)[ \t]</b>[\"|'][ \t]*" + RDELIM + ")", "im"); while ((pos = remainInStr.search(smartyRegExp)) >= 0) { var matchStr = RegExp.$1; var templateFileName = RegExp.$2; var templateFullName = templateFileName; var smartyFile; outStr += remainInStr.substr(0, pos); smartyFile = new File(templateFullName, docNameStr); if (smartyFile.exists()) { smartyContent = smartyFile.getContents(); if (smartyContent.length <= 0) { // this is an empty file smartyContent = " "; } depPath = smartyFile.getAbsolutePath(); } else { // file doesn't exist smartyContent = "File Error!"; } </p> <p> // Do translation outStr += '<MM:BeginLock translatorClass="' + getTranslatorInfo()0 + '" type="smartyInclude" orig="' + escape(matchStr) + '"'; if (depPath.length > 0) outStr += ' depFiles="' + depPath + '"'; outStr += '>' + smartyContent + '<MM:EndLock>'; </p> <p> // Re-search text following match remainInStr = remainInStr.substring(pos + matchStr.length); // Remember that at least one translation was performed patternFound = true; } outStr += remainInStr; return patternFound ? outStr : ""; } </script> </head> <body> </body> </html>

---

【３】smartyのファイル構造をDWで再現 リンク作成シェル拡張 for Windows 2000/2003/XP http://eside.homeip.net/free/symlink2k.html

---

ファイルをドラッグ＆ドロップでコピーする感覚で、シンボリックリンク（※）を作成することができる。

smartyによるサイト構築をする場合 .tplファイルを格納するフォルダ（例/templates/）と、 .html要素を格納するフォルダ(例/html/)がサイトルートの上階層で分化される場合がある。

例：smartyによるサイト・ディレクトリ構成 /page/ /html/ /css/ /images/ ・・・ /lib/ /templates/ /header/header.tpl /main/main.tpl /templates.c/ 　・・・ tplは/templates/配下に格納され、tpl同士の参照は/templates/をサイトルートとした相対パスで記述する。 （/page/templates/main/main.tplがheader.tplをインクルードするには下記のように記述する。 {include file="header/header.tpl"}

テンプレートの編集では、/html/配下のimagesやCSSを参照するので、DWで編集する際は 「サイトの編集」で/page/をサイトルートとする場合が多いが、これだと、tplの参照パスにずれが生じてしまう。

よって、/templates/配下に「/images/」「/css/」のシンボリックリンクを作成し、DWでリアルタイムにCSS、imageを参照し、かつ smaty includeも機能させると念願のDW内でデザインプレビューが可能になる。

※【シンボリックリンク（ジャンクション）】 ファイルに別名をつけることができる(別名をつけることを「リンクを張る」と表現する)。ハードリンクとの違いは ・ディレクトリにも張ることができる ・ドライブをまたいで張ることができる ・シンボリックリンクは別名に過ぎないので、本名を削除した時点で本体が削除されてしまい、別名で参照することもできなくなる。 ・リネームして同名のファイルを作り直すと、シンボリックリンクは同名で作り直されたほうのファイルを指す 【ハードリンク】 1つのファイルに複数の名前を付けることができる。 ファイルの中身は共用して名前だけを増やすので、コピーした場合と比べ ・ディスク領域を節約できる。 ・片方の名前で開いたものを更新すると、ほかの名前で開いたものにも自動的に反映される。 ・すべての名前は対等なのですべての名前を削除するまでファイル本体が削除されることはない ・リネームして同名のファイルを作り直すと、リネームされたファイルを指す

---

【４】smartyタグをアイコンで表示 Smarty Tags for DreamWeaver http://www.contactlensesprice.com/smarty/

---

上記サイトより「dreamweaver_smartytags.zip」をダウンロード C:\Program Files\Macromedia\Dreamweaver 8\Configuration\ThirdPartyTags\ に解凍したファイル群を全て置く（フォルダではなく複数ファイルを置く）

---

【５】DW拡張機能でsmartyタグをツールバーのアイコンから挿入できる Smarty Dreamweaver Tags Extension http://smartydwt.klitsche.org/

---

上記サイトより「smartyDWT.zip」をダウンロード。 解凍後エクステンションファイルをダブルクリックでインストール完了

---

日本発

不完全燃焼は一酸化炭素中毒のもと

トラックバックURL