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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

548閲覧

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

akino5

総合スコア17

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2018/12/18 21:30

編集2018/12/18 21:42

###目的
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を書くことによって実装が済むのですが、

html

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

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

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

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

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

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

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

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

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

▼barba-custom.js

jquery

1(function($){ 2 3// 現在と同じページのリンクをクリックした場合、リロードをしない設定(オプション) 4var links = document.querySelectorAll('a[href]'); 5var cbk = function(e) { 6 if(e.currentTarget.href === window.location.href) { 7 e.preventDefault(); 8 e.stopPropagation(); 9 } 10}; 11for(var i = 0; i < links.length; i++) { 12 links[i].addEventListener('click', cbk); 13} 14 15/* 16* 遷移時に変更したい処理 17* デフォルトではhead内のmetaタグは変わりません。(titleタグは変わります) 18* また、barba-container内のjsは実行されないので個別に変更・実行したい処理をココに書きます。 19*/ 20Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, barbaContainer, newPageRawHTML) { 21 22 if ( Barba.HistoryManager.history.length === 1 ) { // ファーストビュー 23 return; // この時に更新は必要ありません 24 } 25 26 // jquery-pjaxから借りた 27 var $newPageHead = $( '<head />' ).html( 28 $.parseHTML( 29 newPageRawHTML.match( /<head[^>]*>([\s\S.]*)</head>/i )[ 0 ], 30 document, 31 true 32 ) 33 ); 34 // 変更したいタグ 35 var headTags = [ 36 "link[rel='canonical']", 37 "link[rel='shortlink']", 38 "link[rel='alternate']", 39 "meta[name='description']", 40 "meta[property^='og']", 41 "meta[name^='twitter']", 42 "meta[name='robots']" 43 ].join( ',' ); 44 $('head').find(headTags).remove(); // タグを削除する 45 $newPageHead.find(headTags).appendTo('head'); // タグを追加する 46 47 // 外部ファイルを任意の場所に追加して実行する(オプション) 48 // 外部ファイルにdocument.write()が書かれていると、それは無視されますので正常に表示されません。 49 var script = document.createElement('script'); 50 script.src = 'http://example.com/hoge.js'; 51 document.body.appendChild(script); 52 53 // インラインに書いたjsを実行する(オプション) 54 var temp = document.createElement('div'); 55 temp.innerHTML = newPageRawHTML; 56 var hoge = temp.querySelector('.hoge script'); 57 if(hoge != null){ 58 eval(hoge.innerHTML); 59 } 60 61}); // End Dispatcher 62 63// アニメーションの設定(フェードアウト→フェードイン)(オプション) 64var fadeTransition = Barba.BaseTransition.extend({ 65 start: function() { 66 //startはトランジションが起動した直後の一番最初に呼び出される。 67 68 //promise.allを使うと、配列で渡された処理が全て終わった後に.thenを実行。 69 //この場合は.newContainerLOadingと.fadeOutが終わってから.thenが実行される。 70 Promise 71 .all([this.newContainerLoading, this.fadeOut()]) 72 .then(this.fadeIn.bind(this)); 73 }, // End start function 74 75 fadeOut: function() { 76 //古いページコンテンツに対して行う処理。 77 //ここでは、animateを使って、fadeoutさせている。 78 return $(this.oldContainer).animate({ opacity: 0 },{duration:'fast'}).promise(); 79 }, 80 81 fadeIn: function() { 82 // topに移動(地味に重要) 83 document.body.scrollTop = 0; 84 85 //startに記述したallによって、fadeOutが終わったらこのfadeIn関数が呼び出されている。 86 87 var _this = this; 88 //ここでのnewContainerは、ajaxで読み込まれてきた新しい方の.barba-containerにあたる。 89 var $el = $(this.newContainer); 90 91 //opacity:0;になっていた古いbarba-containerをdisplay:none;に。 92 //こちらおそらくfadeIn発動時古いbarba-containerの初期設定として。 93 $(this.oldContainer).hide(); 94 //こちらも新しいbarba-containerの初期設定。 95 //visiblityがあるのは、デフォルトではこれがhiddenになってるっぽいから。 96 $el.css({ 97 visibility : 'visible', 98 opacity : 0 99 }); 100 101 $el.animate({opacity: 1}, 200, function() { 102 //.done()をつけることで古いbarba-containerのDOMは削除され、transitionが終了する。 103 _this.done(); 104 }); 105 } 106}); // End BaseTransition 107 108// returnに作ったトランジションを設定 109Barba.Pjax.getTransition = function() { 110 return fadeTransition; 111}; 112 113// Barbaを無効にする 114Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck; 115Barba.Pjax.preventCheck = function(evt, element) { 116 if (!Barba.Pjax.originalPreventCheck(evt, element)) { 117 return false; 118 } 119 120 // 該当クラスをクリックしたときに無効 121 var ignoreClasses = ['logoimg', 'addhere']; 122 for (var i = 0; i < ignoreClasses.length; i++) { 123 if (element.classList.contains(ignoreClasses[i])) { 124 return false; 125 } 126 } 127 128 //コメント送信したときに無効 129 if ( element.tagName === 'FORM' ) { 130 return false; 131 } 132 if ( evt.type === 'submit' ) { 133 return false; 134 } 135 136 return true; 137}; 138 139// Barba実行 140$().ready(function(){ 141 Barba.Pjax.start(); 142 Barba.Prefetch.init(); // prefetch機能(ホバーの時点で読み込み始める)を有効化 143}); 144 145})(jQuery); 146

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2018/12/20 17:15

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akino5

2018/12/20 17:43

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問