高度な利用方法：独自のグリッドフレームワークのサポートを追加する

注意

このページの解説は、concrete5 バージョン 5.7.2.1 以降を対象にしています。
内容は下記の動画の解説（英語）を文字に起こしたものです。
本稿の執筆時点のバージョン 5.7.2.1 時点では Foundation は concrete5 のコアで対応されていないことになっていますが、バージョン 5.7.3 から Foundation フレームワークも正式にサポートされました。そのため、解説の内容と実際の挙動が一部異なる部分がありますが、ここでは Foundation は concrete5 で対応されていないものとしてお読みください。

概要

Concrete5 5.7.0 はグリッドフレームワークとしてBootstrap2, 960, そして Bootstrap 3 を同梱しています（そしてモバイルファーストで設計されている Bootstrap 3 を使うことをお奨めします）。しかし、これらだけがグリッドフレームワークではありませんし、Bootstrap 3 だけがモバイフファーストなフレームワークでもありません。Foundationはもう一つの有名なフロントエンドフレームワークで、モバイルファーストで設計されています。この Zurb Foundation をベースにした concrete5 テーマを作るには、Zurb Foundation グリッドシステムをサポートする必要があります。

テーマパッケージ

zurb_foundation というテーマパッケージを作りました。このテーマはパッケージフォーマットであることが重要です。なぜなら、テーマだけがインストールしたいものではないからです。グリッドフレームワーク用のPHPファイルもテーマと一緒にパッケージ化する必要があります。このグリッドフレームワーク用のファイルは、concrete5 にそのグリッドフレームワークがどのように構成されているかを伝えます。何カラムをサポートしているか、カラムに使用するCSSクラスは、カラムのオフセットに使用するCSSクラスは、など…

テーマそのものはとてもシンプルです。テーマ化にあたって特別な作業はしておらず、デフォルトページテンプレートのみ作成しました。よりよい Zurb Foundationベースのテーマを作るにはもっと作業が必要だと思いますが、ここでは本題ではないので省きます。

テーマのパッケージ化について知りたい方は、テーマをパッケージ化するを先にご覧ください。

まず、パッケージをインストールします

まず、空の concrete5 サイトに作成したパッケージをインストールします。

次に、テーマを有効化します

テーマは［管理画面＞ページとテーマ＞テーマ］から有効化できます。テーマを有効化してサイト内のすべてのページに適用しましょう。

ホームページ

ホームページにアクセスすると、とてもシンプルなデフォルトページテンプレートでできたページが表示されます。テンプレートファイル default.php も非常にシンプルです。該当箇所のコードを示します。

<div class="row">
    <div class="large-3 columns">
    <?
        $a = new Area('Sidebar');
        $a->display($c);
    ?>
    </div>
    <div class="large-9 columns">
    <?
        $a = new Area('Main');
        $a->display($c);
    ?>
    </div>
</div>

Zurb Foundation を使ったことのある方には、おなじみのHTML構造かと思います。しかし、Foundation グリッドを Main エリア内に追加できるようにするにはどうすれば良いでしょうか。エリアでグリッドレイアウトを有効にするを参考にしてください。次のように変更しました。

<?
    $a = new Area('Main');
    $a->setAreaGridMaximumColumns(12);
    $a->display($c);
?>

なぜ 12 なのでしょうか？それは、Zurb Foundation グリッドが最大12カラムまでだからです。

Foundation グリッドを追加

ページを編集モードにしてレイアウトを追加しようとすると、自由形式のレイアウトのみ選択できることに気づくと思います。これは、まだどのグリッドフレームワークを使用可能かを指定していないからです。Foundation グリッドフレームワークがコアに含まれていないので、パッケージに追加し、さらに PageTheme クラスで指定したいと思います。

まず、PageTheme クラスに追加

次のコードをテーマの PageTheme クラスに追加します。

protected $pThemeGridFrameworkHandle = 'foundation';

このままページを再読み込みすると、次のエラーが表示されます。

Driver [foundation] not supported

これは期待される動作です。concrete5 に foundation という名前グリッドフレームワークを読み込むように指定しましたが、そのフレームワークのファイルがどこにあるかは伝えていないためです。または、そのフレームワークがどのように動作するか指定していないためです。

グリッドフレームワーク用のPHPクラスを作成

それでは、Foundation グリッドフレームワークを定義する PHP クラスを作成しましょう。

まず、あなたのパッケージディレクトリ内に packages/zurb_foundation/src/FoundationGridFramework.php ファイルを作成します。

そして、ファイル内に PHP クラスを作成します。

namespace Concrete\Package\ZurbFoundation\Src;
 
use Concrete\Core\Page\Theme\GridFramework\GridFramework;
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
class FoundationGridFramework extends GridFramework
{
 
}

クラス名は \Concrete\Core\Page\Theme\GridFramework\GridFramework クラスを継承して、自由につけることができます。GridFramework クラスは、グリッドフレームワークの機能を記述するための必要なメソッドを定義している抽象クラスです。これらのメソッドを実装する必要があります。

    abstract public function getPageThemeGridFrameworkName();
    abstract public function getPageThemeGridFrameworkRowStartHTML();
    abstract public function getPageThemeGridFrameworkRowEndHTML();
    abstract public function getPageThemeGridFrameworkContainerStartHTML();
    abstract public function getPageThemeGridFrameworkContainerEndHTML();
    abstract public function getPageThemeGridFrameworkColumnClasses();
    abstract public function getPageThemeGridFrameworkColumnOffsetClasses();
    abstract public function getPageThemeGridFrameworkColumnAdditionalClasses();
    abstract public function getPageThemeGridFrameworkColumnOffsetAdditionalClasses();

これらのメソッド名でだいたい意味がお分かりと思いますが、グリッドフレームワークはクラス名で、コンテナ、行、オフセットクラスなどでカラムのレイアウトを表現します。以下は、Zurb Foundation グリッドを実装した例です：

public function getPageThemeGridFrameworkName()
{
    return t('Foundation');
}
 
public function getPageThemeGridFrameworkRowStartHTML()
{
    return '<div class="row">';
}
 
public function getPageThemeGridFrameworkRowEndHTML()
{
    return '</div>';
}
 
public function getPageThemeGridFrameworkContainerStartHTML()
{
    return '';
}
 
public function getPageThemeGridFrameworkContainerEndHTML()
{
    return '';
}
 
public function getPageThemeGridFrameworkColumnClasses()
{
    $columns = array(
        'small-1 ',
        'small-2 ',
        'small-3',
        'small-4',
        'small-5',
        'small-6',
        'small-7',
        'small-8',
        'small-9',
        'small-10',
        'small-11',
        'small-12',
    );
    return $columns;
}
 
public function getPageThemeGridFrameworkColumnOffsetClasses()
{
    $offsets = array(
        'small-offset-1',
        'small-offset-2',
        'small-offset-3',
        'small-offset-4',
        'small-offset-5',
        'small-offset-6',
        'small-offset-7',
        'small-offset-8',
        'small-offset-9',
        'small-offset-10',
        'small-offset-11',
        'small-offset-12',
    );
    return $offsets;
}
 
public function getPageThemeGridFrameworkColumnAdditionalClasses()
{
    return 'columns';
}
 
public function getPageThemeGridFrameworkColumnOffsetAdditionalClasses()
{
    return 'columns';
}

Foundation グリッドの行は、row というクラス名の div で始まります。Zurb Foundation グリッドフレームワークには、コンテナクラスがありませんので、それらのメソッドは空の文字列を返しています。getPageThemeGridFrameworkColumnClasses と getPageThemeGridFrameworkColumnOffsetClasses はカラムのクラス名とオフセットのクラス名を定義します。そして最後に、getPageThemeGridFrameworkColumnAdditionalClasses と getPageThemeGridFrameworkColumnOffsetAdditionalClasses が "columns" という文字列を返しています。これは、グリッドのカラムとオフセットのカラムは、それぞれ追加で "columns" というクラスを指定する必要があるからです。

以下は、packages/zurb_foundation/src/FoundationGridFramework.php ファイルの全体です

<?php 
namespace Concrete\Package\ZurbFoundation\Src;
 
use Concrete\Core\Page\Theme\GridFramework\GridFramework;
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
class FoundationGridFramework extends GridFramework
{
 
    public function getPageThemeGridFrameworkName()
    {
        return t('Foundation');
    }
 
    public function getPageThemeGridFrameworkRowStartHTML()
    {
        return '<div class="row">';
    }
 
    public function getPageThemeGridFrameworkRowEndHTML()
    {
        return '</div>';
    }
 
    public function getPageThemeGridFrameworkContainerStartHTML()
    {
        return '';
    }
 
    public function getPageThemeGridFrameworkContainerEndHTML()
    {
        return '';
    }
 
    public function getPageThemeGridFrameworkColumnClasses()
    {
        $columns = array(
            'small-1 ',
            'small-2 ',
            'small-3',
            'small-4',
            'small-5',
            'small-6',
            'small-7',
            'small-8',
            'small-9',
            'small-10',
            'small-11',
            'small-12',
        );
        return $columns;
    }
 
    public function getPageThemeGridFrameworkColumnOffsetClasses()
    {
        $offsets = array(
            'small-offset-1',
            'small-offset-2',
            'small-offset-3',
            'small-offset-4',
            'small-offset-5',
            'small-offset-6',
            'small-offset-7',
            'small-offset-8',
            'small-offset-9',
            'small-offset-10',
            'small-offset-11',
            'small-offset-12',
        );
        return $offsets;
    }
 
    public function getPageThemeGridFrameworkColumnAdditionalClasses()
    {
        return 'columns';
    }
 
    public function getPageThemeGridFrameworkColumnOffsetAdditionalClasses()
    {
        return 'columns';
    }
 
}

パッケージからグリッドフレームワークを登録する

これでグリッドフレームワークのファイルを作成できましたので、PageTheme クラスにこのファイルを読み込ませる方法を指示しましょう。グリッドフレームワークを登録するには、パッケージの on_start() メソッドが最適です。on_start() はオブションのメソッドで、インストール済みのパッケージで、このメソッドが定義されている場合、すべてのページの読み込み時に実行されます。

packages/zurb_foundation/controller.php を開き、次の２行を namespace の記述の次に追加します。これらのクラスをこの controller.php 内で使用するためです。

use Concrete\Package\ZurbFoundation\Src\FoundationGridFramework;
use Core;

１行目は先ほど作成したクラスです。２行目はグローバルの Core オブジェクトで、concrete5 5.7 でオブジェクトを作成するのに使われます。

さらに、次のメソッドをパッケージに追加します。

public function on_start()
{
    $manager = Core::make('manager/grid_framework');
    $manager->extend('foundation', function($app) {
        return new FoundationGridFramework();
    });
}

この少量のコードで様々なことが行われていますが、複雑なことはしていません。まず、グリッドフレームワークマネージャーのインスタンスを作成しています。concrete5 5.7では、Manager クラスからパッケージから追加したフレームワークが提供されます。グリッドフレームワークマネージャーのインスタンスが取得できたら、"foundation" という名前の拡張フレームワークを登録しています。２つ目のパラメーターには、オブジェクトを返すシンプルなPHPクロージャを記述しています。グリッドフレームワークマネージャーが "foundation" クラスを呼び出した時、このオブジェクトが返されます。

以上です

ページを編集モードにすると、Foundation が有効になっており、Foundation でグリッドが作成できるようになっているかと思います。

Foundation の今後

このチュートリアルはパッケージ経由で Foundation グリッドのサポートを追加する方法ですが、独自のグリッドフレームワークを追加する場合も同じです。また、Foundation を使用したい場合は、5.7.2.1 からコアに含まれています。

原文：Advanced: Create & Use Your Own Grid Framework