Local by Flywheel を使ってCraft CMSをローカル環境に構築する

##はじめに
この記事は [Craft CMS Advent Calendar 2017](https://adventar.org/calendars/2212) 10日目の記事です。
最近、他のCMSを味見しようと思い、個人的に気になっている[Craft CMS](https://craftcms.com/)を触り始めました。

![craft cms website img](https://qiita-image-store.s3.amazonaws.com/0/111743/90fa900e-f1c1-41e4-27ff-0a1efb1366ea.png)

とりあえず以下のサイトの情報を見ながらMAMPでローカル環境を構築。
[ローカル環境（MAMP）に Craft CMS をインストールする](https://bunlog.d-s-b.jp/how-to-install-craftcms-on-mamp)

##でもローカル環境の構築は面倒くさい
以前はWordPressのローカル構築もMAMPで行ってました。でもホント、デザイナーにとってはこれが面倒。さっさと済ませてテーマ作成に移りたいところ。特に複数プロジェクトとかの管理もドメイン分けの設定とか面倒なのでなんとかならないかなあと悶々してました。
そこに現れたのが、[Local by Flywheel](https://local.getflywheel.com/)。

![Local by Flywheel website img](https://qiita-image-store.s3.amazonaws.com/0/111743/fce727d8-0290-a429-b57d-a80d8931b38e.png)

これの存在を知ってからはもっぱらこちらで構築。デザイナーでとりあえずWordPressのローカル環境の構築はサクッと済ませたい人はこれ一択です。
何が便利って

- ダウンロードしてインストールしたらダウンロードなどの待ち時間に少し時間はかかりますが、**何回かのクリックと基本情報の入力でWordPressのインストールまでが完結**してしまう
- MAMPとかで複数のプロジェクトの管理をする際はマルチドメインの管理設定が必要ですが、Localの場合、Dockerを利用しており、**新規ボタンのクリック1つで隔離されたサイトを構築**できる
- ローカル環境の構築先もダイアログでフォルダを選ぶだけ
- 既存サイトの複製もクリックで簡単![171209-0003.png](https://qiita-image-store.s3.amazonaws.com/0/111743/70d8e9cc-4fcd-5f69-0050-5101df9eba19.png)

- **PHPやWebサーバー(Nginx/Apache)も簡単に変更可能**
- **クリック1つで（自己署名の）証明書が作成される（「Trust」ボタンをクリックで最近のChrome等のブラウザの警告が回避できる）**
- 必要ならばngrokを利用して**一時的にローカルのWordPressサイトを外部から確認ができる（スマホやブラウザなどのチェック、クライアント様への確認など）**

これらの作業が黒い画面をごにょごにょしなくてもわずかなクリックで出来てしまう。サーバー系の知識の疎いデザイナーにはほんとありがたい限りのアプリです。
ローカルで構築後、さくっとリモートにアップできたらもっとすごいんですけどねえw
（アプリ提供元のFlywheelというサーバー会社ならそのままアップできるっぽいですけど）

##Craft CMSなど他のCMSにも利用できないか？
Craft CMSをインストールしながら、他のCMSを使う場合も開発前の設定はできるだけ手間を省きたい。Local by Flywheelのこの機能を活用できないかとちょっと試行錯誤してみました。CGIを利用するMovable Typeとかは無理そうだけど、PHP + MySQLベースのCMSなら同様の手段で構築できそうなので試してみました。

##とりあえずLocal by Flywheelでローカルサイトを構築
1）まずLocal by Flywheelの初期画面左下の「+」クリックで新規サイトを作成
![画面左下の「Add Local Site」ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/111743/7b9aed6a-bd58-fdfd-4a57-0a949c5dd55f.png)

2）サイト名（サーバー選択画面のリスト用）を聞かれるので任意の名称を入力後、「Continue」ボタンをクリック
![真ん中の入力ボックスで設定画面で選択用の名称を入力後、「Continue」ボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/111743/7ac91f6f-faa3-ce52-0feb-fc6feccbd8eb.png)

上記で「ADVANCED OPTION」をクリックすると3つの設定ができます。a、bはサイト名を入力した時点で自動的に設定されますが、必要に応じて設定してください。
a. ローカルサイトのドメイン設定
b. ローカルサイトのディレクトリの任意指定
c. Blueprint（事前にひな形用に保存しておいたサイトを初期サイトとして使用するか）
![ADVANCED OPTIONでドメイン設定、ローカルサイトディレクトリの指定、使用する雛形の有無が設定できる](https://qiita-image-store.s3.amazonaws.com/0/111743/86f28a6a-0bfe-8e9a-b94f-b00688357943.png)

cのBlueprintはまだ使ったことがないのですが、テーマやデータベースなどの設定がそのまま新規サイトに反映されるんだとおもいます。WordPressだと問題なさそうですが、他のCMSだと無理かもしれませんね（今度試してみます）。

3）サーバー環境の設定。デフォルトでも多分問題はなさそうですので（MySQLのバージョン以外は後からでも変更可能です）、そのまま"Preferred"のまま「Continue」ボタンをクリック
![サーバー環境の設定画面](https://qiita-image-store.s3.amazonaws.com/0/111743/a0b682c7-4dac-c89b-6322-75dc92af9631.png)

もしリモートサーバーと環境を合わせたいならば、「Custom」ボタンクリックで変更可能
![「Custom」ボタンでPHPのバージョン、WebサーバーをnginxまたはApacheか、MySQLのバージョンを設定変更可能](https://qiita-image-store.s3.amazonaws.com/0/111743/397090ad-72d8-2599-9576-cd22e205c808.png)

4）WordPressの管理ユーザーの設定画面。Craft CMSでは使わないのでそのまま「ADD SITE」ボタンクリック
![](https://qiita-image-store.s3.amazonaws.com/0/111743/ff76e780-931b-0417-7761-b0724d39a99c.png)

5）これでサクッとサーバ設定が完了しました。

##Craft CMSをインストールする
Local by Flywheelでローカルサイトのベース設定ができたので、Craft CMSの導入に入ります。本体のダウンロード、解凍の手順は省きます。Local by Flywheelでは`設定したローカルディレクトリ/app/public`が公開ディレクトリーになりますので、そこを基準にCraft CMSを導入していきます。Craft CMSの導入の基本は、[ローカル環境（MAMP）に Craft CMS をインストールする](https://bunlog.d-s-b.jp/how-to-install-craftcms-on-mamp)を参考にしています。

1） `設定したローカルディレクトリ/app/` にある `public` フォルダを削除
![](https://qiita-image-store.s3.amazonaws.com/0/111743/6c099524-bb26-516e-b0f1-dc4b1996528b.png)

2） `設定したローカルディレクトリ/app/` にCraft CMSをダウンロード、解凍したフォルダの中のcraftとpublicフォルダをコピー
![](https://qiita-image-store.s3.amazonaws.com/0/111743/940787e6-b525-dc0f-751c-979270f9a25b.png)

3）データベースの編集を行います。 Local by Flywheelに戻り、サイト設定の「DATABASE」タブを選択後、Connectから「ADMINER」ボタンをクリック
![](https://qiita-image-store.s3.amazonaws.com/0/111743/557ab8ca-343d-1169-9a2f-4a7093ead944.png)

4）ブラウザでADMINERが開きます。ヘッダにあるパンくずナビで1階層上の「Server」をクリック
![](https://qiita-image-store.s3.amazonaws.com/0/111743/5e817c83-cb80-8027-a801-9f3ca7430cca.png)

5）タイトル下のメニューで「Create new database」をクリック
![](https://qiita-image-store.s3.amazonaws.com/0/111743/446859cf-2ad6-5485-d940-068f5c3408a6.png)

※DatabaseのうちlocalはWordPress用に作成されたものです。不要なので削除してもOK。

6）Create database画面で任意のデータベース名（ここでは `craftcms_db` ）を入力、プルダウンから「utf8_general_ci」を選択後、「Save」ボタンをクリック
![](https://qiita-image-store.s3.amazonaws.com/0/111743/5dccd228-c4fc-3db3-e0c0-dd0b66cb3bda.png)

7）作成できたら設定したデータベースのtable追加画面に遷移します。Craft CMSのデータベースが設定できました。
![](https://qiita-image-store.s3.amazonaws.com/0/111743/4cf058d4-36da-3d78-09e0-5281c72d76e9.png)

##Craft CMS のデータベースへの接続設定
1）`設定したローカルディレクトリ/app/craft/config/db.php` をエディタで開く
2）図のように、databaseを先程設定した名称に、passwordを `root` に、tablePrefixを任意の半角英数5文字以上で設定し、保存する
![](https://qiita-image-store.s3.amazonaws.com/0/111743/c9eaee35-c8fc-6990-b8c8-53d186900d4b.png)

##htaccessのリネーム
1）`設定したローカルディレクトリ/app/public/htaccess` を `.htaccess` にリネーム

以上で設定は終了です。 `http:設定したドメイン/admin/install` にアクセスして以下の画面が出たらOKです。引き続きインストールを進めてください。
![](https://qiita-image-store.s3.amazonaws.com/0/111743/d43bc3d1-5493-0228-32de-ac629eee1e4d.png)

後半は従来通りのマニュアルでの設定が必要ですが、前半のローカルサイトの構築がかなり楽になります。WordPressでなくても恩恵に預かれると思いますので是非お試しください。