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

カスタムユニット

昨日のエントリー【a-blog cms Training Camp 2014 Spring に参加しました】で触れる事が出来なかったカスタムユニットを紹介したいと思います。

概要

a-blog cmsでは記事を書くには、固定なフィールドのユニットを使うか自由に入力できるカスタムフィールドを使う方法がありました。

カスタムフィールドを使えば案件にそった、お客さんが使いやすい管理画面を用意する事が出来たのですが、 ユニットの途中にカスタムフィールドが挿入する事が出来ない、ユニットでは、表現の限界があるなど いくつかの問題がありました。

そこで今回その問題を克服する為カスタムユニットが出来ました。 カスタムユニットを使うとカスタムフィールドを作るように自由にユニットをカスタマイズして、入力のしやすい編集画面が作れるようになると思います。

カスタムユニットはver2.1より使用できるようになります。

実装方法

まずは、カスタムユニットを追加する為のボタンを設定します。

管理画面から コンフィグ > 編集設定 > ユニット追加ボタン

でモードにカスタムを選択してボタンを追加します。

この段階でエントリー編集画面にいくとカスタムユニットの追加ボタンが表示されるように なりますが、この段階では押しても入力フィールドが空っぽのユニットが追加されるだけです。

入力フォームのカスタマイズ

では、入力フォームを実装していきます。 カスタムユニットの入力フォームをカスタマイズするには、以下のファイルを作成します。

• /themes/自分のテーマ/admin/entry/custom-unit.html

カスタムフィールドを編集する時と同じような感じでcustom-unit.htmlファイルにフォームを書いていきます。 基本的にはカスタムフィールドを書くように書けば大丈夫ですが、２つほど普通のカスタムフィールドとは違う所があり注意が必要です。

以下のソースでテキストフィールドと画像フィールドを作っています。

<table>
	<tr>
		<th>テキストフィールド</th>
		<td>
			<input type="text" name="hoge_text{id}" value="{hoge_text}" class="acms-form-width-3quarters" />
			<input type="hidden" name="unit{id}[]" value="hoge_text{id}" />
		</td>
	</tr>
	<tr>
		<th>画像フィールド</th>
		<td>
			<!-- BEGIN_IF [{hoge_image@path}/nem/] -->
			<img src="%{ARCHIVES_DIR}{hoge_image@path}" />
			<input type="hidden" name="hoge_image{id}@old" value="{hoge_image@path}" /><br />
			<label class="acms-form-checkbox">
				<i class="acms-ico-checkbox"></i><input type="checkbox" name="hoge_image{id}@edit" value="delete" /> 削除
			</label>
			<!-- END_IF -->
			<input type="file" name="hoge_image{id}" size="20" />
			<input type="hidden" name="unit{id}[]" value="hoge_image{id}" />
			<input type="hidden" name="hoge_image{id}:extension" value="image" />
			<input type="hidden" name="hoge_image{id}@size" value="300" />
			<input type="hidden" name="hoge_image{id}@filename" value="" />
		</td>
	</tr>
</table>

注意ポイント

• 変数指定の所の前に{id}を付加する
• field[]をunit{id}[]にする

以上の２つがカスタムフィールドと記述が違う為、注意が必要です。 後は、カスタムフィールドと同じように書けばOKです！

出力のカスタマイズ

では、入力フォームができたので、実際に表示するユニットの表示をカスタマイズしていきます。 以下のファイルを作成してカスタマイズします。

• /themes/自分のテーマ/include/custom-unit.html

出力側はカスタムフィールドの表示とまったく同じになります。カスタマイズした変数を記述するだけです。

{hoge_text}
<img src="%{ARCHIVES_DIR}{hoge_image@path}" />

カスタムユニットの検索

カスタムユニットのフィールドはカスタムフィールドではないので、カスタムフィールド検索はできません。 ただし、ユニットの情報になるので、全文検索はできます。

最後に

というわけで昨日に続き、a-blog cms Training Camp 2014 Spring でお話させて頂いた内容をまとめてみました。 カスタムユニットは2.1の機能になりますが、もう少しでリリース出来ますので、もう少しお待ちください！

合宿ではいろいろご意見を頂き大変参考になりました。ありがたいです。 a-blog cmsをよりよくしていきたいと思いますので、よろしくお願いします。

ではまた合宿でお会いしましょう！