HTML5

HTML5で下記のようなサイトを作ろうと思っています。
画面遷移の際のアニメーション等に関しては問題ないのですが、
こちらのサイトは、ドメイン名の後に/#/を挟んで指定のHTMLファイルを開いていると思うのですが、このような構成にする場合どのようなディレクトリ構成にすればいいのでしょうか？

<a href="#/～"></a>で指定するとフラグメント識別になるので、HTMLファイルは見に行ってくれないと思うのですが、どう構築しているのでしょうか？

すこし質問が分かりづらくて申し訳ございませんが、よろしくお願い致します。

http://www.womb.co.jp/#/schedule/index.html

No.5 ベストアンサー 回答者： notnot 回答日時： 2010/12/14 23:40

#2です。

＞この部分をもう少し詳しく教えていただけますでしょうか？

XMLHttpRequestでサーバにアクセスして、DOMでページを更新します。これ以上の詳細は書籍やウェブサイトを参照してください。

＞innerHTML等で更新するということですか？

それはDOMの一種なので使うこともあり得ます。

＞こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね？

Aタグのリンクをクリックすることでページ遷移していますので、戻るボタンで前のURLのページに戻れます。ページの作成にXMLHttpRequestとDOMを使っているだけです。DOMによるページ更新の直前には仰る通り戻るボタンで戻れません。リンククリック前には戻れます。

この回答へのお礼

とても丁寧な説明どうもありがとうございます。
ご指摘の通り試したら解決しました。
ありがとうございます。

お礼日時：2010/12/15 00:17

No.4 回答者： think49 回答日時： 2010/12/14 23:34

#3 です。

HTML5 には hashchange イベントがあり、URLハッシュが変わったタイミングで発火します。
hashchange未対応の IE は window.setInterval で location.hash を監視してください。
http://www.whatwg.org/specs/web-apps/current-wor …

Ajax は XMLHttpRequest, ActiveXObject('Msxml2.XMLHTTP.6.0') でGoogle検索してみてください。
responseText を innerHTML, DOMParser, createHTMLDocument, createDocument, createLSParser, ActiveXObject("htmlfile") のいずれかでDOMノードに変換して流し込めばOKです。
データの持ち方によっては JSON でもいいですし、やり方はいろいろあります。

No.3 回答者： think49 回答日時： 2010/12/14 23:20

仰るとおり # 以降はフラグメント識別子であり、

http://www.womb.co.jp/#/schedule/index.html なら #/schedule/index.html がフラグメント識別子として認識されます。
(# 以降の "/" はエスケープすべきですが、エスケープしなくてもフラグメント識別子として認識されます。)

id="#/schedule/index.html" は HTML5 では許されます。
http://www.whatwg.org/specs/web-apps/current-wor …

JavaScript ならば location.hash === '#/schedule/index.html' です。

No.2 回答者： notnot 回答日時： 2010/12/14 21:09

#以降は、ブラウザ内で保持されて、サーバーには送りませんので、サーバに対しては、ルートディレクトリを取得に行きます。

index.html （もしくはindex.php index.cgiなど)で表示するページの中に、JavaScriptがあり、そのJavaScript内で location.href を参照すれば、# も含めたhrefの文字列全部が取れますので、その文字列をパラメータにして、Ajaxの手法で必要なデータを取り寄せてページ内に表示します。

この回答への補足

回答ありがとうございます。

->Ajaxの手法で必要なデータを取り寄せてページ内に表示します。
この部分をもう少し詳しく教えていただけますでしょうか？
innerHTML等で更新するということですか？

ちなみに、こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね？

お手数おかけ致しますが、よろしくお願い致します。

補足日時：2010/12/14 23:03

No.1 回答者： yyr446 回答日時： 2010/12/14 19:12

"#"という名前のディレクトリーは作成可能ですよね（WindowsでもUnixでも）

だからディレクトリ構成は、そのまんま
　-root(/)
　　-#
　　　-schedule1
　　　　・index.html
　　　　・file.html
　　　　 ******
　　　-schedule2
　　　　・index.html
　　　　・file1.html
　　　　 ******
じゃないでしょうか？

<a href="#/～"></a>で指定するとフラグメント識別になるので、HTMLファイルは見に行ってくれない？
＝＞通常hash識別の＃の後ろに/がある事はないので、pathと混同する事は無いと思います。

HTML5のhref属性のcommon setter actionの仕様↓
http://www.w3.org/TR/html5/urls.html#concept-uda …
英文読解力がないので、自身ないですが、大丈夫だと思います。

※id="/xxxx"なんてのは、HTML4.01だと許されない

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

けど、HTML5だとOKなのか、？？？です。

この回答へのお礼

回答どうもありがとうございます。
私もHTML5ではまだ分からないところが多々ありまして、試行錯誤しながらの制作している段階なので、勉強になりました。

ちなみに、"#"という名のディレクトリは作成可能ですが、アクセスすると/#/ではなく/%23/というパス名になってしまうのですが、なぜだかお分かりになりますでしょうか？

-root(/)
　　-#
　　　-schedule1
　　　　・index.html
　　　　・file.html
　　　　 ******
　　　-schedule2
　　　　・index.html
　　　　・file1.html
　　　　 ******
例えば上記の構造でschedule1/index.htmlにアクセスすると、
www.ドメイン名/#/scheule/index.htmlではなく、
www.ドメイン名/%23/scheule/index.html
というURLになってしまいます。

お礼日時：2010/12/14 21:15