デザイナーとの協業での工夫　Smartyプリフィルタの活用法2

PHP JavaScript

（前の日記書き直しバージョンです！）
http://d.hatena.ne.jp/akiraneko/20081113/1226583335

基本方針

デザイナーさんである程度動きがわかるところまで作りこんでもらいます。

http://akira.info/labs/domtest/test.html

サンプルページですが、３秒たつと置換が走ります。わかりやすいように３秒にしていますが実際には100ミリなので一瞬で変わります。
置換に利用しているデータが

http://akira.info/labs/domtest/test.json

これになります。
JavaScriptでロード時にJSONのデータで置換しています。

処理の流れ

以下の流れでいく想定です。

モック作成

デザイナーさんにより、通常のデザインをしてもらいます。基本的にはxhtml形式で組んでもらいます。

データ置換部分の処理

デザイナーさんにより、プログラムにより置換が必要な場所にIDをつけます。

JSONで置換データのチェック

デザイナーさんにより、置換が行われる場所がすべて列挙されているかチェックします。

プログラマによるデータ作成

置換する場所はすべて列挙されていますので、テンプレートと一緒にもらったJSONファイルを元にデータを作成します。

サーバーによる置換処理

JavaScriptで置換している部分を、サーバー側で置換済みのデータを表示するようなプログラムを作ります。

結果検証

デザイナーさんに組み込んだ物を見てもらい、正しく表示されているか確認します。

デザイン変更

プログラマは基本的にテンプレートは変更しませんので、デザイン変更はテンプレートをそのまま上書きすることで可能です。
置換場所が増えた場合に関しては、必要なデータを追加生成します。

できること

文字の設定
<div id="data">div文だよ</div>

通常置換する場所に関してはdiv文だよの文字がモックでは表示されていると思います。これでも大抵は問題ありませんが、プログラムの埋め込みミスにより置換されていないケースが発生したりします。

{
  "data" : "置換したDivの内容だよ"
}

上記のデータを準備すると、「置換したDivの内容だよ」が画面に表示されます。

<div id="data">置換したDivの内容だよ</div>
属性の設定
<input type="button" id="btn" value="btn" />

今回はボタンです。

{
    "btn" : {
      "value" : "ボタンJS"
      ,"onclick" : "alert('JSの処理を入れてね');"
    }
}

上記のデータを準備すると、ボタンの名前が「ボタンJS」になって、ボタンを押した時のonclickが「alert('JSの処理を入れてね');」になります。

<input onclick="alert('JSの処理を入れてね');" type="button" id="btn" value="ボタンJS" />
リストの表示
<div id="dataItems">
   <span>Title</span><br /><span id="data">data</span><br />
</div>

上記のように、テーブルなどでデータ件数分だけ表示されることが多いと思います。この手のデザインもモックを作るのが結構面倒だったりしますよね。

{
    "dataItems" : [
      {
        "data" : "data line 1"
      }
      ,{
        "data" : "data line 2"
      }
      ,{
        "data" : "data line 3"
        }
    ]
}

こんな感じで配列でデータを用意すると

<div id="dataItems">
   <span>Title</span><br /><span id="data">data line 1</span><br />
   <span>Title</span><br /><span id="data">data line 2</span><br />
   <span>Title</span><br /><span id="data">data line 3</span><br />
</div>

と表示されます。ここまですべてデザイナーさんにより検証が可能です。

プログラム連動

サンプルデータでテンプレート上の動作が確認できたところで、プログラムとの連動を作っていきます。ここからはプログラマの作業になります。

基本的にはテンプレートは編集しません。そのためデザイン変更になってもデザインの上書きでそのまま動く連動になります。

ただし置換する対象が増えた場合には、プログラムでそのデータを準備してある必要がでてきます。

データ準備

データベースなどを利用して、表示に必要なデータを用意します。ここは利用しているフレームワークやテンプレートエンジンによって準備方法が違うと思います。

大切なのはJavaScriptの置換と同じ動作をデータベースのデータで表示することです。

<?php
$this->af->setApp('head', 'ヘッダ<b>PHP</b>');
$this->af->setApp('btn', array( 'value' => 'ボタンPHP', 'onclick' => "alert('PHP')" ) );
$this->af->setAppNE('btn2', array( 'value' => 'ボタン2PHP', 'onclick' => "alert('PHP2')" ) );
$this->af->setAppNE('foot', 'フッタ<b>PHP</b>');

$this->af->setAppNE('dataItems', array(
                  array( 'data' => "php Line 1" ),
                  array( 'data' => "php Line 2" ),
                  array( 'data' => "php Line 3" ),
                  array( 'data' => "php Line 4" ),
                  array( 'data' => "php Line 5" ),
                ) );

ちなみにEthnaの場合には上記のようにデータを投入します。

連動方法

モックの段階ではJavaScriptで置換していましたが、最終的にはプログラムにて置換した状態のファイルを表示させてあげます。

そのためモック用のJavaScriptを出力している部分をプログラムで削除。IDの部分を置換して出力という流れで処理を行います。このサーバー側での置換はすでにできている物を利用すれば、上記のようにデータを準備するだけで単純なページはプログラムが完了します。

Ethnaで実装したサンプルやもう少し詳しいことは、読みにくいのですが前の日記をみてください。