質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.83%

PJAXを有効にすると、コメントが勝手に、不規則に、ゴミ箱やスパムに入ってしまう

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 810

akino5

score 17

目的

PJAX有効時にコメントが正しく投稿されるようにしたいです。

前提

WordPressです。
次のプラグインを用い、掲示板とPJAXを実装しました。
これ以外の変更はなく、他は初期状態です。

●掲示板の実装:WordPressプラグイン「BBPress」を利用
・公式サイト(https://ja.wordpress.org/plugins/bbpress/
・参考サイト(https://ozonosho.net/1067/

●PJAXの実装:jQueryプラグイン「Barba.js」を利用
・公式サイト(http://barbajs.org/
・参考サイト(https://pandamemo.net/index.php/2018/07/31/post-210/

問題

「Barba.js」によってPJAXを機能させるためには、当該箇所をこのように囲み、文末のjQueryを書くことによって実装が済むのですが、

<div id="barba-wrapper">
<div class="barba-container">
<!-- PJAXさせたい箇所 -->
</div>
</div>

問題はこれを実装後に掲示板にコメントを投稿すると、掲示板のコメントの2割ほどが不規則に、コメントがゴミ箱やスパムに入ったり、さらに掲示板がゴミ箱やスパムに入ったりする。という内容です。

おそらく不規則ではないと思いますが、昨夜200回以上あれこれコメントを投稿しても規則性は発見できませんでした。

3回目のコメントがゴミ箱に入ったり、5回目で掲示板がスパムに入ったり、9回目で全てのコメントが一気にゴミ箱に入ったりと、まるでつかめません。

ちなみに掲示板がゴミ箱に入ると”復元”をクリックしても「辿ったリンクは期限が切れています。もう一度お試しください。」と表示され、”完全に削除”をするしかない状況になります。

質問

そこでお聞きしたいのですが、このようなケースで考えられる原因として一般的に挙がりやすいものはなんでしょうか?

(規則性が発見できればより明瞭な質問になったのですが、本当にかなり頑張って探して見つけられませんでしたので、やむをえず、ひとまず一般論でも頂戴できればと思いまして、心苦しいのですが質問させて頂きました…。)

当該のコード

最後に「Barba.js」によるPJAX実装コードを記載しておきます。

ご覧のように、コメント送信時は「Barba.js」が無効になる処理を書いているので関係ないはずだと思うのですが、しかし上のHTMLの記載の有無によって今回の問題が生じるために、何かが、関係しているようです。。??

▼barba-custom.js

(function($){

// 現在と同じページのリンクをクリックした場合、リロードをしない設定(オプション)
var links = document.querySelectorAll('a[href]');
var cbk = function(e) {
 if(e.currentTarget.href === window.location.href) {
   e.preventDefault();
   e.stopPropagation();
 }
};
for(var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', cbk);
}

/* 
* 遷移時に変更したい処理
* デフォルトではhead内のmetaタグは変わりません。(titleタグは変わります)
* また、barba-container内のjsは実行されないので個別に変更・実行したい処理をココに書きます。
*/
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, barbaContainer, newPageRawHTML) {

   if ( Barba.HistoryManager.history.length === 1 ) {  // ファーストビュー
      return; // この時に更新は必要ありません
   }

   // jquery-pjaxから借りた
   var $newPageHead = $( '<head />' ).html(
      $.parseHTML(
         newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ],
         document,
         true
      )
   );
   // 変更したいタグ
   var headTags = [
      "link[rel='canonical']",
      "link[rel='shortlink']",
      "link[rel='alternate']",
      "meta[name='description']",
      "meta[property^='og']",
      "meta[name^='twitter']",
      "meta[name='robots']"
   ].join( ',' );
   $('head').find(headTags).remove(); // タグを削除する
   $newPageHead.find(headTags).appendTo('head'); // タグを追加する

   // 外部ファイルを任意の場所に追加して実行する(オプション)
   // 外部ファイルにdocument.write()が書かれていると、それは無視されますので正常に表示されません。
   var script = document.createElement('script');
   script.src = 'http://example.com/hoge.js';
   document.body.appendChild(script);

   // インラインに書いたjsを実行する(オプション)
   var temp = document.createElement('div');
   temp.innerHTML = newPageRawHTML;
   var hoge = temp.querySelector('.hoge script');
   if(hoge != null){
      eval(hoge.innerHTML);
   }

}); // End Dispatcher

// アニメーションの設定(フェードアウト→フェードイン)(オプション)
var fadeTransition = Barba.BaseTransition.extend({
   start: function() {
      //startはトランジションが起動した直後の一番最初に呼び出される。

      //promise.allを使うと、配列で渡された処理が全て終わった後に.thenを実行。
      //この場合は.newContainerLOadingと.fadeOutが終わってから.thenが実行される。
      Promise
         .all([this.newContainerLoading, this.fadeOut()])
         .then(this.fadeIn.bind(this));
   }, // End start function

   fadeOut: function() {
      //古いページコンテンツに対して行う処理。
      //ここでは、animateを使って、fadeoutさせている。
      return $(this.oldContainer).animate({ opacity: 0 },{duration:'fast'}).promise();
   },

   fadeIn: function() {
      // topに移動(地味に重要)
      document.body.scrollTop = 0;

      //startに記述したallによって、fadeOutが終わったらこのfadeIn関数が呼び出されている。

      var _this = this;
      //ここでのnewContainerは、ajaxで読み込まれてきた新しい方の.barba-containerにあたる。
      var $el = $(this.newContainer);

      //opacity:0;になっていた古いbarba-containerをdisplay:none;に。
      //こちらおそらくfadeIn発動時古いbarba-containerの初期設定として。
      $(this.oldContainer).hide();
      //こちらも新しいbarba-containerの初期設定。
      //visiblityがあるのは、デフォルトではこれがhiddenになってるっぽいから。
      $el.css({
         visibility : 'visible',
         opacity : 0
      });

      $el.animate({opacity: 1}, 200, function() {
         //.done()をつけることで古いbarba-containerのDOMは削除され、transitionが終了する。
         _this.done();
      });
   }
}); // End BaseTransition

// returnに作ったトランジションを設定
Barba.Pjax.getTransition = function() {
   return fadeTransition;
};

// Barbaを無効にする
Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
Barba.Pjax.preventCheck = function(evt, element) {
    if (!Barba.Pjax.originalPreventCheck(evt, element)) {
        return false;
    }

    // 該当クラスをクリックしたときに無効
    var ignoreClasses = ['logoimg', 'addhere'];
    for (var i = 0; i < ignoreClasses.length; i++) {
        if (element.classList.contains(ignoreClasses[i])) {
            return false;
        }
    }

    //コメント送信したときに無効
    if ( element.tagName === 'FORM' ) {
            return false;
    }
    if ( evt.type === 'submit' ) {
            return false;
    }    

    return true;
};

// Barba実行
$().ready(function(){
   Barba.Pjax.start();
   Barba.Prefetch.init(); // prefetch機能(ホバーの時点で読み込み始める)を有効化
});

})(jQuery);

補足

もし「時間あるから見てあげる」という方がいらっしゃいましたら、実際のサイトとアイパスをお送り致します。初期状態に上の2つのプラグインという変更しかありませんが、よろしければお申し付け下さいませ。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

ほとんどのプラグインはPJAXを前提としない設計なので、どういった挙動になっているかを全て調べて、対応する書き方に書き換えてしまうなどしなければ使えない可能性があります。

ページ移動した先のJavaScriptをどう読み込むようになっているかは知りませんが、もし同じスクリプトを複数読み込んでしまえば処理が意図しない形で上書きされてしまうことになります。また、スクリプトを読み込む機構が無いのであれば、最初に表示したページにあるJavaScriptのみしか読み込まれないことになりますよね。

あと、ページ移動のために後から読み込んだHTMLの初期化処理がwindowのloadイベントに書かれている可能性もあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/21 02:43

    なるほど、そもそも設計がズレているかもしれませんね。あいまいな質問に寄り添ってお答え頂きましてありがとうございます。この部分はできる人にお願いすることにしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る