YiiはPHPでWebアプリケーションを開発するためのMVCフレームワーク。以下のWebサイトを参照。FrameworkYiiでの開発を始めて半年ほどではあるけれども、使おうと思っても触れることができなかった機能に、「テーマ」と「レイアウト」がある。ここではそれらの使い方を考えてみる。「テーマ」はWordPressのテーマのように、Webサイトの見栄えを切り替えるために利用する。Framework実際に使ってみよう。試しに、Yiiが自動生成する初期プロジェクトの見栄えを変えるテーマを作成してみる。[初期プロジェクトのテーマ][変更後のテーマ]変更後のテーマには「uniquevision」という名前を付けることとする。最初にすることは、ページのレイアウトを決めているファイルmain.phpを、新しく作るテーマ用にコピーすることだ。(basePath)/protected/views/layouts/main.php↓(basePath)/themes/uniquevision/views/layouts/main.php※basePathは、プロジェクトのルートパスを指していることとする。テーマはthemesというディレクトリ内に作成する。作成したディレクトリの名前がテーマの名前となる。uniquevisionテーマのカスタマイズをしてみよう。Application」の表示を、ユニークビジョンのロゴ画像に変更してみる。ロゴ画像のファイルはテーマごとのディレクトリ内に配置したいので、以下のパスを作成し、保存。その上で、パスをビューに記述する。いう変数を利用することができる。テーマのパスを参照しやすいように、Controllerクラスで以下のように変数を定義した。いう変数を使用して画像ファイルへのパスを作っている($thisはコントローラのインスタンス)。画像ファイルのパスの切り替え派できたが、CSSはどうするか。これもテーマごとのディレクトリ内に配置したい。元のCSSファイルがあるディレクトリをコピーしてしまおう。いう変数でパスを生成しているので、これを書き換える。編集しておくと、テーマによりデザインが切り替わることが確認できる。有効にするには、config/main.phpにテーマの名前を記述する。内に記述されたCSSのファイルパスは前述のようにテーマごとに切り替えることができた。clientScriptで指定するJavaScriptやCSSの場合はどうだろうか。Dialogs」を使いたいとする。その上で、テーマ個別のJavaScriptも使いたいとする。以下のように定義してみた。加えて利用するもの、とする。これらを読み込むために、コントローラに以下のメソッドを定義する。常に読み込み対象とし、テーマが設定されている場合にだけ、テーマと同じ名前のパッケージも読み込み対象としている。このメソッドをアクションから呼び出せば、config/main.phpに記述したJavaScriptとCSSがビューの<head>内に取り込まれる。アクションからの呼び出しは以下のとおり。Dialogsでメッセージボックスを表示させるなどすると、どちらのテーマでも動作することを確認することができるだろう。アクション個別で利用したいJavaScriptやCSSがある場合はどうすればいいだろうか。引数で追加のJavaScriptとCSSを指定できるようにしてある。ここに必要なファイルを指定することにする。$css);$this->render('index');}上記はテーマが指定されていればそのテーマ用のJavaScriptを参照するようになっているが、どのテーマでも共通で使用するJavaScriptを指定したい場合もあるだろう。指定しているパスを付加しなければよい。ここまで、ページのヘッダー/フッター部分やJavaScript、CSSの切り替えをしてきたが、この後はビューの内容をテーマで切り替えてみる。レイアウトによる段組みYiiは初期プロジェクトで2種類の段組みを指定できるようになっている。指定すると、2列の段組みでページが表示されるようになる。2列の場合、左側の列がメインのコンテンツを表示するエリア、右側の列がサイドバーのエリアになっている。指定されるメニュー一覧で固定されてしまっている。任意の内容を表示させたくても、それを引き渡すためのパラメータが用意されていない。テーマのログイン画面は2列の段組みとしてみよう。テーマでは、サイドバー側にログイン用入力フォームを設置する。2列にした場合にサイドバーに描画させる内容をビューに引き渡すパラメータをControllerクラスに用意する。テーマの2列用レイアウトのファイルをコピーする。(basePath)/protected/views/layouts/column2.php↓(basePath)/themes/uniquevision/views/layouts/column2.php2列の場合、サイドバー側はパーシャルで描画するようにしよう。?>アクションでは以下のようにする。パーシャルの名前と、ログイン用入力フォームで使用するモデルをセットしておく。いう名前のビューを描画する。デフォルトのテーマではメインコンテンツ側(loginビュー)に入力フォームを設置し、uniquevisionテーマではサイドバー側(_login_formパーシャルビュー)に入力フォールを設置。これで、段組みが1列の場合でも2列の場合でもログイン用入力フォームを動作させることができた。テーマにコピーしていないが、ログイン画面以外の画面が初期プロジェクトと同様に1列の段組みで表示される。レイアウトやビューのファイルがテーマに定義されていない場合は、デフォルトのテーマ(protected/views以下のファイル)が使用され、差分となるファイルだけをテーマに定義すればよいことが分かる。おわりテーマもレイアウトもWebページの見栄えを制御するものだが、うまく使えば見栄えを切り替えるための分岐処理などは書かなくてもよくなりそうだ。テーマごとに同じ内容のソースファイルを設置してしまうとメンテナンス性がよくないので、どのように利用するかはプロジェクトごとに検討する必要がある。この記事を書いている時に、あるプロジェクトで本番環境、ステージング環境、開発環境で画面の背景色を切り替えたい、という要件があり、一部テーマを利用した。活用できるケースは意外に多いのかもしれない。