Skip to content

Commit 7827fe5

Browse files
gilbitegilbite
committed
added japanese docs
1 parent 71d6cfe commit 7827fe5

File tree

5 files changed

+316
-0
lines changed

5 files changed

+316
-0
lines changed

‎docs/ja/build.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
アセットのビルドとダンプ
2+
---------------------------
3+
4+
Asseticを使う一番単純な方法は、次の2ステップからなります。
5+
6+
1. 公開領域内にPHPスクリプトを作成し、Assetic OOP APIを使用してアセットの作成・出力を行う
7+
2. テンプレートから上記のファイルを参照する
8+
9+
例えば、公開領域内に`assets/javascripts.php`ファイルを作成し、
10+
下記のようなコードを記述します。
11+
12+
use Assetic\Asset\AssetCollection;
13+
use Assetic\Asset\FileAsset;
14+
use Assetic\Filter\Yui\JsCompressorFilter as YuiCompressorFilter;
15+
16+
$js = new AssetCollection(array(
17+
new FileAsset(__DIR__.'/jquery.js'),
18+
new FileAsset(__DIR__.'/application.js'),
19+
), array(
20+
new YuiCompressorFilter('/path/to/yuicompressor.jar'),
21+
));
22+
23+
header('Content-Type: application/js');
24+
echo $js->dump();
25+
26+
HTMLテンプレート側では、単に`<script>`タグを用いて、生成されたJavascriptをインクルードすることになります。
27+
28+
<script src="/assets/javascripts.php"></script>
29+
30+
Next: [コンセプト](concepts.md)

‎docs/ja/concepts.md

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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)

‎docs/ja/define.md

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
アセットの「オンザフライ」な定義
2+
----------------------------------------
3+
4+
Asseticの使用方法二つ目は、独立したPHPファイルを使用する代わりに、
5+
テンプレートで「オンザフライ」にアセット定義をする方法です。
6+
このアプローチでは、PHPテンプレートは下記のようになります。
7+
8+
<script src="<?php echo assetic_javascripts('js/*', 'yui_js') ?>"></script>
9+
10+
`assetic_javascripts()`の呼び出しは2つの目的を兼ねています。
11+
まず、「フォーミュラローダー」により走査され、アセットの構築、ダンプ、及び出力を行うための「フォーミュラ(処方箋)」が抽出されます。
12+
また、テンプレートのレンダー時にも実行され、アセットの出力パスが出力されます。
13+
14+
Asseticには下記のようなヘルパー関数があります。
15+
16+
* `assetic_image()`
17+
* `assetic_javascripts()`
18+
* `assetic_stylesheets()`
19+
20+
アセットをオンザフライに定義するということは、より高度なテクニックであり、
21+
そのため、重い仕事をするサービスに依存することになります。
22+
そのうちの重要なものがアセットファクトリです。
23+
24+
### アセットファクトリ
25+
26+
アセットファクトリは、アセットオブジェクトを、配列とスカラ値のみから、
27+
どのように作成するのか把握しています。
28+
`assetic_*`ヘルパー関数で使用する記法と同様のものとなります。
29+
30+
use Assetic\Factory\AssetFactory;
31+
32+
$factory = new AssetFactory('/path/to/web');
33+
$js = $factory->createAsset(array(
34+
'js/jquery.js',
35+
'js/jquery.plugin.js',
36+
'js/application.js',
37+
));
38+
39+
### フィルタマネージャー
40+
41+
ファクトリによって作成されたアセットに対しても、フィルタを適用することができます。
42+
そのためには、`FilterManager`を設定して、名前を定義しフィルタを構成します。
43+
44+
use Assetic\FilterManager;
45+
use Assetic\Filter\GoogleClosure\ApiFilter as ClosureFilter;
46+
47+
$fm = new FilterManager();
48+
$fm->set('closure', new ClosureFilter());
49+
$factory->setFilterManager($fm);
50+
51+
$js = $factory->createAsset('js/*', 'closure');
52+
53+
上記の例では、Google Closure Compilerフィルタをインスタンス化し、
54+
フィルタマネージャーを通じて`closure`という名前をつけています。
55+
このフィルタマネージャーをアセットファクトリに渡すことで、
56+
アセット作成時には、`closure`という名前でフィルタを使用できるようになります。
57+
58+
### デバッグモード
59+
60+
アセットファクトリは、デバッグモードというコンセプトも取り入れており、
61+
デバッグモードの設定により、ファクトリが作成するアセットから、
62+
特定のフィルタを除外することができます。
63+
64+
たとえば、YUI Compressorは大変素晴らしいのですが、圧縮されたJavascriptを
65+
デバッグするのは大変難しく、プロダクション環境でのみの使用が適切でしょう。
66+
67+
use Asset\Factory\AssetFactory;
68+
69+
$factory = new AssetFactory('/path/to/web', true); // デバッグモードON
70+
$factory->setFilterManager($fm);
71+
$js = $factory->createAsset('js/*', '?closure');
72+
73+
フィルタ名`closure`の前にクエスチョンマークを記述すると、ファクトリに対して、
74+
このフィルタはオプションであり、
75+
デバッグモードがOFFの時にのみ適用するように通知することができます。
76+
77+
### アセットマネージャーとアセットリファレンス
78+
79+
アセットファクトリにはもう一つ特別な記法があり、別の場所で定義した
80+
アセットを参照することができるようになります。
81+
これを「アセットリファレンス」と呼び、アセットマネージャーを通じて、
82+
フィルタマネージャーと同様の、名前によるアセットの構成が可能です。
83+
84+
use Assetic\AssetManager;
85+
use Assetic\Asset\FileAsset;
86+
use Assetic\Factory\AssetFactory;
87+
88+
$am = new AssetManager();
89+
$am->set('jquery', new FileAsset('/path/to/jquery.js'));
90+
91+
$factory = new AssetFactory('/path/to/web');
92+
$factory->setAssetManager($am);
93+
94+
$js = $factory->createAsset(array(
95+
'@jquery',
96+
'js/application.js',
97+
));
98+
99+
### テンプレートからのアセット抽出
100+
101+
テンプレート内でアセット群を定義したら、「フォーミュラローダー」サービスを使用して、
102+
アセットの定義を抽出します。
103+
104+
use Assetic\Factory\Loader\FunctionCallsFormulaLoader;
105+
use Assetic\Factory\Resource\FileResource;
106+
107+
$loader = new FunctionCallsFormulaLoader($factory);
108+
$formulae = $loader->load(new FileResource('/path/to/template.php'));
109+
110+
これらのフォーミュラ自体は、それ自体で使途はあまりなく、
111+
アセットファクトリが目的のアセットオブジェクトを作成するに足る情報しか持っていません。
112+
`LazyAssetManager`でラップすることで有益なものとなります。
113+
114+
### レイジーなアセットマネージャー
115+
116+
このサービスは、アセットファクトリと、1つ以上のフォーミュラローダーから成っており、
117+
裏方のサービス間のグルとして動作しますが、表面上では、通常のアセットマネージャーと同じように使用することができます。
118+
119+
use Assetic\Asset\FileAsset;
120+
use Assetic\Factory\LazyAssetManager;
121+
use Assetic\Factory\Loader\FunctionCallsFormulaLoader;
122+
use Assetic\Factory\Resource\DirectoryResource;
123+
124+
$am = new LazyAssetManager($factory);
125+
$am->set('jquery', new FileAsset('/path/to/jquery.js'));
126+
$am->setLoader('php', new FunctionCallsFormulaLoader($factory));
127+
$am->addResource(new DirectoryResource('/path/to/templates', '/\.php$/'), 'php');
128+
129+
### アセットライター
130+
131+
作成したアセットマネージャーが、テンプレート内で定義した全てのアセットを把握したら、
132+
アセットライターを使用して、テンプレートが参照することになる実際のファイルを作成します。
133+
134+
use Assetic\AssetWriter;
135+
136+
$writer = new AssetWriter('/path/to/web');
137+
$writer->writeManagerAssets($am);
138+
139+
上記のスクリプトを実行すると、アセットマネージャー内のすべてのアセットがメモリに読み込まれ、
140+
指定したフィルタが適用された後、公開領域に静的ファイルとしてダンプされ、準備完了となります。

‎docs/ja/index.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
目次
2+
-----
3+
4+
1. [イントロダクション](introduction.md)
5+
2. [アセットの構築とダンプ](build.md)
6+
3. [コンセプト](concepts.md)
7+
4. [アセットを「オンザフライ」で定義する](define.md)

‎docs/ja/introduction.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Asseticとは
2+
-----------------
3+
4+
Asseticは、PHP5.3用のアセット管理フレームワークです。
5+
Asseticを導入することで、Javascriptやスタイルシート、画像をコントロールする
6+
様々なサードパーティー製のツールを使用できるようになります。
7+
8+
Asseticの使用方法
9+
---------------------
10+
11+
2つの異なるアプローチがあります。
12+
13+
1. アセットのビルド、ダンプ、出力をPHPファイルで行い、テンプレートからそのファイルを直接参照する方法
14+
2. テンプレート内でアセットを(「オンザフライ」に)定義し、抽出やダンプ、出力にローダーを使用する方法
15+
16+
前者はいくらかシンプルである一方、後者は動的で柔軟性に富み、最適化が可能となります。
17+
18+
Next: [アセットの構築とダンプ](build.md)

0 commit comments

Comments
 (0)