Tplcutterを用いた超高速ウェブサイト開発(使い方編)

-1

No comments posted yet

Comments

Slide 1

「Tplcutter」を用いた 超高速ウェブサイト開発 (使い方編) ECWorks 滝下 真玄(MASA-P) http://www.ecworks.jp/ info@ecworks.jp

Slide 2

本スライドは 「CakePHP カンファレンス東京」内の ライトニングトーク中で 省略してしまった実演をベースに 解説を追加したものです。 急いで作成したため 至らない部分もあるかもしれませんが このスライドを通じてTplcutterを より知っていただければと思います。

Slide 3

【Part 0】 準備

Slide 4

【 0 - 1:サイトイメージの作成】  それぞれの開発スタイルがあると思いますのであくまでも一例に なるのですが、デザイナーとのやりとりを前提とする以上、 ローカル内にサイトイメージを作った方がやりやすいと思います。  今回は、CakePHPシステムでの使用を前提とし、全てのファイルを 含んだサイトイメージを作成してから、そこでの作業をサーバに 反映させることを想定して説明しようと思います。  まずはCakePHPシステム一式を用意し、サイトイメージを 作成します。database.php等の設定も分かる範囲で今のうちに 行っておくと良いでしょう。

Slide 5

【 0 - 2:Tplcutterのインストール】  次に、Tplcutterを入手し解凍 したものを「/path/to/vendors/」に インストールします。基本的には 解凍イメージをそのままコピー してください。  「/path/to/vendors/shells/」に tplcutter.phpを忘れずにコピー してください。  またtplcutter直下にあるtplcutter.phpはPHP CLI版であり 別物ですので注意してください。

Slide 6

【 0 - 3:サーバへアップロード】  サイトイメージが出来たら、サーバにアップロードします。 所定の位置にサーバイメージを アップロードしてください。  とりあえずフロントエンドで Cakeの画面を確認しておきます。  特に「/path/to/app/tmp/」の パーミッション設定を忘れがち ですので、注意しましょう。

Slide 7

【 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」でコンソールを実行します。

Slide 8

【 0 - 4:Tplcutterの動作確認】  コントローラが実装されていないので、解凍ファイルに添付されて いるサンプルコントローラを所定の 位置にアップロードしてください。 アップロード後、「/mypages」を 呼び出してみると…  次のように表示されたら、正常に動作しています。  これで、Tplcutterが実際に 使用できるようになりました。

Slide 9

【Part 1】 デザイン制作・実装

Slide 10

【 1 - 1:テンプレートのディレクトリ構造】  実際に編集するテンプレートは、通常「/path/to/vendor/tplcutter/ app/default/」ディレクトリに 展開することになります。  このディレクトリが、webrootの 仮想的なディレクトリイメージと なり、テンプレートファイル以外が Tplcutterによってコピーされます。  デザイナーに依頼する際は、 右図のようにデータを格納して もらうようにしましょう。

Slide 11

<!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> <!-- ##myelement## --> myelementエレメントの内容 <!-- ##myelement## --> <!-- %%index%% --> indexアクションの内容 <!-- %%index%% --> <!-- %%sample%% --> sampleアクションの内容 <!-- %%sample%% --> 【 1 - 2:テンプレートのフォーマット】  テンプレートの拡張子は、 実際には何でも構いませんが、 デフォルトではhtml, php, ctp, thtmlの拡張子をもつファイルを テンプレートファイルとみなして 加工されます(設定ファイルで 変更が可能です)。  Tplcutterは、右図のように コメントタグ内に動作を記述することで、各種ファイルに切り出し ます。

Slide 12

<!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&& -->」  レイアウトを指定します。  2つで挟まれている範囲の 外側をレイアウトと見なして ファイルを書き出します。内側は 「<?php echo $content_for_layout; ?>」 で置き換えられます。  ファイル名はもとのテンプレートファイル名のままで、この名前がコントローラ名となります。

Slide 13

<!-- %%index%% --> indexアクションの内容 <!-- %%index%% --> <!-- %%sample%% --> sampleアクションの内容 <!-- %%sample%% --> 【 1 - 2:テンプレートのフォーマット】 ■「<!-- %%(アクション名)%% -->」  アクションビューを指定します。指定したアクション名を ファイル名としたファイルが生成 されます。デフォルトはctp形式で 出力されます。  またアクションビューは、この テンプレートファイルのファイル名 (=コントローラ名)を名前とした ディレクトリに格納されます。

Slide 14

<!-- ##myelement## --> myelementエレメントの内容 <!-- ##myelement## --> 【 1 - 2:テンプレートのフォーマット】 ■「<!-- ##(エレメント名)## -->」  エレメントを指定します。指定 したエレメント名をファイル名と したファイルが生成されます。 デフォルトはctp形式で出力 されます(設定で変更可能です)。 ※他にも動作として割り当てられたコメント タグがありますが、今回は説明を割愛します。

Slide 15

【 1 - 3:テンプレートの制作(デザイナー作業)】  では、実際の制作事例に 当てはめてみましょう。  今回は来日されたGarrett氏に喜んでもらえるよう、日本の文化をテーマにしたサイトを 作ることにしました。 index page1  アクションビューは、index, page1, それから見えて いませんがpage2, page3が存在しています。

Slide 16

【 1 - 4:サーバへアップロード】  制作されたテンプレートを サーバへアップロードします。  データは「丸ごとコピー」が 基本です。 「ミラーリング アップデート」の機能があれば それでも構いませんが、 今回は初回ということで、 丸ごとにしましょう。 ※ミラーリングアップデートに ついては後述いたします

Slide 17

【 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... (以下略)

Slide 18

【 1 - 5:Tplcutterの実行】  うまく処理が出来たようです。  このように、丸ごとコピーと コマンド1発で、サイトの 実装をすることが出来ます。

Slide 19

【Part 2】 デザイン修正・更新

Slide 20

ちょっと余談になるのですが… 「CakePHP カンファレンス東京」中、私は 体調があまり良くありませんでした。 実は直前で徹夜作業をしていたからです。 LTの準備も前日に終わり、最終チェックで 実演データを確認していた前日の晩、 災難が降りかかりました。

Slide 21

目の前を上司が通りかかり、 「なんだこれは?」と聞かれました。 「講演で使う実演データですけど…」 「…こんな古い文化をわざわざ紹介するのか?」 「えっ?」 「バカヤロウ、日本の恥さらしが!  もっと新しい文化にしろ!!」

Slide 22

そんなわけで、帰宅してから 急遽データを作り直す羽目になりました(涙)。 というわけで、ここから先は更新編です。

Slide 23

【 2 - 1:デザイナーにデータを返却】  ビューに適用してしまった テンプレートを元に戻すのはとても大変です。本来なら、全ての アクションビューに対して レイアウトを結合したり、画像 などのパスを変換したり しなければなりません。  その点、Tplcutterなら簡単です。tplcutter内にあるデータを再度 デザイナーに渡すだけでOKです。

Slide 24

【 2 - 2:テンプレートの修正(デザイナー作業)】  徹夜して必死で修正しました。 それではご覧ください!!  …はい、見事にやっちまい ました(笑)。徹夜の作業なんて こんなもんですよ、はい。  多少ぶっちゃけないとやって られません。

Slide 25

【 2 - 2:テンプレートの修正(デザイナー作業)】  今までのデータを流用して 作ったデータですので、ページ 構成やアイテムの配置などは ほぼ変わっていません。  しかし、リンク部分にイメージを 使用していたり、そもそも スライスを利用した1枚絵のため、 もの凄い数のイメージデータが 存在しています。  このテンプレートをもし手動で 更新させるとしたら、きっと 結構な時間をとられるでしょう。

Slide 26

【 2 - 3:サーバへミラーリングアップロード】  では、そんな恐ろしい更新 データを、早速Tplcutterで反映 してみましょう。  今回のスライドではWinSCPを 使っていますが、WinSCPには 「ミラーリングアップロード」という 便利な機能があります。この 機能を用いると、サーバ内の ファイルイメージと同期をとり、 更新や不要データの削除を してくれます。

Slide 27

【 2 - 3:サーバへミラーリングアップロード】  また、この機能は、ミラーリング終了後もディレクトリを監視 し続けるため、更新された ファイルは片っ端からサーバに上げてくれます。  プログラムを修正する際にも 便利ですよ!

Slide 28

【 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... (以下略)

Slide 29

【 2 - 4:Tplcutterの再実行】  バッチリ更新完了です!!  データを受け取ってから (というか今回はデータ作成 まで自分で全部やっちゃって いますが)、サーバに上げて コマンドを実行するのに 1分足らずです。  これが手動更新だったら、いったいどのくらいの時間が かかるでしょう? あまり 想像したくありません。

Slide 30

いかがでしたでしょうか? 私は、どんなに忙しいときでも、 コーヒー一杯を飲む時間くらいはもてるようにと、 このツールを作りました。 皆さんも、このツールでコーヒー一杯の余裕を 是非作ってくださいね(上司には内緒でね!)

Slide 31

Tplcutterのダウンロード(Ver0.2.0) ECWorks Blog(仮) http://ecw.seesaa.net/ ダウンロード欄の「Tplcutter」からたどれます 近い将来、ブログを移動するかもしれません。 移動した場合は別途アナウンスさせていただきます。

Slide 32

最後までご覧いただきまして ありがとうございました!! 【ご注意】 事例の中に、多少演出した箇所がありましたことを ご理解いただきますようお願いいたします

Summary: 「CakePHPカンファレンス東京」内で、ライトニングトークを行った際に、予定していた実演があまり出来なかったため、それを用いてさらに加筆したものを公開します。

Tags: cakephp tplcutter cakecon views template

URL:
More by this User
Most Viewed
Previous Page Next Page
Previous Page Next Page