HOME > ガイド > 制作者向けガイド > ディレクトリ構成

ディレクトリ構成

このページでは、CMSのディレクトリ構成の説明と、その扱いについて説明します。


ディレクトリ構成の解説

CMSのディレクトリは、初期状態では以下の構成です。
全体の注意点として、JS CMSは、サイトルートより上のディレクトリに対しては、操作・管理はおこないません。サイトルート以下に対して操作・管理をおこなります。

サイトルート JS CMSを配置したディレクトリです。
├─ _backup バックアップ機能でつかうディレクトリです。バックアップ機能を使わなければ、必要ありません。
├─ _cms CMSの管理画面ディレクトリです。

このディレクトリ内のファイルは、設定ファイル以外は、とくに編集する必要はありません。

├─ css CMS用のCSS用ディレクトリです。
├─ images CMS用の画像ディレクトリです。
├─ js CMS用のJSディレクトリです。
├─ setting CMS設定ファイルのあるディレクトリです。
setting.php ... 認証に関しての設定を行います。
setting.js ... CMSの動作の設定を行います。
それぞれの詳しい内容は、以下のページを確認ください。
├─ html 公開サイトのアセットディレクトリで、同時にデフォルトのHTMLディレクトリです。

HTMLを公開するディレクトリは、デフォルトで/html/に設定されてますが、自由にルート以下にディレクトリを作成し、書き出すことができます。

├─ _json HTMLページの編集データを格納しています。
├─ _mytag Myタグのディレクトリです。
├─ _preset プリセット用のディレクトリです。
├─ _setting ページ一覧のデータや、UIタグ、マイプリセットのデータを格納しています。
├─ _template テンプレートHTML用のディレクトリです。
├─ css 公開ページでつかうCSSファイル用ディレクトリです。
├─ js 公開ページでつかうJSファイル用ディレクトリです。
├─ php 問い合わせPHP用のディレクトです。
デフォルトでは、プログラムは設定されていません。
├─ images HTMLページで使用する画像用のアップロードディレクトリです。
便宜的に配置しているだけなので、CMSに必須ではなく、削除したり、リネームしたり自由に変更してください。
配置した画像などは、CMSのファイルマネージャから参照でき、画像ブロックなどで利用できます。

なお、PDFやZIPなどの、画像以外のファイルもアップできます。
├─ index.html 公開サイトのトップページです。必須ではありません。
CMSで自由に編集・公開できます。
├─ sitemap.html 公開サイトのサイトマップページです。必須ではありません。
CMSで自由に編集・公開できます。

ディレクトリ名の変更

_cms (管理画面のディレクトリ)

管理画面のディレクトリ名は、自由に変更できます。第三者から推測できないように、ランダムな英字数字を含む名称に変更することをオススメします。

変更するには、FTPソフト上で直接、名称を変更してください。変更にあたって、設定などは必要ありません。

●変更例:
変更前 _cms
 ↓
変更後 _cms_ef54Sdgkn

html (アセットディレクトリ)

アセットディレクトリを変更するには、FTPソフト上で直接、名称を変更してください。
次に、設定ファイルも変更してください。

/_cms/setting/setting.js  150行目あたり
var ASSET_DIR_PATH = "../html/";
変更例 (commonに変更)
var ASSET_DIR_PATH = "../common/";

html (デフォルトディレクトリ)

デフォルトディレクトリは、HTMLページの公開先のデフォルトディレクトリで、初期設定では、アセットディレクトリを同じです。

デフォルトディレクトリを変更するには、FTPソフト上で直接、名称を変更してください。
次に、設定ファイルも変更してください。

/_cms/setting/setting.js  160行目あたり
var DEFAULT_DIR_PATH = "../html/";
変更例 (サイトルートに設定)
var DEFAULT_DIR_PATH = "../";
変更例 (深い階層に設定)
var DEFAULT_DIR_PATH = "../dir/subdir/";

デフォルトディレクトリは、単に初期設定を指定するだけなので、サイトルート以下であれば、どのディレクトリに対しても、HTMLページの公開先を、ページごとに指定できます。

image (アップロードディレクトリ)

アップロードディレクトリは、ファイルアップロード時のデフォルトのディレクトリで、主に画像用のディレクトリとして使用しています。

アップロードディレクトリを変更するには、FTPソフト上で直接、名称を変更してください。
次に、設定ファイルも変更してください。

/_cms/setting/setting.js  170行目あたり
var UPLOAD_DIR_PATH = "../images/";

アップロードディレクトリは、単に初期設定を指定するだけなので、サイトルート以下であれば、アップロードディレクトリ以外にも、自由にアップロードはできます。

ディレクトリを追加する

上記のCMS関連のディレクトリ以外に、自由にディレクトリを追加できます。

追加する際は、FTPで行うほか、CMSのファイルマネージャ上からでも追加できます。
CMS関連以外のディレクトリは、CMS側では特に管理は行わないので、自由に追加・編集・削除してください。

サイト構築のヒント

サンプルサイトでは、できるだけシンプルなディレクトリ構成で作成していますが、一つのディレクトリ内で、ページ数や画像数が増えてくると、のちのち管理がややこしくなってきます。

実際のサイト構築の際は、サイトの規模に応じで、余裕のあるディレクトリ構成を考えてみてください。

以下に、中規模サイト作成時のディレクトリ構成案を紹介します。

画像ディレクトリ内でサブディレクトリをつくる

画像ディレクトリについては、画像数が多くなりがちなので、サブディレクトリなどつくって、管理することをおすすめします。

サイトルート
├─ /images/
| ├─ ui/ ..UI用の画像ディレクトリ
| ├─ company/ ...会社概要用の画像ディレクトリ
| ├─ product/ ...製品紹介用の画像ディレクトリ
| ├─ recruit/ ...採用情報用の画像ディレクトリ
├─ /pdf/ ...PDF用のディレクトリ

コンテンツグループごとにディレクトリを分ける

コンテンツグループごとに、きちんとディレクトリを作成し、HTMLの公開先に指定することもできます。

サイトルート
├─ company/ ...会社概要用のHTMLディレクトリ
|  index.html
|  history.html
├─ product/ ...製品紹介用のHTMLディレクトリ
|  index.html
|  product_a.html
|  product_b.html
|  product_c.html
├─ recruit/ ...採用情報用のHTMLディレクトリ

既存サイトや、既存CMSとの同居

すでにJS CMS以外で作成したサイトがあったり、別のCMSが導入されている場合であっても、JS CMSは問題なく同居できます。

既存のものと、ディレクトリ名がぶつかる場合は、ディレクトリ名を変更すれば、問題ありません。

質問・問い合わせなどについて

不具合や不明点などあれば、ページ右下のチャットで聞いてもらうか、
開発者のピクセルイメージ田中 ( tanaka@pixelimage.jp ) にメール下さい。
CMSには未反映の不具合と対処方などもあるので、お気軽に質問いただければと思います。

使用した感想などあれば、TwitterやFacebookなどでシェアしてもらえるとうれしいです!
あと、JS CMS開発者日記のサイトもはじめました。こっちはユルめのサイトです。
ピクセルイメージ | JS CMSの導入、カスタマイズの依頼は...