Studio by WordPress.com が一瞬でローカル環境にWordPressを立ち上げられるとのことで利用してみた（使い方解説も）

無償でローカル「WordPress」環境を構築する最速の方法、「Studio」がWindowsに対応／わずか数クリック、開発の成果を最大5つまでデモサイトとして無償公開する機能も

　米Automatticは5月29日（現地時間）、Windows版「Studio by WordPress.com」を無償公開した。ブログシステム「WordPress」をローカル環境で簡単に構築できるオープンソースのツール（ライセンスは「GPL-2.0 license」）。先行したMac版が好評で、Windows版のリリースが期待されていた。

forest.watch.impress.co.jp

以前にこちらのニュースのタイトルを見て「とうとうあのSTUDIOをWordPressが一緒になったのか！早速試してみよう！そしてブログにしよう！」と思ってから、はや一ヶ月。ようやく重い腰を上げて試してみました。

全然あのSTUDIOじゃない

STUDIOといえばノーコードでWebサイトが作れるサービスで、その手軽さやメンテナンス性から、利用する企業や制作会社も増えてきました。

Studio | ノーコードWeb制作プラットフォーム

コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはStudioだけです。

studio.design

ノーコードなので、ざっくり言うとコードが触れないわけなんですが、そのあたりの痒いところに手が届くようになったのかとウキウキして触ってみたのですが、結論としては全然そのSTUDIOとは無関係でした。

爆速でWordPress環境をローカルに作れるソフト

じゃあどのようなものだったかと言いますと、一瞬でローカル環境にWordPressを立ち上げられるソフトでした。

MacでもWindowsでもいけます。

ちなみにこれまでWordPressをローカルに立ち上げるには主にどのような方法がとられてたかと言いますと、ざっと下記のような感じです。

1. 必要なソフトウェアをインストール

a. Webサーバー、PHP、およびMySQLをインストール

• XAMPP: Windows、macOS、Linuxに対応したオールインワンのパッケージ
• ダウンロードリンク: XAMPP
• MAMP: macOSおよびWindows用のオールインワンのパッケージ
• ダウンロードリンク: MAMP

2. XAMPPのインストールと設定

1. XAMPPをダウンロードしてインストールします。インストーラーの指示に従ってインストールを完了します。

2. XAMPP Control Panelを起動し、ApacheとMySQLを「Start」ボタンをクリックして起動します。

3. ブラウザを開き、http://localhostにアクセスして、XAMPPが正しくインストールされたことを確認します。

3. WordPressをダウンロード

1. WordPressの公式サイトから最新のWordPressをダウンロードします。

2. ダウンロードしたzipファイルを解凍し、その中身をXAMPPの htdocs フォルダにコピーします。

• 通常、C:\xampp\htdocs または C:\MAMP\htdocs に配置します。

4. データベースの作成

1. ブラウザで http://localhost/phpmyadmin にアクセスします。

2. phpMyAdminが表示されたら、「データベース」 タブをクリックし、新しいデータベースを作成します。データベース名を入力し、「作成」 ボタンをクリックします。例えば、wordpress_db と命名します。

5. WordPressの設定

1. ブラウザで http://localhost/wordpress にアクセスします。

• 上記のURLは、htdocs フォルダにWordPressを配置したフォルダ名によって異なる場合があります。

1. 言語を選択し、「続ける」ボタンをクリックします。

2. データベース接続の詳細を入力します。

• データベース名: 作成したデータベース名（例：wordpress_db）
• ユーザー名: root
• パスワード: 空欄（XAMPPのデフォルト設定）
• データベースホスト: localhost
• テーブル接頭辞: wp_

1. 必要な情報を入力したら、「送信」ボタンをクリックし、次の画面で「インストール実行」ボタンをクリックします。

2. サイト情報と管理者アカウント情報を入力し、WordPressのインストールを完了します。

そこまで難易度は高くないものの「爆速」ではないですよね。

使い方

爆速なので、爆速な雰囲気を伝えるために使い方をご紹介していきます。

まずは公式サイトにアクセスしてダウンロード、そしてインストール。

Studio by WordPress.com

Build Fast, Ship Faster with Studio Meet Studio by WordPress.com—a fast, free way to develop locally with WordPress. Share your local sites with clients or colleagues and keep your local developmen…

developer.wordpress.com

↓ダウンロード箇所

少し気をつけることといえば、Macの場合にご自身が利用しているPCのチップを適切に選択する必要があることくらいでしょうか。

インストール完了後、適当なサイト名とファイル保存パスを選択。

もう立ち上がってます。

爆速すぎて説明することが特にないです。

管理画面もこのように。

利用するメリット

爆速なことは当然として、他にもメリットがありそうだったのでご紹介していきます。

こちらが立ち上がった画面なんですけど、

• 「開始」「停止」でhttp://localhost/の有効化無効化が簡単にできる
• パーツの入れ込みなどが予め登録しておくことで簡単にできそう（な雰囲気）
• Visual Studio Code でPHPファイルの一覧を編集することができる
• WordPress.comと連携することで、ローカル環境のWordPressサイトをクライアントなどに共有できる

などのことができます。

↓パターンが登録できそうな雰囲気

↓Visual Studio Code 環境も一瞬で

共有は、WordPress.comのアカウントがないとできないみたいですけど、それでもテスト環境用のサーバーが不要なことなどを考えると、便利そうです。

あとがき

ちなみに構成上紹介しませんでしたが、他にも似たような方法として「wp-env」があります。

wp-envを利用してWordPressのローカル環境を構築する

wp-envを利用してWordPressのローカル環境を構築するvar displayMode = 'browser'; if (window.matchMedia('(display-mode: standalone)').matches) { display...

zenn.dev

すでに「wp-env」を活用している人はわざわざ乗り換えるほどでもないかもしれませんが、開発元がJetPackで有名なAutomatic社ということで今後機能が拡張されていく可能性を考えると楽しみですね。

公式のプレスリリース