HTML5で指定のHTMLファイルを開くディレクトリ構成について

前へ 次へ
このQ&Aのポイント
  • HTML5を使用して特定のHTMLファイルを開く場合のディレクトリ構成についての質問です。
  • フラグメント識別子を使用するため、指定のHTMLファイルは表示されませんが、どのように構築されているのでしょうか？
  • 質問が分かりづらいかもしれませんが、お力添えをお願いします。
回答を見る
  • ベストアンサー

HTML5

HTML5で下記のようなサイトを作ろうと思っています。 画面遷移の際のアニメーション等に関しては問題ないのですが、 こちらのサイトは、ドメイン名の後に/#/を挟んで指定のHTMLファイルを開いていると思うのですが、このような構成にする場合どのようなディレクトリ構成にすればいいのでしょうか？ <a href="#/～"></a>で指定するとフラグメント識別になるので、HTMLファイルは見に行ってくれないと思うのですが、どう構築しているのでしょうか？ すこし質問が分かりづらくて申し訳ございませんが、よろしくお願い致します。 http://www.womb.co.jp/#/schedule/index.html

  • HTML
  • 回答数5
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • notnot
  • ベストアンサー率47% (4848/10261)
回答No.5

#2です。 ＞この部分をもう少し詳しく教えていただけますでしょうか？ XMLHttpRequestでサーバにアクセスして、DOMでページを更新します。これ以上の詳細は書籍やウェブサイトを参照してください。 ＞innerHTML等で更新するということですか？ それはDOMの一種なので使うこともあり得ます。 ＞こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね？ Aタグのリンクをクリックすることでページ遷移していますので、戻るボタンで前のURLのページに戻れます。ページの作成にXMLHttpRequestとDOMを使っているだけです。DOMによるページ更新の直前には仰る通り戻るボタンで戻れません。リンククリック前には戻れます。

hashitaka0303
質問者

お礼

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

その他の回答 (4)

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#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 でもいいですし、やり方はいろいろあります。

  • think49
  • ベストアンサー率59% (285/482)
回答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-work/multipage/elements.html#the-id-attribute JavaScript ならば location.hash === '#/schedule/index.html' です。

  • notnot
  • ベストアンサー率47% (4848/10261)
回答No.2

#以降は、ブラウザ内で保持されて、サーバーには送りませんので、サーバに対しては、ルートディレクトリを取得に行きます。 index.html （もしくはindex.php index.cgiなど)で表示するページの中に、JavaScriptがあり、そのJavaScript内で location.href を参照すれば、# も含めたhrefの文字列全部が取れますので、その文字列をパラメータにして、Ajaxの手法で必要なデータを取り寄せてページ内に表示します。

hashitaka0303
質問者

補足

回答ありがとうございます。 ->Ajaxの手法で必要なデータを取り寄せてページ内に表示します。 この部分をもう少し詳しく教えていただけますでしょうか？ innerHTML等で更新するということですか？ ちなみに、こちらのサイトでは動的に更新した後、ブラウザの戻るボタンもちゃんと効いています。普通にinnerHTMLで内容を変えただけならブラウザの戻るボタンは効かないですよね？ お手数おかけ致しますが、よろしくお願い致します。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答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-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なのか、？？？です。

hashitaka0303
質問者

お礼

回答どうもありがとうございます。 私も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になってしまいます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • HTMLの階層について

    現在HPを作成しているのですが、HTMLファイルが多くなってきたので 新たにフォルダを作ってそこに入れようと思っています。 図のような構成で<a href="html/a.html">と記入しリンクをクリックすると 「about:blank」というページが新しく出てくるようになりました。 この症状はHTMLファイルをindexと同じディレクトリに入れて<a href="a.html">とすると解決します。 特にJavaScriptをいじってはおらずまたこのような動きは良しとしていません。 別のところで同じ質問をした際に「htmlファイルを置くディレクトリが『html』というのでダメなのでは？」 という回答をいただいたのですが、名前を変更しても改善されませんでした。 どのようにすれば別ディレクトリでのリンクが貼れるのでしょうか？ 特別なソフトは使用しておらず、Notepadで手打ち入力しています。 また下記のサイトで配布されているテンプレートを使っています。 http://pondt.com/tmp2-2/

  • HTMLファイルをダウンロードさせる方法

    こんにちは HTMLで <a href="./abc.html">だうんろーど</a> この場合は、ページ遷移となりますが、このabc.htmlをファイルとしてダウンロードさせる書き方はあるのでしょうか？ イメージとしては <a href="def.xls">えくせるふぁいる</a> これでエクセルファイルをダウンロードさせるような考え方です。 圧縮をしてダウンロードさせる方法以外でなにかあればお願いします。

  • HTMLのサイト検索について

    現在プライベートなネットワーク環境でホームページを作成しています。 、、、が、webサーバでなくファイルサーバにHTMLをおいての運用をしております。 プライベートなネットワークのため、ソフトを自由にインストールできません。 そんなネットワーク環境でHTMLのサイト検索をしたいと考えています。 以下のようなディレクト以下にサイトを構築しています。 \\サーバ名\HTML\ 上記のディレクトリ以下にあるHTMLファイルを検索する方法などご存じの方 アドバイスいただけないでしょうか。

  • CSSで言語アイコンを指定

    サイト右上に国旗画像を置き、それをクリックすると言語の切り替えができるようにするサイトを造ろうとしています。 HTMLで <ul><li><a href="#"><img src="img/gb.gif"></a></li><li><a href="#"><img src="img/fr.gif"></a></li></ul> と指定すると、HTMLファイルのディレクトリが変わると、画像の場所を指定しなければなりません。 これがわずらわしいので、CSSで画像を背景とし、文字列をスペースにすることで画像指定を一括できるようになりました。しかし、画像のサイズと、文字列のサイズをぴったりにできません。どうしたらよろしいでしょうか？

    • ベストアンサー
    • CSS
  • HTML一括変更

    自分はHTMLを作成しているものです。 今、作っているサイトの内容を一括変更したいのですが、いちいち一つずつのHTMLファイルのソースを書き換えるのは手間がかかるので、便利なフリーソフト、又はエクセルなどで出来るのなら、その方法を教えていただきたいです！！ 例えば、a1.html a2.html a3.html　のHTMLファイルのソースコードの、<a href="top-page.html"></a>という３つのファイルに見られる、共通部分の、top-pageをmailなどに一括で変更したいのです。ファイル数が膨大なので、是非教えていただくと助かります！！

  • HTML::Parserの挙動がよく分かりません

    CGIプログラミング第2版を読みながらCGIを学習しています。 11章 "ステートの保持"の11.1 クエリ文字列とパス情報の例題ではまっております。。。 これはURLに識別子を埋め込んでユーザーを追跡するという、超ハイテクなスクリプトです。 とりあえず、記載されているとおりにスクリプトを作成してHTMLファイルも用意しました。 HTMLファイルの内容は超簡単で <HTML><HEAD><TITLE>store</TITLE></HEAD><BODY><A href="abc.html">abc</A></BODY></HTML> です。 これでユーザーがhttp://ウェブサーバー/store/下のファイルをリクエストすると、自動的にスクリプトが実行され、カスタマイズされたHTMLファイルが返されるという仕様です。 実際に返されたHTMLファイルを見てみると <HTML><HEAD><TITLE>store</title></head><BODY> なんと<A>タグ以降がばっさり切り落とされていました^^ しかもタグは全部大文字で書いたのに一部小文字になっていたりと、意味不明な状況です。 たぶんHTML::Parserなるものが、いろいろHTMLファイルを操作しているとは思うのですが、今回返されたHTMLはどう見ても壊れているような・・・。

    • ベストアンサー
    • Perl
  • FFFTPを使ってHTMLを生成

    現在やりはじめたばかりです。アプリはFFFTP、サーバーはXfreeを利用してHTMLを生成したいのです。目的はホームページの作成ではなく、ファイルをHTMLにしたいのです。 現在のhtmlの構成は http://123.html.xdomain.jp/abc/index.html これはまだ完成していないものです。 プロトコル→サブドメイン→フォルダ→ファイルという順です ドメインに関してはお名前comなどからドメインを購入しなくていいのですか。 123はサブドメインというらしですが、このままでいいですか たとえば、1901のファイルのurlを生成したいとします。この場合、1901はフォルダーに所属していないので、無視できるでしょうか https://gyazo.com/6a6c1329034dd45c186efbdad77c01a3 下記のhtmlを作成 http://nozato.html.xdomain.jp/1901.jpg として下記に示したダイアログボックスのメニューからどういう操作手順で進めていけばいいでしょうか https://gyazo.com/6a6c1329034dd45c186efbdad77c01a3

  • HTMLのかなり基本的なことについて質問があります。。

    HTMLのかなり基本的なことについて質問があります。。 ＡのPCのディレクトリ（c:\test）配下にいくつかエクセルのファイルがあります。 別ウィンドウで[test]フォルダを表示させるようなhtmlが知りたいです。 ちょっと調べたのですが、以下ではうまくいきませんでした。 <A HREF="c:\test\" target="_blank">テスト用</A> 別ウィンドウで表示させるのはどうかと思いますが、 勉強のため、教えて頂きたいとおもいます。 ちなみに、ブラウザはIE8で表示させています。

  • Netscape7でtxtファイルに記述されているHTML文をiframeでHTMLとして表示するにはどうしたらよいのでしょうか？

    初心者です。わかる方がいらっしゃればぜひ教えてください。 現在、サイトを構築しているのですが、 別のサイトにおいてある***.txtというファイルを iframeで取り込んでいます。 ***.txtの中身は、HTMLのタグ（<li>や<a href="">など）が記述されています。もともと、そのtxtファイルは別サイトでSSIで取り込まれているものなので、<HTML>タグや<BODY>タグなどはありません。 IEで私のサイトを閲覧すると、うまい具合にHTML文としてリンクなどが表示されるのですが、Netscape7やfirefox、Mozillaで閲覧をすると、HTMLのソースがそのまま表示されてしまいます。 試しにtxtファイルをダウンロードして、拡張子をhtmに変更し、iframeのsrc="XXX"の記述を、そのHTMLファイルのローカルパスにしてみたところ、Netscape7でもうまくHTMLとして認識されたようで、リンクなどが表示されました。 これはやはりブラウザの仕様なのでしょうか？iframeに何かの記述を追加すれば解決するのでしょうか？ 必ずしもiframeにこだわっているわけではありませんので、何か別の解決方法があればそれでも結構です。 IEでもNetscape7などのブラウザでも、うまくHTMLとして表示されれば手段は問いません。 ちなみに、別サイトのtxtの拡張子は変更できません。 ＃ その別サイトの管理者には、そのtxtファイルを取り込むことについて了解をいただいています。

    • ベストアンサー
    • HTML
  • HTML+PHP+JavaScript

    リンクからJavaScriptでＰＨＰに遷移させ、書き換えた内容を表示するというものをやりたいのですが。。 ＰＨＰではcase文で場合わけし、モードによってＨＴＭＬを表示させる機能はできています。 しかし、ＨＴＭＬのリンク<A href=""></A> で新しいウィンドウを開き、そのページにその処理を行いたいです。 現在ボタンなどでは下記のように遷移させています。 <!-- function send(action, mode){ document.forms[0].mode.value = mode; document.forms[0].action = action; document.forms[0].method = "post"; document.forms[0].submit(); return false; } //--> <INPUT TYPE="button" VALUE="編集する" onClick="javascript:send('{val PHP_PATH}{val EDIT_PATH}','baseinfo')"> これですと、指定したアクションのＰＨＰに遷移し、このモードにより処理をわけています。 しかし、リンクがクリックされたら、処理にいき、 さらにその処理をしたデータを新しいウィンドウに表示されるというのがどうもうまくいきません。 普通に ・<A HREF="" onclick="javascript:send('{val PHP_PATH}test.php','template')" TARGET="conf">テスト</A> とすると、元のウィンドウに、修正した内容が反映され、新しいウィンドウはブランクしてしまいます。 何か他によい方法はありませか？

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する