PHP 初心者が WordPress の プラグイン 作成 ! part31 ( 通常のココナラの公開設定を調査)

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part31 では通常のブラウザでココナラの公開設定を調査します。

前回は「公開設定」のボタンをヘッドレスブラウザからクリックしたにも関わらず無反応で途方に暮れたところで終わってしまいました。

PHP 初心者が WordPress の プラグイン 作成 ! part30 ( ヘッドレスブラウザでココナラのブログを公開設定 その2)

あれからいくら考えても何が原因なのかよくわからず😓
ちょっと困っています。

視点を変えてみる

原因がよくわからないのは困ったことなのですがもっと困っている問題があります。
それは「ヘッドレスブラウザからJavaScriptを実行し、結果を出力するまで時間がかかること」です。
いままではなんとなくうまく進められていたので「まあいいか😄」と後回ししていたのですが今回この部分が大きな問題として露呈することになりました。

問題発見までに時間がかかっているという問題です。

デベロッパーツール

ココナラサイトで任意のJavaScriptを実行して手軽に試したい・・・。
そう思い探してみました。するとありました!しかもとても身近なところに(笑

Chrome デベロッパーツールの使い方まとめ – Qiita

この記事にはこのように記載されていました。教えていただきありがとうございます😊

Console
任意のJSの実行
JSエラーの確認

私は普段Edgeを使用しています。しかし最近のEdgeはchromiumというchromeの親みたいな存在のエンジンを使用しています。
今回使用しているヘッドレスブラウザもchromiumでしたね。
EdgeにもChromeのようなデベロッパーツールが存在します。

開発者ツールを開く

Edgeでは「開発者ツール」と呼んでいます。
私は要素を調べるときに幾度となくこの機能を利用してきました。
そして「Console」の存在もしていました。このConsole、私の認識では「JavaScriptでエラーが発生した際にエラー内容が表示される機能」だと思っていました。
まさか任意のJavaScriptを実行できるとは神機能!

開発者ツールの起動は簡単です。

  1. 任意のサイトを開く
  2. ブラウザの「・・・」をクリック
  3. 「その他のツール」をクリック
  4. 「開発者ツール」をクリック

これが億劫だと思う方は

  1. 任意のサイトを開く
  2. F12キーを押す

これだけです。
すると開発者ツールが起動します。

 

Console

ConsoleというのはEdgeでは「コンソール」タブにあたります。

矢印の部分ありますよね?ここになんとJavaScriptを入力して挙動を確認できるそうです。

本当に驚きました。
みんな知っていたんでしょうか(´・ω・`)

ココナラでコンソールを試す

早速ココナラのブログページでやってみました。
まずは移動しました。

今回はヘッドレスブラウザで成功した「タイトルに値を入力」のJavaScriptを実行したいと思います。

document.querySelector("div.c-title input[placeholder=\"ブログタイトル\"]").value = "ヘッドレスブラウザから書き込み!";

コンソールに上記コードを入力してエンターキーを押してみますね。

見事できました🤗

ちゃんと色分けもされているしなによりインテリセンス(コードアシスト)が効いている!
最初からこれを使って確認しながら進めばよかったですね。

 

コンソールを使って公開設定をクリック

調子に乗って問題のJavaScript(公開設定をクリック)も試します。

document.querySelector("button.button.blogPost_triggerPublish").click();

本当にクリックできていないのかそれともただクリック後に遅延してモーダルが表示されているのか。
結果は・・・。

クリックできていませんでした!

なんということでしょう。
「クリックというプロパティなんて知らないよ!」と言われてしまいました。

さらに「.click()」の部分を削除してエンターキーを押してみます。

null。つまりwuqrySelectorでの抽出に失敗しているということになるでしょう。

 

存在しているはずなのに抽出できないのはなぜなのか🤔

 

まとめ

通常のブラウザを使用してココナラのブログページを調査しました。
結局原因はわかりませんでしたが
「開発者ツール」という頼もしい機能を手に入れました。
これで原因の調査が加速することは間違いありません。
失敗してよかった、と開き直って今日は締めておきます。

今日はここまで!