|
0
|
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) |