みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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を使用していると思いますので、おそらくこれと関係あると思いますが、簡単な仕組みをご教授いただけますと幸甚です。

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

投稿日時 - 2012-08-17 11:34:38

QNo.7648419

暇なときに回答ください

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

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

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

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

投稿日時 - 2012-08-18 16:59:25

お礼

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

投稿日時 - 2012-08-19 15:16:21

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

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

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

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

投稿日時 - 2012-08-17 18:34:20

補足

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

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

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

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

確かにそうですね!

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

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

投稿日時 - 2012-08-17 19:48:47

あなたにオススメの質問