WordPress のローカル環境は Local が手軽でおすすめ

WordPress のユーザーコミュニティのイベントとして『WordCamp』がある。
通常はリアルのイベントで「開発者やユーザーが直接会ってコミュニケーションを取れる機会」として開催されているが、このコロナ禍でご多分に漏れず、昨年からはオンライン開催となっている。

ちなみに今年は「WordCamp Japan 2021」として 6/20〜26 の1週間の開催となる。参加登録はこちらからどうぞ！

また、イベント期間中に運営をお手伝いいただける「当日ボランティア」と、セッションの際の「『UDトーク』リアルタイム編集者」も絶賛募集中なので、ご興味を持たれたらこちらからお申し込みを！！

ところで、今回のこの「WordPress のローカル環境について」の話は、もともと僕が個人的にその WordCamp Japan 2021 での登壇のネタとして考えていたものだが、そちらでは選に漏れた（笑）ので、ならば WPZoomUP で話そうと考えて企画ごと持ち込んでみたらそのまま採用に（笑
せっかくなので、『それ使ってみたい！みんなのローカル環境座談会』という「みんなでわいわい話せる座談会」形式にしてもらった。
当日の流れはこんな感じ。

いつも手伝ってくれるスタッフのみんな、参加してくださった皆さまありがとうございました！！

さて、ちょっとだけ補足で説明すると、「ローカル環境」というのは『自分のパソコン上で擬似的にサーバーでの動きを再現したもの』で、自分のパソコンだけですべて完結している状態。いわゆる「レンタルサーバー」とかは、対義語として「リモート環境」ということになる。

WordPress を動かすためにはサーバーはもちろんデータベースなども必要になるが、それらを全部自分のパソコンの中に用意して、パソコン上だけで WordPress が動かせるように準備されたものが、ここでいう「ローカル環境」だ。

ということで、ちょうどこのイベントが1週間前の開催（注：記事公開の1週間前、5/13）だったので、ちょっと落ち着いたところでフォローアップがてらブログ記事としてまとめてみた。

Local で WordPress の「ローカル環境」を構築する

ローカル環境、そもそも必要？

例えば Twitter とかを眺めていると「ローカル環境いるの？」みたいな発言を見かけることがある。
もちろん、公開環境とまったく同じものをローカルに作るとなると二度手間であることは間違いないし、特にカスタマイズしていないのであればわざわざ同じものをローカルに用意するまでもない、というのもわからないではない。

ただ、それでも実際にはアップデートの際や運用中にトラブルがないとは限らないし、「表示が崩れても自分のブログだし、どうせ見られてないからまあいいや」といった考えだったとしても「転ばぬ先の杖」としてあって困るものでもないのではなかろうか…ということを思っていた。
また、単に表示が崩れている程度ならいいが、気づかないところでセキュリティの問題を発生させていたりすると思わぬ怪我をすることにもなりかねない（表示が崩れるのを避けるためにアップデートしてない、とかね…）。
今回たまたま機会をいただけたので、『座談会』の余興としてミニセッションをさせてもらった、というのが今回の流れとなる。

今回の主眼

スライド内でも解説しているが、いわゆるウェブ制作者（開発者）ならばだいたい既に自分の気に入った（なんなら自分専用にカスタマイズしまくった）ローカル環境は使っているだろうし、逆にローカル環境を使わずに WordPress のサイト開発をしている人を探すほうが難しいだろう。

今回の主眼は、単に「初心者」と限った話ではなくて、『いまローカル環境を使っていない』WordPress ユーザーすべての人が対象になる、と思っていた。

なので、今回のセッションでは「ローカル環境を用意したらこんなとこが便利！」を重点的に解説するようにした。
WordPress の開発のためのローカル環境も複数あってどれもいいと思うのだが、今回は「とにかく導入のハードルを下げる」ことを目的として、僕の解説は Local だけに絞って解説することにした。

ほんとに余談だけれど、以前「Local by flywheel」という名称だったものが「Local」になってググラビリティが下がったという意見があったが、ほんそれ（笑

それ使ってみたい！みんなのローカル環境座談会

ミニセッション

まずは当日のスライドを。

「ミニセッション」と銘打ってはいるものの、いわゆる「かしこまったセッション」はどうにもうまくできないので、いつものパターンで「LT（ライトニングトーク）スタイル」とさせてもらい、25分のLT（笑）を敢行した。
スライドは140枚近くあるが、それぞれのスライドにはひとことずつしか書いてないので流し読みしていただければ充分だ。

近日中に動画やイベントレポートも公開されると思うので…と思っていたら、早速イベントレポートが公開されてた！！ありがたい！！

それ使ってみたい！みんなのローカル環境座談会 – WP ZoomUP #64

自分がスタッフをやってるから言うわけではないが、こういう細かい心遣いが WPZoomUP のいいところ！

概要

スライドは流し見するだけでも長いので（笑）簡単に今回のセッションの概要を。

全体としては3部構成で

1. 何故ローカル環境が必要？
2. WordPress の各種ローカル環境
3. 「Local」のインストールから動かすまで

とした。

1. 何故ローカル環境が必要？

まずは「なんで必要なの？」から。
前述したように、ローカル環境で試せるメリットはとにかく手軽だ、ということ。ファイルのアップロードもいらないし、変更もすぐ確認できる。
たしかにあれこれカスタマイズするのでなければそれほどメリットは感じないかもしれないが、なんならローカル環境がそのままバックアップ代わりになるのもちょっとしたメリットかも。

2. WordPress の各種ローカル環境

今回は特に初心者・初学者向けを重視した内容にしたので、ここでは「Local」をお勧め。
「Local」は設定も細かくできるうえにデフォルトの設定でも充分問題なく利用できて、初心者から制作者まで誰にでもオススメできる。
もちろん、制作者（開発者）なら wp-env や docker のほうがいいという意見も当然あると思うが、それは先のお楽しみ（笑

3. 「Local」のインストールから動かすまで

ここは本当なら実際にデモを見せて「ほら、こんなに早くて簡単でしょ？」としたかったところだったのだが、どうも Zoom の画面共有と Local の相性があまりよくないらしく、Local が極端に重くなってしまうことが度々あったので残念ながら紙芝居形式で、となった。

とは言えこれではあまりにも伝わらない残念な感じ（笑）になってしまったので、改めて自分の Mac での操作画面を録画してみた。
それが以下。

これはマシンや回線の影響もあるし、インストール後最初の環境を立ち上げる状態なので PHP や MySQL のインストールもあって色々条件が異なる面もあるが、それにしてもこれくらいの手間と時間（余計なことをしてもダウンロードからサイト立ち上げまでたったの 3分半だ）でローカル環境が立ち上がるのはラクだとご理解いただけよう。

ちなみにこの動画は無音なので、うっかりボリュームを上げすぎないようにご注意を（笑
あと、スマホだと埋め込みのままではうまく動画が再生されないようなので、別ウィンドウで開いて閲覧していただくのが良さそう。右上のリンクアイコンをクリックすると Google ドライブのアプリが起動する（はず

座談会

僕のLTだけでは間が保たないので（笑）後半は座談会。
ちょっと仕込みとして Ippei さんに事前に wp-env やら docker やらの環境を用意してもらっていて、そのデモを交えつつわいわい話したので、これはぜひ動画の公開を心待ちにしてほしい。

ローカル環境というテーマの関係上、どうしても開発者向けの話題が多くなってしまったのが少し気にはなるが、初めてローカル環境に触れたかたにも「ほーこんな感じでこんなこともできるのか」は伝わったのではないかと思う。

実際のところ、自分自身の開発環境としては Local 「も」使っている、というのが正直なところ。
特にクライアントワークでサイトまるごと管理が必要な場合などには何も考えずに「ポチー」とするだけなので本当に手軽。随分以前から関わっていたサイトだと別の開発環境を使っていたり、プラグインを作るだけだったらそれこそ wp-env を使ってみたりもするが、このあたりは本当に人それぞれだと思う。

チームで開発をする場合は開発環境の共有ができると便利なので、簡単に環境のエクスポート・インポートができるところも美点のひとつ。
と言っても案件ごとにソースコードは Git 管理されていたりと環境そのものの条件もさまざまだが、制作の現場でも便利に活用できることは間違いない。

ちょっとした FAQ 的なもの

ちょっとその座談会の中で出てきた質疑の中から Local に関連するものをいくつか。

Q：Mac + Local ＋ Chromeで NET::ERR_CERT_INVALID が出てしまいます…

これは Local での SSL 設定での話で、NET::ERR_CERT_INVALID というのは「SSL証明書でエラーがありますよ」ということ。
これは気づかなかったのだが、Mac の OS が Big Sur だとこういう事が起きるらしい（僕、OS がまだ Catalina なので…）。当日のチャットでは公式の解説ページのリンクも共有されていたので参考までに。

Managing a Local site’s SSL certificate in macOS

同様にローカルでのメール送受信（Local には MailHog が同梱されている）でも同様のトラブルがあるようなので、OS が Big Sur の Mac をお使いの方はご注意を。とはいえ、一度設定してしまえばその後は問題なく使えるようだ。

Q：phpMyAdmin とかって使えるんでしょうか？

前述した MailHog 同様、Local には Adminer と Sequel Pro が同梱されている。

ただし、Sequel Pro は Mac 用のソフトウェアなので Mac でしか動かないのでは…？（すみません、Windows では未検証…）
それと、座談会の中でも話したが Sequel Pro は開発が既に終了しており、現在では後継の Sequel Ace が利用されるようになっているので、Local 内でも今後のアップデートなどの対応は期待できそうにない…。
Sequel Pro（や Sequel Ace ）ほど高機能ではないが、Adminer も充分利用できる（phpMyAdmin に慣れてたらこちらのほうが馴染みやすいかも）のでご安心を。

Q：資料の中で「サーバー環境でできることは「ほとんど」出来ます。」とありましたが Local 環境で出来ないことは（メール送信機能以外で）具体的に何がありますか？

例えば「ブログ」とか「よくあるコーポレートサイト」とかなら多分ほぼ問題なく再現できる。
できない例としては『（サイトを認証して）外部サービスと情報をやり取りして表示する』ようなサイト。これはドメイン認証やIPアドレスで認証されているようなケースが多く、自分のパソコンの中とは接続できないので再現できない。
他にありそうなのはウェブフォントをサービスと連携して表示するようなサイト、とか（この場合はフォントが反映できないくらいだけど）。

ただ、このあたりは Local の問題ではなく「ローカル環境」の宿命（笑）みたいなものなので、結局このときのみんなの総意としては「最終的にはサーバーでのテスト（ステージングサーバーを用意するとか）が必要よね」だった（笑

全部はとても拾い切れていないので、詳しくは動画をご覧あれ！

まとめ

座談会も（僕としては）大盛り上がりで、懇親会では しずみ さんがデモをしてくれるなどとても楽しい会になったと思っている。
これを機にローカル環境を使い始める人がいてくれると大変嬉しい。

余談だが、参加してくださった方の中に、4年ほど前に僕が DIST で Local を紹介したときから Local を使っている、という方がいらして大変嬉しかった。アウトプット大事。

そもそも今回のきっかけは Twitter とかでよく見かける「ローカル環境いるの？」だったわけだが、もうひとつよく見かける「アップデートしたら崩れた（表示できなくなった = だから WordPress は云々）」を回避するひとつの選択としてもローカル環境の利用があると思っている。
これは制作者よりも初心者・非開発者だからこそローカル環境を使ってほしい大きな理由のひとつで、事前に「何をどうしたからいまこうなっているのか」をきちんと自分で把握できる（すぐに戻せるし、もしかしたら自分で解決出来るかも）ことが大事だと思う。

もちろん WordPress のコア（本体）の不具合が絶対にないとは言えないが、ほとんどの場合はプラグインやテーマが原因だし、スライドでも書いたように「おかしくなったのは自分のパソコンの中だけだから焦らなくて大丈夫」なのは重要だろう。
「いまやったこと」をまず ctrl + z （Mac なら ⌘ + z ）で元に戻せばちゃんと表示されるはずなので、そこに原因があるとすぐ特定できるのは大事だ。

いくつかの補足

スライドと本編で触れるのを忘れていた（笑）が、ローカル環境では必ず wp-config.php に

define ( 'WP_DEBUG', true );

を書いておこう。書き方（書く場所）の解説はこちら。

細かいエラーがたくさん表示される（こともある）が、このエラーを消していくだけでもサイトの表示を早くできる可能性がある。
普段見えていないエラーが見えることで、プログラムが正しく動いていない原因が特定できるヒントが得られる。通常はエラー表示など見たくもないかもしれないが、ローカル環境だからこそ積極的にエラーを表示して修正や改善に役立てたいところだ。

あ、あと大事な情報が抜けていたが、Local は無料で利用できる。これも重要な情報だった（笑

それともうひとつ、せっかくならcodesniffer についても触れられればよかったのだが、ローカル環境とはいえ「エディター」の設定の範疇になるので、これはまたいずれ別の機会に…

では、『Let’s ローカル！！』

One More Thing …

今回に限らず、ここ最近の WPZoomUP のイベントのアイキャッチ画像は弊社デザイナーの Asuka さんが作ってくれている。この記事のアイキャッチ画像はイベントのアイキャッチ画像をそのまま持ってきたもの。

これ、よくみると凝って作ってあって、ちゃーんとデモで紹介したときの URL が入っていたりする。いつもありがとうございます、助かってます！

僕の普段のブログ記事だと、アイキャッチ画像はだいたいただのスクショなのよね…

最後に改めて、いつも手伝ってくれるスタッフのみんな、参加してくださった皆さまありがとうございました！！
またぜひ WPZoomUP にご参加ください。

WPZoomUP 、ほんとにいい勉強会なんですよ（笑