CI2 template パッケージ導入

CI2プロジェクトに spark を導入 を行い、sparks から template を導入して使ってみる。

そこそこ評判が良いとのことなので導入してみた。Rails風のレイアウト機構を提供したり、メタ、パンくず、パーシャル、テーマなどもろもろ提供してくれるらしい。

ドキュメントが公開されている点も良い。

インストール

spark を使うので、コマンドを打つだけです。spark さまさまですねぇ。素敵。

php tools/spark install template -v1.8.0

autoload かローダークラスで呼び出します。

// autoload.php
autoload['spark'][] = 'template/1.8.0';
// in the controller or so
$this->load->spark( 'template/1.8.0' );

レイアウト

一番の目的であるレイアウト機能です。全体レイアウトの外枠になるビューにたいしてコンテンツとしてビューを流し込めます。

まずは実装から。view/layouts/default.php を作ります。

<html>
<head>
  <title><?php echo $template['title'] ?></title>
</head>
<body>
  <p><?php echo $greet ?></p>
  <div><?php echo $template['body'] ?></div>
</body>
</html>

大幅に手抜きなので適宜お好きなように書いてください。

みて分かる通り、この外枠の $template[‘body’] の部分にコントローラーで指定したビューが埋め込まれます。

コントローラーでここに埋め込むビューを指定します。

// in a some action
$this->template->title( 'トップページ', 'ほげほげサイト' );
$this->template->set_layout( 'default' );
$this->template->build( 'top/index', array( 'greet' => 'hello' ) );

たとえばこんな感じで。

ここで注意なのですが、ドキュメントにはレイアウト未指定の場合は layouts/default.php が読み込まれると書いてあるのですが、読み込まれませんでした(v1.8.0使用時)。ソースを流し見ても読み込んでないような気が…。

なので、手動で set_layout( ‘default’ ) でセットしています。見たまんまですが、default を書き換えれば他の名前のレイアウトを読み込めます。

また、set_layout の第二引数にディレクトリ名を渡すと、view/hoge/layouts から呼び出したりできるようです。

template->build() の第一引数にビューを指定します。第二引数は渡したい変数の連想配列、第三引数はビュー全体を出力せずに値として返させるかなので、受け取る引数と意味に関しては view->load() と一緒です。

この build() によってココまででセットしたレイアウトや変数が組み上がるといった感じです。

template->title() は titleタグ用の値を渡します。幾つか値を渡すことができ、それらは区切り文字で分割されて出力されます。

上記の場合は 「 トップページ | ほげほげサイト 」のようになります。

区切り文字を変えたいときはtemplate/1.8.0/config/template.php の $config[‘title_separator’] で指定できます。

パーシャル

より細かい単位で分割された共通部分ビューを読み込むための機能です。

コントローラーで set_partial() に指定します。ビューで呼び出すのかと思ったらコントローラーで指定しないといけないのはちょっぴり残念ですね。

$this->template->set_partial( ‘header’, ‘partials/header’ );

パーシャルはいくつも読み込むことがあるでしょうから、メソッドチェーンで書くとかっちょいいです。

$this->template
  ->set_layout( 'default' )
  ->set_partial( 'header', 'partials/header' )
  ->set_partial( 'nav',    'partials/nav' )
  ->set_partial( 'footer', 'partials/footer' )
  ->build( 'top/index' );

ビューでの $template 変数に [‘partial’][‘header’] のように格納されるのでそれを出力します。

<html>
<head>
  <title><?php echo $template['title'] ?></title>
</head>
<body>
  <div id="header"><?php echo $template['partials']['header'] ?></div>
  <div id="nav"><?php echo $template['partials']['nav'] ?></div>
  <div id="content"><?php echo $template['body'] ?></div>
  <div id="footer"><?php echo $template['partials']['footer'] ?></div>
</body>
</html>

set_partial() はビューをパーシャルとして読み込みますが、htmlタグやテキスト単位でセットする inject_partial() というのもあります。

$this->template
  ->set_layout( 'default' )
  ->inject_partial( 'header', '<h1>Hello, from inject_partial.</h1>' )
  ->build( 'top/index' );

どちらの場合もパーシャル部分にだけ変数を渡したい場合は、第三引数に連想配列で渡します。

inject はいまいち変数を渡すこととの使い分けが思いつきませんが、こんなことも出来るってことで。

後で気がついたんですが、ビュー内で $this->load->view() をした方がコントローラーで設定する手間も無いし、使いやすいんじゃ…?

この辺の使い分け、優劣も研究したいところです。

メタデータ

prepend_metadata() と append_metadata() によって、一行分のメタデータを保持する内部の配列に先頭か後方に追加します。

$this->template
  ->prepend_metadata( '<script src="/js/jquery.js"></script>' )
  ->append_metadata( '<script src="/js/jquery.mobile.js"></script>' );

メタというので <meta> だけを扱うのかと思ったら、ただ文字列を内部の配列に追加するだけのようです。

<head> 内で順番に出力するタグを突っ込んでいくような使い方になるんでしょう。

ドキュメントには無いですが、set_metadata() というのもあります。

$this->template
  ->set_metadata( 'keywords', 'auschwitz', 'meta')
  ->set_metadata( 'help', 'help.html', 'link' );

ソースコードを読む限り第三引数が、meta か link でしか内部の配列に保持されず、link タグには rel 属性と href 属性しかセットされないようなので、css の読み込みには微妙です。だから載ってないのか…?

個人的には <head> の中身はパーシャルに分離してそれを読み込むやり方をするので、あまり使いどころがない気がします。

興味があればソースを参照してみてください。

テーマ

template/1.8.0/config/template.php の $config[‘theme_locations’]  でテーマを探すディレクトリを指定します。デフォルトは application/themes/ です。

$config[‘theme’] でデフォルトのテーマを指定できます。デフォルトは未指定なのでテーマは使用されません。

テーマは、例えば hoge テーマであれば hoge/views/ が読み込まれるようになります。

アプリケーション内でテーマを切り替えるときは set_theme() で指定することが出来ます。

未検証ですが、なんか便利そうですね。

パンくずリスト

set_breadcrumb() に文字列とURLを渡します。

$this->template
  ->set_breadcrumb( 'home', '/' )
  ->set_breadcrumb( 'help', '/help/' )

内部の配列にセットした順番で文字列をキー、URLを値として保持するだけのようです。

// $template['breadcrumbs']
array(
  'home' => '/',
  'help' => '/help/'
);

ビューで上記の配列を呼び出せるので、うまく整形して使えということでしょうか。

必要十分のような非力のような。必要十分な感じですが、他にパッケージがあればそちらに任せたいところです。

モバイルサポート

view/web/ とview/mobile/ ディレクトリを用意し、view/ 以下と同じ構成で配置すると、CI がモバイル端末だと判断した場合にmobile/ からビューが呼び出されるようです。

さらにテーマを使用していても動作するみたいです。

CI がモバイルかどうかを判断する基準は UserAgent クラスに由来します。内部で使用されていました。

実は全部は検証してなくて、ソースを見た感じの挙動を連ねた部分もありますので、検証次第修正をしていくことがあります。ご了承ください。ツッコミ大歓迎。

追記

CI Reactor 版ではコアの修正により動作しなくなっているようです(1.8.0)

Loader.php の _ci_cached_vars が protected になってアクセスできなくなったのが原因のようです。

ここから最新版が入手できますが、2.0.2 以降(reactor tipも)で動作しませんでした。

この件と同様だと思います。Loader.php の get_var() を呼んでいるようなのですが、リビジョンを流し見た感じ、存在しないような…。よくわかりません。

とりあえず、MY_Loader に get_var() を雰囲気て書き足したら動いたので参考にしてください。

public function get_var( $key ){
    return isset( $this->_ci_cached_vars[$key] ) ? $this->_ci_cached_vars[$key] : false ;
}

2.0.3 では get_var() が記述されていました。この問題は発生しません。

Loader.php クラスに get_var() が見当たらない場合は補完してあげてください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする