「サンプル制作で覚える Craft 3 サイト構築の基本」はじめます

これは Craft CMS Advent Calendar 2018 2日目の記事です。
今年もこの季節がやってきましたね。

Craft 3 がリリースされて半年強。
主要どころのプラグインも出揃ってきているため、本格的に取り組むにはいい頃合いだと考えています。

そこで「Craft 3 インストール直後の状態から、公式デモサイト Happy Lager ができるまで」をテーマに、実際にサンプルを作りながらサイト制作の流れをご紹介していくことにしました。

「Craft CMS に興味はあるものの、何からはじめたら...」という方の参考になれば嬉しいです。

連載にあたって

実際の順番は前後するかもしれませんが、次のような流れでデモサイトのセクション（ニュース、会社案内など）ごとに作り込むことを想定しています。

  1. 管理画面の設定（フィールドの作成、セクションや入力タイプなどの設定）
  2. エントリデータのインポート
  3. 詳細ページのテンプレート作成
  4. 一覧ページのテンプレート作成

それぞれ設定項目や出力時のハンドル名などが異なるものの似たような作業の繰り返しになるため、コツさえ掴めば早い段階から思い通りに実装できるハズです。

ドキュメントについて

今年6月、公式ドキュメントの日本語版を公開しました。

Craft 3 ドキュメント：
https://docs.craftcms.com/v3/ja/

当ブログで Craft 2 向けに既に解説している内容（例：3種類あるセクションタイプについての説明など）は意図せず省略してしまう可能性があるため、公式ドキュメントにも目を通して理解を深めてください。

素材データについて

素材データが必要な場面では、専用のリポジトリから入手できるようにします。
テンプレートの差分が判りやすくなるよう細かくコミットする予定ですので、あわせて参考にしていただければと思います。

素材データ専用リポジトリ：
https://github.com/dreamseeker/craft3-sample-2018

また、CSS や JavaScript などのリソースファイルは、デモサイト Happy Lager のデータを流用しますので、下記より入手してください。

craftcms/demo: “Happy Lager” Craft CMS demo site.
https://github.com/craftcms/demo

事前準備について

Craft 3 のインストール

サーバー要件やインストールガイドを参考に、ローカル環境などに Craft 3 をインストールしてください。
Docker 環境に構築する場合は「ローカル環境を Docker で構築してみた」も参考になるかもしれません。

Craft 3 のインストールでつまづきやすいポイントは「ステップ 5：ウェブサーバーのセットアップ」です。
ブラウザからセットアップウィザード画面やフロントエンドのトップページを表示できない場合は、次の2点を確認してください。

  • ローカル環境のドキュメントルートを web/ ディレクトリにする
  • ローカル PC の hosts ファイルへ必要に応じてホスト名を加える

なお「Craft 3 のデモコンテンツをインストールしてみよう」を参考にデモサイトを別途用意しておくと、管理画面の設定に誤りがないかを比較できて便利です。

PRO ライセンスへのアップグレード

インストールできたら管理画面の「プラグインストア > Craft CMS をアップグレード」へ移動し、PRO ライセンスにアップグレードしてください。

「プラグインストア > Craft CMS をアップグレード」画面

サンプルサイトの構築だけに限れば SOLO ライセンスでも問題はありませんが、ホスト名が次のいずれかに該当する場合に PRO ライセンスを無料で試用できることをあらかじめ確認しておく意図があります。

  • localhost や craf3.dev など、明らかに開発環境だとわかるホスト名
  • test-craft3.example.jp のように、サブドメインに test など開発環境と認識される文字列が含まれる

コーディングデータの準備

公式デモサイトをブラウザで表示したときに出力されるソースコードをコーディングデータに見立て、テンプレート制作で利用します。

そこで「素材データ専用リポジトリ vol-1 ブランチの web/html ディレクトリ」と「公式デモサイトリポジトリの web/assets ディレクトリ」をローカル環境の web 直下に配置します。それぞれのリポジトリから Zip 形式でソースをダウンロードし対象ディレクトリを移動させる形で問題ありませんが、ドキュメントルートを web 以外にしている場合は移動先を適宜読み替えてください。

その後 http://craft3.dev/html/ のようにローカル環境のホスト名を利用してブラウザからアクセスすると、コーディングデータを表示できるハズです。

コーディングデータの表示サンプル

このように FTP クライアントなどで web ディレクトリ配下に直接ファイルをアップロードすることで、静的コンテンツを併用できます。

JetBrains 製品をご利用の方

あらかじめプラグインやスニペットを設定しておくと、テンプレート編集を効率化できます。

IntelliJ IDEA で Craft 3 の Twig テンプレート編集時に変数などを自動補完する：
https://bunlog.dreamseeker.dev/automatically-complement-craft3-variables-with-intellij-idea

Craft CMSのスニペットをPhpStormで使う - tamlog：
http://www.tamshow.com/entry/2016/12/22/035500

連載目次

連載に含まれる記事のリンクは、公開後にここへ追記していきます。

最後に

Advent Calendar に絡めて Craft CMS にまつわる話題を12月にまとめてポストするのが個人的な通例になりつつあるということで、空いている日付を中心にポストしていく予定です。

全体のボリューム感は見えていないものの、数日あればひと通り確認できる内容になると思いますので、興味を持たれた方は年末年始の空いた時間などに試してみてください。

また、Craft CMS Advent Calendar 2018 の参加者も募集中ですので、よろしければお気軽にどうぞ。

comments powered by Disqus