Craft CMS で質問と答えのサービスを作ってみる - STEP01：仕様確認とインストール | Craft CMS

こんにちは。この記事は「Craft CMS Advent Calendar 2021」の5日目の記事です。

日頃お客様や制作パートナーの会社さんから見積もりをお願いされたとき、その仕様に対しての疑問点を質問して潰していくことは良くありますよね。

既に案件として受注してからのやり取りであればバックログや Github など、プロジェクトを管理するサービス内でやれば良いのですが、まだ受注することが決まっていないとき、やり取りに困ったことはありませんか？

バックログでとりあえずプロジェクトを作ってやり取りするというのも可能ですが、その場合は回答してもらう方にアカウントを作ってもらったり、スペースに参加してもらったりする必要があります。また、先方がバックログになれていなければ尚更少し抵抗がありますよね。

Dropbox Paper や Google Docs でも可能ですが、これまたアカウントの問題が発生します。

Google Forms であればアカウントが無くても回答してもらえますが、回答の中に画像を含めて説明することができませんよね。Web制作案件だとスクリーンショットを貼り付けつつ説明したいことは多々あります。

メールベースでも良いですが、まあ、、、ちょっと不便ですよね。

そこで、今日から数回にわたって、そういうのを解消できるようなサービスを Craft CMS をベースにして作ってみようと思います（昨日思い立ちました）。

仕様

今のところ考えている仕様は下記の通りです。

質問を作る側はアカウントの作成が必要（その方が追々便利なハズ）
質問はURLを知っている人だけが閲覧できる
URLを知っていてもパスワードを入れないと閲覧できない
回答者はアカウントの作成は不要
回答者は会社名、氏名を入力する
質問と回答には画像を入れられる
シンプルなリッチテキストエディタで入力する
できればMarkdownでも書けると嬉しい
質問と回答はまとめて CSV と Markdown でエクスポートできる

とりあえず、こんな感じでいいですかね。あとあと @mersy の要望を取り入れていきましょう。

実装開始

では早速 Craft CMS をインストールします。今回も僕のお気に入りのレンタルサーバー「カラフルボックス」を使っていきます。

詳しいインストール方法は「カラフルボックスで始める - はじめての Craft CMS (3) 「Craft CMS のインストール」」にも書いてあるので、今回の記事で分からないところがあればそちらも参考にしてください。

データベースを作成

カラフルボックスの cPanel であらかじめ下記の作業を終わらせておきましょう。

データベースを作成
データベースユーザーを作成
作成したデータベースユーザーに、作成したデータベースの全権限を付与

Craft CMS をインストール

まず、cPanel の中のターミナルを開き、composer -V コマンドで composer がインストールされていることを確認しましょう。もし、インストールされていない場合は「カラフルボックスに Composer 2.0 をインストールする方法」を参考にインストールしましょう。

続いて Craft CMS をインストールします。Craft CMS の本体はドキュメントルート外に作るべきなので、今回は、ホームディレクトリに craftcms というディレクトリを作り、その中のサブフォルダとしてインストールします。YOUR_CRAFT_PROJECT_NAME 部分はお好きなように変更してください。

cd
mkdir craftcms
cd craftcms/
composer create-project craftcms/craft YOUR_CRAFT_PROJECT_NAME

Craft CMS のインストールが完了すると「Are you ready to begin the setup?」と聞かれます。すでにデータベースを作ってあるので、 yes をタイプしましょう。下記の項目を聞かれますので、先ほど作ったデータベースの情報を入れて進んでいきます。

Which database driver are you using? [mysql,pgsql,?]: mysql
Database server name or IP address: [127.0.0.1]
Database port: [3306]
Database username: [root]
Database password:
Database name:
Database table prefix:

データベースの接続に成功すると「Install Craft now?」と聞かれますので、yes をタイプして管理者アカウントを作成し、サイトの情報を入力します。今回、サイト名はお互いが共通認識にあるという意味の英語の「On The Same Page」としてみました。Site language のところを ja-JP とすれば管理画面が日本語になります。

Username: [admin]
Email: 
Password:
Confirm:
Site name: On The Same Page
Site URL: @web/
Site language: [en-US] en-NZ
...
Generating project config files from the loaded project config ... done

ここまでの流れで、Craft CMS がドキュメントルート外に設置されたので、公開フォルダ（ web ディレクトリ）をドキュメントルート下に移動します。

分かりやすいようにドキュメントルート下に Craft CMS のプロジェクトディレクトリと同じ名前のディレクトリを作り、その中へ移動します。

cd
cd public_html/
mkdir YOUR_CRAFT_PROJECT_NAME
cd YOUR_CRAFT_PROJECT_NAME/
mv ~/craftcms/YOUR_CRAFT_PROJECT_NAME/web/ .

web ディレクトリの中の index.php を開きます。

cd ~/public_html/YOUR_CRAFT_PROJECT_NAME/web
vi index.php

そして下記の部分を変更します。

// 変更前
define('CRAFT_BASE_PATH', dirname(__DIR__));

// 変更後
define('CRAFT_BASE_PATH', dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME');

今記事をお読みになっている環境によっては変更後が2行に改行されているかもしれませんが、1行で書いてください。

この dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME' の部分が Craft CMS をインストールしたディレクトリと一致しなければなりませんが、ちょっとややこしいですよね。なので念のため index.php のあるディレクトリ（今そこにいるハズです）で下記のように PHP を CLI で実行して出力される値がちゃんと Craft CMS をインストールしたディレクトリと一致するか確認すると良いでしょう。

php -r "echo dirname(__DIR__, 3) . '/craftcms/YOUR_CRAFT_PROJECT_NAME';"

また、現在 Craft CMS の公開ディレクトリにいるはずで、そのフルパスを後のセキュリティ対策で利用するので、pwd コマンドで出力されるフルパスをメモしておきましょう。

pwd
/home/YOUR_USER_NAME/public_html/YOUR_CRAFT_PROJECT_NAME/web
# ↑このパスをコピーしておく

これでインストールは完了しましたので、cPanel で public_html/YOUR_CRAFT_PROJECT_NAME/web にドメインを割り当てましょう。

開発中は有料の Pro プランをお試しで使えるように foo-text.example.com となるようにしておくと良いです。

ドメインを割り当てたら foo-text.example.com にアクセスしてウェブカムページが表示されることを確認しましょう。

セキュリティ対策

「Craft CMS を安全に利用するために | BUN:Log」にもあるようにセキュリティ対策は大切ですので、設定していきましょう。

まずは、Craft CMS のプロジェクトディレクトリに移動します。

cd ~/craftcms/YOUR_PROJECT_NAME/

そして vi .env で .env ファイルに SITE_URL と SITE_PATH という環境変数を追加し、CP_TRIGGER の値を変更します。

SITE_URL：サイトのURL
SITE_PATH：サイトの公開ディレクトリのフルパス
CP_TRIGGER：Craft CMS の管理画面のパス（好きな文字列でOK）

なお、コマンドラインでの操作に抵抗がある人は、cPanel のファイルマネージャーを使って変更すると良いです。

# 変更
CP_TRIGGER=YOUR_ADMIN_TRIGGER_STRING

# 追記
SITE_URL="https://foo-text.example.com"
SITE_PATH="/home/YOUR_USER_NAME/public_html/YOUR_CRAFT_PROJECT_NAME/web"

この .env ファイルは重要な情報が載っているので読み取り専用にしておきましょう。

chmod 400 .env

続いて、 vi config/general.php で全般設定のファイルを開き、return の中に下記を追記します。

'aliases' => [
    '@web' => App::env('SITE_URL'),
    '@webroot' => App::env('SITE_PATH'),
],

先ほどの BUN さんの記事にあるとおり 'allowAdminChanges' => false, も追記したいところですが、開発中は便利なので、開発がだいぶ進んでから追加しても良いでしょう。

これでだいたい設定作業も完了です。ブラウザで onthesamepage-test.tinybeans.dev/YOUR_ADMIN_TRIGGER_STRING にアクセスして、管理画面にログインできることを確認しましょう。

お疲れ様でした。今日はここまです。See you tomorrow!

Craft CMS で質問と答えのサービスを作ってみる - STEP01：仕様確認とインストール

仕様

実装開始

データベースを作成

Craft CMS をインストール

セキュリティ対策

「Craft CMS」カテゴリの記事一覧