本記事は以下の記事を参考に、 2022年4月24日時点で私のパソコン（Windows10）へWordPressの独自ブロックを開発するための環境構を築した際の備忘録です。

参考：Windowsにブロックエディター（Gutenberg）開発環境を構築する方法

初めての設定で、右も左も分からない中作業を行い、各所トラブルが起き苦労しました（汗）。

ページ後半のカスタムブロックの環境作りで起こった不具合と解消例では、今回の環境構築で起こった不具合と解消できた方法を紹介していますので、うまくいかないと煙が出ている方には参考になるかもしれません。

ページ上部へ戻る▲

Localの入手とインストール、WordPressサイトの追加

Localをダウンロード

上のリンク、もしくは下の画像をクリックして、Localのトップページを開きます。

ページ内の「ダウンロード」ボタン、または「OR DOWNLOAD FOR FREE」をクリックします

OSを選択します。

次画面でいろいろな項目の入力を求められますが、メールアドレスのみ入力すればよいので、入力してダウンロードします。

Localをインストール

ダウンロードしたファイル（local-〇〇-OS.exe）をダブルクリックします。

パソコン内のすべてのユーザーが使えるようにするかどうかを選択して続行します。

インストール先を指定して続行します（インストール先は特に変更する必要はありません）。

環境によってすごく時間がかかるかもしれません

最初の実行時に以下のような画面（規約への同意）が表示されるのでチェックを入れて「I agree」をクリックします。

続いて下図のような、エラーが発生したら、Localの開発者へレポート送信するかどうかを聞かれるので、選択します。基本なし（No Thanks）でいいと思います。

下図のようにアカウントを作成するかを聞かれるので、×で閉じます。

WordPressのインストール

Localを起動した初期画面で「Create New Site」をクリックしてサイトを追加します。

「サイト名」を入力ししてContinueをクリックします（この段階では半角英数字のみ使えるようですが、後から変更可能です）。

環境設定の画面が出てくるので、レンタルサーバー上で稼働している自身のサイトに近い環境を選択します。

稼働サイトの環境は管理画面から「ツール」→「サイトヘルス」で確認します

WordPressの通常インストールと同じように「ユーザー名」「パスワード」「サイトのメールアドレス」を入力します（Advanced Optionsでマルチサイトも作れるようです）。

画面右下の「add site」をクリックすると、必要な環境がインストールされた後にWordPresがインストールされます。

この時アクセス許可などいろいろな画面が出てきますので許可してください

WordPressのインストールで失敗する場合は、後述する「LocalでWordPressのインストールに失敗するときは」を参照ください。

ページ上部へ戻る▲

Node.jsの入手とインストール、テストブロックの追加

Node.jsの入手とインストール

公式サイトから推奨版をダウンロードします。

ダウンロードしたファイルをダブルクリックしてインストールを進めます。

インストール自体は他のソフトウェアと似ているので問題ないと思います。

インストールが終わったら、コマンドプロンプト（cmd）を開いて、以下を入力します。

node -v

入力した行の下にバージョン情報が出てくればインストールは成功していますので次項へ進みます。

テスト用カスタムブロック（プラグイン）の追加

まずは、Localで作成したWordPressサイトのpluginsフォルダを探します。

パソコンのエクスプローラーを開き、以下の手順で開いたときのアドレスをコピーします。

1. 「PC」→「ウインドウズのインストールフォルダ（大抵はc:）」をクリック
2. 「ユーザー」を開く
3. 今作業しているユーザーのフォルダを開く
4. 「Local Sites」を開く
5. 追加したWordPressサイト名フォルダを開く
6. 「app」を開く
7. 「public」を開く
8. 「wp-content」を開く
9. 「plugins」を開く

例：C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\plugins

※バックスラッシュは「￥（半角）」です

cmd（コマンドプロンプト）を開き、以下のように入力して「Enter」を押します

cd "先ほどのアドレス"

画面上の表示が以下のようになります。

C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\plugins>

この状態で以下のコードを入力します。

npx create-guten-block demo-block

しばらく待っていると、処理が成功し、末尾に以下のコードが表示されます。

We suggest that you begin by typing:

cd demo-block
npm start

指示通り、画面に

cd demo-block

で以下のように

例：C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\plugins\demo-block>

参照先を変更した後、

npm start

を入力して、

watching for changes...

と表示されれば準備は完了です（これは常時この状態にしておく必要はありません）。

カスタムブロックの追加に失敗する場合は「Error: Command failed: npm install cgb-scripts –save –save-exact –silentが出てプラグインが追加できないときは」を参照ください。

あとは、Localからサイトを起動し、「demo-block」プラグインを有効化して問題が発生しないかの確認を行います。

有効化が問題なければ、実際に投稿編集画面を開いて、「一般ブロック」に「demo-block」というブロックが追加され、それを投稿に追加して問題がなければ完了です。

すんなりいけば、以上でWordPressのカスタムブロックを制作するための基本的な環境は整います。

ただ、環境ができただけで、作成はこれから．．．です（笑）。

私の場合、以下のようなトラブルが発生して余分な時間を費やしてしまったため結構苦労しました．．。

世にたくさんリリースされている独自ブロックの作り方はこの設定が終わっている前提なので、これからいろいろ調べてオリジナルブロックを作成していこうと思います。

ページ上部へ戻る▲

カスタムブロックの環境作りで起こった不具合と解消例

LocalでWordPressのインストールに失敗するときは

無事にLocalのインストールが終わっていざWordPressのインストール！というところで、サイトが構築できないエラーが発生しました。

エラーの冒頭に「Uh-oh! Unable to provision site.」（サイトの準備ができません）と書かれています。

以下が実際のエラー画像です。

これは検索するとよく出てくるhostsファイルの書き込みができないという類ではなく、サイトそのものが作れませんよというものです（hosts書き込みの問題は、ユーザーに管理者権限を与えればクリアできます）。

英語で書かれているエラー内容をよく見ていくと、処理に失敗しているのは、どうも必要なディレクトリ（フォルダ）の作成段階のようです。

エラーの原因となっていたのは、パソコン上に追加したローカルユーザーのユーザー名が日本語名（ひまあーと）となっていたことでした。

Localでは、日本語などのマルチバイト文字列は対応できないようです。

半角英数字のローカルユーザー（管理者権限）を追加してWordPressのインストールをしたところ、無事に追加することができました。

Microsoftアカウントに登録して追加したアカウントであれば、ユーザー名は半角英数字で表示名に日本語が使え、それが表示されるので問題は起こりません

参考：Local by flywheel(Local)でUh-oh! Unable to provision site.と表示され、WordPressのインストールに失敗する原因と対策

WordPressのインストールへ戻る>

「Error: Command failed: npm install cgb-scripts –save –save-exact –silent」が出てプラグインが追加できないときは

今回参考にさせていただいたページ

参考：Windowsにブロックエディター（Gutenberg）開発環境を構築する方法

に沿って作業を進めていくと、テスト用プラグインの追加コマンド処理後に以下のエラーが発生し、プラグインが作成されない事態が発生しました。

Error: Command failed: npm install cgb-scripts --save --save-exact --silent

このエラーはGitHubでもディスカッションされていて、なかなか根本的な解決案が提示されておらず、初心者の私としては途方にくれました。

いろいろと試した後、根本的に私が設定した段階で最新の推奨バージョン（16.14.2）の問題なのではと思い、ディスカッションの中に出てきたバージョン14.17.0を再インストールしたら見事解消しました。

単純に最新バージョンであればOKということでもなかったようです。

Node.js公式ページからアーカイブをたどっていけば14.17.0を探すこともできますが、一応こちらにリンクを張っておきます。

リンクを開くとアーカイブらしく？下図のような画面が表示されますので、Windowsであれば、赤枠の「node-v14.17.0-x64.msi」をクリックしてダウンロード＆インストールします。

「テスト用カスタムブロック（プラグイン）の追加」へ戻る>