Pocketこんにちは。APIをご存知でしょうか。APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。Ajaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。※個人情報の観点からスクリーンショットがご用意できずすみません。メッセージページでは左側にメッセージのやり取り相手の写真が並びます。それらをクリックすることによってメインのやり取りが表示されていくことになります。そのとき、URLを注目してみると...https://www.facebook.com/messages/nagatasanであったり、https://www.facebook.com/messages/san.nagataという風に変わっているのが分かります。戻るボタンの挙動は、それらをちゃんと戻っていく動きです。なってるの?画面遷移を行う(index.htmlからpage.htmlにファイルを移動するなど)場合はブラウザのヒストリーとして残るのが標準です。戻るボタンはそのヒストリーを戻っていくわけです。画面遷移を行わない場合は、デフォルトでそのようなことをしてくれません。明示的に行う必要があるのです。実際の実装コードをみていきます。window.history.pushState(state,title,url);}javascriptでAPIを操作します。最初のifではpushStateに対応しているかどうかを確認します。(モダンブラウザでないと、対応していないものもあり、その場合は別途JSなどで実装する方法があります)window.history.pushState(state,title,url);というところでURLの変更やStateの保存をしていきます。ノンプログラマの方には馴染みがないかもしれませんが、push/popはそもそもスタックという考え方で、データ格納/データ取り出しの後入れ先出しという理解で問題ないかと思います。state:状態と関連付けされた情報を格納できますtitle:タイトルですurl:ブラウザのバーに表示されるURLです(実際に遷移するわけではないので、関係のない値をいれてもリダイレクト等はできません)という流れがpushStateの使い方になります。これだけでもURLが変動していき、戻るボタンをするとそれぞれその履歴に応じて戻っていくことができます。具体的な使い方さて、それではどういったときに活用できるかご紹介します。ここからはpopStateも使っていきます。タブメニューがあるページページ自体は遷移せず、タブメニューで情報整理をしているページってありますよね。そんなときはタブ移動のclickイベントなどと合わせてpushStateを行い、戻るボタンではpopStateを用いて挙動を書くことになります。};});という感じです。popStateで戻るボタンのイベントを取得し、もしpushStateしていたものがあれば該当するタブを開きます。画面遷移はしていないのに、タブの遷移を戻るボタンにひもづけることができますね。※jQueryでサンプル書いてますが、ピュアJSでも書くことができます。アンカーやハッシュタグ、パラメーターを使っているページこちらも考え方は同じですが、pushStateの第3引数:URLまで指定しています。};});#hogehogeの他に、?param=hogehogeなども可能ですね。ハッシュタグの場合、hashchangeというものを使うこともできます。まとめいかがでしたか?ページは遷移していないにも関わらずコンテンツが大きく変動するイベントの場合、ついつい利用者としては戻るボタンクリック(Macであればスワイプであったり)をしてしまいがちです。「あー、そこまで戻るつもりじゃなかったんだよ」という不満を生まないためにも、ユーザーに配慮した挙動を考えると、デキる実装なんじゃないでしょうか!ちなみに今日は本ブログを書きながら、弊社サービス「universions」にて画面遷移しないけどコンテンツが変わっていくページに、取り入れてみました。Nagata株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。技術集団オルターブース。仕事は気が楽だけど、それでも直接受ける案件が大事。【HTML】aタグの位置を考える。【HTML】aタグの位置を考える。18:09:43261もう迷わない、「@font-familyはこれでOK!」を色々考えてみた。Co.,Ltd.お問い合わせ。