Blame view
sources/3rdparty/kriswallsmith/assetic/docs/ja/concepts.md
5.49 KB
|
6d9380f96
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
Assetic OOP APIを使用するためには、まず、[アセット」と「フィルタ」の2つの重要なコンセプトを理解する必要があります。
### アセット
アセットとは、読み込み、及びダンプが可能な、コンテンツとメタデータを内包しているオブジェクトの事を指します。
大体の場合において3つのカテゴリー、すなわち、Javascriptとスタイルシート、画像のどれかに属することになるでしょう。
読み込みの方法としては、ファイルシステムからがほとんどですが、
HTTPやデータベース経由でも、文字列としてでも読み込みが可能で、事実上あらゆるものが読み込み可能です。
Asseticのアセットインターフェースを満足させさえすれば良いのです。
### フィルタ
フィルタは、アセットが読み込まれる、かつ/もしくは、ダンプされる際に、
アセットコンテンツに対して作用するオブジェクトです。
アセットと同様に、Asseticのフィルタインターフェースを実装することで、
どのような作用も可能になります。
フィルタを用いて、アセットに適用できるツール群の一覧です。
* CoffeeScript
* CssEmbed
* CssMin
* Google Closure Compiler
* jpegoptim
* jpegtran
* Less
* LessPHP
* optipng
* Packager
* pngout
* SASS
* Sprockets (version 1)
* Stylus
* YUI Compressor
### アセットとフィルタの使用
まずはアセットオブジェクトを作成することから始まります。
多くの場合は`FileAsset`をインスタンス化し、ファイルシステムのパスを第一引数に渡します。
$asset = new Assetic\Asset\FileAsset('/path/to/main.css');
アセットオブジェクトを作成したら、`ensureFilter()`を呼び、フィルタを追加します。
例えば、アセットコンテンツにYUI Compressorを適用してみましょう。
$yui = new Assetic\Filter\Yui\CssCompressorFilter('/path/to/yui.jar');
$asset->ensureFilter($yui);
任意のフィルタを追加したら、完成したアセットをブラウザに出力してみましょう。
header('Content-Type: text/css');
echo $asset->dump();
### アセットコレクション
1つのファイルに同じ種類のアセットをまとめて、不要なHTTPリクエストを抑えてみるのも良いでしょう。
Asseticでは`AsseticColletion`クラスを使用することで可能となります。
Assetic内部的には、このクラス自体は他のアセットと同様に、アセットインターフェースを実装したものですが、
複数のアセットを1つにまとめることが可能になります。
use Assetic\Asset\AssetCollection;
$asset = new AssetCollection(array(
new FileAsset('/path/to/js/jquery.js'),
new FileAsset('/path/to/js/jquery.plugin.js'),
new FileAsset('/path/to/js/application.js'),
));
### ネストしたアセットコレクション
コレクションクラス自体がアセットインターフェースを実装し、コレクション内のアセットも同様に
アセットインターフェースを実装しているので、簡単にネストすることができます。
use Assetic\Asset\AssetCollection;
use Assetic\Asset\GlobAsset;
use Assetic\Asset\HttpAsset;
$asset = new AssetCollection(array(
new HttpAsset('http://example.com/jquery.min.js'),
new GlobAsset('/path/to/js/*'),
));
`HttpAsset`は、HTTP経由でファイルを読み込むアセットクラス。
`GlobAsset`は、ファイルシステムのglobを基にファイル群を読み込むアセットコレクションクラス。
両者ともにアセットインターフェースを実装しています。
このネストしたアセットコレクションという概念は、コレクションそれぞれに異なる
フィルタ群を適用しようとしたときに、効果を発揮します。
例えば、スタイルシートがSAASで記述されたものと、vanilla CSSを用いて記述されたものからなる
アプリケーションを考えた場合、次のようにして、全てを1つのシームレスなCSSアセットにまとめることができます。
use Assetic\Asset\AssetCollection;
use Assetic\Asset\GlobAsset;
use Assetic\Filter\SassFilter;
use Assetic\Filter\Yui\CssCompressorFilter;
$css = new AssetCollection(array(
new GlobAsset('/path/to/sass/*.sass', array(new SassFilter())),
new GlobAsset('/path/to/css/*.css'),
), array(
new YuiCompressorFilter('/path/to/yuicompressor.jar'),
));
上記の例では、1つにまとめられたCSSを、さらにYUI compressorフィルタを適用することで、全体を圧縮しています。
### アセットコレクションのイテレーション
アセットコレクションは、旧来のPHP配列のように、イテレートできます。
echo "Source paths:
";
foreach ($collection as $asset) {
echo ' - '.$asset->getSourcePath()."
";
}
アセットコレクションのイテレーションは再帰的で、「葉」にあたるアセットの取得を行います。
また、気の利いたフィルタを内蔵しているので、同じアセットがコレクション内に複数存在する場合でも、
一度だけのインクルードが保証されます。
Next: [アセットを「オンザフライ」で定義する](define.md)
|