wp-optimize / vendor / kriswallsmith / assetic / docs / ja / concepts.md

concepts.md in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 3.2.5, at vendor/kriswallsmith/assetic/docs/ja/concepts.md

138 lines 5.5 KB

Raw Download Zip

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