Open7

実務でRadicleを使ってLaravel風WordPressテーマ開発をした感想

あんでぃーあんでぃー

この記事でやること

  • Acornを使って、Laravelのような方法でテーマを構築する
  • Trellisを使おうとしたが、面倒なのでRadicleテンプレートを買い、Landoで起動する
  • 契約上お見せできないが、既にプロダクションでの使用に成功しています

前提条件

  • WSL2 w/ Docker Desktop
  • テーマのデプロイ先としてはレンタルサーバーを使う(もちろんSSHでComposerとwp-cliが使える前提)

Rootsのエコシステムの一部にAcornというのがあり、Laravelのコアパッケージ群をなんとかしてWordPressで使おうという動機で開発されている。
https://roots.io/acorn/

v3.3.1現在、以下のパッケージが使える。

https://github.com/roots/acorn/tree/v3.3.1

Acorn v3.3.1時点でサポートされているパッケージ
Component Support Notes
illuminate/cache 🟢
illuminate/config 🟢
illuminate/console 🟢
illuminate/container 🟢
illuminate/contracts 🟢
illuminate/database 🟢
illuminate/events 🟢
illuminate/filesystem 🟢
illuminate/http 🟢
illuminate/log 🟢
illuminate/routing 🟡 Requires ACORN_ENABLE_EXPERIMENTAL_ROUTER env var
illuminate/support 🟢
illuminate/view 🟢

目玉は illuminate/routing だろう。v3時点では実験的サポートだが、routes/web.php がWordPressで使えるのはデカすぎる。

あんでぃーあんでぃー

https://roots.io/acorn/docs/installation/

This is a WordPress site, but the Roots docs are powered by Acorn & Laravel routes instead of from a WordPress post type or page. If you’re interested in the ability create WordPress virtual pages powered by Laravel routes in a routes/web.php file, you might like Radicle.

(意訳) このRootsドキュメントはWordPressサイトですが、WordPressの投稿タイプや固定ページのルートの代わりに、AcornによるLaravelのルートで動いています。WordPressの仮想ページをLaravelのroutes/web.phpで作成する機能に興味がおありなら、Radicleがおすすめです。

Acornのサイトはすでに routes/web.php を使ったルーティングが行われているらしい。なるほど「Radicle」を使えばいいのか。

Acornを含むRoots Stackが使えるテンプレート「Radicle」

https://roots.io/radicle/

RadicleはRoots Stackが最近推しているテンプレートである。有料だが、Bedrock、Sage、(任意でTrellis/Lando)を内包した開発環境を一発で立ち上げられるらしい。


Credit: Roots https://roots.io/radicle/

どうやらAcornを使うには、Radicleを購入するとスムーズにいきそうだ。

が、$80で1サイト というコストに見合うのか疑問が生じる。そもそも、同じRoots StackのTrellisで環境を作って、自分でAcornを入れれば済む話だ。


...で、Trellis環境を作ってみたものの、WSL2経由のVagrant起動は茨の道で、Dockerを利用するLandoの方が楽だという結論になった。

よってLandoに対応しているRadicleを購入する。

あんでぃーあんでぃー

まずLandoをインストールする

https://docs.lando.dev/getting-started/installation.html

Radicleを買う前に、必ずLandoが動くか確認すること。

https://alexanderallen.medium.com/installing-lando-in-wsl-2-f965c47a8f03

ドキュメントと実態に齟齬があり、WSL2ならもうLinuxにLandoを入れた方がよい(Windows版ではなく)

sudo dpkg -i --ignore-depends=docker-ce lando-x64-v<バージョン>.deb

WSL内にインストールする場合は、docker-ceを無視してインストールすればよい。

https://docs.lando.dev/getting-started/first-app.html#hello-world

ここに書いてあるHello worldが動くか確認する。

こういうコンテナが立ち上がったら成功。

Radicleを購入する

https://roots.io/radicle/

ここから購入する。

:sunglasses:

https://dashboard.roots.io/

ここからリポジトリにアクセスできる。

あんでぃーあんでぃー

Radicleの起動

https://roots.io/radicle/docs/installation/

Are you building new sites often? Create your own private repo with the Radicle codebase and modify it to fit your needs. Radicle should be treated as a boilerplate/starting point, and not a framework.

意訳)新しいサイトを頻繁に作る?Radicleのコードベースでプライベートリポジトリを作って、必要に応じていじってくださいな。Radicleはフレームワークとしてではなく、ボイラープレート/スタート地点として使うべきです

Radicleはフレームワークではなくボイラープレートなので、元にしてプライベートリポジトリを作って改造していくスタイルを採ればよさそう。

# 注意:購入者しかクローン出来ないよ
# 注意:明示的に許可されているからこういう作者付け替えムーブをしている
git clone git@github.com:roots/radicle.git 好きなフォルダ名 -b <最新タグ>
cd 好きなフォルダ名
rm -rf .git
git init

ちょっと怖いが、最新タグのクローン後、.gitを消して改めてgit initした。READMEには一応クローン時点のタグのURLを書いて、後からcompareして差分を適用できるようにした。(今後はLaravelのアプデみたいな作業が発生するだろう)

Landoに合わせる

https://roots.io/radicle/docs/local-development/#lando

ここを参考に変更して起動する。

ここはLando部分なので見せてよいだろう。出力が派手で楽しい。

起動できた。

あんでぃーあんでぃー

Laravelのように定義されたルートを使ってみる

https://radicle.lndo.site/welcome

Radicleの起動後、上記URLにアクセスすると、WordPressの投稿・固定ページと一切関係ない画面が表示される。


※この画面はRadicleのサイトで公開されているので、スクショしても問題ないと判断した

https://roots.io/radicle/docs/adding-routes/

コードはお見せできないが、 routes/web.php にLaravel同様のルート定義が書かれており、resources/views/welcome.blade.php を描画するようになっている。

このように、Acornを使ったLaravel風テーマ開発が簡単にできるのもRadicleの強みだ。

あんでぃーあんでぃー

使ってみた感想

プラス:ディレクトリ構成がLaravelとほぼ同じになった

これが一番大きいです。目当てのファイルがすぐ探せます。

面白いのは、Laravelでbootstrapだったディレクトリが、丁度bedrockなので、アルファベット順が揃うんです。偶然だと思いますが、Bedrockはこのために命名されたのか!?と思うくらい。

プラス:ブロック自作がやりやすくなった

ブロックのテンプレートが用意されており、自作ブロックが簡単に開発できます。

プラス:Bladeの機能が使える

テンプレートの分割を発展させたBladeコンポーネントが使えるので、 $attributes->merge によって柔軟な属性の上書きができるなど、非常にマークアップがしやすいです。

マイナス:コンポーネントベースの設計とWPのアーキテクチャの齟齬

@props(['post'])
<article>
  ...

こういう感じのコンポーネントに$postを渡そうとしても、うまく動きません。ただ単にバケツリレーする事はできるのですが、コンポーネントクラスでコンストラクタを書いた途端おかしくなってしまいます。 V4で改善されるかはまだ試していません。

結局View Composerでグローバル変数$postを参照する羽目になります。WordPressであることに変わりはないので、アーキテクチャとしてはfunctions.phpの延長戦上であり、コンポーネントに責任を分離する設計は難しいです。

Acorn V3→V4のアップグレードが急にきて面倒なことになった

今月の頭ごろに、Radicleのアップデートがあり、その中で根幹を成すAcornがV4にメジャーアップデートされました。

Acorn v4にするとAuto Amazon Linksがエラーを吐くようになって、結局アップグレードできてません