あかつきのお宿

例えばTwitterなんかもそうですけど、リンクをクリックしたときに、リダイレクトはしないのにアドレスバーのURLが変わってる、みたいなサイトを時々見かけます。

あれは、基本的にはアンカーを利用しているんですね。URLの後ろに#をくっつけることで、URLは新しく読み込むページではなく、ページ内のアンカーへ移動するんだなって判断するからリダイレクトがされない。

あとはajaxとかで任意の内容を読み込んでやれば、リダイレクトしてないのにあたかもページが切り替わったかのように見えるって寸法です。

Twitterの場合だと、お気に入りのツイート一覧とかフォロワーの一覧ページなどに行くとこんな感じのURLになってますね。

https://twitter.com/#!/~~~

逆にいえばこのアンカーってやつがないと、この動きは実現できない。リダイレクトが発生してしまう。

でも、アンカーを使いたくない場合があるかもしれない。サイト内に実際に存在しているページのURLにリダイレクトなしで切り替えたい場合があるかもしれない。あるのかな？

あかつきのお宿を例にとると、小説の間とか音楽の間で、「あ行」とか「か行」を切り替える際は、リダイレクトが発生しません。ただjavascriptで表示内容を切り替えているだけ。

例えば小説の間のよんぎょうのページ。URLはこんな感じです。

http://norm-nois.com/novels/four/a　…あ行
http://norm-nois.com/novels/four/k　…か行
http://norm-nois.com/novels/four/s　…さ行
以下略

これはようするに、直接このURLを叩いた場合にも移動できるようにってことで個別にURLを用意しているわけなんですが、特に四行小説なんてたいして読むのに時間かからないやん？　んで、もし内容が気に入ってもらえた場合、他の行のも読んでみよって、思ってもらえるかもしれないやん？　そのときにいちいちリダイレクトするのもあれやん？　ふわっと切り替えたいやん？　やん？

だから処理としては最初に全部の行のデータを読み込んどいて、クリックされた行の小説を見せたり隠したりしているわけなんですけど、その場合、普通はURLは変化しない。ま、当然ですね。

でもまあ何となく、あ行からか行に移動したときは、URLもこっそり変えておきたいじゃないですか。実際、か行が表示されているときのURLってのが存在するわけですからね。でもアンカーがついてるわけじゃないので、twitterみたいな切り替えはできない。

何とかそれを可能にする方法はないかってことなんですけど……。


結論を言えば、HTML5ならそれが可能みたいです。しかもたった1行でおk。こんな感じのjavascriptでおk。

<script>
history.pushState("", "", "新しいURL");
</script>

前二つの引数は、今回は特に必要のないところなので、空の値を渡してます。どんなときに使うのかは、実はちゃんと調べてないのでよく分かんねっす。すまんす。ググレカスってください。



こうすると、アドレスバーの内容が新しいURLに変わります。アンカーがなくても大丈夫。

実際にあかつきのお宿でもやってるです。でもHTML5の技術なので、今のところはIE以外のブラウザで動くようにしてあります。

あまり使う場面はないかもしれないけど、何となく遷移してるっぽいぜーって動きを見せられるから、使ってみると面白いかも？