読者です 読者をやめる 読者になる 読者になる

Symfony Best Practice 訳してみた - Chapter10 -

Symfony Best Practiceの翻訳をしてます。 9日目−2です。

前回の記事

hanahirodev.hatenablog.com

※多分に意訳が入っておりますので、誤訳がある場合はご指摘ください。

※読み進めていくSymfony Best Practiceは 2016/10/23時点の情報です。

※写経をする場合は、事前にPHPの実行ができる環境をご用意ください。

3行まとめ

  • Standard Edition ではSymfony2.8~ Asseticは標準搭載ではなくなった。

  • フロントエンドアプリケーションを作るのでなければ、Asseticを使う。

  • AsseticはTwigのタグで囲むだけで簡単に圧縮・最小化ができる。


第10章 Webアセット

アセットとは、CSSJavaScript、イメージファイルのように、フロントエンドの見た目と操作を構成するものです。 これまでは、バンドルごとのResources/public/ディレクトリ配下に配置していました。

バンドルごとにアセットを格納して散らばった状態では、管理が難しくなります。デザイナーにとっては1カ所に配置されている方がずっと幸せです。 リンクが簡潔になるので、テンプレートファイルもアセットと一緒にしておくのが良いでしょう。

<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />

{# ... #}

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
  • web/は公開ディレクトリであることを忘れないでください。配下に格納されているファイルは変換前のファイルであってもアクセスできてしまいます。(例:Sass, LESS ,CoffeeScript)
アセティックを使う
  • Symfony2.8からアセティックはSymfonyスタンダードエディションでは標準搭載されていません。インストールと有効化の方法はドキュメント*1を確認してください。

最近では、静的なCSSJavaScriptを作ってテンプレートに読み込むということはしないかもしれません。その代わりにクライアント側の性能を出すために、結合してミニファイした状態で使いたいかもしれません。あるいはLESSやSassを使いたいかもしれません。ということは、アセットをCSSに変換する方法が必要になるということです。 実現するためのツール、例えばGruntJSのようにフロントエンド用(PHPではない)ツールは、たくさんあります。

  • Webアセットをコンパイルして、結合、最小化するのにGruntJSのようなフロントエンドツールに満足いかないのであれば、アセティックを使いましょう。

アセティックはLESS、SaasCoffeeScriptといった様々な技術で開発されたアセットをコンパイルすることができるアセットマネージャーです。アセティックでアセットを統合するには、1つのTwigタグで全てのアセットを囲みます。

{% stylesheets
    'css/bootstrap.min.css'
    'css/main.css'
    filter='cssrewrite' output='css/compiled/app.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{# ... #}

{% javascripts
    'js/jquery.min.js'
    'js/bootstrap.min.js'
    output='js/compiled/app.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
フロントエンドベースのアプリケーション

近年、AngularJSのようなAPIと通信するフロントエンド技術が一般化してきています。 そういったアプリケーションを作る場合は、BowerやGruntJSのような、それぞれの技術で推奨されているツールを使うようにしてください。フロントエンドアプリはSymfonyとは分けて(リポジトリすら分けて)開発するべきです。

アセティックについてさらに詳しく

アセティックはUglifyCssやUglifyJSをつかう*2ことで、CSSJavaScriptを最小化して、Webサイトの高速化を実現しています。また、アセティックは画像を圧縮して*3ユーザーに返すこともできます。公式ドキュメント*4から利用できる機能を確認してください。


感想

「フロントエンドベースのアプリ」の理解ができないので、ちょっと調べる。 AsseticはGruntよりだいぶ手軽な印象。

(2016/11/5 更新)

next

hanahirodev.hatenablog.com