![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HTML5で下記のようなサイトを作ろうと思っています。
画面遷移の際のアニメーション等に関しては問題ないのですが、
こちらのサイトは、ドメイン名の後に/#/を挟んで指定のHTMLファイルを開いていると思うのですが、このような構成にする場合どのようなディレクトリ構成にすればいいのでしょうか?
<a href="#/~"></a>で指定するとフラグメント識別になるので、HTMLファイルは見に行ってくれないと思うのですが、どう構築しているのでしょうか?
すこし質問が分かりづらくて申し訳ございませんが、よろしくお願い致します。
http://www.womb.co.jp/#/schedule/index.html
No.5ベストアンサー
- 回答日時:
#2です。
>この部分をもう少し詳しく教えていただけますでしょうか?
XMLHttpRequestでサーバにアクセスして、DOMでページを更新します。これ以上の詳細は書籍やウェブサイトを参照してください。
>innerHTML等で更新するということですか?
それはDOMの一種なので使うこともあり得ます。
>こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね?
Aタグのリンクをクリックすることでページ遷移していますので、戻るボタンで前のURLのページに戻れます。ページの作成にXMLHttpRequestとDOMを使っているだけです。DOMによるページ更新の直前には仰る通り戻るボタンで戻れません。リンククリック前には戻れます。
No.4
- 回答日時:
#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
- 回答日時:
仰るとおり # 以降はフラグメント識別子であり、
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
- 回答日時:
#以降は、ブラウザ内で保持されて、サーバーには送りませんので、サーバに対しては、ルートディレクトリを取得に行きます。
index.html (もしくはindex.php index.cgiなど)で表示するページの中に、JavaScriptがあり、そのJavaScript内で location.href を参照すれば、# も含めたhrefの文字列全部が取れますので、その文字列をパラメータにして、Ajaxの手法で必要なデータを取り寄せてページ内に表示します。
この回答への補足
回答ありがとうございます。
->Ajaxの手法で必要なデータを取り寄せてページ内に表示します。
この部分をもう少し詳しく教えていただけますでしょうか?
innerHTML等で更新するということですか?
ちなみに、こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね?
お手数おかけ致しますが、よろしくお願い致します。
No.1
- 回答日時:
"#"という名前のディレクトリーは作成可能ですよね(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になってしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- サーバー 別サーバに構築したApache+Tomcatの連携について 2 2023/03/06 23:23
- その他(コンピューター・テクノロジー) <a href="file:///フォルダ名/ファイル名">リンクテキスト</a>について 1 2023/04/06 22:40
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- その他(開発・運用・管理) 【至急】.htaccessによるディレクトリ単位でのリダイレクト 2 2023/08/10 13:46
- PHP ファイルアップロードに関してのセキュリティについてアドバイスお願い致します 1 2023/08/20 00:25
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- Visual Basic(VBA) エクセルのマクロについて教えてください。 1 2023/08/08 11:02
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでリンクに勝手にindex.htm...
-
.htaccessで特定URLからのア...
-
複数のindex.htmlについて
-
イントラネットURLの登録方法
-
複数のindex.htmlを作ってもい...
-
URLの書き方
-
複数のindex.htmlが存在するホ...
-
FTPでのエラーメッセージ
-
HTML5
-
htaccessでPCと携帯の振り分け(...
-
XREA使用で作成したHTMLファイ...
-
こんなページをつくりたいので...
-
index.htmlファイルはどこに?
-
1つのドメインHP内に2つ<inde...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
htmlファイルの表示が真っ白
-
VBA URLDownloadToFileについて
-
HTMLで別PCのフォルダを開く
-
iPadの標準ブラウザでローカルH...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1つ下の階層のフォルダに相対...
-
リンク先に日本語フォルダがあ...
-
URLに「.html」の拡張子がなく...
-
複数のindex.htmlを作ってもい...
-
フォルダ内の最初のファイル名...
-
XREA使用で作成したHTMLファイ...
-
.htmと.htmlの違い
-
URLの書き方
-
サーバー内のフォルダにある写...
-
1つのドメインHP内に2つ<inde...
-
index.htmlファイルはどこに?
-
トップページ「/index.html」の...
-
webサイトの「index」を非表示...
-
URLの.html省略について
-
htmlでリンクに勝手にindex.htm...
-
フォルダにはダミーでもindex.h...
-
旧URLからのサーバー移転でhttp...
-
Application.OnTimeで引数付き...
-
Apacheで、indexの拡張子別に優...
-
ホームページを作成したら、フ...
おすすめ情報