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も進化しました。そこで目玉機能の以下３つをピックアップして紹介したいと思います。

• 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 [] -->ブロックは無制限に追加可能。（常識の範囲以内で）

条件式

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

実行順序

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

• インクルードを解決
• インクルード処理と同時にグローバル変数を解決
• タッチモジュールを解決（デフォルト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

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

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からの新しい機能なので、詳しくご紹介できたらと思います。 それでは！