From cd4cb5e91966856f887c0a1e0dc5fbdcd94f921f Mon Sep 17 00:00:00 2001 From: Yuichi Okada Date: Sat, 25 Oct 2014 14:25:33 +0900 Subject: [PATCH 1/2] [best practice] add web-assets.rst --- best_practices/web-assets.rst | 98 +++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 best_practices/web-assets.rst diff --git a/best_practices/web-assets.rst b/best_practices/web-assets.rst new file mode 100644 index 0000000..dcf8a78 --- /dev/null +++ b/best_practices/web-assets.rst @@ -0,0 +1,98 @@ +Webアセット +========== + +Webアセットとは、CSSやJavaScript、画像といった、Webサイトのフロントエンドの +見た目や操作をよくするファイルのことを指します。Symfony開発者は慣習的に、それぞれの +バンドルの ``Resources/public/`` ディレクトリにアセットを配置してきました。 + +.. best-practice:: + + アセットは ``web/`` ディレクトリの中に配置しましょう。 + +Webアセットを複数の異なるバンドルに跨って分散させてしまうと管理するのが +大変になります。全てのアプリケーションアセットが一箇所にまとまっていれば、 +デザイナーの仕事はずっと楽になるでしょう。 + +アセットを集中管理することで、テンプレートも恩恵を受けることができます。 +なぜなら、リンクがより簡潔になるからです。: + +.. code-block:: html+jinja + + + + + {# ... #} + + + + +.. note:: + + ``web/`` は公開ディレクトリであり、配置されているものは全て一般にアクセスできる + ことに気をつけましょう。そのようあな理由から、コンパイルされたwebアセットだけを + を配置し、Sassのようなソースファイルは配置するべきではありません。 + +アセティックを利用する +------------- + +近頃は、単に静的なCSSやJavascriptファイルを作ってテンプレートに埋め込むことは +おそらくしないでしょう。それどころか、クライアントサイドのパフォーマンスを改善 +するために、ファイルを結合し圧縮したいと考えることでしょう。 +また、LESSやSassのようなものを使いたいと思うかも知れません。それらをCSSファイル +に変換するためには何らかの方法が必要です。 + +GruntJSのような(PHPではない)ピュアフロントエンドツールを含めて、これらの問題を +解決するためたくさんのツールが存在しています。 + +.. best-practice:: + + GruntJSのようなフロントエンドツールに満足していないなら、Asseticを使って + webアセットを結合し圧縮しましょう。 + +`Assetic`_ は、LESSやSassやCoffeScriptといった多くのフロントエンドツールで +開発されたアセットをコンパイルすることができるAssetマネージャです。 +Asseticで全てのアセットを結合するには、１つのTwigタグで全てのアセットを +囲みます。 + +.. code-block:: html+jinja + + {% stylesheets + 'css/bootstrap.min.css' + 'css/main.css' + filter='cssrewrite' output='css/compiled/all.css' %} + + {% endstylesheets %} + + {# ... #} + + {% javascripts + 'js/jquery.min.js' + 'js/bootstrap.min.js' + output='js/compiled/all.js' %} + + {% endjavascripts %} + +フロントエンドベースのアプリケーション +--------------------------- + +近年、APIと通信を行うフロントエンドWEBアプリケーションを開発する場合、AngularJS +のようなフロントエンド技術を利用することはずいぶん一般的になりました。 + +もしこのようなアプリケーションを開発する場合には、BowerやGruntJSのような、 +その技術で推奨されているツールを使うとよいでしょう。 +Symfonyバックエンドとは切り離してフロントエンドアプリケーションを開発するべきです。 +リポジトリを分離したい場合にはなおさらです。 + + +Asseticをもっと知るために +------------------------ + +Assetic は `UglifyCSS/UglifyJSを使う`_ ことでCSSやJavaScriptのサイズを小さくして +ウェブサイトの高速化を図ることができます。ユーザーが受け取る前に、画像サイズを +減らすためAsseticを利用して `画像を圧縮する`_ こともできます。全ての利用可能な +機能を知りたければ `official Assetic documentation`_ を参照してください。 + +.. _`Assetic`: http://symfony.com/doc/current/cookbook/assetic/asset_management.html +.. _`UglifyCSS/UglifyJSを使う`: http://symfony.com/doc/current/cookbook/assetic/uglifyjs.html +.. _`画像を圧縮する`: http://symfony.com/doc/current/cookbook/assetic/jpeg_optimize.html +.. _`official Assetic documentation`: https://github.com/kriswallsmith/assetic From f9bf4ea316097055920dcd5dc518788b94f88c7e Mon Sep 17 00:00:00 2001 From: Yuichi Okada Date: Mon, 3 Nov 2014 16:50:06 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E7=BF=BB=E8=A8=B3=E3=81=A7=E3=82=A2?= =?UTF-8?q?=E3=83=89=E3=83=90=E3=82=A4=E3=82=B9=E9=A0=82=E3=81=84=E3=81=9F?= =?UTF-8?q?=E7=82=B9=E3=81=AA=E3=81=A9=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- best_practices/web-assets.rst | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/best_practices/web-assets.rst b/best_practices/web-assets.rst index dcf8a78..a9a9875 100644 --- a/best_practices/web-assets.rst +++ b/best_practices/web-assets.rst @@ -2,7 +2,7 @@ Webアセット ========== Webアセットとは、CSSやJavaScript、画像といった、Webサイトのフロントエンドの -見た目や操作をよくするファイルのことを指します。Symfony開発者は慣習的に、それぞれの +見た目や操作のためのファイルのことを指します。Symfony開発者は慣習的に、それぞれの バンドルの ``Resources/public/`` ディレクトリにアセットを配置してきました。 .. best-practice:: @@ -81,18 +81,18 @@ Asseticで全てのアセットを結合するには、１つのTwigタグで全 もしこのようなアプリケーションを開発する場合には、BowerやGruntJSのような、 その技術で推奨されているツールを使うとよいでしょう。 Symfonyバックエンドとは切り離してフロントエンドアプリケーションを開発するべきです。 -リポジトリを分離したい場合にはなおさらです。 +バージョン管理システムのリポジトリを分離したい場合にはなおさらです。 Asseticをもっと知るために ------------------------ Assetic は `UglifyCSS/UglifyJSを使う`_ ことでCSSやJavaScriptのサイズを小さくして -ウェブサイトの高速化を図ることができます。ユーザーが受け取る前に、画像サイズを -減らすためAsseticを利用して `画像を圧縮する`_ こともできます。全ての利用可能な -機能を知りたければ `official Assetic documentation`_ を参照してください。 +ウェブサイトの高速化を図ることができます。Asseticの `画像の圧縮`_ 機能を使うことで、 +ユーザーからリクエストされた画像をその場で圧縮してから返すようにもできます。 +利用可能な機能を知りたければ `公式のAsseticドキュメント`_ を参照してください。 .. _`Assetic`: http://symfony.com/doc/current/cookbook/assetic/asset_management.html .. _`UglifyCSS/UglifyJSを使う`: http://symfony.com/doc/current/cookbook/assetic/uglifyjs.html -.. _`画像を圧縮する`: http://symfony.com/doc/current/cookbook/assetic/jpeg_optimize.html -.. _`official Assetic documentation`: https://github.com/kriswallsmith/assetic +.. _`画像の圧縮`: http://symfony.com/doc/current/cookbook/assetic/jpeg_optimize.html +.. _`公式のAsseticドキュメント`: https://github.com/kriswallsmith/assetic