目指せページ遷移で音楽が途切れないサイト。まずはpjax対応。
目指せ、ページ遷移で音楽が途切れないサイト!と思い立ち、手始めにpjaxに対応してみました。
表示が変な箇所があるかもしれませんので、その場合はご連絡いただけるとありがたいです。
どうぞよろしくお願いします。
pjaxとは?
pjaxは「PushState+Ajax」。
ページ遷移履歴を残したまま(PushState)非同期通信(Ajax)ができるという方法です。
これを使用することで、残したい部分はそのままに、変更したい部分だけを書き換えて、かつURLも書き換えることができます。
ですので、ヘッダやサイドバーに音楽プレイヤーを埋め込んでおけば、ページ遷移しても音楽が途切れないサイトが作れます。
実装時の参考サイト様はこちら。
WordPressにPjaxを実装してみる | かくれざとう
WordPressでPjaxの実装と、よくあるトラブルの解決方法
どうもありがとうございます!
実装時に詰まったあれこれ
対象外の指定
外部サイトを開くときにエラーが出たり、mp3やzipファイルのダウンロードができなかったりする現象が発生。
→
メールフォームがちゃんと動かない
メールフォームの送信ボタンを押すとundefinedなページに遷移される現象が発生。
→e.preventDefault()を呼ばなくてよいパターンのときに呼んでしまっていたのが原因の模様。呼ばれない場合単純にreturnするようにしました。
[javascript]
// Pjaxイベント設定
jQuery(document).on(‘click’, "a", function(e) {
var nextUrl = jQuery(this).attr(‘href’); //リンクのURLを変数に格納
if(nextUrl != null && nextUrl != ""){
// 外部リンク除外
if(nextUrl.indexOf("otowabi.com") < 0){
return;
}
// ファイルダウンロード除外
if(nextUrl.match(/mp3$/) || nextUrl.match(/ogg$/) || nextUrl.match(/zip$/)
|| nextUrl.match(/pdf$/) || nextUrl.indexOf("ddownload=") >= 0){
return;
}
e.preventDefault(); //デフォルトの動作を中止
}else{
return;
}
jQuery("#main").animate({opacity:0}, ‘fast’, function(){ //入れ替えたい部分をフェードアウトさせる
// 以下略
});
});
[/javascript]
とりあえずこんな感じで動いております…。差し当たりの課題は楽曲検索がpjaxになってないところと、ソーシャルボタンの記事タイトルがちゃんと取れてないことです。
近々対応したいと思います!
-
前の記事
フリー和楽器KONTAKT音源「おとわび神楽鈴」v1.1公開 2015.01.24
-
次の記事
電化製品の断捨離というか大掃除 2015.02.16