PHP 初心者が WordPress の プラグイン 作成 ！ part34 ( ココナラの公開設定を調査 その4)
この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part34 では引き続きココナラのブログの公開設定を調査します。
引き続き、今回もココナラブログの公開設定を調査します。
前回は偶然にも仮想DOMのタイトル入力に成功しました。
PHP 初心者が WordPress の プラグイン 作成 ！ part33 ( ココナラの公開設定を調査 その3)
発見した経緯
thisのdiv
公開設定ボタンを押したとき、以下のJavaScriptが動作していることはすでに特定していました。
https://d38quxh3lusp65.cloudfront.net/_nuxt/prod/4be7c9a.js L3809
あてもなくデバッグし、Vue.jsを調査し・・・と続けておりました。
ふとVue.jsでは$elが重要ということを思い出し、「this」のプロパティに「$el」があることが目にとまりました。
divと書いてありますね。
この「div」にマウスを合わせると左に表示されている部分に四角マークが！
Vueのモデル？
またピンとひらめきました。$el = 大事 = this = 仮想DOMのモデル！
というわけのわからない推測をしてさらに調査をしていました。
このデバッグ画面の「$el: div」の「div」をクリックすると「要素」のタブにジャンプし、該当部分がハイライトされます。
「これをqueqySelectorで抽出できれば道は開ける！」と謎の自身
抽出クエリは以下のようになりました。
obj = document.querySelector('div[data-v-46ae5ace]');ここからまたプロパティとのにらめっこが始まります。
※時間がかかったので割愛
そして、上記画像の「__vue__」というプロパティに遭遇したのです。
というか候補の1番上にあったのに無視してました(笑
ひらめきの連続
そういえば「タイトル」へのアクセスは「title」でアクセスしていたような・・・
と思い出し
以下の実装を思いつきました。
obj.__vue__.title = "ヘッドレスブラウザから書き込み！"するとなんと！以下のようにタイトルが入力されたではないですか！
ここで「公開設定」ボタンを押してみます。
「タイトルを入力してください」ではなく、「本文を入力してください」に変化しました😊
まとめ
経緯をまとめるだけで時間を消費してしまいました・・・。
結局 __vue__とはなんなのわかりませんが次回は「本文」の部分を入力してみたいと思います。
一歩前進！
今日はここまで！