エラーが出て使えなくなった「マーカーアニメーション」プラグインをAIを使って修復を試みたら直ったけれど地獄を見た話

お気に入りのマーカーアニメーションプラグインが使えなくなったのでAIで直してみた！

ワードプレスで使っていたプラグイン「マーカーアニメーション」がPHP7からPHP8に変えたらエラーコードが出て使えなくなりました。

マーカーアニメーションとは、ワードプレスにおいて文章に蛍光ペンで引いたような装飾ができ、しかも動かすことのできるプラグインです。（今見えているように線が動きます）

スタイルシートで同じような効果は得られるのですが、プラグインだと色も管理ができてとても気に入っているプラグインでした。

しかし、サーバーのPHPのバージョンを7から8にアップをすると、ワードプレス自体にエラーメッセージが出て使えなくなってしまいました。

しかも、致命的なのは、マーカーアニメーション自体を有効化するだけでサイト自体が表示されなくなることです。

すると、プラグインのOFFもできなくなるばかりか、管理画面にも入れなくなるような状態に陥ります。

また、配布元は2021年にリリースされたものが最新版で、すでに更新をやめてしまっているようで、解説ブログも繋がらない状態に。これは使用を諦めるしかないと思っていたのですが代替プラグインも見つからない状態に。

▼マーカーアニメーション自体はgithubで配布されています。

https://github.com/technote-space/marker-animation

PHP7からPHP8にするとエラーメッセージが出る

ワードプレスには、何か不具合があるときにエラーメッセージを返します。

PHP7のサーバーなら通常通り使えるのですが、PHP8にアップすると

と有効化できなくなったり、

こんな感じで重大なエラーになってしまうのです。

こうなってしまうともうFTPにつなげてプラグインフォルダを削除するしかありません。

ChatGPTの力を借りてプラグインをPHP8に対応するように修正してみた！

そこで、ChatGPTに表示されたエラーコードを読ませて修正を依頼してみました。

ここからのやり取りは後ほど説明しますが、とにかく依頼をすると

修正済みのデータをダウンロードできる形で丸っと渡してくれるのですね！

試しにperplexityでも同じ質問をしてみましたが、構文を出すだけで直接ダウンロードは提案されませんでした（依頼によるかも）

次にGutenberg ウィジェットにすると出ていたエラー文を元に修正する

次にウィジェット画面をGutenbergウィジェットにすると、「エディターで予期しないエラーが発生しました」と出るようになりました。

マーカーアニメーションを無効化すると通常通り表示が可能になるため、原因はマーカーアニメーションであると仮定しました。

エラー文をコピーとすると、複数行のエラー文が見れますが、そのうちマーカーアニメーションに関係しそうなところを修正していきます。※以下のエラー文のURLはhogehogeに変更しています

TypeError: Cannot read properties of null (reading 'getElementsByClassName')
    at https://hogehoge.com/wp-content/plugins/marker-animation/assets/js/gutenberg.min.js?ver=4.1.2:2:3996
    at https://hogehoge.com/wp-content/plugins/marker-animation/assets/js/gutenberg.min.js?ver=4.1.2:2:13233

どうやら、マーカーアニメーションのプラグインフォルダにあるGutenbergのJSデータに問題がある様子。

ただし、これに関しては修正を試みたものの、解決できませんでしたので、マーカーアニメーションを使うときはクラシックウィジェットで使う、ことにします。

結論：マーカーアニメーションが使えるようになった

細かいことは割愛しますが、PHP8からのコード仕様変更により「readonly」という構文をリネームすればよい、ということらしい。

変更するデータは「singleton.php」（フォルダ違い2種類）と「readonly.php」を書き換えること。

もし、これを読んでいるマーカーアニメーションが使えなくて困っている人がいたら、以下のデータを書き換えてみてください。既にインストールされていることが前提です。（プラグインを丸々再配布するのはよろしくないと思いますので、自己責任でお願いします）

①同じルートのsingleton.phpとreadonly.phpを書き換える

②もう一つのsingleton.phpとプラグインデータを書き換える

ルートが異なるので別のフォルダにしましたが、もう一つ「singleton.php」があります。そちらも書き換えます。また、手を加えたデータであることが分かるようにプラグインの説明画面用のデータも書き換えておきます。

これでエラーなく動かすことができると思います。

AIでプラグインを修正してもらうときの注意点

エラーコードを表示させる

まず、ワードプレスのプラグインなら、管理画面内にエラー内容を表示する「デバッグモード」にします。エラー内容が分かることで、そこから不具合の原因を探ることができます。

ワードプレスをインストールしたフォルダにFTPでつなげ、ルートフォルダ直下の「wp-config.php」を書き換えます。

define( 'WP_DEBUG', true );

とすることで、エラー内容が表示されるようになります。

AIにエラーコードを読ませて正しいコードを出してもらう

AIにエラーコードを読ませると原因をつかみやすいですが、同時にPHPやワードプレスのバージョンも知らせた方が良いでしょう。

方向性を間違うとAIも迷子になる

エラーコードから修正がうまい方向へ行けばいいのですが、方向性を間違うとAIも迷子になります。

特にPHPコードのように宣言から宣言閉じまでが長い場合、一部の修正が全体のコードの閉じ忘れや修正の繰り返しが起こる可能性があります。

また「エラーコードが出なくなるように修正して」というような指示だと「エラーはあるけれど、エラーコードを表示しなくする」といった致命的な修正を加えてしまう場合もあります。

「これで完璧です」「これが最終型です！」を繰り返す

実は今回の修正は、1度失敗し、最初からやり直した経緯があります。

まず、前提にわたくしはPHPについて全く知識がありません。
したがって全面的にAIに頼るしかないのですが、最初にChatGPTが修正を始めたのは別のファイルでした。

そこで、修正済みのPHPデータをダウンロードできるようにしてくれて、大変驚き「これ、プログラマーいらなくなるじゃん！」と思ったのですが、結局修正済みのデータをアップしてもまた別のエラーコードが出るを繰り返す、という具合に。

すると

・・・こんなことを約半日繰り返しました。数分毎に新しいデータが生成され、アップロードし続けるだけの時間・・

まるで、仕事ができない後輩を持ったような気分・・

しかも、宣言が膨大すぎて？サーバーが503（一時的なサーバー過負荷）になる始末。

途中、修正が繰り返し行われていて、コードを見たらこんなんなっていました。

なんですと・・？

しかも、繰り返し修正が入ることで、元々データは18KBあったのが、最終的に4KBになって・・全く最初からやり直しました。

私の半日を返せ・・状態です。

最初からやり直す勇気も必要

途中、修正ばかりを繰り返し、無駄な時間を過ごしているのでは？と不安になってきたのでやり直すことにしました。

AIを信じて突き進むよりも、一旦休止して、新たにやり直すことも必要だ、と感じました。

セカンドオピニオンならぬ、セカンドAIも必要かも

今回はChatGPTで進めました。一度他のAIも試してみましたが、英文が入るなどして使いにくく、解説としたはChatGPTが一番分かりやすかったです。

しかし、なかなか解決しなかったので、セカンドAIとしていくつかのAIで試すのも手だな、とも感じました。

なぜなら、一方向だけだと間違った方向へ行っていることに気が付かないからです。

今回の修正により、プラグイン自体は修正できましたが、他の不具合が出る可能性もゼロではありません。指示の出し方も含めて、改善の余地がある、というのが今回の感想です。