プログ

’14修了無内定理系院卒の活動雑記||プー太郎ログ||プログラミング雑記

Webサイトにおけるファイル構成

ここのところ自分のサイトを作る作業に没頭していますが,それでも割と後回しにしている事があります.それがタイトルにも揚げているファイル構成です.僕のサイトは,僕みたいな人が見た時に参考になるようなサイトにしたいので,基本的には分かりやすく要所でスマートな手法を取ることができたらと考えています.そんなわけでちょっと考えてみて,暫定的に構成を一新したので説明.

分かりやすいサイトのファイル構成というのは,ディレクトリでしっかりと別れていて,戻るの代わりにURLの階層を1つ消しても動作するようなページかなぁと.んでスマートな手法というのが,個々のファイルを細分化して同じものは繰り返し参照して使うというもの.サーバの容量の削減のためにも,似たような内容のファイルを並べておくのは極力避ける.例えばCSSなら,先ほどの階層から決まったCSSを呼び出すというもの.カテゴリAのテーマAのページなら,main.css,cateA.css,themeA.cssを呼び出し,同じカテゴリAのテーマBならmain.css,cateA.css,themeB.css,別カテゴリのテーマCのページならmain.css,cateB.css,themeC.cssといった具合.さらに各階層のメインページはindex.phpで書き,内容はindex.htmlに記述してそれを呼び出して表示する.こうすることで,上位のindex.phpは下位のindex.htmlを引用した際に更新が1ページ分で済む,というのを考えていました.しかしこうすると,htmlファイルにリンクを貼った際に相対パスだとうまくいかないことが判明.絶対パスにすればうまく行くけれど,今度は実行環境とテスト環境で整合性が合わなくなってしまうため,開発環境では目をつぶるかアップ直前に書き換えなくちゃいけない.これは流石にめんどくさいということで断念.リンクがないファイルだけでもやろうかと思ったんですが,外面的にはページリンクがないファイルでも,CSSファイルへのリンクを持っているため前述の階層構造と組み合わせるとうまくいかない.

ということで基本的なルールとしては,
・階層分けをしっかり行いURLやパンくずリストとの整合性を取る.
・特にURLの階層の並びでどんな内容か分かりやすいように.
・末端のディレクトリにおいては,メインページのファイル名をindexにすることで分かりやすく.
・末端以外のディレクトリについては,indexで子ディレクトリまでの中継をメインに表示する.
・その際やたらリンクを踏まされるとめんどくさいのでショートカットを適宜挟む.
こんな感じ.ホントは概念図みたいなものを載せられると良かったんだけど,パワポに入ってる組織図のコレジャナイ感が強かったのと時間が取れなかったので省略.ページを作る度に構成を意識するのはめんどくさかったりするけど,早い内にやっておいたほうが後々役に立つことがきっとあると思う.

それ以外としては,サイトに載っけとこうと思っている昔作ったツールの説明ページを作成.説明なんて無くても画面を見れば分かるようなツールを目指しているけど,書こうと思えばいくらでも書けるわけで分量が多くてめんどくさい.その上微妙に思ってた通りにならなかったりしてツールの方を変えるのか説明を曲げるのか・・・うーん.

でもホントは一週間切ってるしFEの勉強やっていかないとね・・・