maki-o memo

制作に関する私的なメモです

a-blog cms の カスタムフィールドメーカーつくりました

カスタムフィールドメーカーの説明だけを別エントリーにしました

#acmscamp5のためにネタとしてつくったカスタムフィールドメーカーですが、予想以上に皆様に使っていただける機会が多いみたいです。ありがとうございます。

その為、紹介していただける際に、【#acmscamp5に参加しました!エントリー】では紹介しずらいとのことで、レポートとは別でエントリーたてます。
その為内容は基本的には同じですが、若干補足・修正しました。

カスタムフィールドメーカーとは

まんまですが、a-blog cmsのカスタムフィールドをつくるためのツールです。

a-blog cmsでは、カスタムフィールドをつくるときにhtmlのフォームを記述することになるのですが、独自のルールがあります。
慣れると特に難しくないのですが、htmlがあまり得意ではない人とか、とっつき難いかもしれません。
あと、慣れてもめんどくさいのです。

で、自身がラクをするためと、jsの勉強、#acmscamp5のネタを兼ねて、以前、データファーム勝又さんが発表されていた「カスタムフィールドツクール」をヒントに作成しました。


こんなんです


ここまできて、a-blog cms ( ・ω・)?カスタムフィールド( ・ω・)??
ってひとは、まず以下に進んだほうがいいかもしれません

http://www.a-blogcms.jp/
http://www.a-blogcms.jp/support/tutorial/custom-field/

カスタムフィールドメーカー

データ一式はgithubに置いてあります。
DL&解凍して、普通にindex.html開けば( `д´)b オッケー!

https://github.com/maki-t2nd/cfm

以下に設置もしてあります。

https://www.maki-o.net/cfm/

使いかた

ざっくりした手順は以下です。

  1. タイプ(type)を選ぶ!
  2. タイプに応じた必要項目をフォームに記入!
  3. 生成!
  4. できたコードをカスタムフィールドを入れたい箇所へコピペ!
  5. ( ゚д゚)

一度作成したフィールドの情報は、履歴として保存されます(ブラウザを閉じても保存されます)。
消したい場合は、「履歴クリア」してください。

グループを作成したい場合の手順は以下です。

  1. タイプ(type)でグループを選ぶ!
  2. グループタイトル、group名を入力!
  3. グループに追加したいタイプを選択!
  4. タイプに応じた必要項目をフォームに記入!
  5. 追加!
  6. ( ゚д゚)
  7. 3に戻って繰り返し!
  8. できたコードをカスタムフィールドを入れたい箇所へコピペ!
  9. (  Д ) ゚ ゚

グループも履歴が残ります。「グループ履歴クリア」で
通常作成するときは、「追加追加」していけばOKだと思います。
「グループ生成」は、なんの要素も追加せず、履歴の内容を表示します。
いらないって声がありますがどうでしょう?必要ならhtmlで消してくれてもいいです。

カスタムフィールドメーカーのカスタマイズ

カスタムフィールドメーカーは、生成されるテンプレートの編集が可能です。

テンプレートの編集

生成されるhtmlが嫌な方は、例えば、index.htmlの368行目(2012/06/27現在)に以下のような記述があります。

<script id="image" type="text/cfm-template">
	<tr>
		<th>{#title}</th>
		<td>
			<!-- BEGIN {#name}@path:veil -->
			<img src="%{ARCHIVES_DIR}{{#name}@path}" />
			<input type="hidden" name="{#name}@old" value="{{#name}@path}" /><br />
			<label>
				<input type="checkbox" name="{#name}@edit" value="delete" />削除
			</label>
			<!-- END {#name}@path:veil -->
			<input type="file" name="{#name}" size="20" /><!-- BEGIN alt:veil --><br />
			代替テキスト:<input type="text" name="{#name}@alt" value="{{#name}@alt}" size="40" /><!-- END alt:veil -->
			<input type="hidden" name="field[]" value="{#name}" />
			<input type="hidden" name="{#name}:extension" value="image" />
			<input type="hidden" name="{#name}@{#direction}" value="{#size}" /><!-- BEGIN tiny:veil -->
			<input type="hidden" name="{#name}@tiny{#tiny}" value="{#tinySize}" /><!-- END tiny:veil --><!-- BEGIN large:veil -->
			<input type="hidden" name="{#name}@large{#large}" value="{#largeSize}" /><!-- END large:veil --><!-- BEGIN square:veil -->
			<input type="hidden" name="{#name}@square{#square}" value="{#squareSize}" /><!-- END square:veil -->
			<input type="hidden" name="{#name}@filename" value="" />
		</td>
	</tr>
</script>

ここの記述が「画像」を生成するテンプレートになりますので、ここを変更すれば生成されるテンプレートも変更されます。

  • {#name}
    a-blog cmsの変数に似た記述ですがここに、フォームで入力した値が入ります。
    フォームのname要素名と連動します。
  • <!-- BEGIN alt:veil -->~<!-- END alt:veil -->
    見慣れたa-blog cmsの記述と同じ動作をします。
    この場合、altの値がない場合に内包してある要素が表示されなくなります。

あと、ループする箇所は記述が変なので注意が必要です。
具体的には以下のような箇所です。

<script id="select" type="text/cfm-template"><tr>
	<th>{#title}</th>
	<td>
		<select name="{#name}">
			<option value=""></option><!-- BEGIN option:loop -->
			<option value="{#option_value}"{{#name}:selected#{#option_value}}>{#option_label}</option><!-- END option:loop -->
		</select>
		<input type="hidden" name="field[]" value="{#name}" />
	</td>
</tr>
</script>

index.htmlの337行目(2012/06/27現在)にある、<!-- BEGIN option:loop -->~<!-- END option:loop -->内で、option要素を繰り返し処理するという箇所なんですが、記述が特殊です。

  • <!-- BEGIN option:loop -->~<!-- END option:loop -->
    loopに内包される変数に注意が必要です。
    loopが"option"の場合、内包され、且つ繰り返し処理したい変数には必ずプレフィックスとして、
    "option_"を入れる必要があります。
    この例場合は、"option_value"と"option_label"になります。

変ですか?変ですよね。
このへん今後見直したい箇所です。

とゆう感じに、

(一応)カスタマイズが可能です。
今後、機能追加があるかないかはわかりませんが、それによって仕様が変わる可能性があります。
あと、ブラウザの検証はchromeでしかしてません。制作者しか使わないでしょうし。
途中で見た感じではIEは多分9でも動きません。汗

変更履歴

【2012/05/10】
過去に作成したカスタムフィールドの履歴が残るよう仕様を変更しました。
ブラウザを閉じても履歴が保存されてます。
「履歴をクリア」することによって履歴を削除できます。
【2012/05/22】
画像以外のカスタムフィールドグループに対応しました。
typeで「グループ」を選択し、「追加」でグループ追加、「グループ生成」で、追加したフィールドデータを元に、htmlを生成します。
生成されるhtmlは一応カスタマイズできると思うので、変えたい人は頑張ってみてくださいw

補足

カスタムフィールドメーカーという名称ですが、フォームの作成にも利用できます。
生成されるソースのhtmlや情報入力のフォームを編集すれば、バリデートの記述も反映できると思います。


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ