Blame view

sources/3rdparty/kriswallsmith/assetic/docs/ja/concepts.md 5.49 KB
6d9380f96   Cédric Dupont   Update sources OC...
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)