a-blog cms の カスタムフィールドメーカーつくりました
カスタムフィールドメーカーの説明だけを別エントリーにしました
#acmscamp5のためにネタとしてつくったカスタムフィールドメーカーですが、予想以上に皆様に使っていただける機会が多いみたいです。ありがとうございます。
その為、紹介していただける際に、【#acmscamp5に参加しました!エントリー】では紹介しずらいとのことで、レポートとは別でエントリーたてます。
その為内容は基本的には同じですが、若干補足・修正しました。
カスタムフィールドメーカーとは
まんまですが、a-blog cmsのカスタムフィールドをつくるためのツールです。
a-blog cmsでは、カスタムフィールドをつくるときにhtmlのフォームを記述することになるのですが、独自のルールがあります。
慣れると特に難しくないのですが、htmlがあまり得意ではない人とか、とっつき難いかもしれません。
あと、慣れてもめんどくさいのです。
で、自身がラクをするためと、jsの勉強、#acmscamp5のネタを兼ねて、以前、データファーム勝又さんが発表されていた「カスタムフィールドツクール」をヒントに作成しました。
ここまできて、a-blog cms ( ・ω・)?カスタムフィールド( ・ω・)??
ってひとは、まず以下に進んだほうがいいかもしれません
カスタムフィールドメーカー
データ一式はgithubに置いてあります。
DL&解凍して、普通にindex.html開けば( `д´)b オッケー!
以下に設置もしてあります。
使いかた
ざっくりした手順は以下です。
- タイプ(type)を選ぶ!
- タイプに応じた必要項目をフォームに記入!
- 生成!
- できたコードをカスタムフィールドを入れたい箇所へコピペ!
- ( ゚д゚)
一度作成したフィールドの情報は、履歴として保存されます(ブラウザを閉じても保存されます)。
消したい場合は、「履歴クリア」してください。
グループを作成したい場合の手順は以下です。
- タイプ(type)でグループを選ぶ!
- グループタイトル、group名を入力!
- グループに追加したいタイプを選択!
- タイプに応じた必要項目をフォームに記入!
- 追加!
- ( ゚д゚)
- 3に戻って繰り返し!
- できたコードをカスタムフィールドを入れたい箇所へコピペ!
- ( Д ) ゚ ゚
グループも履歴が残ります。「グループ履歴クリア」で
通常作成するときは、「追加追加」していけば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や情報入力のフォームを編集すれば、バリデートの記述も反映できると思います。