concrete5 ブロックタイプの作り方
2013年1月13日
今回作成するブロック
文章１つ、画像１つの回り込みしたブロックを作成します。まず左側に画像という形で作成し、カスタムテンプレートを使用して右側に変更する方法を説明します。
内容
１．フォルダーツリー構造の説明
２．データベースの作成
３．修正時の編集用画面の作成
４．新規登録時の編集画面の作成
５．表示用画面を作成（コントローラー部）
６．表示画面のhtmlファイル作成（ビュー部）
７．表示画面のCSSファイルを作成（ビュー部）
８．カスタムテンプレートで画像を右に配置する
ブロックのファイル構造
acliss_float
| db.xml （DBテーブル定義ファイル）
| controller.php（コントローラー部（DB読み書き、POSTデータ加工）
| add.php （ブロック新規追加時に編集画面に使う）
| edit.php （ブロック編集時に編集画面に使われる）
| view.php （ビュー部、表示に使用される）
| view.css （ビュー部、表示に使用されるｃｓｓファイル）
|---- templates （カスタムテンプレートを入れるためのフォルダ）
|---- right （right という名前のカスタムテンプレート）
view.css (カスタムテンプレート適用時のview.css)
view.php(カスタムテンプレート適用時のview.php)
※全てのファイルはUTF-8の改行コードLFで作成してください。
データベースの作成
db.xml
・DBテーブル名は頭にbtを付ける。
・テーブル名はフォルダ名をキャメル式であわせた方が無難（acliss_floatフォルダなので btAclissFloat）
・ADOXMLS フォーマット形式で記述 （参照 ）
<?xml version="1.0"?>
<schema version="0.3">
<table name="btAclissFloat">
<field name="bID" type="I"><key /><unsigned /></field> //必須 ブロックID
<field name="content" type="X2"> //文章
<field name="fID" type="I"><unsigned /><default value="0" /></field>//
</table>
</schema>
修正時の編集用画面の作成
edit.php
・編集画面で使う画面を記述
form内のname属性をフィールド名と合わせると「保存」ボタンで自動保存される。
テキストエリア・ 画像ファイル選択項目を作成（ヘルパーを使用します）
<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<label><?php echo '画像' ?></label>
<div class="ccm-block-field-group">
<?php
$al = Loader::helper('concrete/asset_library');
$bf = File::getByID($fID);
echo $al->image('ccm-image','fID','画像選択',$bf);
?>
</div>
<div class="ccm-block-field-group">
<?php
$form = Loader::helper('form'); ?>
$s = array( 'style' => 'width:98.5%;height:300px;' );
echo $form->textarea(’content’,$content,$s);
?>
</div>
新規登録時の編集画面の作成
add.php
・ブロックを新規追加したときに編集画面として使われる画面を記述
今回は新規追加時と修正時に表示したい内容が一緒ですので下記のとおり記載
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('edit.php');
表示用画面を作成（コントローラー部）その１
controller.php
■テーブルへの保存や読込みに使用
クラスはブロックのフォルダ名をキャメルケースで変更しBlockController とつける
今回はacliss_floatフォルダ なので AclissFloatBlockController extends BlockController
●変数について
btName ブロック追加時に表示される名前
btDescripton ブロック追加時に表示される説明
btTable ブロックのデータ保存テーブルを指定。編集画面で設定した内容の保存用
btInterfaceWidth 編集画面の横サイズをpxで指定
btInterfaceHeight 編集画面の縦サイズをpxで指定
btTableで使われているテーブルは自動で読み込まれますので$this->フィールド名 で使用できます。
また、view.phpに値を渡すとき$this->set を 使用しますが、btTableの内容は自動的に$this->set
されるので記述の必要がありません。
・ファイル末尾のphp閉じタグは記述しないほうがよい。（閉じタグの後に空白行があるとエラーになる）
今回は使用しませんが下記のメソッドも用意されています。
save() 編集画面の保存用に使用する。編集画面で入力した内容を加工して保存したい場合
action_xxxx() view.php のフォームから呼び出されるメソッド。今回はview.phpからの受け取る値が無い
ので使用しません。
表示用画面を作成（コントローラー部）その２
<?php defined('C5_EXECUTE') or die("Access Denied.");
class AclissFloatBlockController extends BlockController
{
protected $btName ='回り込み文章作成';
protected $btDescription = 'ひとつの画像とひとつのテキストで回り込みするブロック';
protected $btTable = 'btAclissFloat';
protected $btInterfaceWidth = 400;
protected $btInterfaceHeight = 550;
public function view()
{
$f = File::getByID($this->fID);
$fPath = $f->getRelativePath();
$this->set('fPath', $fPath);
}
}
表示画面をhtmlファイル作成（ビュー部）
view.php 画面表示用のコードを記述します。
controller.php で btTable に設定したフィールド名は $フィールド名 で使用できます。
注意点としてはid属性やname属性はブロックを同ページに2つ以上置くとかぶるので$bIDを設定するのがいいと思います。
<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<div id="acliss-image<?php echo $bID?>">
<img border="0" class="acliss-image" src="<?php echo $fPath; ?>">
</div>
<div id="acliss-text<?php echo $bID?>”>
<?php echo $content?>
</div>
表示画面CSSファイルを作成（ビュー部）
view.css 画面表示用のCSSを記述します。
表示時に自動で読み込まれます。view.php と対になっているので今回はview.php用のCSSファイルと解釈してください。
#acliss-image {
float: left;
}
カスタムテンプレートで画像を右に配置する
カスタムテンプレート機能とは
ブロックと同じデータ（今回は文章1つ・画像１つ）を使用したいが表示のみ変更したというときに使用するもの（ビュー部の変更） ●命名規約
半角英数とアンダースコア、ハイフンでフォルダ名を作成
フォルダ内はview.php view.css view.js と 必ずviewを使う
今回は左上に設置した画像を右上に変更します。
画像を左に置くタイプのブロックですが、右に置く場合CSSの変更が必要です。
その場合はカスタムテンプレートを使用して別のファイルを読み込ませるように変更します。
templates フォルダ内にrightフォルダを作成します。
view.php は 先ほど作成したファイルをそのままコピー
class を acliss-image-right に変更
view.css に下記を記述
#acliss-image-right {
float: right;
}
アップロード
インストールしたconcrete5のルートのblocksにacliss_float フォルダごとアップロード
[管理画面->ブロックタイプ]から追加します。