Documentation

Theme クラス

はじめに

Theme クラスはアプリケーションにテーマを提供します。

テーマはテンプレート (ビュー) とアセットをグループ化し、アクティブなテーマを切り替える事で、 あなたのアプリケーションのルック・アンド・フィールを切り替える事ができます。

モジュールやパッケージのように、テーマを複数の場所に保存する事ができます。 あなたはこれらのパスを設定ファイルに定義するか、実行時にテーマのインスタンスに追加する事ができます。 テーマは名前で識別され、テーマのフォルダ名と同じでなければいけません。 テーマが複数の場所で定義されてる場合、最初に見つかったものが使用されます。

テーマ情報

テーマ情報ファイルで、テーマの設定情報を提供することができます。 このファイルは全てのテーマの固定の名前を持っており、グローバルな設定ファイルを使用して設定する事ができます。 また、このファイルを必須にするオプションがあります。

テーマ情報ファイルの書式は、通常の設定ファイルと同じ書式で、ファイルタイプも同じものに対応しています。 テーマ情報ファイルは 'options' と呼ぶ、特別なセクションを含める事ができます。 options は、 get か set がソースコードより利用でき、 テーマのいくつかの特性、例えば使用する色や、カラースキームを選択するためのカスタムCSSファイル名を操作するのに使用する事ができます。

テーマ情報ファイルは、読み込み専用です。実行時に options を変更する事はできますが、変更内容を書き込み保存する事はできません。

テーマアセット

あなたのテーマはアセット (画像、 JavaScript 、 CSS ファイル) を持っているでしょう。アセットはブラウザがそれらのファイルをロードできるように DOCROOT の中に配置する必要があります。テーマディレクトリ内にアセットを配置するように選択する事ができ、これは、 DOCROOT の中か、DOCROOT の外か、DOCROOT の中の別のフォルダ内にテーマファイルを持つ必要がある事を意味しています。 CDN を利用する場合など、ベース URL でアセットを指定する事もできます。

次のロジックが、テーマのアセットファイルの場所を決めるために利用されます:

• アセットフォルダが URL である場合、テーマ名がサフィックスとアセットのベース URL として利用されます。
• テーマフォルダが DOCROOT の 中 にあり、それが assets_folder に設定した名前のフォルダを含む場合、 これがテーマのアセットの URL になります。
• テーマフォルダが DOCROOT の 中 にあり、 それが assets_folder に設定した名前のフォルダを含まれていない場合、 assets_folder は、テーマの名前が追加されるまで、全てのテーマのアセットのルートと仮定されるでしょう。
• テーマフォルダが DOCROOT の 外 にある場合、 assets_folder は、テーマの名前が追加されるまで、全てのテーマのアセットのルートと仮定されるでしょう。

もし標準の Asset クラスを利用したい場合、アセットフォルダは互換性のある /css 、 /img 、や /js サブフォルダ構造である必要があります。

テーマテンプレートかレイアウト

テーマはそのページのレイアウトを定義するビューファイルでテーマテンプレートやレイアウトと連携します。

テーマテンプレートパーシャル

テンプレートの変数セクションは、テンプレートパーシャルを使用して定義する事ができ、ページのセクションを分割されたビューで構築します。 大規模なアプリケーションの設計では、パーシャルはよく別々のコードで作られ、 HMVC の呼び出しからアクセスされます。

パーシャルセクションの内容は、それぞれのパーシャルセクションためのエントリを持つ配列が定義されたビュー変数 $partials を介してアクセスすることができます。 あなたはパーシャルセクションの名前を利用しセクションにアクセスします。つまり、 'sidebar' と呼ばれるパーシャルセクションでは、 echo $partials['sidebar']; をページ·テンプレート内で利用します。

パーシャルクローム

「クローム」は UI インタフェースの設計で使用される用語であり、ウィンドウの境界のデザインとスタイリングを記述します。テーマクラスのコンテキストでは、 それはテンプレートパーシャルセクションをカプセル化するために利用することができ、これはテンプレート自体のそのセクションからの独立と部分的な出力が可能なスタイルです。 レンダリングするパーシャルがある場合にのみクロームは生成されます。 クロムテンプレートは、複数のパーシャルが含まれている可能性があるパーシャルセクションをカプセル化します。

例えば、あなたが、一部は開閉することができ、そのいくつかは移動させることができ、そしていくつかは固定されているウインドウがある UI を持っている場合、あなたは、ウィンドウを表すテンプレートの各セクションに割り当てられた異なるクロムテンプレートを使用することができます。 各クロムテンプレートは HTML と目的の機能を達成するための JavaScript コードが含まれています。 アプリケーションのコードから、単に正しいクロムテンプレートを割り当てることでウィンドウの動作を制御することができます。 これは CMS 型のアプリケーションにおいて UI の動作をユーザーが制御できることから特に役に立ちます。

サンプル:

<?php
class Homepage extends \Controller
{
	/**
	 * テーマテンプレートをロードし、ページタイトルとメニュー類をセットします
	 */
	public function before()
	{
		// テーマテンプレートをロード
		$this->theme = \Theme::instance();

		// ページテンプレートをセット
		$this->theme->set_template('layouts/homepage');

		// ページタイトルをセット (set_template() でも同じようにチェインできます)
		$this->theme->get_template()->set('title', 'My homepage');

		// ホームページナビゲーションメニューをセット
		$this->theme->set_partial('navbar', 'homepage/navbar');

		// 角丸のボーダーのサイドバーセクションを持つクロームを定義
		$this->theme->set_chrome('sidebar', 'chrome/borders/rounded', 'partial');

		// ホームページのサイドバーのコンテンツのパーシャルをセット
		$this->theme->set_partial('sidebar', 'homepage/widgets/login');
		$this->theme->set_partial('sidebar', 'homepage/widgets/news')->set('news', Model_News::latest(5));

		// ログインユーザのリストを取得するためにモデルを呼び出し、ユーザーサイドバーパーシャルに渡す
		$this->theme->set_partial('sidebar', 'homepage/widgets/users')->set('users', Model_User::logged_in_users());
	}

	/**
	 * 簡単な例です。通常のアクションメソッドは、おそらく、モデルからデータを取り出し、
	 * パーシャルビューにこのデータを渡すためのコードを持っているでしょう...
	 */
	public function action_index()
	{
		// ホームページには Flash イメージのバナーがあります
		$this->theme->set_partial('banner', 'homepage/banner');

		// a block of static content
		$this->theme->set_partial('content', 'homepage/content');

		// そして、2つのリンクリストとコピーライトのブロック
		$this->theme->set_partial('footerleft', 'homepage/shortcuts');
		$this->theme->set_partial('footercenter', 'homepage/links');
		$this->theme->set_partial('footerright', 'homepage/copyright');
	}

	/**
	 * アクションからのカスタムレスポンスを許容するために、出来る限り標準の after() を維持
	 */
	public function after($response)
	{
		// アクションから返すレスポンスオブジェクトが無い場合
		if (empty($response) or  ! $response instanceof Response)
		{
			// 定義されたテンプレートをレンダリングします
			$response = \Response::forge(\Theme::instance()->render());
		}

		return parent::after($response);
	}
}
	

設定

テーマクラスの設定は app/config/theme.php で設定されています。 デフォルトの設定ファイルは fuel/core/config 内にあります。 このファイルをアプリケーションの設定ディレクトリにコピーして、必要な箇所を変更する事で、オーバーライドする事ができます。

'default'

'default'

array()

'assets'

'.html'

'themeinfo.php'

false

false

設定ファイルのサンプル:

// app/config/theme.php の中

return array(
	'active' => 'default',
	'fallback' => 'default',
	'paths' => array(			// DOCROOT の外にあるテーマファイルはここ
		APPPATH.'themes',
	),
	'assets_folder' => 'themes',	// これは <localpath>/public/themes/<themename>... を意味します
	'view_ext' => '.html',
	'info_file_name' => 'themeinfo.ini',
	'require_info_file' => false,
	'use_modules' => true,
);
	

設定ができたら、 Theme クラスを使いはじめることが出来ます。