Phalconのアセット管理

今日は、Phalconのアセット管理を勉強してみたいと思います。アセットとは、資産、資源、財産などの意味を持つ英単語で、企業の情報システムでは、システムを構成する機器や資材、ソフトウエア、ライセンスなどの要素をアセットということがあります。Phalcon\Assetとは、開発者がWebアプリケーションでCSSやJavascritpライブラリなどの静的リソースを管理できるためのコンポーネントです。

Phalcon\Asset\Managerは、サービスコンテナで使用できますので、コンテナが利用可能なアプリケーションのどの部分からでもリソースを追加することができます。

リソースの追加

アセットは、CSSおよびJavaScriptの2つの組み込みリソースをサポートしています。あなたが必要な場合は、他のリソースを作成することができます。アセットマネージャは、内部リソースの2つのデフォルトのコレクションにJavaScriptとCSSのために別のものを格納します。

以下のようなあなたは、簡単にこれらのコレクションにリソースを追加することができます。

<?php
class IndexController extends Phalcon\Mvc\Controller
 {
 public function index()
 {
//いくつかのローカルCSSリソースを追加
 $this->assets
 ->addCss('css/style.css')
 ->addCss('css/index.css');
//そして、いくつかのローカルjavascriptリソースを追加
 $this->assets
 ->addJs('js/jquery.js')
 ->addJs('js/bootstrap.min.js');
}
 }

その後、ビューに追加されたリソースを出力することができます:

<html>
 <head>
 <title>Some amazing website</title>
 <?php $this->assets->outputCss() ?>
 </head>
 <body>
<!-- ... -->
<?php $this->assets->outputJs() ?>
 </body>
 <html>

ローカル/リモートリソース

ローカルリソースは、同じアプリケーションによって提供していて、それらは、アプリケーションのドキュメントルートに位置している人々である。ローカルリソース内のURLは「URL」サービス、通常によって生成された ファルコン\ MVC \ URLを

リモートリソースは、CDNによって提供されたjqueryや、bootstrap、などの一般的なライブラリである。

<?php
//いくつかのローカルCSSリソースを追加
 $this->assets
 ->addCss('//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css', false)
 ->addCss('css/style.css', true);

コレクション

CSSやJS:同じ型のコレクション·グループ·リソースは、資産マネージャは、暗黙のうちに2のコレクションを作成します。あなたは、ビューでそれらのリソースを配置を容易にするためにグループの特定のリソースへの追加のコレクションを作成することができます。

<?php
//ヘッダーのJavascripts
 $this->assets
 ->collection('header')
 ->addJs('js/jquery.js')
 ->addJs('js/bootstrap.min.js');
//フッターのJavascripts
 $this->assets
 ->collection('footer')
 ->addJs('js/jquery.js')
 ->addJs('js/bootstrap.min.js');

その後ビューで出力します。

<html>
 <head>
 <title>Some amazing website</title>
 <?php $this->assets->outputJs('header') ?>
 </head>
 <body>
<!-- ... -->
<?php $this->assets->outputJs('footer') ?>
 </body>
 <html>

プレフィックス

コレクションは、URL接頭辞を付けることができ、これは簡単にいつでも、他のサーバーから変更することができます。

<?php
$scripts = $this->assets->collection('footer');
if ($config->enviroment == 'development') {
 $scripts->setPrefix('/');
 } else {
 $scripts->setPrefix('http:://cdn.example.com/');
 }
$scripts->addJs('js/jquery.js')
 ->addJs('js/bootstrap.min.js');
chaineable構文はあまりにも提供されています:
<?php
$scripts = $assets
 ->collection('header')
 ->setPrefix('http://cdn.example.com/')
 ->setLocal(false)
 ->addJs('js/jquery.js')
 ->addJs('js/bootstrap.min.js');

縮小/フィルタリング

Phalcon\Assetsは、JavaScriptとCSSリソースの組み込みの縮小を提供しています。開発者は、ものがフィルタリングされなければならないと、彼らがそうであるよう、どれがままにしておく必要がありアセットマネージャーに指示するリソースの集合を作成することができます。上記に加えて、ダグラスクロックフォードによるJsminは、最大のパフォーマンスのためにJavaScriptファイルの縮小を提供するコアの拡張機能の一部です。CSSの土地では、ライアン·デイによるCSSMinはCSSファイルを縮小化することも可能です。

次の例は、リソースの集合を縮小化する方法を示しています。

<?php
$manager
//それらのJavascriptsは、ページの最後にあります。
 ->collection('jsFooter')
//最終出力名
 ->setTargetPath('final.js')
//スクリプトタグは、このURIで発生します
 ->setTargetUri('production/final.js')
//これは、フィルタリングされる必要の無いリモートリソースです
 ->addJs('code.jquery.com/jquery-1.10.0.min.js', true, false)
//これらは、フィルタリングされなければならないローカルリソースです
 ->addJs('common-functions.js')
 ->addJs('page-functions.js')
//ひとつのファイル内に全てのリソースを接続
 ->join(true)
//組み込みフィルターを使用
 ->addFilter(new Phalcon\Assets\Filters\Jsmin())
//カスタムフィルタを使用
 ->addFilter(new MyApp\Assets\Filters\LicenseStamper());

これは、コレクションは両方のjavascriptやcssのリソースを含むことはできませんがアセットマネージャからリソースのコレクションを取得して起動します。いくつかのリソースは、リモートでもよい、すなわち、それらは、さらに、フィルタリングのためのリモートソースからHTTPによって得られています。これは、それらを得るためのオーバーヘッドを排除するローカルに外部リソースに変換することをお勧めします。

<?php
//These Javascripts are located in the page's bottom
 $js = $manager->collection('jsFooter');

上で見たように、addJsメソッドは、コレクションにリソースを追加するために使用され、2番目のパラメータは、リソースが外部であるかどうか、3番目のパラメータは、リソースをフィルタリングしておく必要があるかどうかを示します。

<?php
// このリモートリソースは、フィルタリングする必要が無い
$js->addJs('code.jquery.com/jquery-1.10.0.min.js', true, false);
// これらは、フィルタリングされなければならないローカルリソース
$js->addJs('common-functions.js');
$js->addJs('page-functions.js');

コレクションに登録されている複数のフィルタは、リソースの内容はフィルタが登録された同じ順序でフィルタリングされ、許可されます。

<?php
//組み込みJsmin(圧縮版)フィルタを使用
$js->addFilter(new Phalcon\Assets\Filters\Jsmin());
//カスタムフィルタを使用
$js->addFilter(new MyApp\Assets\Filters\LicenseStamper());

両方の組み込みおよびカスタムフィルタは、透過コレクションに適用することができる。最後のステップは、コレクション内のすべてのリソースが単一のファイルに参加したり、個別にそれらのそれぞれにサービスを提供しなければならないかどうかを決定します。すべてのリソースを使用すると、メソッドを使用することができます参加している必要があり、コレクションを言うと「参加する」:

<?php
// フィルタリング不要のリモートソース
$js->join(true);
//最後のファイルパスの名前
$js->setTargetPath('public/production/final.js');
//HTMLタグスクリプトは、このURIで作成される
$js->setTargetUri('production/final.js');

リソースは参加しようとしている場合は、リソースを保存するために使用され、そのuriはそれを表示するために使用されるフ​​ァイルを定義することも必要である。これらの設定は、setTargetPath()メソッドとsetTargetUri()メソッドで設定されている。

ビルトインフィルタ

ファルコンは、それらのC-バックエンドはこのタスクを実行するために最小限のオーバーヘッドを提供し、それぞれJavaScriptとCSSの両方を縮小化するために2つの組み込みフィルタが用意されています。

フィルタ 説明
Phalcon\Assets\Filters\Jsmin Javascriptのインタプリタ/コンパイラによって無視され、不要な文字を削除された縮小化Javascript
Phalcon\Assets\Filters\Cssmin すでにブラウザによって無視され、不要な文字を削除された縮小化CSS

カスタムフィルタ

組み込みフィルタに加えて、開発者は自分のフィルタを作成することができます。既存のYUI、Sass、Clousure等のような、より高度なツールを活用することができます。

<?php
use Phalcon\Assets\FilterInterface;
/**
 * YUIを使ったCSSフィルタコンテンツ
 *
 * @param string $contents
 * @return string
 */
class CssYUICompressor implements FilterInterface
{
protected $_options;
/**
 * CssYUIコンポーネントコンストラクタ
 *
 * @param array $options
 */
 public function __construct($options)
 {
 $this->_options = $options;
 }
/**
 * フィルタリングの実行
 *
 * @param string $contents
 * @return string
 */
 public function filter($contents)
 {
//現在のファイルに文字列コンテンツを書き込む
 file_put_contents('temp/my-temp-1.css', $contents);
system(
 $this->_options['java-bin'] .
 ' -jar ' .
 $this->_options['yui'] .
 ' --type css '.
 'temp/my-temp-file-1.css ' .
 $this->_options['extra-options'] .
 ' -o temp/my-temp-file-2.css'
 );
//ファイルのコンテンツを返す
 return file_get_contents("temp/my-temp-file-2.css");
 }
}

使用方法

<?php
//いくつかのCSSコレクションを取得
$css = $this->assets->get('head');
//コレクションの中のYUIコンポーネントを追加・許可
$css->addFilter(new CssYUICompressor(array(
 'java-bin' => '/usr/local/bin/java',
 'yui' => '/some/path/yuicompressor-x.y.z.jar',
 'extra-options' => '--charset utf8'
)));

カスタム出力

outputJsメソッドとoutputCssメソッドは、リソースの各タイプに応じて必要なHTMLコードを生成するために利用可能である。あなたは、このメソッドをオーバーライドするか、次のように手動でリソースを出力することができます。

<?php
foreach ($this->assets->collection('js') as $resource) {
 echo \Phalcon\Tag::javascriptInclude($resource->getPath());
}

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ