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