web制作

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】
本ページにはプロモーションが含まれています。

Studio by WordPress.comは、WordPressのローカル開発環境を簡単に構築できる無料のオープンソースツールです。爆速で簡単に相手にサイトを共有できたり、PHPの切り替え先も豊富で使い勝手が良く、Localからの移行先候補としてもおすすめになっています。

そこで本記事では、Studio by WordPress.comの使い方はもちろん、Localやwp-envとの違い、最近のWordPressとLocalの開発元が抱える問題に触れながら、Studio by WordPress.comを使っておくべき理由を解説していきます。

しょーご

この記事を書いたのは
しょーご@samurabrass

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

Studio by WordPress.comとは?

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

Studio by WordPress.comは、WordPressの開発元であるAutomatticが提供する、ローカル開発環境を簡単に構築できる無料のツールです。

Studio by WordPress.comの主な特徴は以下の通り。

  • 迅速な環境構築:数クリックでWordPress環境を構築可能
  • 依存関係不要:PHP、Webサーバー、DBの個別インストール不要
  • デモサイト共有:最大5つのサイトを7日間無料で公開可能
  • 開発ツール連携VS Code、PhpStormなどと連携して開発可能

体感として、競合のLocalよりも高速な印象です。

Local(WP Engine製)のリスクについて

WP Engine社が開発するLocalは、長年WordPressのローカル開発環境として人気を集めてきました。しかし、最近のWordPress開発コミュニティとWP Engineの間に生じた軋轢により、今後に暗雲立ち込めています。

以前からGutenbergエディターの導入やFull Site Editingの推進に関して、WP Engineは懐疑的な姿勢を示していました。一方Studio by WordPress.comは、WordPress.comの公式開発元であるAutomatticが提供しているツールです。

そのため、WordPressの最新の開発方針や機能と完全に整合性がとれており、将来的な互換性も保証されています。またオープンソースであることから、コミュニティの貢献を受けやすく、継続的な改善が期待できます。

以上の理由から、現在のWordPress開発環境としては、Studio by WordPress.comがLocalよりも今後推奨されていく可能性は十分あるかと思っています。

しょーご

私のLocalはおすすめしてましたし、デイトラWeb制作コースのようなスクールでも推薦しているものなので、今も使っている人はとても多いと思います。。。

Studio by WordPress.comとLocal、wp-envとの違い

Studio by WordPress.com、Local、wp-envの主な特徴を比較した表が以下になります。

特徴Studio by WordPress.comLocalwp-env
開発元AutomatticWP EngineWordPress
価格無料無料無料
環境構築の速さ非常に高速高速相対的に遅め
共有機能あり(最大5つのデモサイト)あり(共有も可能)あり(開発環境の共有)
データベースSQLiteMySQLMySQL
OSの対応MacとWindowsMacとWindowsMacとWindows
カスタマイズ性
ユーザーインターフェース使いやすい直感的開発者向け
オープンソース

基本的にLocalやStudio by WordPress.comに適しているユーザーとしては、

  • WordPress初心者や、シンプルな環境を求める開発者
  • 迅速に環境を構築したい人
  • 個人で小規模なプロジェクトを行う人
  • デモサイトを簡単に共有したい人

こういった層で、Studio by WordPress.comが適している状況としては以下の通り。

  • 依存関係の管理を気にせずに開発したいとき
  • ハンズオンやトレーニング
  • サイトエディターで簡単な実験をしたいとき

wp-envが適しているユーザーとしては、

  • 上級WordPress開発者
  • コマンドラインに慣れている人
  • チーム開発を行う人

こういった層がいるでしょう。以下の状況では特にwp-envが適していると言えます。

  • 大規模なプロジェクトや複数人での開発
  • GitHubと連携した開発フロー
  • 環境設定を厳密にコントロールしたい場合
  • プラグインやテーマの開発で複数の環境が必要な場合

Studio by WordPress.comは簡単さと速さ、Localは使いやすさとカスタマイズ性、wp-envは高度な制御と柔軟性が特徴です。

Studio by WordPress.comの使い方

インストールを行う

まずはインストールして準備しましょう。現在はMacOSでもWindowsでも両方対応しています。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

アプリアイコンは以下になります。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

サイト名と保存先のローカルパスを選択して、「サイトを追加」をクリック。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】
Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

すると、30秒ほどでサイトがローカル環境上に公開されました!早い!!

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

この段階で指定ディレクトリ以下にファイル群が生成されているのが分かるかと思います。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

概要

設定部分できることは、基本的に管理画面上での「カスタマイズ」が中心になります。ブロックテーマ以外では使う機会はそこまで多くないかもしれません。

「Viaual Studio Code」をクリックすればVSCodeですぐに展開できますが、私はCursorエディターを使うので、これもあまり使いませんかね(^_^;)

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

シェア

デモサイトのシェア機能により、開発者はクライアントやチームメンバーと簡単に進捗を共有し、フィードバックを得ることができます。従来のNgrokのようなトンネリングツールを使用する必要がないため、とても便利です。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

まずは「WordPress.comにログイン」してください。アカウント開設は無料です。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

ログイン後、「デモサイトを追加」ボタンをクリック。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

すると、早速URLが発行されます。これだけ!!とても簡単ですね。デフォルトでSSL化されてました。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

共有リンクは7日間有効ですが、「デモサイトを更新」することで延長可能です。

インポート/エクスポート

Studio by WordPress.com

インポート/エクスポートでは、 Jetpackバックアップなどからサイトを読み込むことが可能です。基本的にここでインポート/エクスポートするより、サイトの管理画面からAll-in-One WP Migrationを使ったほうが楽かと思います。

この画面上で当該ファイルをインポートはできません。

Studio by WordPress.com

設定

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

一番見ることになるのが設定になるかと思います。

設定でできること
  • ローカルURL
  • ローカルパスの確認
  • PHPバージョンの変更
  • 管理画面URLとログイン情報

設定ではまずPHPのバージョン変更が可能です。

Studio by WordPress.comの使い方・設定方法【ローカル環境が爆速構築】

また、管理画面に入る情報も見ることができます。

Studio by WordPress.comはこれから進化する

Studio by WordPress.comは、Automatticが提供する無料のWordPressローカル開発環境ツールです。数クリックで環境構築が可能で、依存関係のインストールが不要です。

軽量で効率的な開発が可能で、デモサイト共有機能も備えています。オープンソースで、初心者から上級者まで幅広い開発者に適しており、WordPress開発の効率化に貢献しています。

現状ではまだまだ細かいカスタマイズが不可能ですが、オープンソースなためコミュニティの貢献によって継続的に改善されていく可能性があります。

今後Localを使い続けられるのかは不透明なため、ローカル環境の選択肢として検討しておくのがいいでしょう。しょーごログのWeb制作ロードマップを学習されている方もぜひ導入してみてください。

Web制作を独学していると、最新のWordPress情勢に触れるのは難しいと思いますが、どんな状況でも対応できるようにしておくといいですね。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

しょーごログ-コーディング課題のレビュー
レビューの様子

\課題の購入はこちらから/

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

});