サーバサイドを含むWordPressのフルスタックをWebAssembly化した「In-Browser WordPress」、WordPressのコア開発チームとGoogle Chromeの開発チームが紹介

2023年4月13日

PHPやSQLiteなどのサーバサイドを含むWordPressのバックエンドをWebAssembly化し、WordPressのフルスタックをWebブラウザ上で実行する「In-Browser WordPress」が、「WordPress Playground」で公開されています。

これは昨年（2022年）9月にWordPressのコア開発チームが開発中であることを明らかにし、今年1月頃にWordPress Playgroundで公開が始まった、サーバサイドを含むWordPressの試験的なフルスタック実装です。

参考：WordPressのコア開発チーム、WordPressをWebブラウザで実行する「Client-side WebAssembly WordPress」を開発中

「WordPress Playground」でアクセスすると、Webブラウザ上で「In-Browser WordPress」が実行されます。

見た目は完全に普通のWordPressですが、PHPとデータベースのSQLiteも含めてWebブラウザ上で実行されているため、外部への公開を気にすることなく自由にWordPressの変更やカスタマイズを試すことができ、画面をリロードすればすぐに初期状態に戻すことができます。

PHPのバージョンとWordPressのバージョンを任意に入れ替える設定も可能になっています。

また、Webブラウザ上で実行されているPHPランタイムはWordPress専用ではなく、あくまで通常のPHPランタイムをWebAssembly化しているため、PHPのアプリケーションを書けばそのまま実行できるとのことです。

このIn-Browser WordPressを紹介するブログ記事「Build in-browser WordPress experiences with WordPress Playground and WebAssembly」をWordPressのコア開発チームとGoogle Chromeの開発チームのメンバーが公開しています。

Build in-browser WordPress experiences with WordPress Playground and WebAssembly!https://t.co/8VORT4VstI

The full(!) WordPress powered by PHP running solely in the browser with WebAssembly. Learn how @adamzielin pulled this off!#WordPress #Wasm #WebAssembly #PHP
— Chrome Developers (@ChromiumDev) April 12, 2023

Webブラウザ上でフルスタックのWordPressが動作する仕組み

PHPランタイムをWebブラウザ上で実行可能にするWebAssembly化においては、単純にC言語で書かれたPHPランタイムをEmScriptenでWebAssembly化しただけではJavaScriptとの連携が容易ではないため、 TypeScriptで記述した「JavaScript PHP class」および、これとやり取りする「dedicated PHP API module」をC言語で記述し、追加してあるとのことです。

さらにWordPressのデフォルトで対応しているMySQLデータベースを、Webブラウザ上で実行可能なWebAssembly版SQLiteに変更するために、PHP側にはSQLiteドライバを追加し、WordPress側には「SQLite Database Integration」プラグインを追加。

これによりWordPressからMySQLに対するクエリをプラグインでSQLiteへのクエリに変換し、PHPのSQLドライバで接続したSQLiteデータベースにアクセスできるようにしています。

参考：SQLiteの正式なWebAssembly版「SQLite3 WASM/JS」が登場

WordPressを動かすうえで最も重要なサーバであるWebサーバについては、Service WorkerがWebサーバに対するすべてのリクエストをインターセプトし、ワーカースレッドでリクエストを処理、レスポンスを返していると説明されています。