 |
-1 |  |
||
1-10 of 34
「Tplcutter」を用いた 超高速ウェブサイト開発 (使い方編) ECWorks 滝下 真玄(MASA-P) http://www.ecworks.jp/ info@ecworks.jp
本スライドは 「CakePHP カンファレンス東京」内の ライトニングトーク中で 省略してしまった実演をベースに 解説を追加したものです。 急いで作成したため 至らない部分もあるかもしれませんが このスライドを通じてTplcutterを より知っていただければと思います。
【Part 0】 準備
【 0 - 1:サイトイメージの作成】 それぞれの開発スタイルがあると思いますのであくまでも一例に なるのですが、デザイナーとのやりとりを前提とする以上、 ローカル内にサイトイメージを作った方がやりやすいと思います。 今回は、CakePHPシステムでの使用を前提とし、全てのファイルを 含んだサイトイメージを作成してから、そこでの作業をサーバに 反映させることを想定して説明しようと思います。 まずはCakePHPシステム一式を用意し、サイトイメージを 作成します。database.php等の設定も分かる範囲で今のうちに 行っておくと良いでしょう。
【 0 - 2:Tplcutterのインストール】 次に、Tplcutterを入手し解凍 したものを「/path/to/vendors/」に インストールします。基本的には 解凍イメージをそのままコピー してください。 「/path/to/vendors/shells/」に tplcutter.phpを忘れずにコピー してください。 またtplcutter直下にあるtplcutter.phpはPHP CLI版であり 別物ですので注意してください。
【 0 - 3:サーバへアップロード】 サイトイメージが出来たら、サーバにアップロードします。 所定の位置にサーバイメージを アップロードしてください。 とりあえずフロントエンドで Cakeの画面を確認しておきます。 特に「/path/to/app/tmp/」の パーミッション設定を忘れがち ですので、注意しましょう。
【 0 - 4:Tplcutterの動作確認】 Tplcutterイメージ中には、既に サンプルテンプレートが実装されて いますので、これを使って 動作確認をします。 Cakeコンソールから、Tplcutterを 呼び出してみます。 $ cd /path/to/cake/console $ ./cake tplcutter process Welcome to CakePHP v1.2.0.7692 RC3 Console --------------------------------------------------------------- App : app Path: /path/to/app --------------------------------------------------------------- --------------------------- Tplcutter version0.2.0 Copyright (C) 2008 ECWorks. --------------------------- Use default configuration. Target app : app Type : cake Source directory : /path/to/vendors/tplcutter/app/ Distination directory : /path/to//app/views/ Webroot directory : /path/to/app/webroot/ process... (以下略) 実行すると、次のように処理が 表示されていきます。 ※例ではcakeシェルで実行していますが、環境により cakeをシェルで呼び出せない場合があります。 この場合は「php cake.php」でコンソールを実行します。
【 0 - 4:Tplcutterの動作確認】 コントローラが実装されていないので、解凍ファイルに添付されて いるサンプルコントローラを所定の 位置にアップロードしてください。 アップロード後、「/mypages」を 呼び出してみると… 次のように表示されたら、正常に動作しています。 これで、Tplcutterが実際に 使用できるようになりました。
【Part 1】 デザイン制作・実装
【 1 - 1:テンプレートのディレクトリ構造】 実際に編集するテンプレートは、通常「/path/to/vendor/tplcutter/ app/default/」ディレクトリに 展開することになります。 このディレクトリが、webrootの 仮想的なディレクトリイメージと なり、テンプレートファイル以外が Tplcutterによってコピーされます。 デザイナーに依頼する際は、 右図のようにデータを格納して もらうようにしましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title><?php echo $title_for_layout; ?></title> <link rel="stylesheet" type="text/css" href="css/sample.css"> </head> <body> <!-- &&layout&& --> <!-- &&layout&& --> </body> </html> <!-- ##ｍｙelement## --> myelementエレメントの内容 <!-- ##ｍｙelement## --> <!-- %%index%% --> indexアクションの内容 <!-- %%index%% --> <!-- %%sample%% --> sampleアクションの内容 <!-- %%sample%% --> 【 1 - 2:テンプレートのフォーマット】 テンプレートの拡張子は、 実際には何でも構いませんが、 デフォルトではhtml, php, ctp, thtmlの拡張子をもつファイルを テンプレートファイルとみなして 加工されます(設定ファイルで 変更が可能です)。 Tplcutterは、右図のように コメントタグ内に動作を記述することで、各種ファイルに切り出し ます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title><?php echo $title_for_layout; ?></title> <link rel="stylesheet" type="text/css" href="css/sample.css"> </head> <body> <!-- &&layout&& --> <!-- &&layout&& --> </body> </html> 【 1 - 2:テンプレートのフォーマット】 ■「<!-- &&layout&& -->」 レイアウトを指定します。 ２つで挟まれている範囲の 外側をレイアウトと見なして ファイルを書き出します。内側は 「<?php echo $content_for_layout; ?>」 で置き換えられます。 ファイル名はもとのテンプレートファイル名のままで、この名前がコントローラ名となります。
<!-- %%index%% --> indexアクションの内容 <!-- %%index%% --> <!-- %%sample%% --> sampleアクションの内容 <!-- %%sample%% --> 【 1 - 2:テンプレートのフォーマット】 ■「<!-- %%(アクション名)%% -->」 アクションビューを指定します。指定したアクション名を ファイル名としたファイルが生成 されます。デフォルトはctp形式で 出力されます。 またアクションビューは、この テンプレートファイルのファイル名 (＝コントローラ名)を名前とした ディレクトリに格納されます。
<!-- ##ｍｙelement## --> myelementエレメントの内容 <!-- ##ｍｙelement## --> 【 1 - 2:テンプレートのフォーマット】 ■「<!-- ##(エレメント名)## -->」 エレメントを指定します。指定 したエレメント名をファイル名と したファイルが生成されます。 デフォルトはctp形式で出力 されます(設定で変更可能です)。 ※他にも動作として割り当てられたコメント タグがありますが、今回は説明を割愛します。
【 1 - 3:テンプレートの制作(デザイナー作業)】 では、実際の制作事例に 当てはめてみましょう。 今回は来日されたGarrett氏に喜んでもらえるよう、日本の文化をテーマにしたサイトを 作ることにしました。 index page1 アクションビューは、index, page1, それから見えて いませんがpage2, page3が存在しています。
【 1 - 4:サーバへアップロード】 制作されたテンプレートを サーバへアップロードします。 データは「丸ごとコピー」が 基本です。 「ミラーリング アップデート」の機能があれば それでも構いませんが、 今回は初回ということで、 丸ごとにしましょう。 ※ミラーリングアップデートに ついては後述いたします
【 1 - 5:Tplcutterの実行】 アップロードが終わったら、 いよいよTplcutterの実行です。 何度も説明していますが、 コマンドは1回実行するだけです。 さて、うまく反映されたか見て みましょう。 $ cd /path/to/cake/console $ ./cake tplcutter process Welcome to CakePHP v1.2.0.7692 RC3 Console --------------------------------------------------------------- App : app Path: /path/to/app --------------------------------------------------------------- --------------------------- Tplcutter version0.2.0 Copyright (C) 2008 ECWorks. --------------------------- Use default configuration. Target app : app Type : cake Source directory : /path/to/vendors/tplcutter/app/ Distination directory : /path/to//app/views/ Webroot directory : /path/to/app/webroot/ process... (以下略)
【 1 - 5:Tplcutterの実行】 うまく処理が出来たようです。 このように、丸ごとコピーと コマンド１発で、サイトの 実装をすることが出来ます。
【Part 2】 デザイン修正・更新
ちょっと余談になるのですが… 「CakePHP カンファレンス東京」中、私は 体調があまり良くありませんでした。 実は直前で徹夜作業をしていたからです。 LTの準備も前日に終わり、最終チェックで 実演データを確認していた前日の晩、 災難が降りかかりました。
目の前を上司が通りかかり、 「なんだこれは？」と聞かれました。 「講演で使う実演データですけど…」 「…こんな古い文化をわざわざ紹介するのか？」 「えっ？」 「バカヤロウ、日本の恥さらしが！ もっと新しい文化にしろ!!」
そんなわけで、帰宅してから 急遽データを作り直す羽目になりました(涙)。 というわけで、ここから先は更新編です。
【 2 - 1:デザイナーにデータを返却】 ビューに適用してしまった テンプレートを元に戻すのはとても大変です。本来なら、全ての アクションビューに対して レイアウトを結合したり、画像 などのパスを変換したり しなければなりません。 その点、Tplcutterなら簡単です。tplcutter内にあるデータを再度 デザイナーに渡すだけでOKです。
【 2 - 2:テンプレートの修正(デザイナー作業)】 徹夜して必死で修正しました。 それではご覧ください!! …はい、見事にやっちまい ました(笑)。徹夜の作業なんて こんなもんですよ、はい。 多少ぶっちゃけないとやって られません。
【 2 - 2:テンプレートの修正(デザイナー作業)】 今までのデータを流用して 作ったデータですので、ページ 構成やアイテムの配置などは ほぼ変わっていません。 しかし、リンク部分にイメージを 使用していたり、そもそも スライスを利用した１枚絵のため、 もの凄い数のイメージデータが 存在しています。 このテンプレートをもし手動で 更新させるとしたら、きっと 結構な時間をとられるでしょう。
【 2 - 3:サーバへミラーリングアップロード】 では、そんな恐ろしい更新 データを、早速Tplcutterで反映 してみましょう。 今回のスライドではWinSCPを 使っていますが、WinSCPには 「ミラーリングアップロード」という 便利な機能があります。この 機能を用いると、サーバ内の ファイルイメージと同期をとり、 更新や不要データの削除を してくれます。
【 2 - 3:サーバへミラーリングアップロード】 また、この機能は、ミラーリング終了後もディレクトリを監視 し続けるため、更新された ファイルは片っ端からサーバに上げてくれます。 プログラムを修正する際にも 便利ですよ！
【 2 - 4:Tplcutterを再実行】 アップロードが終わったら、 再度Tplcutterの実行します。 毎度毎度繰り返しになりますが、 コマンドは1回実行するだけです。 コマンドの内容も全く同じです。 さて、うまく反映されたか見て みましょう。 $ cd /path/to/cake/console $ ./cake tplcutter process Welcome to CakePHP v1.2.0.7692 RC3 Console --------------------------------------------------------------- App : app Path: /path/to/app --------------------------------------------------------------- --------------------------- Tplcutter version0.2.0 Copyright (C) 2008 ECWorks. --------------------------- Use default configuration. Target app : app Type : cake Source directory : /path/to/vendors/tplcutter/app/ Distination directory : /path/to//app/views/ Webroot directory : /path/to/app/webroot/ process... (以下略)
【 2 - 4:Tplcutterの再実行】 バッチリ更新完了です!! データを受け取ってから (というか今回はデータ作成 まで自分で全部やっちゃって いますが)、サーバに上げて コマンドを実行するのに １分足らずです。 これが手動更新だったら、いったいどのくらいの時間が かかるでしょう？ あまり 想像したくありません。
いかがでしたでしょうか？ 私は、どんなに忙しいときでも、 コーヒー一杯を飲む時間くらいはもてるようにと、 このツールを作りました。 皆さんも、このツールでコーヒー一杯の余裕を 是非作ってくださいね(上司には内緒でね！)
Tplcutterのダウンロード(Ver0.2.0) ECWorks Blog(仮) http://ecw.seesaa.net/ ダウンロード欄の「Tplcutter」からたどれます 近い将来、ブログを移動するかもしれません。 移動した場合は別途アナウンスさせていただきます。
最後までご覧いただきまして ありがとうございました!! 【ご注意】 事例の中に、多少演出した箇所がありましたことを ご理解いただきますようお願いいたします
Tplcutterを用いた超高速ウェブサイト開発(使い方編)
Summary: 「CakePHPカンファレンス東京」内で、ライトニングトークを行った際に、予定していた実演があまり出来なかったため、それを用いてさらに加筆したものを公開します。
No comments posted yet
Comments