a-blog cms Training Camp 2014 Spring に参加しました。


a-blog cms 2014 春合宿参加しました

2014/05/09, 10の2日間、a-blog cms Training Camp 2014 Springにスタッフとして参加してきました。 毎年開催されている合宿ですが、今回は会場ベースキャンプ名古屋に40人以上の方が参加され 熱気があるいい合宿だったと思います。

a-blog cms 2.x系の話をさせて頂きましたので、ブログに残しておきたいと思います。

2.x系の目玉機能をいくつか紹介

2.x系になり大きくa-blog cmsも進化しました。そこで目玉機能の以下3つをピックアップして紹介したいと思います。

  • IFブロック
  • 動的フォーム
  • カスタムユニット

IFブロック

a-blog cmsにはIF文がありませんでした。 IF文が実装されてこなかった背景としては、a-blog cmsの設計思想としてノンプログラミングな事があったので、 出来るだけプログラム的な要素を排除してきました。 似たような機能としてveilブロックTouchモジュールがあったのですが、細かい制御をするのには厳しく、2.0から実装されるようになりました。

IFブロックの構文

基本

<!-- BEGIN_IF [条件式] -->この中が表示されます<!-- END_IF -->

条件があっている場合のみBEGINとENDで囲まれた範囲が表示

条件があわない場合

<!-- BEGIN_IF [条件式] -->条件が真の場合<!-- ELSE -->条件が偽の場合<!-- END_IF -->

条件があっている場合と条件に合わない場合で分岐させる事が可能

複数の条件分岐

<!-- BEGIN_IF [条件1] -->条件1が真<!-- ELSE_IF [条件2] -->条件2が真<!-- ELSE -->どれにも当てはまらない<!-- END_IF -->

複数の条件で分岐する事ができます。<!-- ELSE_IF [] -->ブロックは無制限に追加可能。(常識の範囲以内で)

条件式

条件式は値1/条件子/値2という形で書きます。

演算子条件説明
eq=等しい
neq!=等しくない
gt>より大きい
lt<より小さい
lte<=以下
gte>=以上
lkLIKE含まれる
nlkNOT LIKE含まれない
reREGEXP正規表現に合致する
nreNOT REGEXP正規表現に合致しない
emEMPTY値が空
nemNOT EMPTY値が空ではない

実行順序

テンプレートエンジンが実行される順序は以下のようになります。

  • インクルードを解決
  • インクルード処理と同時にグローバル変数を解決
  • タッチモジュールを解決(デフォルトON)
  • モジュール類を内側から解決(同じ階層の場合は下から)
  • IFブロックを解決

この順序は非常に重要!!

ポイント

IFブロックが最後に解決される為、テンプレートのどの場所に書いても 正しく実行される。(ループ内でも)正し全部のテンプレートが解決されてから動くため 非表示される所も実行されるので処理が軽くなる訳ではない。

ただ、タッチモジュールよりは処理は早いので、そんなに気にする必要はない。 また、IFブロックはネストして書く事が可能

参考

ドキュメント

IFブロック利用事例の紹介

動的フォーム

a-blog cmsでは標準でフォーム機能が使えるのですが、htmlの知識が必要&テンプレートを触る必要が ありました。これだとお客様が簡単に触れない、もっと簡単に更新したいという要望により今回の動的フォームが誕生しました。 動的フォームは、htmlの知識も必要なく、ブラウザ上でフォームを作成する事ができます。

実装方法

マニュアルが用意されていますので、マニュアルに沿って実装してみてください。 ドキュメント

もう少し使いやすく

動的フォームが動くようになりましたが、名前や住所など、フォームできまった項目が あると思います。

そのような決まった項目毎回動的に作るのは大変なので、静的に作れる 所は静的に作ってみます。

以下の3つのファイルを自分のテーマの中にコピーします。

  • /themes/system/include/form/unit.html
  • /themes/system/include/form/input.html
  • /themes/system/include/form/confirm.html

以上の3つのファイルをカスタマイズしていきます。

unit.htmlは、動的フォーム全体のファイルになるので全体のスタイルや見出しをカスタマイズできます。

input.htmlとconfirm.htmlは入力フォームと確認画面のテンプレートになります。 ここに普段静的にフォームを作るように、フィールドを入力してカスタマイズします。

<tr>
	<th>テスト</th>
	<td>
		<input name="hoge" type="text" value="\{hoge\}" /> <!-- 変数をエスケープ -->
		<input type="hidden" name="field[]" value="hoge" />
		<input type="hidden" name="hoge:v#required" />
		<!-- BEGIN\ hoge:validator --> <!-- ブロックもエスケープ -->
		<p class="acms-text-error">値が入力されていません。</p>
		<!-- END\ hoge:validator -->
	</td>
</tr>

動的フォームのメールテンプレート

■お問い合わせ
メールアドレス  : {email}<!-- BEGIN_MODULE Form2_Unit -->
<!-- BEGIN column:loop --><!-- BEGIN text -->
{label}  : \{form-unit-{utid}\}<!-- END text --><!-- BEGIN textarea -->
{label}  : \{form-unit-{utid}\}<!-- END textarea --><!-- BEGIN radio -->
{label}  : \{form-unit-{utid}\}<!-- END radio --><!-- BEGIN select -->
{label}  : \{form-unit-{utid}\}<!-- END select --><!-- BEGIN checkbox -->
{label}  : <!-- BEGIN\ form-unit-{utid}:loop -->\{form-unit-{utid}\} <!-- END\ form-unit-{utid}:loop --><!-- END checkbox -->
<!-- END column:loop --><!-- END_MODULE Form2_Unit -->
フィールドをカスタマイズする時の注意点
  • input.htmlとconfirm.htmlに書く変数とブロックはエスケープをする
  • 動的フォーム用の専用メールテンプレートを使用する。

動的フォームのメリット、デメリット

動的フォームはテンプレートを触る必要がなく、エンドユーザが直接触る事も出来ていいのですが、 デメリットもあります。

動的なのでどうしても繰り返しな処理になってしまい、メールの内容など決まった形になってしまいます。 また、jsなどを利用した高度なフォームを作るのも難しいので、高度なフォームを作る場合は、 今まで通り静的なフォームを利用したほうがいいでしょう。

頻繁にフォームの内容が変わるもの、アンケートなどに動的フォームは向いています。

カスタムユニット

最後にカスタムユニットですが、とりあえずここまで公開して次回に紹介します。申し訳ない。。 カスタムユニットはver2.1からの新しい機能なので、詳しくご紹介できたらと思います。 それでは!


関連記事

【a-blog cms ver2.1】フォーム通知をメール以外で通知(ChatWork)

【a-blog cms】カスタムユニットが出来ました

Document Outliner

アウトライン生成ライブラリ、document-outliner をリリースしました

a-blog cmsでSVGを画像プレイスホルダーとして使う

a-blog cms + Varnish 触ってみる

a-blog cms テンプレート解体新書

最新記事

カテゴリー

ハッシュタグ