example.com/#/example/

質問

あるサイトのurlがexample.com/#/example/のように#がurlの間に入っていましたが、あれはどういう仕組みでしょうか。

そのサイトの大まかな動きは下記となります。

(1) まず、example.comにアクセスすると、スプラッシュアニメーションの後ホームが表示されます。urlは変わりません。

(2)　ナビボタン（aタグは/example/としてしており、ブラウザのステータスバーにはリンク先がexample.com/example/と表示されている）を押すとexample.com/#/example/が表示されます。なおページ間の移動時もアニメーションがあり、ページのロードを感じさせないシームレスな遷移となっています。

(3)　example.com/#/example/を直接url入力すると、トップページのスプラッシュアニメーションが表示された後、アニメーションでexample.com/#/example/ページがシームレスに表示されます。(1)から(2)が自動になった感じ。

(4)example.com/example/と直接url入力すると、スプラッシュアニメーションは表示されず、example.com/example/ページが表示されます。ページ間移動時のアニメーションもありません。この状態でナビボタンを押しても、(2)のようなアニメーションがついたシームレスな移動はせず、毎回ページをロードしている感じです。

サイトの大まかな動きは以上となります。サイトのアニメーションはflashではなく、javascriptを使用していると思いますので、おそらくこれと関係あると思いますが、簡単な仕組みをご教授いただけますと幸甚です。

何卒よろしくお願い致します。

回答No.2

Gotthold · ベストアンサー

> ちなみにハッシュが#exampleではなく、#/example/になっているのは
> 元々のリンクが/example/になっているからだけでしょうか？
ハッシュの形式は作成者が自由に決められる（ハッシュを解釈するプログラムを作るのも作成者なら）ので
作成者に都合が良ければ本質的にはどんな形式でも良いでしょう。

ただ、普通のページ内リンクと混同しないように、
JavaScript向けだと区別できるようにしている場合はあるようです。

たとえばTwitterは
#!/aaa/bbb
の様に #の次に!が出現するようにしているようです。

お礼

再度お答えいただきましてありがとうございます。
勉強になりました。この度本当にありがとうございました。

回答No.1

Gotthold

#で区切られているのではなく、#以降がハッシュです。

example.com/#abc
だと #abc がハッシュになるのと同様に
example.com/#/example/
だと #/example/ がハッシュになります。

ハッシュはJavaScriptでlocation.hashで取得できるので、
ハッシュを読み取ってシームレスにページを書き換える処理をJavaScriptでやるだけです。
example.com/example/ へのリンクをクリックしたら
行き先を example.com/#/example/ に変更するのもJavaScriptでやっているのでしょう。

最初から example.com/#/example/ にしていなのは
JavaScriptを無効にしているブラウザでアクセスされたときも
(4)の様にページ移動はできるようにするためでしょう。

補足

早速ご回答いただきましてありがとうございます。
なるほど/も含めてハッシュなのですね。

>example.com/example/ へのリンクをクリックしたら
行き先を example.com/#/example/ に変更するのもJavaScriptでやっているのでしょう。

なるほど、どうやら上記はトップのみを制御しているので、(4)の様になるんですね！

>最初から example.com/#/example/ にしていなのは
JavaScriptを無効にしているブラウザでアクセスされたときも
(4)の様にページ移動はできるようにするためでしょう。

確かにそうですね！

ちなみにハッシュが#exampleではなく、#/example/になっているのは元々のリンクが/example/になっているからだけでしょうか？

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