文字列や画像のurlをhtmlに代入したい

美容室のウェブサイトを作成しています。
スタッフは全員プログラミングができないのですが、
デザインとxhtmlのコーディングくらいはできるので
自分たちで作ることになりました。

ですがその中に1つ難題がありまして、それがphpなのかJavaScriptなのか、
はたまた何らかのcgiを探すべきなのか皆目見当もつかないので、
調べようにも抽象的にしか検索できず困っています。

作りたいのは美容師の出席簿のようなものなんですが、
店長がスタッフのスケジュールをxmlで書いてアップするので
そのxmlを読み込んで表示してほしいというのです。

サイトは男性向けと女性向けと2パターン作るのですが
店自体は同じなので出勤する美容師も同じ、ということで
1つのファイルで同時に2サイトを更新したいとのこと。

ちょうど外注で作成中のFlashサイトがそういう造りになっているので
同じ要領で更新できると便利なのだそうです。

ページ構成は当日、翌日、翌々日の3ページで、やりたいことは、

1.仮に3ページをtoday.html、tomorrow.html、da_tomorrow.htmlとすると
　それぞれ日付が変わったら1日づつ内容もずれて、da_tomorrow.htmlとtomorrow.htmlの内容がtomorrow.htmlとtoday.htmlに置き換わり、
　さらにもう翌日の予定がda_tomorrow.htmlに表示されるようにしたい
2.写真に枠(背景画像で表現)をつけ、横1列あたり4～5人で人数分並べたい
3.xmlから引っ張りたいのは、
・日付
・その日に出勤する美容師の写真(url)、名前(文字列)、予約の空いている時間帯(文字列)


です。

xmlはテキストエディタで更新するので、その程度の知識はあるようです。
必要によってはtxtでも、さらに言えばcsvでもたぶん大丈夫です。
汎用のものや、掲示板の応用などで使えそうなcgiがあるのであれば
もちろんそれでも結構です。(設置はわたしができます)

ただ、デザイン(テンプレ)は数人で作成することと、
デザインとコーディングをやる子たちは本当にそれしかできないので
できればhtml側を複雑にしたくありません。理想としては、

<hN><!-- 日付 -->出勤美容師一覧</hN>
<!-- 人数分繰り返し　ここから -->
<div style="background:url(xx.gif); float:left;">
<img src="<!-- 美容師の写真画像 url -->" style="margin:5px;" />
<!-- 美容師の名前 --><br /><!-- 出勤時間 -->
</div>
<!-- 人数分繰り返し　ここまで -->

というイメージで(伝わりますか？)、
何らかの短いプログラムか独自タグのようなもののコピペでもって、
html側に「ここですよ～」と指定するだけにしたいのです。
(※わかりやすいよう、例ではスタイルをインライン指定しています)

これを実現するためにはどうしたらいいでしょうか？

もしご説明の足りない部分がありましたらご指摘ください。
どうぞよろしくお願いいたします。

No.4 ベストアンサー 回答者： yyr446 回答日時： 2009/06/17 09:41

訂正、XMLからのテーブル書き換えはこちら↓

http://allabout.co.jp/internet/javascript/closeu …
でした。

この回答への補足

重ね重ね、ありがとうございます。
お礼が遅くなりましてすみません。
たぶん、もう1歩手前から調べないといけないようで、
悲しいほどにわからないので、まだ格闘しています(;_;)

もう少し頑張ってみて、またご報告します！

補足日時：2009/06/23 10:53

この回答へのお礼

その節はお世話になりました。

色々調べまして、結局 Adobe Spry を利用して実装しようと思います。
デザイナー目線でいくと一番簡単そうでしたので…(^-^;)

詳しく教えていただいたおかげで、今まで何となく見過ごしていた
JavaScriptライブラリというものを、具体的に知ることができました。

Spryに慣れてきたらjQueryやprototype.jsにも挑戦してみようと思います。
ご回答ありがとうございました！

お礼日時：2009/07/19 00:04

No.3 回答者： yyr446 回答日時： 2009/06/17 09:37

「上に挙げたような目的のためのTIPS」

↓はどうでしょう。動的にXMLデータから<TABLE>の中身を書き換えています。
http://allabout.co.jp/internet/javascript/closeu …

No.2 回答者： yyr446 回答日時： 2009/06/16 14:53

javascriptの知識があるなら、xmlからデータを取得するのはそんなに難しくないと思います。

AJAXという技術を使ってXMLファイルからデータを読み込み中身をパース（解析）して、必要なデータを、DOM操作関数でhtmlの要素にセットするだけですね。
prototype.jsとかJqueryとかを使えば、必要な機能が関数（クラス）化されているので、適時にアレンジするだけです。
　ページの見栄えを良くするデザインの方がよっぽど難しいです。

さらに、サーバーサイドのプログラム(PHP)で、予めデザインされた
ページ(テンプレ)に、XMLを読み込んだデータをセットして出力するようにすれば、応用範囲が広がります。
XMLのアップデート機能や、個人別スケジュールの取得、ダウンロード
なんかも出来ます。
基本的な機能だけなら、難易度は低いです。従業員数名ならDBにする必要も無くXMLがよい選択だと思います。

この回答へのお礼

丁寧なご回答ありがとうございます。
XMLがよい選択だと言っていただけてホッとしました。
方向性は間違っていないのですね。

PHPのほうが後々の使い勝手は良さそうですが、
自分でガリガリ書けないので5000円程度で探しているところです。
HTMLスキン式アイコン日記帳なんていうものがあれば応用できそうだと思うんですけど…
これがなかなか見つかりません・゜・(>_<)・゜・

Javascriptに関しても同じで、配布されているソースを応用するとか
DWで書ける程度の簡単なものなら使ったことはあるんですが、
1からは書けないのが困りものです。

で、「DOM操作関数」「prototype.js」「Jquery」について今少し検索してみました。
慣れるまではデバッグでつまづくかもしれませんが、面白そうですしJqueryあたりはじっくり見ていけば何とかなりそうな気もします。

上に挙げたような目的のためのTIPSが載っていたり、
または易しめの解説サイトでお勧めなどがありましたら、ご紹介いただけると嬉しいです。

お礼日時：2009/06/16 18:40

No.1 回答者： Wingwrong 回答日時： 2009/06/10 18:10

私も別件で探していたのですが、「会議室予約」の仕組みを使えば、フリーのCGIでいけないでしょうか。

会議室名の代わりに、従業員名を入力することでできそうな気がします。

おそらく自分でXMLを表示させるプログラムを作るというのは、相当難しいと思いますよ。

この回答へのお礼

会議室予約CGI、探してじっくり拝見してみました。
オンライン予約の必要がないので今回は使用を見送りましたが、たしかに応用できそうです。
教えてくださってありがとうございました！

お礼日時：2009/06/16 17:29