Dockerを使って「なるはや」でブロックエディタ開発


以前はWindows上でUbuntu(Hyper-V仮想環境)を使って開発してました。
最近Dockerに少しだけ慣れてきて、その手軽さに感動しております。
今回はブロックエディタの開発と、成果物の確認を、とんでもなく手軽に試すメモです。

１．環境を汚さず最速でブロックエディタ開発。
２．出来上がったブロックエディタを`開発者以外`の人が「ブラウザ上(サーバー不要)」で動作確認。


## 環境

Windows + Docker + VSCode で試しています。



# コンテナの準備

今回は(Windows側のコマンド)

    docker run -it --name block-dev ubuntu:latest

適当にUbuntuイメージ(コンテナ名をblock-devにした)からコンテナ走らせて(以降はコンテナ側のコマンド)


    apt update

aptを更新


    apt install nodejs npm

nodejsとnpmをインストール(初めから入ってるイメージ使ったほうが楽ではある)。


## 初期化

とりあえず適当な場所に作業ディレクトリを作ります。


    mkdir -p /var/www/plugins

複数のプラグインを作成する場所、`/var/www/plugins`ディレクトリを作りました。


    cd /var/www/plugins

移動します。
以後ここにブロックエディタのプラグインを作成します。

その前に２つのパッケージをインストールします。

    npm install -g @wordpress/create-block

この作業は一度だけでいいです。
グローバルに`@wordpress/create-block`パッケージをインストールします。
簡単にブロックエディタを開発できる便利なパッケージです。


    npm install -g @wp-now/wp-now

この作業も一度だけでいいです。
wp-nowをグローバルにインストールします。
wp-nowを使うとWordPressにプラグインがインストールされた状態でサーバーを起動できます。



## ブロックの作成


    npx @wordpress/create-block@latest kurage


このコマンドを実行すると`/var/www/plugins`に`kurage`という名前のプラグインディレクトリが作成されます。


    cd kurage

kurageに移動。


    ls

一覧を見てみる。

```txt
drwxr-xr-x   5 root root   4096 Feb 16 20:36 .
drwxr-xr-x   3 root root   4096 Feb 16 20:34 ..
-rw-r--r--   1 root root    369 Feb 16 20:34 .editorconfig
-rw-r--r--   1 root root    431 Feb 16 20:34 .gitignore
drwxr-xr-x   3 root root   4096 Feb 16 20:36 build
-rw-r--r--   1 root root    930 Feb 16 20:34 kurage.php
drwxr-xr-x 936 root root  36864 Feb 16 20:36 node_modules
-rw-r--r--   1 root root 635529 Feb 16 20:36 package-lock.json
-rw-r--r--   1 root root    550 Feb 16 20:36 package.json
-rw-r--r--   1 root root   1811 Feb 16 20:34 readme.txt
drwxr-xr-x   3 root root   4096 Feb 16 20:34 src
```

`kurage.php`が一般のプラグインを作成するときのファイルで、
ここにブロックの登録がされてます。

`src`がソースコード置き場、`build`がトランスパイルされたコードなどが入るディレクトリです。


エディタ部分を書き換えてみます。

    apt install vim

viをインストール

    vi src/kurage/edit.js

以下のように書き換え。

```tsx
export default function Edit() {
        return (
                <p { ...useBlockProps() }>
                        { __( 'Kurage editor! DAAAAAAAAAAAAAAAAAA', 'kurage' ) }
                </p>
        );
}
```

何をやっているのかというと、
ブロックエディタのコードを少し書き換えただけですね。
書き換えたものが反映しているかを試すためです。



    npm run build

ビルドするとソースコード(./src)からブロックエディタのコード一式(./build)が生成されます。


    npx wp-now start

プラグインディレクトリで実行します。
プラグインがインストールされた状態でサーバーを起動します。
以下のメッセージが出ます。

```txt
root@43bb739a08f8:/var/www/plugins/kurage# ls
build  kurage.php  node_modules  package-lock.json  package.json  readme.txt  src
root@43bb739a08f8:/var/www/plugins/kurage# npx wp-now start
Starting the server......
directory: /var/www/plugins/kurage
mode: plugin
php: 8.0
wp: 6.7.2 (resolved from alias: latest)
Downloading WordPress 6.7.2...
Downloading SQLite...
Server running at http://localhost:8881
```

これで以下のURLでアクセス・・・

    http://localhost:8881


う・・・。

そのままブラウザからアクセスできない・・・。
コンテナ起動時にポートを指定・・・

    docker run -p 8881:80 ....

みたいにするの面倒なので、VSCodeに頼りました(ほかにやり方あったら教えてください)



VSCodeの「Dev Container」拡張機能を使ってDockerにアクセス。

VSCodeを新しく開き「Shift+Ctl+p」でコマンドパレットを開く。
「Dev Containers: Attach to Running Container」から「/block-dev」を選択(block-devは今回命名したコンテナ名)。


![xx-vscide.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/1297d321-5e3a-4452-88f2-f83b0b196ad2.png)

プロジェクトはコンテナ側のディレクトリ`/var/www/plugins/kurage`と連動してます。
ターミナルを開いて、`ポート`タブを開いてポートを追加(`8881`)をすると、Windows側のブラウザでこのアドレスでアクセスできる。

viを使わずともVSCodeから編集できるので最初っからこうしておけばよかったかも。


![xx-browser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/5e5154ae-8bae-418f-a27f-53e55c9f9bc7.png)

「My WordPress WebSite」からダッシュボードに向かう。

![xx-plugins.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/1a7aa503-5c4e-419e-9778-a5cabe6b69ef.png)

プラグイン一覧を見ると今回作成した「kurage」プラグインが有効になっている。


![xx-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/b964a6d9-3be5-4ac5-9fd3-83ec6b6fcea9.png)

新規投稿をしてみる。
ブロックを追加する際、「ku」を入力すると、補完で先ほど作成した「kurage」ブロックエディタが登場する。

![xx-edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/1d7dc9db-7154-4f96-9a7a-8976e6d09d5b.png)

ブロックエディタを追加すると「Kurage editor! DAAAAAAAAAAAAAAAAAA」が表示されている。


これでブロックエディタが完成しました。
いや、まだZIPにしてません。



## 作成したプラグインをDockerコンテナから取得


再びWindows側のコマンド。
新たにプロントを開き、今回編集したプラグインディレクトリをダウンロードする。


    docker cp block-dev:/var/www/plugins/kurage kurage

kurageディレクトリをダウンロードできますので、そのディレクトリを.zipで圧縮します。

「kurage.zip」を作成。




# ブラウザ上で動作を試す

無事プラグイン「kurage.zip」は作成できましたか？
このプラグインをブラウザ上で確認してみます。

テスト用のサーバーを用意しなくてもブラウザ上でWordPressを動せます。

WordPressってサーバー上で動いてるんじゃないの！？
って思うでしょ！？

ブラウザ上で「PHPとSQLite」を使って実現しているみたいです。
WebAssemblyを使ってるみたいです。


それが本家(Playgroundというやつ)にあります。

https://playground.wordpress.net/


ここにアクセスして今回作成したプラグイン(kurage.zip)の動作を確認します。




![xx-playground.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/098fd9d7-0863-4ee1-96dd-1f0eb4c62c19.png)


Playgroundにアクセス

![xx-install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/ea52bf5f-780f-49f2-9e52-e4f14096e322.png)

インストール画面にいって、「kurage.zip」をアップ。


![xx-installed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/a5700c11-73cd-49f9-999b-cc53457c8225.png)

インストール画面に「kurage」が確認できます。


![xx-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3956595/a79db584-97d8-4276-a574-eb8b274377f7.png)

新規投稿でブロックを追加したら思惑通り表示されてます。