POPSブログ

BaserCMS 2.0 webroot 階層の活用

138

  Category:  basercms2012/08/21 pops 

BaserCMS webroot 階層の活用についてです。この件に関し別ページでも多少言及していますが、まとめ的なものです。


BaserCMS 2.0 webroot 階層の活用

BaserCMSは、CakePHPを利用して構築されている。よってCakePHPの特徴、制約などが顕著になる。他との最も大きい違いは「webroot階層」が「root」になることである。
また、webroot階層以前の階層(app baser cake)には直接アクセスできない仕組みになっている。「root」である以上色々なフォルダを置く事が出来る。BaserCMS標準 files img js themedのフォルダがある。
今回の目的は、テーマあるいはブログなどの画像を一括にwebroot階層の「imagesフォルダ」に置いたら「パス」はどうなるだろうと言う疑問である。


BaserCMSの設置条件を下記のようにします。

  • 説明上、サブデレクトリ main とします。
  • 画像などは全てwebroot階層の「imagesフォルダ」に保存されているものと仮定します。

説明図

webrootに必要なフォルダを作り利用する。


私は画像はimagesフォルダときめている。htmlは通常のHTML収納用である。フォルダなどは自由における。


webroot階層の「imagesフォルダ」に画像を置く


● 「画像パス」は全部同じになる

テーマのファイル、固定ページ、ブログ記事、すべて「画像パス」一律、同一のパスになる。画像管理が楽になる。
但し、テーマのCSSまで書き換える場合は、「自分専用のテーマ」になります。「頒布用テーマ」の場合は従来通りの方法になります。
固定ページ、ブログ記事の画像保管場所としては、webroot階層にあったほうが便利と思います。


「画像パス」は全部同じになる。どこででも同じ。



サブデレクトリ main 設置なら
/main/images/xxxxx.gif

サブデレクトリ無、root に直接設置なら
/images/xxxxx.gif

実際の記述例


imgタグなら
<img src="/main/images/xxxxx.gif" />

CSS背景画像なら
.backbox {
	background: url('/main/images/xxxxx.gif');
}

JS,FLASH、の内部に記載する画像の場合も同じ

実際出力する、webroot階層、index.phpから見てのパスである。考える必要なしの簡単なパスだ。
テーマの場合修正するのが面倒ならそのままでも良い。個人の自由である。


● js、css、swf、ファイルの扱いは

js、css、swf、ファイルをそれぞれ、webroot階層の js、css、flash、フォルダに格納したとすれば


JSは
<script type="text/javascript" src="/main/js/xxxxx.js"></script>

CSSは
<link type="text/css" href="/main/css/xxxxx.css" />

SWFは
/main/flash/xxxxx.swf

レイアウトの default.php などの場合は直接手書きにしたほうが簡単で判り易い。
超簡単だ。テーマのファイル、固定ページ、ブログ記事、すべて一律、同一のパスになる。


● テーマのcss、を使用して、背景画像のみwebroot階層から

cssの背景画像パスを変更すればよい。


.backbox {
	background: url('/main/images/xxxxx.gif');
}

● default.phpでの書き方

テーマでは無く、全ての、JS CSS 画像をwebroot階層に置く場合のdefault.phpの書き方の例であるが、
CSSの背景画像パスを変更しなければならないので注意。


関数での定義
<?php $bcBaser->css(array('/main/css/xxxxx.css')) ?>
<?php $bcBaser->js(array('/main/js/xxxxx.js')) ?>
<?php $bcBaser->img('/main/images/xxxxx.jpg'); ?>

手書きの例
<link rel="stylesheet" type="text/css" href="/main/css/xxxxx.css" />
<script type="text/javascript" src="/main/js/xxxxx.js"></script>
<img src="/main/images/xxxxx.jpg" />

● CSS背景画像パスの変更
テーマ以外の場所からCSS読み込みの場合は背景画像パスが合わないのでCSSを修正
テーマCSSはimages/xxxxx.gifとなっているので、webroot/images/のパスにする
.backbox {
	background: url('/main/images/xxxxx.gif');
}

テーマ内部のCSSではありませんので、背景画像パスに注意ください。

  • webroot階層の各フォルダに、JS、CSS、画像、があることを確認。
  • 関数の設定を確認。ブラウザ履歴などを完全消去。
  • ブラウザでのページ確認。旨く行かない場合は、HTMLのリスト(ページのソース)を確認。
  • 「使用者独自のテーマ」になりますので「配布用テーマ」にはなりません。

webroot階層の「htmlフォルダ」にhtmlファイルを置く


新規、または既存の html ファイルを置きたい時もあるかと思います。「htmlフォルダ」を利用すると便利です。(フォルダ名は任意であって自由です。ここではhtmlとしています。)

● webrootの、js、css、images を使用する場合。

js、css、の読み出しなどは上記の例と同じです。画像の表示も同様です。


● 「htmlフォルダ」の中に専用の、js、css、images を置いた場合。

既存のhtmlファイルを利用する場合はこのような構成になる時がある。この場合は従来の書き方でもよい。中の、xxxxx.htmlを基準とした書き方になります。


JSは
<script type="text/javascript" src="js/xxxxx.js"></script>
CSSは
<link type="text/css" href="css/xxxxx.css" />
CSSの背景画像は
.backbox {
	background: url('../images/xxxxx.gif');
}

私の場合、HTMLをZIP圧縮することがある、画像をも含め別途に構造を作るので、それをそのままこの「htmlフォルダ」の中で表示するよう出来る。色々と手間が省ける。

書かれたパスに指定のJS、CSS、画像などがあれば読み込みます。


● rootのimagesフォルダ 画像を読み込む場合。

CakePHP(BaserCMS)構造以外の場所になります。上図のような構造とした場合に以下のようになる。


/../images/xxxxx.gif

これが、問題の出にくい設定と思うが、、、

---------------------------------------
サブデレクトリ設置ならば
/images/xxxxx.gif
でも表示しますが、root設置の変更をした場合に区別が付かなくなる。間違いがおきやすい

http://表記は避ける、root変更、ドメイン変更などの場合大変だ
http://xxx.com/images/xxxxx.gif

● rootのインデックスhtmlにリンクする場合。

サブデレクトリ main 設置なら / でもrootのインデックスhtmlにリンクする。但し、サブデレクトリがない直接root設置の場合にwebroot階層との区別が付かなくなる。


よって
/../

または
/../index.html

とすれば良いのではないか、間違いなくリンクするから

---------------------------------------
root の hage/index.htmlなら
/../hage/

または
/../hage/index.html

サブデレクトリ main設置なら、上記の記述でリンクする。直接root設置でも同じで大丈夫と思う。(未確認)


main/index.phpが root にあると仮定したらの相対的なファイル位置と考えられるが。深く考えるとアタマが「papipupepo」になるゼヨ。


BaserCMSの引越しを考慮して書く


ローカルから、実際のWEBサイトに、あるいはサーバーの移動などBaserCMSの引越し作業がある場合もあります。

1. BaserCMSを置くサブデレクトリを同じところに、同じ名前で、再構築すれば修正なしでそのまま稼動します。
2. ドメインが変更になっても良いように、「http://」の使用は避ける。在れば修正する。
3. サブデレクトリが変更なれば、必要なところを修正する。データベースの中は「エクスポート」でテキストにして修正部分を置換。「インポート」で戻せば早い。
4. 手間のかからない方法を取れるように、事前に計画的にサイトを構築しておく。


BaserCMS付属画像


● 付属画像の名前について

図のような、リンク用の画像がテーマ「demo」では baser.power.gif、cake.power.gif が使用されています。
管理画面では baser_power.gif、cake_power.gif が使用されています。
必要な場合は、管理画面の baser_power.gif、cake_power.gif をコピーして使用されたほうが良い(在るいは名前を変更)。baser.power.gif、cake.power.gifではHTMLの中では認識しない。


修正などを行った場合は必ず「メモ」して保存しておきましょう。


フォルダ移動などは自己責任である。


よって、このサイトの画像、JS、CSSなどは全てwebroot階層に在る。2-3「テーマ」から読み込みもあるが「修正が面倒」で残っている。イワユル家庭の事情である。


以上、個人的見解です。



[ この記事のURL ]


タグ:memo , basercms2

 

ブログ記事一覧

年別アーカイブ一覧



[1]