今日はCSSの勉強してた / 自サイトを大改装予定


　今日は、ちょっと買い物がてら写真でも撮るかなあと思ってニナつれて外にでたのですが、自転車を会社におきっぱなうえにSUICAも家におきっぱだったので、駅の近くの喫茶店で夜までCSSの勉強してました。


　やっぱ一からサイトつくるとなると、CSSもちゃんと勉強しないとダメだなー
　Web1.0脳にはきついわー
　とりあえず一通りできるようになった。

　ひどい配色のページだｗ
　ブラウザ依存がひどくて泣けてきますね。IE6にも対応したいので、折角ある素敵機能が使えない・・・
　

　いまごろになって、CSSのお勉強なんてしてるのはサイトを再構成しようと思ったから。
　今のメインのサイトはドコカノドットコム（tableレイアウトで頑張ってる）ということになっているんだけど、こちらはレンタルサーバーで容量が厳しかったりいろいろな理由で、最近は作品の公開は自宅サーバ(dokokano.net)に載せてる。
　こちらは、物置扱いでファイルが置いてあるだけなので、説明ページとかないんですよね・・・
　なので、たとえば今日もちょっと、N/P Twins改良したりしてたけど、「最新版ダウンロード」とzipへのリンクはったりするくらいになっちゃう。
　あんまりなので、ちゃんとサイトを作ろう。
　で、将来的にはこっちに統合していきたい。


　サイトの構成とか、先々いろんなもの扱うことを視野にいれるとすごく悩ましいですよね。
　ディレクトリ構成とか。
　あとからディレクトリ構成買えるとURLが変わっちゃって外部からのリンクが全部切れちゃうし。外部のブログからのや検索エンジンからのリンクを考えると、URL変更は極力避けられるようにしなくては。
　mod_rewriteは最後の武器だ！


　サイト管理となるとCMSやwikiを使うという手もあるけど、こちらはシステムを入れ替えるとURLががらっと変わっちゃう恐れがあるので、トラディショナルに静的なHTMLで置くことにした。
　HTMLを自動生成するようにするのは、後からでも出来るし。
　

　あと、スクリプト(PHPとか)でページを生成する場合も拡張子変わる(php3→phpとか困った)ことがあるので、外部への公開URLは、「ディレクトリ名/」という形式にしよう。
　CSSとかJacaScriptの置き場は、手間はともかくあとからどうとでもなるので。そんなに気にしなくてもいいだろうな。


　さて、まずはディレクトリ構成を決めよう。
　サイトで公開したいのは、メインはソフトだけど、文書や写真、データ、イラストとかもある。
　なので、トップはそれらでディレクトリを分類。
　ソフトは、appディレクトリにするかな。
　１ソフトを１ディレクトリに分けて、appの下に格納する。
　それはいいけどソフトは、Windows用だったりAppletだったり、Webアプリだったりする。全部、フラットにapp下にいれて分類ごとのページを用意するのも一案だけど、appletなど数が多い物が混じると整理が面倒なことになりそうなので、それらを分類するディレクトリを１階層用意しよう。
　ディレクトリは技術的な種類で分類して、ゲーム・実用アプリなどといった分類はそれぞれインデックスのページを用意することにする。


　上記の方針で作ったのが、以下のディレクトリ構成案。

【サイトディレクトリ構成案】



　例としていくつか実際のソフト名をいれてみた。
　ホントにこの構成でいいものかまだ悩ましい。なんか、いきなり法則が乱れているところもあるし。
　とりあえず、個別のページから作っていくので、ソフトのディレクトリだけでも固めて実際のページを置いていきたい。


　今のところの方針
・対象ブラウザは、Firefox3.0以降、IE6.0以降。
・公開URLは、ディレクトリ構成そのもの。パラメータなどを含まない。
・公開URLは、「ディレクトリ/」 とする。こうしておけばインデックスがindex.htmlでもindex.phpでも関係なくなる。
・ディレクトリ名は、単数形で
・１作品１ディレクトリ
・ダウンロードページは、さらに「download」フォルダを掘ってその中で公開。最新版は、「*_latest.zip」というファイル名にして、ダウンロードファイルを直接指定されても常に最新版をダウンロード出来るようにする。過去のファイルは、日付をつけてリネーム。apacheのフォルダ内インデックスページ機能で一覧を表示出来るようにする。
・cssは、各階層にcssフォルダを掘ってそこに格納
・共通cssは、最上位階層直下のcssフォルダにあるが、各ページのディレクトリ階層が異なるため相対パス指定では階層ごとにさかのぼる階層の数がかわってやっかい。かといって、rootからの指定は美しくないなあ。
↓
cssで上の階層の共通cssをinportするようにしておく。
例) @import url("../../css/common.css");
各階層にこのようなcssを置いておけば、順番にたどって最上位階層のcssを参照できるはず。
また、そもそもソフトの種類によって画面デザインは大幅に変わる可能性があるので、どこまで共通cssを使えるか。
・JavaScriptも同様にする
・HTMLの文字コードは、UTF-8
・テキストに＜br＞つけてまわるのは面倒なので、本文は＜pre＞の中か、「white-space: pre;」しとく。
・サイトナビゲーションは、JavaScriptで外部スクリプトにしておいて、一元化出来るようにする。JavaScript OFFの場合は、１階層上へのリンク。
・作品インデックスページは、自動生成も考えておく。各作品データ（タイトル、説明、サムネイル）を共通形式で、各作品フォルダに格納しておき、自動生成できるようにする。
・各ページにコメント機能をつけたい。コメントはページ右側に配置。共通JavaScriptで投稿内容を表示（投稿内容は同一ディレクトリにファイルを置くので読み込んでパースして表示。表示書式指定のCSSクラス用意しておく）。投稿はAJaxで。
・各ページの編集は、HTMLを直接編集。オリジナルは、Webサーバのものを最新とする。
・ブラウザからHTMLを編集するための、PHPスクリプトとかそのうち作る。urlの一部に特定文字列をつけると、mod_rewiteで編集用ページ(PHPとかで作る。BASIC認証あり)のURLがひらき、そこでFormのテキストフィールドで編集できる。hatena書式で記述できるようにしてもイイかも。
・スクリーンショット用の画像は、はてなフォトライフとかにあがっているので、URLを指定するとそこからコピーしてくる機能も欲しい。あと、写真のアップローダも用意するか。
・雑多な公開用データは、アップローダーでアップロードできるようにしておいて、連番をつけてフラットに管理してしまってもいいかもしれない。
・大分類をディレクトリ分けするのやめて、サブドメインにしようかなあ・・・でも、やっぱWebサイトはwwwで始まった方がわかりやすいか。そうでもないか。
・WebアプリっぽいのやWebAPIはまた別の分類で公開したい。



おもいついたら追記します。



今日のBGM
D