ECWorks Blog

ECWorks Blog

CakePHPを中心としたサイト開発情報をメインに公開。新しもの好きなので時々製品レポートなんかも。

【Tplcutter】サイト開発スタイル紹介

本当は動画で実演を撮って紹介するのがアメリカンスタイルで面白いのですが、ちょっとやるのに時間がかかりそうなのでまた今度にしますが、サイト公開が終わったことですし、ちょっとその話題にも触れたりしましたので、簡単にTplcutterを用いた開発スタイルをご紹介します。

Tplcutterを使うと、CakePHPをはじめとするフレームワークでの、ビューテンプレートの制作及び管理が大変に楽になります。基本的にデザイン作業は普通のhtmlやPHPファイルを扱う間隔で編集し、それをTplcutterに通すことで、適宜加工し、フレームワークの所定の位置にテンプレートファイルを自動で配置します。テンプレートそのものだけでなく、画像など関連するファイルについても対象となるため、実質コマンド一発で全てのデザインがフレームワーク内に適用されます。

さて、概要はこのくらいにしておいて、私が実際に使用しているツール類をご紹介します。

【サーバ側】
・CakePHP1.2.0.7296
・Tplcutter0.2.0

【クライアント側】
・PuTTY0.60-jp
・WinSCP4.1.6
・WZEditor4/5
・DreamweaverMX2004
・GoLive6
(全てWindowsアプリです)

ちなみに、私はたいていはWZで手打ちですが、CSSをあてたりするときにデザインツールを使用します。会社ではDreamweaverを、家ではGolLiveを使用しています(自費で持っているのはGLだけなので、CS4を是非とも欲しい!)。

さて、編集方法なのですが、まずはローカル内にサーバイメージを作成し、それをサーバに上げるようにします。こうした方が、WinSCPの「ミラーリングアップロード」機能を使いやすいからです。作業用のフォルダ内にまずCakeを展開し、次にTplcutterを/vendorsフォルダに展開します。database.phpを編集したあと、サーバ側のhtdocsに転送して、動作確認をします(/app/tmp以下のパーミッション設定を忘れずに)。ついでに、PuTTYを起動し、コマンドラインでTplcutterもちゃんと動くか調べます。

準備が整ったところで早速編集にはいるわけですが、デザイン作業自体はローカル側で適当にやって構いません。場合によってはデザイナーに外注する場合もあるでしょうから、Tplcutterのテンプレート置き場の通りに画像等を配置してもらうように指示して、別の場所で作業してもらってもOKです。
テンプレートの作業が終わったら、Tplcutterのテンプレート置き場に正しく配置します。

プログラム側も、出来る範囲で作業を進めておきます。モデルやコントローラを作成し、それをローカルのサーバイメージ内に正しく配置します。ビューがないとまともに動かないため、適度で良いと思います。

とりあえず最初の反映ということで、WinSCPのミラーリングアップロードを行います。ちなみに、普通にアップロードしても良いのですが、「コマンド→ミラーリングアップロード」を実行すると、まず最新のファイルを調べて転送し、その後監視を続けて更新されたファイルを逐次アップロードしてくれますので、修正しながら動作確認をするのに大変便利です。

そのあとTplcutterをコマンドライン上で実行し、ビューを反映させます。
それらしいファイルが生成されたことを確認して、サイトを表示してみます。

最初のうちは、デザインの修正とプログラムの修正が混在して大変かもしれません。ケースバイケースですが、私の場合はまずWinSCPのミラーリングアップロードを保持したまま、WZで処理が通るまでプログラムを修正し続けます。

プログラムがこなれたところでデザインの修正なのですが、自分自身でやる場合はWinSCPのミラーリングアップロードをTplcutterのテンプレート置き場を対象にして、Dreamweaver(GoLive)で修正していきます。こうすることで、余分な場所を監視することがないため、ストレスが少ない気がします。ツール側で修正して保存すると、片っ端からサーバにアップロードしてくれます。
デザインを見たくなったところで、再びコマンドラインでTplcutterを実行します。基本的に全てのデザインが1コマンドで修正されます(場合によってはブラウザのキャッシュに引っかかる場合もあるので、注意が必要です)。

あとは、プログラムとデザインを交互に修正、という感じです。

Sambaを用いていてイメージが直接いじれる方はもっと簡単で、ローカルイメージとWinSCPがいりません。普通に編集していただいて、Tplcutterの実行をするだけです。XAMPPをお使いの方も、コマンドラインでTplcutterを呼び出す方法は変わりないと思います。

ざっと駆け足で紹介しましたが、このように編集ツールとの連携がとても簡単になります。直接テキストエディタでビューテンプレートを作りだしている人には向きませんが、CSSなど視覚的に編集したい場合に便利ですので、是非ご利用ください(宣伝)。




Comments are closed.