ServBay環境でのStatamicのインストールと設定

Statamicは、Laravelフレームワークを基盤にしたモダンなコンテンツ管理システム（CMS）であり、その柔軟性と強力な機能によって、さまざまな種類のWebサイト構築に適しています。Statamicの大きな特徴として、デフォルトでファイルシステムによるコンテンツや設定の管理を採用しながらも、オプションでデータベースも利用可能です。

本記事では、高機能なローカルWeb開発環境ServBay上で、Composerを使ってStatamicをインストールおよび設定する具体手順を詳しくご紹介します。ServBayは、Statamicに必要なPHP環境・Composer対応・便利なサイト管理機能を備えており、快適な開発をサポートします。

Statamicインストール手順

ServBay環境でのStatamic導入は、シンプルかつ効率的です。以下の手順に従ってください。

ステップ1：プロジェクトディレクトリの作成

最初に、ServBayのWebサイトルートディレクトリ /Applications/ServBay/www 配下にStatamic用の新規サブディレクトリを作成します。ターミナルを開き、次のコマンドを実行してください：

bash

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

これでServBayのデフォルトWebルートに入り、servbay-statamic-app という新しいフォルダを作成し、その中へ移動します。

ステップ2：ComposerでStatamicプロジェクトを作成

ServBayにはComposer（PHP依存管理ツール）がプリインストールされています。追加手順なくComposerコマンドが使えます。

先ほど作成した servbay-statamic-app ディレクトリ内で、以下のComposerコマンドを実行してください：

bash

composer create-project statamic/statamic .

このコマンドは、Statamicの最新バージョンとその全依存パッケージを現在のディレクトリ（.）にインストールします。ダウンロードとインストールが完了するまで待ちましょう。

ステップ3：Webサーバーの設定（ServBayでサイト追加）

StatamicプロジェクトをServBayでホストするには、ServBayアプリで新規サイト設定を追加します。

ServBayアプリを起動：ServBayデスクトップアプリを開きます。
「サイト」タブに移動：画面上部の「サイト」タブをクリックします（旧バージョンでは「ホスト」と表示されている場合もあります）。
新しいサイトを追加：左下の「＋（プラス）」ボタンをクリックして、新規サイト設定を追加します。
サイト情報の入力：表示されたウィンドウに以下の情報を入力します。
- 名前：管理しやすい任意の名称（例: My Statamic Site）
- ドメイン：ローカル開発用のドメイン名（例: servbay-statamic.local など .local 推奨）。ServBayが自動的にローカルDNSを設定します。
- サイトタイプ：PHP を選択。
- PHPバージョン：Statamicプロジェクトに対応するバージョン（一般的に新しい安定版推奨）。
- サイトルートディレクトリ：重要な設定です。Statamicのエントリポイントindex.phpはプロジェクト内のpublicフォルダにあります。したがってサイトルートは /Applications/ServBay/www/servbay-statamic-app/public を指定してください。
保存と設定反映：入力し終えたら「保存」ボタンを押します。設定反映のためサービス再起動を求められる場合は、案内に従いWebサーバー（Caddy または Nginxがデフォルト）を再起動しましょう。

ステップ4：Statamic環境の設定

プロジェクトディレクトリ直下で、Statamicは.envファイルを使ってアプリキーやDB接続などの環境設定を管理します。

環境ファイルのコピー：Statamicプロジェクトには.env.exampleファイルが同梱されています。ターミナルでプロジェクトルート /Applications/ServBay/www/servbay-statamic-app にいることを確認し、次のコマンドでコピーしてください：
bash
```
cp .env.example .env
```
1
アプリキーの生成：Laravel/Statamicではセッションや暗号化などのセキュリティ目的のため、固有のアプリキーが必須です。Artisanコマンドで生成します。
bash
```
php artisan key:generate
```
1
実行すると、.env ファイルの APP_KEY 項目に自動で値が設定されます。

ステップ5：Statamicサイトの起動・アクセス

これでStatamicサイトのServBay構成が完了し、動作するはずです。

Statamicサイトにアクセス：ブラウザでステップ3で設定したドメイン、例：https://servbay-statamic.local にアクセスします。ServBayはローカルサイトのSSL証明書（ServBay User CA または Public CA経由）を自動発行するので、安全なHTTPSでアクセスできます。Statamicのウェルカムページが表示されるはずです。
コントロールパネルにアクセス：Statamicの管理画面は通常 /cp パスです。https://servbay-statamic.local/cp にアクセスしてください。ログイン画面または初期設定画面が表示されます。
管理者アカウントの作成：コントロールパネルへの初アクセス時は、管理者アカウントの作成が求められます。画面指示に従い、ユーザー名・パスワード・メールアドレスを入力して「アカウント作成」へ進みます。完了後、即座に管理画面へログインし、サイト管理が可能となります。

ステップ6：プラグイン＆テーマの追加（オプション）

Statamicには豊富なプラグインやテーマエコシステムがあり、機能拡張やデザイン編集が手軽です。

プラグインのインストール：管理画面へログイン後、通常はサイドバーなどからプラグイン管理へアクセスできます。またはComposerコマンドから追加することも可能です。管理画面経由の方が直感的です。
テーマのインストール：同様に管理画面から、または所定ディレクトリへファイル設置することでテーマ追加ができます。

Statamicでサイトを構築する

Statamicのインストール・初期設定ができたら、実際にそのパワフルな機能を使ってサイトを制作しましょう。以下は基本的な操作例です。

コンテンツとコレクションの作成

Statamicは“コレクション”という仕組みでコンテンツを整理します。これは従来CMSでの投稿タイプやページタイプに近い概念です。

コレクションの新規作成：
- 管理画面で「コンテンツ」→「コレクション」に進み、「コレクション作成」をクリックします。
- コレクション名（例：Posts、Pages）やルーティング、フィールドブループリントなどを定義します。
コンテンツアイテムの追加：
- 作成したコレクションの下で「新規作成」をクリックし、個別コンテンツ（例：ブログ記事・固定ページなど）を追加します。設定済みのフィールドブループリントを活用して内容を入力しましょう。

ナビゲーションメニューの設定

サイト内ナビゲーションの作成・管理も簡単です。

ナビゲーションの作成：
- 管理画面で「コンテンツ」→「ナビゲーション」に進み、「ナビゲーション作成」をクリックします。
- 例：Main Navigation など任意名称でナビゲーションを作成。
ナビゲーション項目の追加：
- 作成済みコレクションや独立ページから、ナビゲーション構造へ項目をドラッグ&ドロップで追加。階層も自由に編集できます。

テンプレートとスタイルのカスタマイズ

StatamicはLaravelベースなので、Bladeテンプレートエンジンを使ってレイアウトやコンテンツ表示を自在にコントロールできます。

テンプレート編集：サイトのビュー（表示用HTMLファイル）は通常、プロジェクトの resources/views 配下に保存されています。 Statamicのテンプレート構造（layouts、partials、collections などサブディレクトリ）に従って.blade.phpファイルを編集・追加し、ページ構造をカスタマイズしましょう。

html

<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    {{-- コンパイル済みCSSの読み込み --}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        {{-- 例： 'main_navigation' ナビゲーションを表示 --}}
        @inject('nav', 'Statamic\View\ViewServiceProvider')
        @if ($main_navigation = $nav->navigation('main_navigation'))
            <nav>
                <ul>
                    @foreach ($main_navigation->tree() as $item)
                        <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                    @endforeach
                </ul>
            </nav>
        @endif
    </header>
    <main>
        {{-- 現在のページ内容を表示 --}}
        @yield('content')
    </main>
    {{-- コンパイル済みJavaScriptの読み込み --}}
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

スタイル・スクリプトの追加： Statamicプロジェクトには一般的にLaravel MixやViteなどのフロントビルドツールが組み込まれています。元ファイルは resources/css および resources/js 内に配置されています。

例：resources/css/app.cssにオリジナルCSSを記述

css

/* resources/css/app.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}

例：resources/js/app.jsにJavaScriptを記述

javascript

// resources/js/app.js
console.log('Statamic frontend assets loaded!');

// 例：シンプルなインタラクション
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('nav li a');
    navItems.forEach(item => {
        item.addEventListener('mouseover', () => {
            console.log(`Hovering over: ${item.textContent}`);
        });
    });
});

フロントエンドアセットのビルド：変更をブラウザで反映させるには、これらCSS/JSファイルをビルドする必要があります。多くのStatamicプロジェクトにはpackage.jsonが含まれており、npmやyarnで依存をインストール→ビルドを実行します。ServBayではNode.js利用がサポートされているため、以下のコマンドを直接実行しましょう：
bash
```
npm install
npm run dev
```
1
2
npm install で全フロント依存（Laravel Mix/Vite、Tailwind CSS、Vue/Reactなど）を取得し、 npm run dev で開発モードのビルドを行います（圧縮なし＋ソースマップなど）。本番環境向けには npm run prod や npm run build を利用します。

まとめ

ここまでの手順を完了すれば、ServBayという強力なローカル開発環境上でStatamic CMSをスムーズにインストール＆設定し、最初のカスタマイズを進められます。ServBayの統合環境（PHP、Composer、Webサーバー、サイト管理、Node.js対応）はStatamic開発の煩わしさと手間を大きく軽減します。
今後は、Statamicの柔軟なファイル体系や強力な機能を最大限活用しながら、サイト構築や反復的な改善作業を素早く始めていきましょう。

ServBay環境でのStatamicのインストールと設定 ​

Statamicインストール手順 ​

ステップ1：プロジェクトディレクトリの作成 ​

ステップ2：ComposerでStatamicプロジェクトを作成 ​

ステップ3：Webサーバーの設定（ServBayでサイト追加） ​

ステップ4：Statamic環境の設定 ​

ステップ5：Statamicサイトの起動・アクセス ​

ステップ6：プラグイン＆テーマの追加（オプション） ​

Statamicでサイトを構築する ​

コンテンツとコレクションの作成 ​

ナビゲーションメニューの設定 ​

テンプレートとスタイルのカスタマイズ ​

まとめ ​