Local by Flywheel + Sage9でWordPressのテーマを開発する

ブログを更新するのは久しぶりです。1ヶ月以上空いてしまいました。

書きたい記事やネタはあるのですが、どうもブログを書く優先順位が低くてなかなか書き出せずにだらだらと過ごしていました。

「ブログを書く」の優先順位はYouTubeを観るよりも下です。しかし、今日は書きます！

表題の通り、Local by Flywheelでローカルにサーバーを立ち上げてスターターテーマであるSage9での開発環境を用意するまでを解説したいと思います。

今回紹介する環境には少し感動したので、細かいことにこだわらずに手軽にWordpressのローカル開発環境を準備したい方におすすめです。

自分の環境

• Macbook Pro 2016
• macOS Mojave
• Local by Flywheel 3.3.0
• VirtualBox 6.0.14
• Sage9.0.9

Mac以外は全て無料でいけます。

僕が使っているFTPクライアント「Yummy FTP Pro」が32bitで開発も終了しているので代替アプリの選定に悩んでいてOSはいまだにMojaveです。

早くCatalinaにアップデートしてMacでGoodnotesやSidecarを使いたいです。

FTPクライアントに関してはおそらくTransmitにすると思います。この辺りの理由や対抗アプリなどはまた記事を書こうと思っています。

Local by Flywheel

Local by Flywheelのダウンロードはこちらから公式サイト

頑張って解説しようと思いますが、わかりにくかったらこちらの記事を参考にしてください。

local by flywheelを使ってWordPressの環境を簡単に開発する方法

VirtualBoxも必要ですが、Local by Flywheelを立ち上げると自動的にインストールされるようです。

VirtualBoxがうまくアップデートできない場合

VirtualBoxがアップデートがうまくできない場合は、Vagrantなどで使用した仮想マシンが起動している可能性があるので電源オフしましょう。

1. 仮想マシンを右クリック
2. 閉じる
3. 電源オフ

VirtualBoxで仮想マシンの電源をオフしている/まだ起動していない場合はこの画面が出ます。ボタンをクリックして仮想マシンをスタートさせましょう。

起動までは少し時間かかる場合もあります。

左下の+ボタンから新しいローカルサイトを立ち上げます。

サイト名を消してありますが、複数立ち上げていくと左上のようにリストで表示されていきます。

開発したいサイトを選んで立ち上げたり止めたりできるのですごく気軽に管理できます。Sage9までは一切ターミナルを触らないで環境を立ち上げることができます。

+ボタンを押すとドメイン名を決める画面になります。

ここで注意があります！

Macでは.localのドメインでローカル開発すると更新や動作が重たくなるという現象が発生しますので「Local site domain」に表示される.localは適宜違うものに変更してください。

なんでもいいのですが.testとか.devなどが一般的かもしれません。

今回Blueprintは無視します。Blueprintはボイラープレート的なものだと理解しています。間違ってるもしれません。すみません。

「Local site path」ではWordpressのインストール先を指定します。

デフォルトのままだとhomeの直下にLocal sitesというフォルダができ、Wordpressがそこにインストールされます。開発用のディレクトリなどある場合は適宜変更してください。

次の画面もデフォルトのままいきます。

アップロードするサーバーが決まっている場合は、本番環境のサーバーの設定に合わせておいたほうがいいかもしれません。

ちなみに僕がよく使うXserverだとApacheだったりしますが、基本的にはデフォルトのままでも問題ないと思います。

CONTINUEボタンを押すと、管理画面へログインするための設定が出てきす。適宜設定してください。

マルチサイトの設定ができますが、こちらも今回は無視します。ちなみに後でも変更はできます。

ADD SITEボタンを押すとインストールが始まります。

これでローカル環境にWordpressの開発環境が完成です！黒い画面を使わずにできるなんて素晴らしいです。

Local by Flywheelの使い方については、さっきご紹介したサイトでも詳しく解説されているので詳しく知りたい方は調べてみてください。

先人たちの説明を超えることはできないと思いますので今回は割愛します。

Sage9をインストール

ここから先は黒い画面を使ってwordpressのスターターテーマ「Sage9」導入を解説していきたいと思います。

Sage9は、Roots社https://roots.io/が開発しているWordpress用のスターターテーマです。

最初から全部入りの空っぽのテーマです。

webpackとかgulpなどがもともと入っているので、最近流行りのモダンな開発環境がサクッと作れてしまう優れものです。

全部入りなので何か不具合が起きた時はそれなりに苦労しますが、webpackとかもうよくわかんないという方にはおすすめします。

Sage9を使った開発についてはこちらの方が詳しくご紹介してくださっています。

【2018.2月版】WordPress無料ブランクテーマ「Sage 9」の使い方・カスタマイズまとめ

Sage9を利用するにあたり以下のツールや知識が必要になります。

• SASS
• Composer
• Node.js
• Yarn
• Laravel Bladeテンプレートエンジン

なんだそれはって方はこれを機会に触りながら覚えましょう！大丈夫。。

早速黒い画面を立ち上げます。

$ cd

cd コマンドだけを打つとホームディレクトリに移動します。

$ cd /Users/ホーム/Local\ Sites/サイト名/app/public/wp-content/themes

先ほどLocal by FlywheelにてインストールしたWordpressのテーマフォルダまで移動します。

$ composer create-project roots/sage テーマ名

composerにてテーマをインストールします。

ここでエラーが出る場合は、brewのアップデートが必要な場合可能性があります。

$ brew update
$ brew upgrade

brewを更新してみてください。これでもエラーが出る場合はエラーメッセージをそのままコピペしてググってください。

先人たちの知恵を拝借できるのでだいたいは解決できます。古い情報より新し英語の情報の方が近道だったりします。

話をさっきのcomposerコマンドに戻します。create-projectを打つとsage9のインストールが始まります。

Theme Name [Sage Starter Theme]:
 > sample

 Theme URI [https://roots.io/sage/]:
 >

 Theme Description [Sage is a WordPress starter theme.]:
 >

 Theme Version [9.0.9]:
 >

 Theme Author [Roots]:
 >

 Theme Author URI [https://roots.io/]:
 >


 Local development URL of WP site [http://example.test]:
 > sample.test

 Path to theme directory (e.g., /wp-content/themes/sample) [/app/themes/sage]:
 >


 Which framework would you like to load? [Bootstrap]:
  [0] None
  [1] Bootstrap
  [2] Bulma
  [3] Foundation
  [4] Tachyons
  [5] Tailwind
 > 0

 Are you sure you want to overwrite the following files?
 - styles/common/_variables.scss
 - styles/components/_comments.scss
 - styles/components/_forms.scss
 - styles/components/_wp-classes.scss
 - styles/layouts/_header.scss

 (yes/no) [no]:
 > yes

 Done.

 Send anonymous usage data?
 We are only sending your framework selection and OS

 (yes/no) [no]:
 > yes

色々聞かれますがテーマ名とドメインだけ入れれば、だいたいはEnterで流しちゃっても大丈夫です。

BootstarpやFoundationフレームワークを使いたい場合は番号を選択してください。

ドメインはLocal by Flywheelで設定したURLを入力してください。後からconfig.jsonでも変えれますがここはきちんと入力しておきましょう。

sage9のブランクテーマはだいたい1分くらいでインストールが終わります。終わったらまたディレクトリを移動します。

$ cd samle //さっき決めたテーマ名

移動したらyarnします。

$ yarn

これでいろんな依存ツールを立ち上げてくれます。エラーが出た場合はその都度エラーメッセージをコピペしてググってください。

いずれこの行動にも慣れます。

yarnが終わればブラウザを立ち上げて開発スタートです。

$ yarn start

yarn startしたら勝手にブラウザが立ち上がります。

管理画面のログイン方法はID/admin | PASS/adminです。ログインできない場合はLocal by Flywheelで設定した方かもしれません。

いつもadmin/adminでやっちゃうので確認できませんでした。

sage9の中にBrowsersyncも入ってますので、開発中のブラウザリロードも不要です。

CSSやPHP、JSをガシガシやっちゃってください。

yarnを終わりたい時は、ターミナル画面で「control+c」で終了することができます。

テンプレートエンジンがLaravel Bladeなのでパスやファイル名など色々規則があります。この辺りもまた別の機会に記事にでいればなと思います。

よく使うものはおおよそ決まってるので、慣れないうちはしんどいかもしれませんが流行りのモダンな環境なのでイケてます。頑張ってください。

まとめ

今回の環境についてメリット・デメリットを簡単にまとめました。

個人的には、開発環境の構築に極力リソースを割きたくないのでメリットの方がかなり大きいです。

今まではVagrant+vccw+Sage9ばっかりで開発してました。

vccwの開発が2年前から止まってしまっているようなので、Local by Flywheelに乗り換えることになりました。

メリット

• モダンな開発環境がすぐに立ち上がる
• Local by FlywheelのDockerがとにかく軽くて早い
• SSLもメールの環境もすぐに用意できる
• 複数のサイトも用意できる
• 管理も簡単
• Vagrantが不要
• vccwより軽い

デメリット

• Laravel Bladeの知識がいる
• Sage9のコーディング規約が厳しい
• ちょっとした修正でもyarnしないといけない
• webpackの知識がないと謎のエラーで詰むことがある
• Sage9に依存してしまう

開発するサイトの規模やアプリケーションによっても変わってくると思いますがSage9はとにかく触ってみてほしいです。

オープンソースながら開発も順調にされており、1年半ほどで9.0.0→9.0.9まで進んでいます。

Sage9にてガイドブック(英文 ¥3,000くらいだった)も買いましたが、ネットで調べた方が早いです。

おわりに

最近は大企業のサイトやよっぽど予算がない案件以外では、Woredpress一択かなって思います。

デプロイの時には問題なくても後々問い合わせフォームが欲しくなったり、コンテンツを追加しなくても、Googleしごと検索など外部のコンテンツに対応したくなったりした時、Wordpressで作ってると楽だったりすることが多いです。

最近では当たり前ですが、SSLに対応しないといけなくなった場合でも.htaccessを触らずともプラグインを入れるだけで済みます。

ECサイトにおいてもそのうちwoocommerceが日本も席巻するではないかと思っています。

Sage9については学習コストが必要ですが、Wordpressのテーマ開発においてのローカル環境開発ではLocal by Flywheelが今後も主流なツールになると思います。