PHP 初心者が WordPress の プラグイン 作成 ! part42 ( ココナラの公開設定を調査 その12 ついに投稿成功!)

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part42 では引き続きココナラブログの公開設定に挑戦します。

前回は調査だけで時間を使ってしまいなんの収穫もありませんでした。

PHP 初心者が WordPress の プラグイン 作成 ! part41 ( ココナラの公開設定を調査 その11 収穫無し!)

調査する部分もほとんどなくなり途方に暮れていました(´・ω・`)

原点にもどる

いままではココナラブログがVue.jsとNuxt.jsで構成されていたのでこの技術に着目していました。
しかしスキルが不足していたため前に進むことが困難になっている状況でした。

ふと「JavaScriptで 選択 を疑似的に行えばよいのでは?」という考えが沸き上がりました(降ってきたというのでしょうか)。

そして調べるとありましたよ!

Pure JavaScript (vanilla.js) でセレクトボックスの change イベントをプログラムからトリガーする – Qiita

vanilla.jsという文字は気になりますがPure JavaScriptで「セレクトボックスの値を変更した」という信号を出すことができるようです。
この信号にはVue.jsと言えど抗うことはできないはず😏

実装

ということで以下のように実装をしました。
とてもシンプルです。

document.querySelector("div.c-blogPublishing_category select option[value=\"1\"").selected = true;
document.querySelector("div.c-blogPublishing_category select").dispatchEvent(new Event("change"));

セレクトボックスから1(コラム)を選択状態にします。
このままではVue.jsが(仮想DOM)が反応しないのでセレクトボックスに「値が変更された」という信号を発信させ、仮想DOMに反映させるという実装です。

確認

それでは「公開する」を押してみましょう。
「カテゴリを選択」の箇所を見てください。
今までならセレクトボックスのすぐ下に「カテゴリを選択を入力してください」と表示されていましたが
今回は表示されていません。

一度「編集をつづける」ボタンを押し、「下書き保存」を行います。
その後、「ブログの管理へ戻る」を押してみましょう。

ちゃんと「コラム」がカテゴリとして登録されていますよね。
大成功です😊

 

今までのまとめ

公開設定について、今までの実装をまとめると以下のような実装になりました。

// 公開設定をクリック
document.querySelector("button.button.c-blogPost_triggerPublish").click();
// カテゴリの選択(IT・テクノロジー)
document.querySelector("div.c-blogPublishing_category select option[value=\"9\"").selected = true;
document.querySelector("div.c-blogPublishing_category select").dispatchEvent(new Event("change"));
// ハッシュタグの指定
obj = document.querySelector("[data-v-46ae5ace]");
obj.__vue__.blogTagNames.push(" IT");
obj.__vue__.blogTagNames.push(" WordPress");

ハッシュタグの指定部分で各単語の前にスペースを設けています。
これはハッシュタグとして認識された際、「先頭の1文字目の文字が消失する」という問題を認識し対応したものです。

 

ついに公開!!!

それではこのまま「公開する」を押してみましょう!!!
楽しみですね!

実装は以下のようになります。
この実装を開発者ツールのコンソールで実行していきます。

// Vue.jsのモデル範囲(?)取得
obj = document.querySelector("[data-v-46ae5ace]");
// タイトルの設定
obj.__vue__.title = "ヘッドレスブラウザから書き込みを試みる手前の試み!"
// 本文の設定
obj.__vue__.body = "<div data-v-22617325=\"\" class=\"c-blogBody_text\">とりあえずコンソールからJavaScriptでブログ投稿</div><div data-v-22617325=\"\" class=\"c-blogBody_text\">までがんばってみました!</div>";
obj.__vue__.bodyText = "とりあえずコンソールからJavaScriptでブログ投稿/nまでがんばってみました!";
obj.__vue__.blogEmpty = false;

// 公開設定をクリック
document.querySelector("button.button.c-blogPost_triggerPublish").click();
// カテゴリの選択
document.querySelector("div.c-blogPublishing_category select option[value=\"9\"").selected = true;
document.querySelector("div.c-blogPublishing_category select").dispatchEvent(new Event("change"));
// ハッシュタグの指定
obj = document.querySelector("[data-v-46ae5ace]");
obj.__vue__.blogTagNames.push(" IT");
obj.__vue__.blogTagNames.push(" WordPress");

// 投稿するをクリック
document.querySelector("button[data-v-6c22d71e].button.is-primary").click();

確認

それでは実行してみましょう。
「投稿する」を押す直前までの状況です。
うまく設定できているようです。

では「投稿する」・・・えい!!

来ました!

ちゃんとタイトルや本文、カテゴリに、ハッシュタグも!

感無量です😭

 

まとめ

ココナラブログの公開設定の調査と投稿を行いました。

投稿するまでの調査が長すぎて心が折れそうになりましたが乗り越えることができました。
仮想DOMは手ごわいですね。値を変更するだけでも一苦労です。
今回躓いたのは

  • 本文
  • カテゴリを選択

の部分です。

本文はdivで構成されていて特殊なタグを入力する必要がありました。
さらに別のプロパティに改行を「\n」区切って設定しなければならなかったりフラグを設定したりと大変でした。

カテゴリを選択は・・・もう・・。
物理DOMを設定し「値が変わったよ!」と信号を発信させることで解決しました。

次回はヘッドレスブラウザからこれらの処理を行わせてみます。

今日はここまで!