CMS

望みのパーツをどこにでも。制作者も更新担当者も幸せにする、a-blog cmsの「カスタムユニット」の使い方

共有する?

このエントリーをはてなブックマークに追加
follow us in feedly

CMSで更新する予定のコンテンツで、上の画像のように
「『お客様の声』や『ボタン』のパーツを、本文中の好きな場所に表示したい」
と要望があったら、どう対応しますか。

カスタムフィールドだと、表示位置をあらかじめ固定しなければなりません。
WordPressの「AddQuicktag」や、ウィジウィグのテンプレート機能は、HTMLを編集できるためページが崩れる危険性が高くなります。

ブロック単位の編集ができるCMS、concrete5や、WordPressのプラグイン「Page Builder」なら解決するように思えます。しかし、いずれも独自の入力欄を持ったパーツを作ろうとすると、専用のプログラムを書くことになり、制作コストがかかります。



a-blog cmsはバージョン2.1から、自作のユニット(パーツ)を追加できる「カスタムユニット」機能が追加されました。

冒頭のような要望を簡単に実装でき、制作者・更新担当者をどちらも幸せにする、おすすめの機能です。使い方を詳しくご紹介します。

メリット

PHPを書かない
HTMLと条件分岐などの基礎知識があれば実装できます。書くのはa-blog cmsの独自タグのみで、PHPは一切書きません。間違えてもサイトが真っ白になることはありません。
UIを自由に作成できる
form要素のルールさえ守っていれば、ユーザーインターフェースは制作者が決められます。通常は管理画面用のCSSフレームワーク「acms.css」で充分ですが、外部のUIも実装できます。
モバイル対応
「acms.css」はレスポンシブWebデザインで設計されています。このため、カスタムユニットもスマートフォンやタブレットでの更新に対応できます。
タグがカスタムフィールドとほぼ同じ
カスタムユニット専用のタグは、開始・終了のみです。既存のカスタムフィールドと同じHTML構造なので、a-blog cmsを学習したことがあれば、コストはかかりません。
使い回しがきく
基本はHTMLファイルなので、一度作成するとその後の案件でも簡単に複製・改変できます。後述する「ボタン」は要望が多いので、作っておいて損はありません。

デメリット

いろいろ考えましたが、この機能には大きなデメリットがありません。

フィールド検索の対象にできない
カスタムユニットで入力したデータは通常の全文検索にはヒットしますが、カスタムフィールド別検索の対象にはできません。物件・書籍情報など、絞り込みが必要なコンテンツには利用しないようにしてください。
iOSアプリが使えない
a-blog cmsのiOSアプリは、公式ユニットのみ対応しています。カスタムユニットを実装したサイトは、Safariなどのブラウザでログインして更新することになります。

カスタムユニット作成の流れ

ID・入力項目を考える

最初に、ユニットに対する一意のIDを考えます。基本的に英語・数字・アンダーバーを使います。ボタンなら「button」、吹き出しなら「balloon」などとすればよいでしょう。
ここでは便宜上「hoge」で説明します。
また、どのような入力項目が必要かも考えておきましょう。ボタンなら、ボタンの文字列とリンク先URLのテキスト入力が必要です。

編集画面用のテンプレートを作る

編集画面用のテンプレートを作ります。テキストエディタで新規HTMLファイルを作成し、以下のコードを貼り付けてください。

<!-- BEGIN custom_hoge -->
<table class="entryFormColumnSettingTable entryFormColumnTable">
	<tr>
		<td class="entryFormFileControl">
			<table class="entryFormColumnSettingTable">

				<!-- 入力項目 -->

			</table>
		</td>
	</tr>
</table>
<!-- END custom_hoge -->

a-blog cmsのフレームワークのコードを流用していますが、CSSのカスタマイズをする余裕があるなら、マークアップに大きな制限はありません。
重要なのは「BEGIN」「END」と書かれている、HTMLのコメントを模した開始・終了タグです。ここに入るコードネームは必ず「custom_考えておいたID」としてください。

作成したテンプレートを、カスタムユニットを実装したいテーマに、以下のパス・ファイル名で保存してください。ディレクトリがない場合は作成します。テンプレートファイル名は変更できません。

/テーマのディレクトリ/admin/entry/unit/extend.html

表示用のテンプレートを作る

表示用のテンプレートを作ります。テキストエディタで新規HTMLファイルを作成し、以下のコードを貼り付けてください。

<!-- BEGIN unit#custom_hoge -->

<!-- ユニットの表示 -->

<!-- END unit#custom_hoge -->

こちらにも開始・終了タグがあるので同様に「custom_考えておいたID」としてください。

作成したテンプレートを、制作中のテーマに以下のパス・ファイル名で保存してください。ディレクトリがない場合は作成します。テンプレートファイル名は変更できません。

/テーマのディレクトリ/include/unit/extend.html

編集設定にユニットを追加する

ここで一旦、a-blog cmsにログインし、管理ページ内の「コンフィグ > 編集設定」へ移動してください。



ページ冒頭に、サイト内で利用可能なユニットの追加画面があります。スクリーンショットの通りに新しいユニットを追加し、モードのプルダウンを「拡張」、IDの入力欄に先ほどの「custom_考えておいたID」を入力してください。
プルダウンには「カスタム」というものもありますが「拡張」です。間違えないようにしてください。

ラベルは、更新担当者向けのユニットの表示名です。わかりやすく簡潔な名前にしてください。

ユニット設定にユニットを追加する

続いて、同じく管理ページ内の「コンフィグ > ユニット設定」へ移動してください。



ページをスクロールしていくと、先ほど追加したユニット項目が見つかるはずです。また、それぞれの項目についている「ユニットの追加ボタン」にもボタンが増えています。



ボタンを押してみると、見出しだけの項目が追加されます。この状態を確認したら「保存」ボタンを押して更新してください。

a-blog cmsを使ったことがない人は「編集設定とユニット設定の違いって???」となると思いますが、複雑な話になるのでここでは割愛します。
空のテンプレートを先に制作した理由は、テーマ内にテンプレートが存在していないと、ユニット設定で項目を呼び出すことができないためです。なお、後述の入力フォームを先にテンプレートに書いていたとしても、この画面には見出ししか出ません。

編集画面用テンプレートにフォームを追加する

いよいよ、編集画面のフォームを作成していきます。

a-blog cmsは、入力画面のスニペットを自動生成してくれるツールが管理画面内に用意されています。
「コンフィグ > カスタムフィールドメーカー」にありますが、ここではいろいろな入力フォームを全部盛りしているサンプルコードを出してしまいます。

以下のコードを、編集画面用の「extend.html」内の「<!-- 入力項目 -->」のところにコピー・ペーストしてください。

<!-- ユニットの入力項目:テキストの場合 -->
<tr>
	<th style="white-space: nowrap;">テキスト</th>
	<td>
		<input type="text" name="hoge_text{id}" value="{hoge_text}" class="acms-admin-form-width-full" />
		<input type="hidden" name="unit{id}[]" value="hoge_text{id}" />
	</td>
</tr>

<!-- ユニットの入力項目:テキストエリアの場合 -->
<tr>
	<th style="white-space: nowrap;">テキストエリア</th>
	<td>
		<textarea name="hoge_textarea{id}" class="acms-admin-form-width-full" rows="5">{hoge_textarea}[raw]</textarea>
		<input type="hidden" name="unit{id}[]" value="hoge_textarea{id}" />
	</td>
</tr>

<!-- ユニットの入力項目:画像の場合 -->
<tr>
	<th style="white-space: nowrap;">画像</th>
	<td class="js-img_resize_cf">
		<!-- BEGIN_IF [{hoge_img@tinyPath}/em] -->
		<img src="" style="display:none; max-width: 150px;" class="js-img_resize_preview acms-admin-img-responsive" />
		<!-- END_IF -->
		<!-- BEGIN_IF [{hoge_img@path}/nem] -->
		<img src="%{ARCHIVES_DIR}{hoge_img@tinyPath}" class="js-img_resize_preview acms-admin-img-responsive" />
		<input type="hidden" name="hoge_img{id}@old" value="{hoge_img@path}" />
		<label class="acms-admin-form-checkbox">
			<input type="checkbox" name="hoge_img{id}@edit" value="delete" />
			<i class="acms-admin-ico-checkbox"></i> 削除
		</label>
		<!-- END_IF -->
		<input type="file" name="hoge_img{id}" size="20" class="js-img_resize_input" /><br />
		代替テキスト:<input type="text" name="hoge_img{id}@alt" value="{hoge_img@alt}" size="40" />
		<input type="hidden" name="unit{id}[]" value="hoge_img{id}" />
		<input type="hidden" name="hoge_img{id}:extension" value="image" />
		<input type="hidden" name="hoge_img{id}@width" value="960" />
		<input type="hidden" name="hoge_img{id}@tinyWidth" value="150" />
		<input type="hidden" name="hoge_img{id}@filename" value="" />
	</td>
</tr>

<!-- ユニットの入力項目:チェックボックスの場合 -->
<tr>
	<th style="white-space: nowrap;">チェックボックス</th>
	<td>
		<label class="acms-admin-form-checkbox" for="input-hoge_check{id}">
		<input type="checkbox" name="hoge_check{id}[]" value="1" id="input-hoge_check{id}"{hoge_check:checked#1} />
		<i class="acms-admin-ico-checkbox"></i>チェックを入れると値に1が入ります
		</label>
		<input type="hidden" name="unit{id}[]" value="hoge_check{id}" />
	</td>
</tr>

<!-- ユニットの入力項目:ラジオボタンの場合 -->
<tr>
	<th style="white-space: nowrap;">ラジオボタン</th>
	<td>
		<label class="acms-admin-form-radio"><input type="radio" name="hoge_radio{id}" value=""<!-- BEGIN_IF [{hoge_radio}/em] --> checked="checked"<!-- END_IF --> /><i class="acms-admin-ico-radio"></i>選択肢null</label>
		<label class="acms-admin-form-radio"><input type="radio" name="hoge_radio{id}" value="選択肢1"{hoge_radio:checked#選択肢1} /><i class="acms-admin-ico-radio"></i>選択肢1</label>
		<label class="acms-admin-form-radio"><input type="radio" name="hoge_radio{id}" value="選択肢2"{hoge_radio:checked#選択肢2} /><i class="acms-admin-ico-radio"></i>選択肢2</label>
		<label class="acms-admin-form-radio"><input type="radio" name="hoge_radio{id}" value="選択肢3"{hoge_radio:checked#選択肢3} /><i class="acms-admin-ico-radio"></i>選択肢3</label>
		<input type="hidden" name="unit{id}[]" value="hoge_radio{id}" />
	</td>
</tr>

<!-- ユニットの入力項目:セレクトボックスの場合 -->
<tr>
	<th style="white-space: nowrap;">セレクトボックス</th>
	<td>
		<select name="hoge_select{id}" class="acms-admin-form-width-full">
		<option value="">(選択してください)</option>
		<option value="選択肢1"{hoge_select:selected#選択肢1}>選択肢1</option>
		<option value="選択肢2"{hoge_select:selected#選択肢2}>選択肢2</option>
		<option value="選択肢3"{hoge_select:selected#選択肢3}>選択肢3</option>
		</select>
		<input type="hidden" name="unit{id}[]" value="hoge_select{id}" />
	</td>
</tr>

<!-- ユニットの入力項目:PDFファイルの場合 -->
<tr>
	<th style="white-space: nowrap;">PDFファイル</th>
	<td>
		<!-- BEGIN_IF [{hoge_file@path}/nem] -->
		<input type="hidden" name="hoge_file{id}@old" value="{hoge_file@path}" />
		<input type="hidden" name="hoge_file{id}@secret" value="{hoge_file@secret}" />
		<input type="hidden" name="hoge_file{id}@fileSize" value="{hoge_file@fileSize}" />
		<label for="input-checkbox-hoge_file@edit" class="acms-admin-form-checkbox">
		<input type="checkbox" name="hoge_file{id}@edit" value="delete" id="input-checkbox-hoge_file@edit" />
		<i class="acms-admin-ico-checkbox"></i> 削除
		</label>
		<a href="%{ARCHIVES_DIR}{hoge_file@path}"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="pdf" /></a>
		{hoge_file@baseName}<br />
		<!-- END_IF -->
		<input type="file" name="hoge_file{id}" size="20" />
		<input type="hidden" name="unit{id}[]" value="hoge_file{id}" />
		<input type="hidden" name="hoge_file{id}@baseName" value="{hoge_file@baseName}" />
		<input type="hidden" name="hoge_file{id}:extension" value="file" />
		<input type="hidden" name="hoge_file{id}@extension" value="pdf" />
	</td>
</tr>

それぞれのフォーム項目には一意のIDを設けます。「考えておいたID_項目名」とするとわかりやすいです。例えば、ボタンユニットのURLだと「button_url」、フキダシユニットの人物画像だと「balloon_img」となります。

コーディングに慣れている人だとすぐ気付くと思いますが、上記スニペットの「hoge_」を置換するだけで流用できます。

フォームの意味・オプションが気になった方は、公式ドキュメントに詳しく解説がありますので参考にしてください。
カスタムフィールド | ドキュメント | a-blog cms 制作者向け情報
画像・ラジオボタンなどでは「既に値が入力されているか」の判定が必要となります。条件分岐タグ「IFブロック」を利用しています。解説はこちらを参照ください。
IFブロック | テンプレート | ドキュメント | a-blog cms 制作者向け情報

出力用テンプレートの体裁を整える

続いて、出力用テンプレートを作っていきます。

こちらも先述の「カスタムフィールドメーカー」を使うことができますが、案件によってマークアップは全く変わってきます。今回は単純に表で一覧させるコードにしてみました。

以下のコードを、出力用の「extend.html」内の「<!-- ユニットの表示 -->」のところにコピー・ペーストしてください。

<table class="acms-table acms-table-borderd">

	<!-- ユニットの表示:テキストの場合 -->
	<tr>
		<th>テキスト</th>
		<td>
			{hoge_text}
		</td>
	</tr>

	<!-- ユニットの表示:テキストエリアの場合 -->
	<tr>
		<th>テキストエリア</th>
		<td>
			{hoge_textarea}[nl2br|raw]
		</td>
	</tr>

	<!-- ユニットの表示:画像の場合 -->
	<tr>
		<th>画像</th>
		<td>
			<!-- BEGIN_IF [{hoge_img@largePath}/nem] -->
			<img src="%{ARCHIVES_DIR}{hoge_img@largePath}" alt="{hoge_img@alt}" class="acms-img-responsive" />
			<!-- END_IF -->
		</td>
	</tr>

	<!-- ユニットの表示:チェックボックスの場合 -->
	<tr>
		<th style="white-space: nowrap;">チェックボックス</th>
		<td>
			<!-- BEGIN_IF [{hoge_check}/eq/1] -->
			チェックが入っています
			<!-- ELSE -->
			<strong>チェックが入っていません</strong>
			<!-- END_IF -->
		</td>
	</tr>

	<!-- ユニットの表示:ラジオボタンの場合 -->
	<tr>
		<th>ラジオボタン</th>
		<td>
			<!-- BEGIN_IF [{hoge_radio}/em] -->
			選択肢Null
			<!-- ELSE -->
			<strong>{hoge_radio}</strong>
			<!-- END_IF -->
		</td>
	</tr>

	<!-- ユニットの表示:セレクトボックスの場合 -->
	<tr>
		<th>セレクトボックス</th>
		<td>
			<!-- BEGIN_IF [{hoge_select}/em] -->
			選択肢Null
			<!-- ELSE -->
			<strong>{hoge_select}</strong>
			<!-- END_IF -->
		</td>
	</tr>

	<!-- ユニットの表示:PDFファイルの場合 -->
	<tr>
		<th>PDFファイル</th>
		<td>
			<!-- BEGIN_IF [{hoge_file@path}/nem] -->
			<a href="%{ARCHIVES_DIR}{hoge_file@path}" target="_blank"><img src="/images/fileicon/pdf.gif" width="64" height="64" alt="pdf" /></a>
			<!-- END_IF -->
		</td>
	</tr>

</table>

投稿テストをしてみる

これで、カスタムユニットの準備ができました。
実際にエントリーを作成して、ユニットが正しく表示されるか、入力した内容が保存されるか確認してください。



実際の表示画面に表が出てくるか、入力内容が反映されるか、ダイレクト編集機能でも更新できるかもチェックしてください。


まとめ


カスタムユニットの解説は以上です。

サンプルコードを流用すれば、だいたいのユニットは数十分くらいで作ることができます。予算や工数でこういった要望を断ってきた経験がある人には、ありがたい機能ではないかと思います。

最初の方にスクリーンショットを出した「ボタンユニット」のサンプルコードを、Gistで公開しています。bootstrapなどの他のフレームワークにも対応できますので、こちらも自由にお使いください。

a-blog cmsのカスタムユニット:ボタン | webbingstudio’s gists

共有する?

このエントリーをはてなブックマークに追加
follow us in feedly

permalink

http://webbingstudio.com/weblog/cms/entry-808.html

publish