目次

リンク

Kwartz とは?

対象の言語

  • Ruby, eRuby(ERB, Erubis)
  • PHP
  • JSP (JSTL 1.1 and 1.2)
  • ePerl [experimental]

インストール

gem をインストール後に以下のコマンドでインストール出来る

gem install kwartz

gem のインストール方法は コチラ

コンバート

角カッコ内は言語に応じて切り替え

丸カッコはエスケープ文字オプション

エスケープ文字オプションを使用する事で全ての文字がエスケープ文字に変換される

エスケープ文字 OFF => プロパティの頭文字を大文字にするとエスケープ文字対象となる

エスケープ文字 ON => プロパティの頭文字を大文字にするとエスケープ文字対象から除外される

 kwartz (-e) -l [ eruby / rb / pierubis / php / jstl / eperl ] -p ロジックファイル レイアウトファイル > 生成ファイル

基礎

マークタグ

kwartzではロジックファイル内に マークタグ を指定して変換対象を識別する

指定方法は css の方法とほぼ同じで【タグ指定】【ID指定】【クラス指定】の3つと【ドキュメント全体指定】がある

タグ指定

【レイアウトファイル】

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>タイトル</title>
   </head>
   <body>
     Hello world !
   <body>
 </html>

【ロジックファイル】

 body {
   logic: {
     _stag();
     print "ここの文字がbodyタグ内に表示される";
     _etag();
   }
 }

【出力ファイル】

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>タイトル</title>
   </head>
   <body>
     ここの文字がbodyタグ内に表示される
   <body>
 </html>

ID指定

【レイアウトファイル】

 <input type="text" name="name" id="name">

【ロジックファイル】

 #name {
   attrs: 'value' 'バタコ';
 }

【出力ファイル】

 <input type="text" name="name" id="name" value="バタコ">

クラス指定

【レイアウトファイル】

 <div class="hoge"></div>

【ロジックファイル】

 .hoge {
   logic: {
     print "fugafuga";
   }
 }

【出力ファイル】

 fugafuga

ドキュメント全体指定

【レイアウトファイル】

 <html>
   <head>
     <meta charset="UTF-8">
     <title>タイトル</title>
   </head>
   <body>
     Hello world !
   <body>
 </html>

【ロジックファイル】

 #DOCUMENT {
   before: {
     print '<!DOCTYPE html>';
   }
 }

【出力ファイル】

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>タイトル</title>
   </head>
   <body>
     Hello world !
   <body>
 </html>

プロパティ

stag

【レイアウトファイル】

 <div id="foo">Hello World!</div>

【ロジックファイル】

 #foo {
   stag: '<div>';
 }

etag

【レイアウトファイル】

 <div id="foo">Hello World!</div>

【ロジックファイル】

 #foo {
   etag: '</div>';
 }

elem

【レイアウトファイル】

 <div id="foo">Hello World!</div>

【ロジックファイル】

 #foo {
   etag: '<div></div>';
 }

cont

【レイアウトファイル】

 <div id="foo">Hello World!</div>;

【ロジックファイル】

 #foo {
   cont: 'タグ内のデータ';
 }

value

【レイアウトファイル】

 <div id="foo">Hello World!</div>;

【ロジックファイル】

 #foo {
   value: 'はじめてのkwartz';
 }

attrs : 属性編集

指定した属性が存在しなくてもOK

【レイアウトファイル】

 <a id="foo" href="hoge" class="fuga">Hello World!</a>;

【ロジックファイル】

 #foo {
   attrs: 'href' 'リンク先のURL',
       'id'  'ID名',
       'class' 'クラス名';
 }

append : 属性追加

append の値がタグ属性の最後に追加される

【レイアウトファイル】

 <select name="blood">
 <option value="A" id="foo">A型</option>
 <option value="B">B型</option>
 <option value="O">O型</option>
 <option value="AB">AB型</option>
 </select>

【ロジックファイル】

 #foo {
   append: 'selected="true"';
 }

【出力ファイル】

 <select name="blood">
 <option value="A" id="foo" selected="true">A型</option>
 <option value="B">B型</option>
 <option value="O">O型</option>
 <option value="AB">AB型</option>
 </select>

remove

カンマ区切りで複数指定可能

【ロジックファイル】

 #foo {
   remove: '取り除きたい属性1', '取り除きたい属性2';
 }

logic

対象のオブジェクト自身を操作する

ロジック内は「_stag();」「_cont();」「_etag();」「_elem();」

【ロジックファイル】

 #foo {
   logic: {
     _stag();
     _cont();
     _etag();
   }
 }

[ 値を出力する場合は print を用いる ]

 print "Hello";
 print 'Hello';
 print("Hello");
 print('Hello');
 print 変数;
 print(変数)

[ print がないものは構文として扱われる ]

(PHPの例)

 $str = 'Hello';

 foreach( $ary as $key => $value) {
   $sum += $value;
 }

before

対象のオブジェクトの前にデータ処理をする

【レイアウトファイル】

 <div>Hello World!</div>

【ロジックファイル】

 #foo {
   before: {
     print '<h1>Title</h1>';
   }
 }

【出力ファイル】

 <h1>Title</h1>
 <div>Hello World!</div>

[ 値を出力する場合は print を用いる ]

 print "Hello";
 print 'Hello';
 print("Hello");
 print('Hello');
 print 変数;
 print(変数)

[ print がないものは構文として扱われる ]

(PHPの例)

 $str = 'Hello';

 foreach( $ary as $key => $value) {
   $sum += $value;
 }

after

対象のオブジェクトの後にデータ処理をする

【レイアウトファイル】

 <div>Hello World!</div>

【ロジックファイル】

 #foo {
   after: {
     print '<h1>Title</h1>';
   }
 }

【出力ファイル】

 <div>Hello World!</div>
 <h1>Title</h1>

[ 値を出力する場合は print を用いる ]

 print "Hello";
 print 'Hello';
 print("Hello");
 print('Hello');
 print 変数;
 print(変数)

[ print がないものは構文として扱われる ]

(PHPの例)

 $str = 'Hello';

 foreach( $ary as $key => $value) {
   $sum += $value;
 }

エスケープ文字

プロパティの頭文字を大文字にする事でエスケープ文字として出力される

※ オプションで 「-e」 をつける事で常にエスケープ文字として変換させる事ができる
  
  オプションを使用した場合に頭文字を大文字にするとエスケープ文字対象から外れてコンバートされる

kwartz -e -p ロジックファイル レイアウトファイル

【レイアウトファイル】

<tr>
 <td id="mark:val1">foo</td>
 <td id="mark:val2">bar</td>
 <td id="mark:val3">baz</td>
</tr>

【ロジックファイル】

#val1 {
  value: expr;
}
#val2 {
  Value: expr;
}
#val3 {
  VALUE: expr;
}

【出力ファイル : オプションなし】

(Ruby の場合)

$ kwartz -p escape1.plogic escape1.html
<tr>
 <td><%= expr %></td>
 <td><%=h expr %></td>
 <td><%= expr %></td>
</tr>

【出力ファイル : オプションあり】

(Ruby の場合)

$ kwartz -e -p escape1.plogic escape1.html
<tr>
 <td><%=h expr %></td>
 <td><%=h expr %></td>
 <td><%= expr %></td>
</tr>

How to

属性挿入型

レイアウトファイル

<input style="text" id="マークID" name="">

ロジックファイル

#マークID {
   attrs: '属性名' 挿入したい変数;
}

例)

Ruby

#name {
   attrs: 'value' @contents[:name];
}

PHP

#name {
   attrs: 'value' $contents[name];
}

タグ要素挿入型

ループ挿入型 : row

ループ挿入型 : column

メモ

CGI.escapeHTML

_element(name)

_content(name)


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-16 (土) 18:03:29 (435d)