カスタムブロックの開発がはかどる Block Developer アドオンのご紹介

菱川拓郎
菱川拓郎

concrete5でWebサイトを制作する際、サイトのコンテンツに合わせて専用の入力欄を持ったブロックを用意したいことがあります。PHPを使っていちから開発することも可能ですが、アドオンを使って大幅な開発の省力化・スピードアップが可能です。

今回は、そんなブロックを開発できるアドオン、Block Developer をご紹介します。

Block Developer は、109ドル（2019年２月現在）で公式マーケットプレイスで販売されています。同じ開発者が Block Designer と Block Designer Pro というアドオンも公開していますが、管理画面からマウス操作でブロックが作成できる Block Designer と違って、Block Developer は管理画面がないなど、少し開発者向けの仕様になっています。ただ、その分、柔軟性が高いのが特徴です。また、Block Designer アドオンで作成したブロックは、一度アンインストールしないと設定変更ができないという制限がありましたが、Block Developer ではアンインストールせずにブロックの設定変更が可能です。これは、開発中に要件が変わるときに特に重宝します。

それでは、Block Developer の基本的な使い方をご紹介します。このアドオンでブロックを開発するには、コマンドラインインターフェースを使用します。使うコマンドは concrete/bin/concrete5 c5:block-developer だけです。コマンドをタイプすると、作成するブロックのハンドル名、既存のアドオンの中にインストールするかどうか、ブロック名の３つの情報を聞かれますので、コマンドラインで答えていきます。

$ concrete/bin/concrete5 c5:block-developer
 Enter your desired Block Handle - Lowercase letters and underscores only (without starting/ending with underscores) and a minimum of 3 characters:
 > my_custom_block
 Do you want to place this Block Type within an already installed Package [y/N]:  (yes/no) [no]:
 > no
 Enter your desired Block Name [My Custom Block]:
 > 
Writing files to new Block Type directory... done.
Setting correct namespace for the Block Type controller.php file... done.
Setting name for the Block Type... done.
Building database file (db.xml)... done.
Refreshing the Block Type... done.
Building view template for the Block Type in progress... done.
Building additional template(s) for the Block Type in progress... done.
Checking if needs to be installed... done.
Installing the Block Type... done.
Please edit the /path/to/concrete5/application/blocks/my_custom_block/config.php file to include fields and perhaps change other values to your likings. Run this same command again after changing this file, to apply the changes you made.
task(s) completed.

これで、ブロックの作成とインストールが完了です。あっけないですね。コマンドに表示されたファイルの中身を確認すると、次のようなPHPの配列でできた設定ファイルが作られています。

<?php

return [
	// Block
	"block"  => [
		"name"        => t("My Custom Block"),
		"description" => t("Created with Block Developer"),
	],

	// Fields
	"fields" => [
		"title" => [
			"type"        => "Text",
			"label"       => t("A Text Input Field"),
			"description" => t("This is the description of the field"),
			"required"    => true,
			"searchable"  => true,
		],
	],
];

この設定ファイルでは、ブロックの名前と説明の他に、入力欄についての設定が記述されています。この設定を変更することで、様々な入力欄を持ったブロックの設定が作れます。仕様できる入力欄の種類は、アドオン作者によるドキュメントをご参照ください。

CONFIGURATION FILE - FIELD TYPES

設定ファイルを変更し終わったら、最初のコマンドをもう一度実行してください。入力欄の変更に応じたデータベースの更新が行われます。

config.php を変更してコマンド実行→反映　の流れです。config.phpは使い回しができますので、他の案件で作ったconfig.phpを少し変更してコマンド実行すれば、同じような仕様のブロックを新しいサイトに再作成することもできます。concrete5 でたくさんのサイトを制作する方には特に嬉しい機能でしょう。

また、設定ファイルはPHPファイルですので、様々な処理を書いて設定ファイルの表現力をアップすることができます。下記に、様々な入力フィールドの種類や、Font Awesomeアイコンを選択肢として仕様する方法などを盛り込んだ、設定ファイルのサンプルを掲載しておきます。参考にしてみてください。

<?php

// Font Awesome アイコンの一覧を取得ここから
$cssPath = DIR_BASE . '/' . DIRNAME_CORE . '/' . DIRNAME_CSS . '/font-awesome.css';
$cssContent = file_get_contents($cssPath);
$pattern = '/(?:.fa-)([a-z-]+)(?:\s*\:before{\s*content\:)/';
preg_match_all($pattern, $cssContent, $matches);
$icons = array_combine($matches[1], $matches[1]);
ksort($icons);
// Font Awesome アイコンの一覧を取得ここまで

// ブロック設定配列ここから
return [
    // ブロックについて
    "block" => [
        "name" => "ブロックデベロッパーサンプルブロック",
        "description" => "ブロックデベロッパーで作成したブロックです。",
    ],

    // インターフェース設定
    "interface" => [
        // 編集ウィンドウの幅
        "width" => 640,
        // 編集ウィンドウの高さ
        "height" => 480,
    ],

    /**
     * タブ設定
     *   配列でタブのキーとラベルを指定します。
     *   タブを使用しない場合は記述不要です。
     */
    "tabs" => [
        "basics" => "基本",
        "advanced" => "拡張",
    ],

    // フィールド設定
    "fields" => [
        // "heading" がこのフィールドのハンドル名になります。
        "heading" => [
            /**
             * "type" でフィールドの種類を指定します。
             * 利用できるフィールドの一覧は公式サイトを参照
             * @see https://concrete5.devoda.nl/plugins/block-developer/documentation/create-block-type/configuration-file-field-types
             */
            "type" => "Text",
            // "label" で編集ウィンドウに表示される
            // フィールドのラベルを指定します。
            "label" => "見出し",
            // テンプレート設定
            "view" => [
                // "prefix" で、値の前に挿入されるコードを指定します。
                "prefix" => '<h3>',
                // "suffix" で、値の後に挿入されるコードを指定します。
                "suffix" => '</h3>',
            ],
            // 必須入力にしたい場合、"required" を true にします。
            "required" => true,
            // 検索対象にしたい場合、"searchable" を true にします。
            "searchable" => true,
            /**
             * "tab" で、編集ウィンドウ内のどのタブに
             * このフィールドを表示するか指定します。
             * タブを使用しない場合は記述不要です。
             */
            "tab" => "basics",
        ],
        "content" => [
            // 複数行テキスト
            "type" => "Textarea",
            "label" => "本文",
            "view" => [
                // nl2br() 関数で囲みます。
                // 改行を <br> タグに変換できます。
                "nl2br" => true,
                "prefix" => '<p>',
                "suffix" => '</p>',
            ],
            "required" => true,
            "searchable" => true,
            "tab" => "basics",
        ],
        "file" => [
            // ファイルマネージャーからファイルを選択できます。
            "type" => "File",
            "label" => "添付ファイル",
            "tab" => "basics",
        ],
        "page" => [
            // サイトマップからページを選択できます。
            "type" => "Page",
            "label" => "ページ選択",
            "tab" => "basics",
        ],
        "pickup" => [
            // ２択オプション
            "type" => "Boolean",
            "label" => "ピックアップ",
            "config" => [
                "yes_value" => "対象",
                "no_value" => "対象外",
            ],
            "view" => [
                "yes_value" => "ピックアップ",
                "no_value" => "通常",
                "prefix" => '<p><span class="label label-default">',
                "suffix" => '</span></p>',
            ],
            "tab" => "advanced",
        ],
        "status" => [
            // ３択以上
            "type" => "Options",
            "label" => "ステータス",
            "config" => [
                "options" => [
                    "scheduled" => "開催予定",
                    "open" => "受付中",
                    "closed" => "受付終了",
                ],
            ],
        ],
        "color" => [
            // カラーピッカー
            "type" => "ColorPicker",
            "label" => "カラーコード",
            "tab" => "advanced",
        ],
        "date" => [
            // 日付選択
            "type" => "DateTime",
            "label" => "日付",
            "tab" => "basics",
        ],
        "information" => [
            /**
             * 繰り返し要素
             * Repeatable 以外のフィールドをセットにして、
             * 繰り返し入力させることができます。
             */
            "type" => "Repeatable",
            "label" => "備考",
            "config" => [
                // 追加ボタンのラベル
                "add_label" => "備考を追加",
                // 繰り返し入力させるフィールドの設定
                "fields" => [
                    "item" => [
                        "type" => "Text",
                        "label" => "項目",
                        "view" => [
                            "prefix" => '<li>',
                            "suffix" => '</li>',
                        ],
                    ],
                ],
            ],
            "view" => [
                "prefix" => '<ul>',
                "suffix" => '</ul>',
            ],
            "tab" => "basics",
        ],
        /**
         * 設定ファイル内にPHPを記述できるため、
         * 動的な選択肢を作成することもできます。
         */
        "fontawesome" => [
            "type" => "Select",
            "label" => t("Font Awesome Font"),
            "config" => [
                // 別途取得した Font Awesome アイコン一覧を設定
                "options" => $icons,
            ],
            "view" => [
                "type" => "value",
                "prefix" => '<i class="fa fa-',
                "suffix" => '"></i>',
            ],
            "tab" => "advanced",
        ],
    ],
];

上記の設定ファイルで作成されたブロックの編集画面のキャプチャです。

  • slide
  • slide
  • slide
＜ 前へ 一覧へ戻る 次へ ＞