2010/10/25 訂正

以前はCakePHPでYUIを使うために、下のような方法でCake自体に細工を加える方法を考えました。CakePHP 1.2.0.7962の頃のことです。

久しぶりにCakePHPに戻ってきたので、最新版の1.3.4を見てみると、dispatcher.phpが完全に変わってしまっていました。特にYUIが使えるような対策がとられているわけでもなく。

考えてみると、今となってはYUIは"http://yui.yahooapis.com/〜"でYahooのサーバから直接呼ぶやり方が主流になってしまい、CakePHP管理下のドメインに無理に設置する必要はないんですよね。。。−＿−；

それでも私は外出先などオフラインの環境でも開発作業ができるように、YUIをローカルからでも呼べるようにしておきたいんです。

結局、解決方法としては、CakePHPとは別にローカルにドメインをつくって、そちらにYUIのローカルコピーを配置し、そこから"http://yui/〜"で呼べるようにしました。無理矢理CakePHP管理下に配置しようとするなってことですね。^^;

以上、訂正でした。

オリジナル記事

CakePHPでYahoo! UI (YUI)を使うとき、/app/webroot/yuiに置くこともできますが、サードパーティ製のものは本来はCakeのコアのディレクトリの並びにある"vendors"ディレクトリの下に置くことになっています。

実際、appやwebrootの下に置いてしまうと、自分の作成したアプリケーションをディレクトリごとアップロードするときに一緒に入ってしまうので、できれば明確に分かれたところに置きたいところです。

また、Yahoo!は寛大にもYUIへの直リンクを許可してくれているので、自分のサーバでは持たずにhttp://～でアクセスしてもよいのですが、これだとインターネットにつなげられないオフライン環境で開発するのに不都合です。

そこでvendorsディレクトリの下に置くことを検討しました。vendorsディレクトリの下にはjs, css, imgの各サブディレクトリがあり、ここにおかれたファイルはあたかも/app/webroot/js, /app/webroot/css, /app/webroot/imgの下に置いてあるかのように利用できるようになっています。例えば、vendors/css/base.cssという位置に置かれたファイルには、<link rel="/css/base.css"></link>のようにしてアクセスできます。

しかし、cake/vendorsの下に置くにはCSSとJavaScriptを分けてそれぞれcss、jsディレクトリの下に入れなければならず、CSSとJavaScriptが混在しているYUIを置くにはこのままでは不便です。

そこでCakeのソース(cake_1.2.0.7296-rc2)を調べてみると、vendors/js, vendors/css等の下に置かれているファイルが魔法のように/js, /cssでアクセスできるしくみは、dispatcher.phpで次のような処理が行われているためであるようです。

function cached($url) {
    if (strpos($url, 'css/') !== false ||
        strpos($url, 'js/') !== false ||
        strpos($url, 'img/') !== false) {
            ...
        $paths = array_merge($paths, Configure::read('vendorPaths'));
        foreach ($paths as $path) {
            if (is_file($path . $url) && file_exists($path . $url)) {
                $assetFile = $path . $url;
                break;
            }
        }

つまり、vendorsへのパスを含む配列$pathsにpathの候補が入っていて、リクエストされたファイルが実際に$pathsのうちのどれかに存在しているかを順次確認していき、見つかればそのファイルをヘッダ付でincludeするようになっているようでした。

そこで、dispatcher.phpを少し編集して、YUIへのリクエストもvendorsの下を検索してくれるように、入り口の条件に'yui/'を追加しました。（Cake本体のソースをいじるのはできる限り避けたいところではありますが、これが思いつく限りでは一番すっきりした解決法でした。）

function cached($url) {
    if (strpos($url, 'css/') !== false ||
        strpos($url, 'js/') !== false ||
        strpos($url, 'img/') !== false ||
        strpos($url, 'yui/') !== false) {

これで、<link rel="/yui/build/reset/reset-min.css"></link>のようにアクセスできるようになりました。めでたしめでたし。