HTML5

質問

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

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

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

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

回答No.5

notnot · ベストアンサー

#2です。

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

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

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

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

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

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

お礼

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

回答No.4

think49

#3 です。

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

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

回答No.3

think49

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

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

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

回答No.2

notnot

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

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

補足

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

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

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

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

回答No.1

yyr446

"#"という名前のディレクトリーは作成可能ですよね（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-setter
英文読解力がないので、自身ないですが、大丈夫だと思います。

※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になってしまいます。