WEBサイト制作用の作業環境に最適なディレクトリ構成とは?

2012-06-16

web-development-environment-directries-basic.gifWEBサイト制作用の作業環境を構築することは非常に重要な作業ステップの1つです。

しっかりと考えて構築しておくと、どんどん作業ペースが早くなって便利な一方、後先考えずに適当に作ってしまうと、どんどんカオスな状態になってペースが遅くなり、ミスも多くなるという悪循環に陥ってしまいます。

そこで今回は、私が普段行なっている作業環境構築の基本的な構造をお教えしたいと思います。 一応、小規模なサイトから規模の大きいサイトまで実際に構築した経験から培ったものなので、大抵の環境には対応できると思います。

基本はシンプルな5フォルダ構成

私が作るのは以下の5つのフォルダが基本です。

web-development-environment-directries.gif

なんとなくイメージが湧くかと思いますが、1つづつその理由を解説していきます。

1.プロジェクトフォルダ

web-development-environment-directries.gif

プロジェクトフォルダは、サイトの計画が決まったときに真っ先に作成するフォルダです。

このフォルダの中にサイト関連の全てのデータがまとめられます。 フォルダ名には基本的にドメイン名、あるいはサイト名を付けるようにします。 個人的にはドメイン名がオススメですね。

2.ドキュメントフォルダ

web-development-environment-directries.gif

ドキュメントフォルダは、サイト関連の仕様書や操作マニュアル等の書類データを格納するためのフォルダです。 中身はプロジェクトごとに異なることがほとんどなので、ドキュメントフォルダ内の構造は任意で決めていってください。

3.素材フォルダ

web-development-environment-directries.gif

素材フォルダは、イラストレーターやデザイナーが作成した画像ファイル等の作業用の素材ファイルを格納するためのフォルダです。

あくまで作業途中のものを入れておくためのフォルダなので、実際にWEBサイトにアップロードするファイルは以下に説明する本番環境用フォルダテスト環境用フォルダに格納するようにしてください。

4.本番環境用フォルダ

web-development-environment-directries.gif

web-development-environment-directries-dw.gif本番環境用フォルダは、実際に公開するWEBサイトのルートフォルダです。

Dreamweaver等のWEBサイト制作ツールやFFFTP等のファイルアップロードツールのローカルルートディレクトリとして指定してください。

フォルダ名ですが、基本的にサブドメイン名(例:www)を付けて分かりやすくしています。 もしサブドメインが「www」でない場合は、そのサブドメイン名を付けておきましょう。

サブドメイン名が無い場合は「www」を付けておきます。

5.テスト環境用フォルダ

web-development-environment-directries.gif

テスト環境用フォルダは、本番環境にデータを上げて運用する前のテストサーバー用のルートディレクトリ用のフォルダです。 このテスト環境用フォルダは原則として本番環境用フォルダ内の構造と同じ構造にします。

その理由として、実際の制作体制、運用体制に入ると「1.テストサーバーでファイルを作成(または更新)」「2.本番サーバーにアップロードして公開」という手順が頻繁に発生するからです。

その場合にミスを極力無くすためのポイントとして、テスト環境のファイルを本番環境のファイルとシンプルに上書き可能にすることが重要です。

フォルダ名は、本番環境用フォルダでつけた名前に「_dev」を付加して、作業用であることを明示しておきます。 「www」が本番環境用だとすると、テスト用は「www_dev」になります。 この名付け方には、もう一つの利点があります。

web-development-environment-directries-copy.gif

web-development-environment-directries-path.gif例えば、上図にあるようにテスト環境用フォルダ内の index.php ファイルを本番環境用フォルダに移したいとします。

その場合、ウィンドウ上部のディレクトリパスの「www_dev」の部分の「_dev」を削除するだけで「www」になるので、index.php ファイルをシンプルに上書きすることが可能です。

もちろん、Sync Toy のようなディレクトリ同期ツールを使えば一気に2つのフォルダ間でファイル同期ができるわけですが、1ファイルだけのちょっとした修正であれば、直接ファイルを上書きするほうが早いです。

本番環境用とテスト環境用では、サイト管理を分けておくこと

テスト環境用も本番環境用と同様にDreamweaver等でテストサーバーと接続するので、基本的にサイト管理は別々で行うことになります。

最初は作業の度に切り替えるのが面倒くさいと思ってましたが、運営の段階に入ってくると環境が切り分けられていることの便利さを痛感します。

web-development-environment-directries-sitesetting.gifその理由として、テスト環境では実験的にいろいろファイルの更新などを行いますが、本番環境では完成度の高い安定したファイルのみで構成されるようにしないといけません。

ところがサイト管理を同一にして両方のサイトフォルダを含めてしまうと、制作ツールの思いがけないバグや、慣れないスタッフによる手違いの操作ミス(意外と起こりやすい)が起こった時に、取り返しの付かない失敗に繋がることがあります。

例えばテスト用のプログラムやデータを間違って本番環境に上げてしまう失敗が起こります。

それを避けるためにも、本番環境フォルダとテスト環境フォルダは別々のサイト管理で分ける必要があるのです。

というわけで…

基本的なWEBサイト構築用のフォルダ構成を解説してみましたがいかがだったでしょうか?
私としては他の制作会社がどのような構成にしているのかすごく興味があるので、そのような情報をお持ちの方はお知らせいただけると嬉しいです。 ではまた~!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

2012-06-16