PHP 初心者が WordPress の プラグイン 作成 ! part54 ( コードを整理 10 )

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part54 では引き続き今までのコードを少し整理してみます。

前回はココナラヘルパでココナラブログのタイトルと本文を編集する機能を実装していて失敗したところで終了していました。
タイトルと本文はほんと鬼門ですね😥

PHP 初心者が WordPress の プラグイン 作成 ! part53 ( コードを整理 09 )

よく観察する

index.phpで実装したときはうまく動いていました。

$evaluation = $page->evaluate(
    '(() => {
        obj = document.querySelector("[data-v-46ae5ace]");
        obj.__vue__.title = "ヘッドレスブラウザから書き込み!"
        obj.__vue__.body = "<div data-v-22617325=\"\" class=\"c-blogBody_text\">ついに書き込むことに成功</div><div data-v-22617325=\"\" class=\"c-blogBody_text\">しました!</div>";
        obj.__vue__.bodyText = "ついに書き込むことに成功/nしました!";
        obj.__vue__.blogEmpty = false;
    })()');

 

ココナラヘルパに実装を引っ越しした際、本文の部分は変数にしました。

// 値の生成
$contentForBody = "";
$contentForBodyText = "";
foreach ($contentArray as $item) {
    // body用の値
    $contentForBody .= "<div data-v-22617325=\"\" class=\"c-blogBody_text\">{$item}</div>";

    // bodyText用の値
    $contentForBodyText .= "{$item}\n";
}
// ヘッドレスブラウザに渡すクエリの作成
$titleAndContentsQuery = 
'(() => {
    obj = document.querySelector("[data-v-46ae5ace]");
    obj.__vue__.title = '.$title.';
    obj.__vue__.body = '.$contentForBody.';
    obj.__vue__.bodyText = '.$contentForBodyText.';
    obj.__vue__.blogEmpty = false;
})()';

発見

何回もデバッグして生成されたヘッドレスブラウザ用のクエリを眺めると・・。
以下の問題を発見しました。

  • エスケープ文字の不備
  • 代入の値をダブルコーテーションで括り忘れ

以下の部分で\(バックスラッシュ)が不足している部分がありました。

$contentForBody .= "<div data-v-22617325=\"\" class=\"c-blogBody_text\">{$item}</div>";
$contentForBodyText .= "{$item}\n";

そして、文字列結合の際、以下の部分で右オペランドのダブルコーテーションを消してしまいました。

obj.__vue__.title = '.$title.';
obj.__vue__.body = '.$contentForBody.';
obj.__vue__.bodyText = '.$contentForBodyText.';

なんということでしょう😅

修正

以下のように修正します。

// 値の生成
$contentForBody = "";
$contentForBodyText = "";
foreach ($contentArray as $item) {
    // body用の値
    $contentForBody .= "<div data-v-22617325=\\\"\\\" class=\\\"c-blogBody_text\\\">{$item}</div>";

    // bodyText用の値
    $contentForBodyText .= "{$item}\\n";
}
 
// ヘッドレスブラウザに渡すクエリの作成
$titleAndContentsQuery = 
'(() => {
    obj = document.querySelector("[data-v-46ae5ace]");
    obj.__vue__.title = "'.$title.'";
    obj.__vue__.body = "'.$contentForBody.'";
    obj.__vue__.bodyText = "'.$contentForBodyText.'";
    obj.__vue__.blogEmpty = false;
})()';

確認

それでは確認してみましょう!

タイトルがうまく出力されましたね!
本文はもともと保存か公開するまで表示されない状況なのでたぶん大丈夫です(笑

まとめ

ココナラヘルパのココナラブログ編集画面の実装を行いました。

今回もなんとか問題を解決できました。よかった!
次回は公開のモーダル部分を実装したいと思います。
調子に乗って一気に投稿までいきたいですね😆

今日はここまで!