Antigravityで脱CMSした話
※本記事は広告を含みます
筆者はこのブログのほかに、
という2つのWebサイトを運営しています。
そして、このたびツールを公開しているWordPressサイトを、Antigravityを利用してイチから書き直しました。もちろんもともとの機能はそのままです！
今回は、ここに至るまでの経緯と、どういう手法で移行したかをお話できればと思います！
脱CMSしたわけ
自作ツールについては、もともとは一つ一つWordPressのプラグインとして実装し、ショートコードで記事ページに埋め込むという手法で公開していました。
初めの頃は慣れ親しんだWordPressで作ったものを公開できるは楽でいいなと思っていたのですが、新しいツールを作れば作るほど、WordPressである必要を感じなくなっていきました。それもそのはず、そもそもプラグインという形式以外、WordPressに依存しておらず、利点である通常のブログ記事公開も一切していませんでした。そう、もはやコンテンツマネージメントする必要がない状態だったのです！
はなからそのつもりで作り始めた部分はあるものの、よくよく考えるとツール公開するだけなのにわざわざWordPressに縛られる必要はなかったんですよね。
そして、WordPressはとても便利なCMSですが、セキュリティ面で攻撃対象になりやすかったり、多機能が影響してパフォーマンスが悪くなったりと、デメリットも存在するわけです。
今回のように、ツールを作って公開するだけだと、WordPressのメリットを享受できず、デメリットだけになってしまう。
それであれば、イチからコーディングして移行しよう！という運びとなりました、
もちろん、自前で書くのはダルい
そんなわけなんですが、もちろん全てを自前で動くように修整するのは、かなりの労力になります。WordPressに依存しているコードを差し替えるのはもちろん、もともとWordPressの投稿に紐づいて表示していた各ページを、個別ページとしてそれぞれ書き直さなければなりません。
ダルい、ダルすぎる！
ということで、GoogleのAIエディタ、AntigravityでWordPressプラグインを書き換えてみることにしました。
移行作業について
前提
まずは前提として、WordPressのプラグインがどういう技術スタックで作られていたを説明します。
まずはサーバー側の言語。ここはWordPressに準拠するため、PHPになります。続いてクライアントの言語ですが、こちらはJavaScript、CSSになります。なお、HTMLはPHPで組み立てています。
なので、これらのスタックをそのまま使い回すのが、移行しやすいです。
使ったもの
採用した技術スタックは以下の通りです。
- PHP
- JavaScript
- CSS
- GitLab
- スターレンタルサーバー
- Antigravity
プログラミング言語はWordPressと同じものをそのまま採用しました。 資材管理、デプロイはGitLabを利用し、デプロイ先のサーバーはスターレンタルサーバーにしています。スターレンタルサーバーは以前から無料プランで使っていたやつですね。
そしてメインはなんといってもAntigravityです！今回はこれにお願いして、プログラムの書き換えを行って貰います。
行ったこと
大きく分けると以下の2つです。これに限らず、AIを使ってコーティングする際はだいたいこの2つを繰り返し行っていくことになります。
- 指示出し
- デバッグ
まずはAntigravityに既存ツールのコードを解析してもらう必要があるので、WordPressのプラグインディレクトリをFTPで丸ごと引っ張ってきます。
準備はこれだけなので、あとは指示を出してあげればオッケーです。
まずは大枠を作ってもらうための指示を出します。
格納されているWordPressプラグインをもとに、WEBサイトを構築してください。言語は、PHP、JavaScript、CSSとします。各機能を作成した後、各機能へのリンクを纏めたトップページを作成し、アクセスできるようにしてください。
これで待っていれば、各WordPressプラグイン（今回は8つ）を順次指定した言語で書き直してくれます！すごい。
そこまで難しいコードではない（データベースを必要としないレベル）からか、書き換え自体はトータル1hかからないくらいで完了しました。メッチャ早い！
その後、各ツールのページをデバッグし、想定通りに動いていないところは修整依頼をかけます。コレを一個一個やっていったので、ここでもだいたい1hかかっています。今回は仕様が単純なツールばっかりなのでそこまで時間がかかりませんでしたが、複雑なものだとデバッグ時間が一気に伸びるはずです。
というわけで、コーティングとテストはトータル2hくらいの所要時間でした。
デプロイ
GitLabの設定疎通と、もともとあったWordPressの資材をきれいにするのでだいたい30minくらいでした。
ここに関してはそこまで時間はかかりませんでしたが、場合によってはここが1番時間がかかるポイントです。なんせサーバー側での作業になるので、デプロイでエラーになってもAntigravityが干渉できないんですよね。
難しいポイント
前述のとおり、プログラミングを書いて、ローカルで動かすところまではAntigravityで実施することができます。
ただ、AIエディターはあくまで自PCのローカルにしかアクセスしないのが基本なので、作ったものをWEB公開する場合は難易度がかなり上がります。ここがAIでコーティングする際に押さえておくべき1つ目のポイントです。
そして2つ目のポイントは、一発で動くものが出来る訳では無い、というところです。
勿論簡単なスクリプトであれば、そのまま正しく動くこともありますが、大体の場合は人間がテストして、バグがないかを確認する必要があります。ここがAIでコーティングする際にもっとも重要な点ですね。
手法としてはアジャイル的で、ひたすら「修整依頼（=要件定義、人がやる）→コーティング（AIがやる）→てすと（人がやる）」というサイクルを繰り返すことになります。
AIが専門的な部分であるプログラミングをやってくれるにしても、結局のところ、ある程度は開発に対する知見がなければ、AIでコーティングするのは難しいというのが筆者の私見です。
やってみた感想
AIを使えば楽に移行できるのでは？というところからスタートした脱CMSでしたが、個人的にはかなり満足できる結果となりました。また、今回使用したAntigravityも、期待以上のクオリティで、予想していたより遥かに早くデバッグ作業を終えることができました。
構文エラーでバグがでる、ということはほとんどなかったのが印象的でした。もちろんゼロではなかったにしろ、1年前のAIのレベルで比較すると雲泥の差だと思います。進歩が早すぎるのよ。
WordPress等のCMSでLPを作るくらいなら、AIでやったほうが早いし自由も利く、そんな時代が来ていると感じました。
最後に
新人のころにAIがあったらそんなに真面目にプログラミング勉強しなくてよかったのに、と思いつつも、今の知識があるのはAIがなかったからとも言える。。
時代に併せてアップデートしていかなきゃね、われわれエンジニアは。