YouTube連続再生をpushStateでパーマリンク化＆戻る対応した。

youtube JavaScript
  • 以前に作ったものは、検索文字列の取得、検索、動画再生をajax的に全てJavaScriptで行っていたので、当然パーマリンクはなく戻るボタンなどで前の検索履歴に戻ることが出来ません。
  • その対応としてlocation.hashを使った方法などもあるのですが、HTML5ではhistoryオブジェクトのpushStateなどを使ってその辺りをうまく処理することが出来るので今回はそちらを採用しました。
    • githubで採用されているズババババッっていう感じのカッコいいやつですね。
  • ChromeとSafariでは確認しましたがその他ブラウザでは動かないかもしれません。
  • 詳しくはWEB+DB PRESS vol.61のYappoさんの連載がわかりやすいので見てください。今回実装したのもほとんど真似させてもらいました。

履歴を保存

    $("#search").click(function(){
        $("#trac_" + index).css("color", "");
        var query = $("#query").attr("value");
        loadQuery(query);
        var obj = { "query" : query };
        history.pushState(obj, "", "?" + query);
    });
  • 検索ボタンを押したときの処理です。history.pushStateに検索文字列(query)を持ったオブジェクトを入れて、URLに「?検索文字列」を追加しています。
  • 「radiohead」で検索した場合
  • 第2引数にはtitleが指定出来るようなのですが、イマイチ使い方がわからなかったので空文字を指定しています。(要調査)

履歴を取得

window.addEventListener("popstate", function(e) {
    if ( e.state ) {
        loadQuery(e.state.query);
    }
});
  • ブラウザの戻る/進むボタンを押した場合はpopstateというイベントが発生するので、それを取得して保存したオブジェクトから検索文字列を取得して復元しています。

直接URL指定して検索出来るようにする

    var locationQuery = location.search;
    if ( locationQuery ) {
        locationQuery = locationQuery.replace(/^\?/,"");
        locationQuery = decodeURI(locationQuery);
        var obj = { "query" : locationQuery };
        history.replaceState(obj, "", "?" + locationQuery);
        loadQuery(locationQuery);
    }
  • 「location.search」から「http://koba04.com/youtube/index.html」の後に続く文字列を取得し、「?」を削除して検索文字列を取得して検索しています。
  • 「history.replaceState」では、クエリパラメータによる検索を現在の履歴として保存しています。


これだけで出来るので簡単ですね。

こんな感じになりました。

課題

  • 今は検索文字列だけを保存して、イベントが発生する度に再度動画の検索を行っているので、保存するオブジェクトに動画リストや再生状況のindex、APIのオフセットなどを取得してそこから復元する方が効率的かなとは思っています。
  • 取得する動画の精度向上。。
  • そろそろリファクタリングをしつつ、本来やりたいことに着手。。

参考