fuelphpでCSS、JS、IMGのPATH出力(Asset::〇〇〇())

CSS、JS、IMGをタグにして出力したり、URLだけ取得したりする。

作成日:2018-08-06, 更新日:2018-08-06

基本

CSS、JS、IMGをそれぞれ1箇所だけ指定なら注意する必要はない。

▼それぞれの出力

echo \Asset::css('〇〇〇.css');
echo \Asset::js('〇〇〇.js');
echo \Asset::img('〇〇〇.jpg');

※各PATHのセットは後述

各PATHのセット:各PATHを「assets/〇〇〇」とする場合

// 各PATHのセット
\Asset::add_path('img/', 'img');
\Asset::add_path('css/', 'css');
\Asset::add_path('js/', 'js');

※「/assets/img/〇〇〇.jpg」とかを出力してくれる。

各PATHのセット:各PATHを「hoge/〇〇〇」とする場合

// 各PATHのセット
\Asset::add_path('hoge/img/', 'img');
\Asset::add_path('hoge/css/', 'css');
\Asset::add_path('hoge/js/', 'js');

※「/hoge/img/〇〇〇.jpg」とかを出力してくれる。

PATHを複数指定

配列にしてadd_path()してあげる

$aryImgPath = array(
  'common/img',
  'hoge/img',
);
\Asset::add_path($aryImgPath, 'img');

ただ・・・それぞれのPATH内に同名のファイルがあると面倒。
優先順位があると思うけど・・・未調査。

各ファイルのURLを取得

\Asset::get_file(パス, タイプ);

▼「assets/img/hoge.jpg」のPATHのセットとURLの取得

\Asset::add_path('img/', 'img');
echo \Asset::get_file('hoge.jpg', 'img');

▼タイプを変更して「common/img/hoge.jpg」のPATHのセットとURLの取得

\Asset::add_path('common/img/', 'imgCommon');
echo \Asset::get_file('hoge.jpg', 'imgCommon');

めも

imgは「Asset::〇〇〇()」を使わないほうがラクな気がする。

css、js

CSS、JSは基本、ヘッダでのみ読み込み→後日、修正するとしても対象箇所が分かりやすい
→「Asset::〇〇〇()」を使う

// \Asset::add_path()で指定したフォルダ内にあるファイルを使う場合
<?php echo \Asset::css('hoge.css');

// CSS、JSで任意のページのみ別のファイルを使いたい(\Asset::js()とかの中身をURLにする)
echo \Asset::js(\Uri::create('/common/css/foo.js'));

img

・IMGはあちこちで使われる
・IMGはwidthやalt、styleなど色々と指定したいコトがある
→普通にHTMLタグ書いた方が手っ取り早い。

手っ取り早いのは「\Asset::img()」は使わずに「\Uri::create()」でファイル指定。

<img src="<?php echo \Uri::create('assets/img/hoge.jpg'); ?>" />

FuelPHPが子階層

・子階層のコンテンツがFuelPHPで、親階層のCSSなどを読みたいとき・・・面倒くさい。

▼下記のような構成の場合
├index.html(→http://example.com/)
├aaa/
│├a1.html(→http://example.com/aaa/a1.html)
│└a2.html
├common/
│├css/
││└hoge.css
│└img/
├fuel/ (→fuelPHPで作られたコンテンツ:http://example.com/fuel/〇〇〇)
│├index.php
│└assets/ (fuelPHPで使うcssやimgたち)
│ ├css/
│ │└hoge.css
│ ├img/

▼「fuel/」内から「fuel/assets/css/hoge.css」にアクセスする場合は、何も気にしなくていい。

// 「\Asset::〇〇〇()」で出力する
\Asset::add_path('css/', 'css');
echo \Asset::css('hoge.css');

// URLを出力する
echo \Uri::create('assets/css/hoge.css');

「fuel/」内から「common/css/hoge.css」にアクセスする場合は・・・面倒。

NGな例

echo \Uri::create('common/css/hoge.css');
// 「http://example.com/common/css/hoge.css」ではなく
// 「http://example.com/fuel/common/css/hoge.css」となる→404になる

OKな例

状況によって使い分ける。

▼URL指定

echo \Uri::create('http://example.com/common/css/hoge.css');
// httpとhttpsの絡みがあるので避けたい

▼http、httpsを省略してURL指定

echo \Uri::create('//example.com/common/css/hoge.css');
// 何かしらの理由でドメインを変えるときが面倒

▼URLをどっかから取得する

define('ROOT_DOC', '//example.com');
echo \Uri::create(ROOT_DOC.'/common/css/hoge.css');
// ドメインが変わるときでも修正箇所が少ないのでマシではある

▼asset::〇〇〇で指定

\Asset::add_path(DOCROOT.'../common/css/', 'common_css');
echo \Asset::get_file('hoge.css', 'common_css');
// 「http://example.com/fuel/../common/css/hoge.css」と出てくるけど・・・エラーにならないし、ドメインが変わっても問題ない

まとめ

もっと良い方法があるかもしれないので、仮案。

CSS、JS

CSSしかサンプルは記載しないけど、JSも同様

サイトが一つのFuelPHPで構成されているとき

\Asset::add_path('css/', 'css');
echo \Asset::css('hoge.css');

FuelPHPがサイトの1コンテンツのとき

// Web全体の共通のcssディレクトリだけ指定
\Asset::add_path(DOCROOT.'../common/css/', 'css');

// Web全体の共通のcssディレクトリを使う場合
echo \Asset::css('hoge.css');

// fulePHP内のCSSを使う場合:\Uri::create()でファイルを直接指定。
echo \Asset::css( \Uri::create('assets/css/hoge.css') );

img

サイトが一つのFuelPHPで構成されているとき

<img src="<?php echo \Uri::create('assets/img/hoge.jpg'); ?>">

FuelPHPがサイトの1コンテンツのとき

▼Web全体の共通のimgディレクトリだけ指定

\Asset::add_path(DOCROOT.'../common/img/', 'common_img');

▼Web全体の共通のimgディレクトリを使う場合

<img src="<?php echo \Asset::get_file('hoge.jpg', 'common_img'); ?>" />

▼fulePHP内のimgを使う場合:\Uri::create()でファイルを直接指定

<img src="<?php echo \Uri::create('assets/img/hoge.jpg'); ?>" />