CSSやJSファイルの配信を最適化するAsseticが便利そう

ニューヨークのPHPコミュニティ、NYPHPに参加してきました。今回はSymfony Liveでも行われたAsseticのセッションに興味があったので参加してきました。（前回はカンファレンス2日目の最終セッションだったので疲れてあまり内容が頭に入らなかったので）今回は内容もすっきり理解できたのでセッションの内容を簡単にまとめて紹介します。

複数のCSSやJavaScriptを連結して1つにするAssetic

サイトの構造が複雑化するとさまざまなJSファイル(JQuery本体やプラグイン、独自のコード、アクセス解析用コードetc)やCSSファイルを外部ファイルとしてロードするようになります。そうする事によって簡単にリッチな機能を実現できる反面、ページを表示する際に複数のファイルを呼び出すリクエストが発生する為にページの読み込みは遅くなります。特に同一ドメインのファイルを複数読み込む場合や外部ドメインから読み込む場合に顕著です。このような問題をファイルを連結する事で解決するPythonのライブラリwebassetにインスパイアされて作られたのがPHP5.3用(Symfony2用ではない事に注意)のライブラリ、asseticです。

基本的な使い方

asseticはSymfonyのコアチームの一員であるKrisさんが開発していますが、あくまでスタンドアロンなライブラリです。Asseticのクラス群がロードできる用になっていれば、単純なスクリプトの中からも呼び出す事が出来ます。

$js = new AssetCollection(array(
    new GlobAsset('/path/to/js/*'),
    new FileAsset('/path/to/another.js'),
));
 
// the code is merged when the asset is dumped
echo $js->dump();

この例では特定のパス以下にあるJSファイルと、指定したJSファイルをdumpする事で連結して出力します。JSが必要な各ページからは個別のJSを読み込むのではなく、このスクリプトをlinkタグなどで読み込めば単一のリクエストで複数のファイルをロードする事ができます。これによりレンダリング速度の向上やSEOの改善が期待できます。

ファイルの圧縮などを行うFilter

単純にファイルを連結するだけでもリクエスト数の削減は可能ですが、さらにファイルの余分な内容をはぶくといった操作を行う事でデータの量を小さくする事ができます。asseticではこのような処理をFilterを利用して適用できます。実際の圧縮に使うAPIはさまざまな物が利用可能です。

$css = new AssetCollection(array(
    new FileAsset('/path/to/src/styles.less', array(new LessFilter())),
    new GlobAsset('/path/to/css/*'),
), array(
    new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
));
 
// this will echo CSS compiled by LESS and compressed by YUI
echo $css->dump();

この例ではファイルをYUIの処理を使って圧縮しています。既に実装されているFilterは下記の通りとのことです。またJSファイルの圧縮はデバッグなどの妨げになるので開発時はオフになるようにオプションを指定するのが望ましいです。(スライドの63ページ目に例があります)

CoffeeScriptFilter: compiles CoffeeScript into Javascript
CssRewriteFilter: fixes relative URLs in CSS assets when moving to a new URL
GoogleClosure\CompilerApiFilter: compiles Javascript using the Google Closure Compiler API
GoogleClosure\CompilerJarFilter: compiles Javascript using the Google Closure Compiler JAR
LessFilter: parses LESS into CSS
StylusFilter: parses STYL into CSS
Sass\SassFilter: parses SASS into CSS
Sass\ScssFilter: parses SCSS into CSS
SprocketsFilter: Sprockets Javascript dependency management
Yui\CssCompressorFilter: compresses CSS using the YUI compressor
Yui\JsCompressorFilter: compresses Javascript using the YUI compressor

キャッシュ、CDNの利用

ファイルの連結をリクエスト毎に行うのは非効率なのではと思った方もいるでしょう。実際に会場でもある女性がその質問をしていました。asseticにはキャッシュの仕組みも用意されています。下記は連結したファイルを特定のパスにキャッシュする実装の例です。

$yui = new Yui\JsCompressorFilter('/path/to/yuicompressor.jar');
$js = new AssetCache(
    new FileAsset('/path/to/some.js', array($yui)),
    new FilesystemCache('/path/to/cache')
);
// the YUI compressor will only run on the first call
$js->dump();
$js->dump();
$js->dump();

さらに連結したファイルをローカルファイルではなくAmazonS3のようなサービスに書き出す事も出来ます。

$am = new AssetManager();
$am->set('foo', $foo);
 
$writer = new AssetWriter('s3://mybucket');
$writer->writeManagerAssets($am);

このような書き出し処理はコマンドラインスクリプトなどから叩く形でデプロイの手順に盛り込むのが良いでしょうね。

Symfony2との統合

最後にこれらの機能を簡単にSymfony2から呼び出せるように作られたのがAsseticBundleです。asseticそのものはファイルを置くパスや初期化の方法などはオープンですが、これをSymfony2の構造に併せて制御できるようにするのがBundleの役目ですね。PHP5.3であればasseticは動作するので他のフレームワーク用のプラグインなども誰かが作るかもしれません。
Symfony2から利用する場合、ひとまずは特定のパス以下のファイルを全て連結するように動作するようです。つまりファイルをweb配下に置けば全てが連結されてビューから読み込まれるという事ですね。

設定

assetic:
    debug: %kernel.debug%
    use_controller: %kernel.debug% 
    read_from: %kernel.root_dir%../web
    write_to: s3://mybucket

ページからの読み込み

<link href="{{ asset_url }} rel="stylesheet">

デフォルトのレイアウトに上記の記述があれば常に全てのCSSが連結されて読み込まれますね。そして設定さえすればファイルがS３から参照できたりもするという。

まとめ

問答無用でこの状態から開発が始まると戸惑うかもしれませんが、ページのレスポンスを向上させる仕組みをCDNまで考慮して実装してくれるというのは素晴らしい機能ですね。また質疑応答では画像ファイルをエンコードしてCSS内に埋め込む、スプライティングを行うと言った処理も組み込む予定があると言っていました。Symofony2的にはWEB以下の静的ファイルが全て連結されるようなイメージになる事になりますね。ということで効果的にアクセスを捌く必要がある場合にはasseticの利用を検討してみると良いのではないでしょうか。

セッションの動画もありました

Symfony Live 2011 San Francisco動画レポート

2011年2月5日から2月9日までの期間でSymfony Live 2011がサンフランシスコで開催されました。延べ300人以上の参加者が世界中から集まりSymfony2を利用した事がある人が9割近いなどトレンドを感じさせるイベントになりました。会期中に撮影した動画とSymfonyのエバンジェリストとして知られる元YahooのDustin Whittleさんのインタビューの動画を作成したのでご覧ください。

イベントハイライト動画(日本語字幕)

この動画ではDustinのインタビューのハイライトを中心にイベントの様子を点描しています。会話中でも触れられていますが、マイクロソフトで行われたカンファレンスには1日150人の来場があり非常に盛況です。またSymfony2を使ってみた人が9割以上でSymfony2を使った事がないならSymfonyユーザー失格と言っても過言ではない状況でした。ちなみに本番環境でSymfony2を利用している人も10名ちょっと居ました。またSymfony2では開発をgithub中心のスタイルに変更し、ZendFrameworkのロガーを標準のロガーとして採用するなど全てを自前で実装していたSymfony1とは大きな方向性の転換があります。開発が進んでいる為、ドキュメントとの差分も発生していますがやはりサンドボックスを動かして実際に触れてみるのが王道といってよいでしょう。
なおDustinのインタビューのフルバージョンはこちらです。(字幕なし)

セッション

セッションのスライドを全て埋め込むとページが重くなるので、タイトルをスライドにリンクしています。

The path to Symfony in the USA – Dustin Whittle
インタビューとほぼ同様の内容でSymfonyの発展の歴史をDustinの視点から紹介する内容。ted.comがSymfonyで出来ているとは知りませんでした！！

Unit-testing a guide to writing clean, testable code that will be easy to maintain and extend – Bulat Shakirzyanov
実はこの方、以前のニューヨークでのmeetupでお会いしたことがあります。ザッカーバーグばりにオフィス内ではサンダルでSymfonyはSymfony2しから知らないというかなりのニューウェイブぶり。内容はユニットテストの意義や手法などについての内容で最近のカンファレンスでは必ず一コマある内容ですね。

Apostrophe: a Symfony-powered CMS your clients will love – Tom Boutell
Symfonyで構築したCMSについての発表。

Contributing with Git : Reducing the frictions of Open Source collaboration with the Git VCS – Scott Chacon
Githubの中の人によるGitの使い方と理論についてのセッション。従来型のSCMのブランチの扱いの違いやデータ管理の手法といった内容を紹介していました。githubの利用はオープンソースにとって非常に重要になってきており、こちらも基礎知識としてのセッションでした。

Nice performance using Sf2 cache wrapping Sf1 application. – Emmanuel Cohen , Marc Weistroff
Sensioから来た二人による事例の紹介。ここでいうキャッシュはmemcacheのような物ではなくEdge Side Inculdeを使ってCDNやプロキシ上にコンテンツをキャッシュさせる事を制御する手法である点に注意してください。こんなん相当なアクセスが無いと使わないと思いますけど。。。

phpBB4: Building end-user applications with Symfony2 – Nils Adermann
PHPBBをバージョンアップしていく際にSymfonyへ移行するに至った経緯の解説。Symfony2のフットプリントの小ささを利用してJoomlaの内部でPHPBBを動作させる等の実例が紹介されていました。

Migrating relational data to the cloud and consuming it from PHP – Bruno Terkaly
事情によりセッションが中止されました

Symfony2 – from the trenches – Lukas Kahwe Smith, Jonathan Wage
PHP MatsuriでおなじみのKris WallsmithさんとDoctrineの作者、Jonathan Wageさんが在籍している事で知られるOpenSkyの事例の紹介。ECサイトにSymfony2を投入するというものすごいアーリーアダプタな事例で培ったTIPSを3人のトークで紹介していました。

Being dangerous with Twig – Ryan Weaver
テンプレートエンジン、Twigの利用方法を丁寧に解説したセッション。簡単に触っただけだったんですが、利点などをわかりやすく整理する事が出来て非常に有益なセッションでした。もはやSmartyを使う理由は技術的には無くなったように思いますね。

HTTP Cache – Fabien Potencier
FabienによるHTTPの解説から始まりESIまでの解説セッション。HTTPの仕様を読んだ事が無い参加者はもれなくFabienにおしかりを受けました。

Don’t use a screw when you need a nail – Stefan Koopmanschap
PHP以外に目を向けてみましょうという内容のセッション。Stefanさんはオランダで行われているDutch PHP Conferenceの中心メンバーで幅広いネットワークをお持ちのようでした。オランダなら英語が通じるので出来れば言ってみたいなと思っています。セッション内ではJenkinsことHudsonやRedmineといったPHP以外の言語で実装されているツールなどの紹介をたくさんしていました。（海外でRedmineの話を聞いたのはこれが初めてです)

Doctrine in the Real World – Jonathan Wage
作者本人によるDoctrineを活用する方法についてのセッション。SoftDeleteの利点を話す際にはFlickrで発生したデータの削除事件を例にとっていました。あまり会場の反応は良くなかったのであのニュースは割と日本での方がインパクトがあったんですかねぇ。

Behavior Driven Development for Symfony2 – Konstantin Kudryashov
講演者がアメリカに入国するビザが取得できずキャンセル

Doctrator, behaviors in Doctrine2 – Pablo Díez
DoctrineをActiveRecord的に利用するというハックの例の紹介。コードの記述を減らすための実践なのですがちょっとスペイン語訛りがきつくてよくわかりませんでした。。。

Introducing Assetic: Asset Management for PHP 5.3 – Kris Wallsmith
PHP MatsuriシャツをまとったKrisによるAsseticの紹介。Pythonインスパイアな静的コンテンツを統合するコンポーネントの紹介。こちらは間もなくコアに取込まれるのではと思われます。

まとめ

セッションの内容はオーソドックスな内容が多くLT等もありませんでしたが、Symfonyのコミュニティが全力でSymfony2に向かっている事がよく確認できたイベントでした。また参加者のSymfonyの活用方法は似たりよったりといった感じで割とまじめそうな参加者の人が多かった気がします。特にコミュニティの運営方法が変わり、拡張機能の開発などで開発に参加する機会も多くなりそうなSymfony2をぜひとも試してみてください。

Symfony Liveカンファレンスに参加中(ハックデイ)

PHPフレームワークSymfonyの公式イベント、Symfony Liveに参加する為にサンフランシスコに来ています。カンファレンスのセッションは明後日の火曜日からですが、昨日今日と開催されたハックデイにも延べ50人近いユーザーが集まり活発に交流していました。

参加者層

haha, not only am i sharing a table with an Australian, but there someone from Victoria and two from Vancouver #sflive2011 #smallworld

2011年2月7日 9:50 AM via Twitter for MacReplyRetweetFavorite

@notjosh

joshua may

ハックデイには両日ともに20名ほどの参加者が参加し、僕が見聞きした範囲では参加者はアメリカ、カナダ、オーストラリア、コロンビア、ドイツ、ベルギー、オランダ、フランスとかなり多彩です。見た目だけではどこから来たのかの判別は出来ないので「Where do you come from?」から始まって名前を聞き、TwitterやFacebookのアカウントを聞くという会話を何度もしました。なんとなくの感想ですが、欧米のユーザーに比べると日本人はツイートが多すぎるような気がします。日本では起きたとか病院に行ったとかをいちいちツイートする人がけっこう居るという話をしたらわりとウケました。またファビアンとはフランス語で会話している人も多かったですね。ちなみに彼の会社は求人中だそうです。外国人でも構わないそうですが、フランス語が必須との事。

参加者の話題はSymfony2

作業時間はほとんどのユーザーがSymfony2のsandboxを使って何かを開発していました。今回のハックデイには残念ながら発表タイムなどは無かったのですが、Formが動かないとかBundleが動かないとかあれやこれやと話し合いながら各自が作業をしていました。ファビアンはマージリクエストが無いといって悠々自適。ダスティンはハッカソンのオーガナイズで忙しい様子でした。

Symfony2に触れるにはSandboxとBundle

僕自身もOAuth認証のBundleを使ったアプリをチュートリアルを見ながら作っていましたが、Bundleの導入の為にコードの変更と設定ファイルの変更が必要になり期待した所までは到達しませんでした。（定義しなければいけないメソッドの追加、禁止された設定ファイルの項目などの影響）
全世界のユーザーの注目を集めていると思われるSymfony2ですが、現状は大きな変更が行われる事も多くすでに公開されているバンドル（プラグインに変わるコードの共有方法）が導入しても動かないという事が頻繁に発生します。ドキュメントも用意されていますが、実装との差分が出ている部分もあるので今の時点で覚えたノウハウは間もなく消え去ってしまう可能性も高そうです。なおSymfony1ユーザー向けの紹介としてはこのページに情報がまとまっているのでなんとなく見ておきたい場合はここを見ると良いでしょう。いずれにせよ3月に予定されているアルファ版以降、段階的に安定性とドキュメントが充実しそうです。

カンファレンス開始後に今回のカンファレンスのオープニングスピーカーを務めるダスティンのインタビューを撮影する予定です。無事に撮影が出来ればなるべく早くに公開しようと思います。

日本から弾丸スケジュールで来た@cocoitibanさんもブログを更新していました。
symfony live 一日目