本文へスキップ

Getting started

はじめ方

GENNAI をインストールして、最初のメディアを公開するまでの流れです。このページはバージョン 0.2.0 を前提にしています。

必要なもの

GENNAI の制作環境は Docker 上で動きます。お使いのマシンに次のものを用意してください。

  • Docker(Docker Desktop または Docker Engine)
  • Docker Compose v2(docker compose コマンド)
  • Git

起動すると、管理画面(Laravel 12)・フロントエンド(Next.js 14)・データベース(MySQL)のコンテナが立ち上がります。公開サイトは静的ファイルなので、公開用に PHP やデータベースのサーバーを用意する必要はありません。

インストール

リポジトリを取得して、インストーラを実行します。

ターミナル
git clone <リポジトリのURL> my-media
cd my-media
./install.sh

インストーラは設定ファイルを用意し、Docker のコンテナをビルド・起動します。初回はイメージの作成に数分かかります。完了すると、セットアップウィザードの URL(…/setup)がターミナルに表示されます。

ほかのサービスとポートが重なる場合は、オプションで変更できます。

ポートを指定してインストールする例
./install.sh --site-id my-media --cms-port 48080 --frontend-port 43000 --db-port 43306
./install.sh --help で、利用できるオプションの一覧を確認できます。

セットアップウィザード

表示された URL をブラウザで開くと、8 ステップのウィザードが始まります。画面の案内に沿って進めてください。

  1. 1

    サイトの基本

    サイト名や公開 URL など、サイトの土台になる情報を登録します。

  2. 2

    管理者

    管理画面にログインする管理者アカウントを作成します。

  3. 3

    運営者情報と公開ルール

    運営者情報と、公開面に載せてはいけない語句などのルールを設定します。

  4. 4

    テーマとブランド

    テーマを選び、ロゴやブランドカラーを設定します。

  5. 5

    計測(GA4・GTM・Search Console)

    アクセス解析と検索パフォーマンスの計測を設定します。

  6. 6

    送客CTA

    読者を案内する送客先と、ボタンの文言を設定します。

  7. 7

    プラグイン

    使いたいプラグインを選んで有効化します。

  8. 8

    確認と完了

    設定内容を確認して、セットアップを完了します。

記事を書いて公開する

ウィザードが終わったら、管理画面から記事を作成します。公開の流れは次のとおりです。

  1. 管理画面で記事やパーツを作成・編集する
  2. ビルドを実行し、サイト全体を静的 HTML として書き出す(Next.js の静的エクスポート)
  3. ビルドの最後に全ページの自動チェックが走る(禁止語句・404 ページ・内部リンク)
  4. チェックを通過した HTML を、S3 + CloudFront などの静的ホスティングへ配置する
自動チェックで違反が見つかった場合、ビルドはその時点で止まり、違反したまま公開されることはありません。チェックのルール(禁止語句など)は管理画面の GUI で編集できます。

プラグインの基本

プラグインは、Laravel 側(管理画面・API)と Next.js 側(公開サイト)の二つの半分で構成されます。管理画面から有効化・無効化でき、無効にしたプラグインはサイトに含まれません。

ディレクトリ構成
laravel/plugins/<id>/          # Laravel 側(必須)
frontend/src/plugins/<id>/     # Next.js 側(任意)

雛形はコマンドで生成できます。

プラグインの雛形を作る
docker compose exec laravel php artisan plugin:make my-feature --frontend

--frontend を付けると Next.js 側の雛形も作られます。--name="表示名" で管理画面に出る名前を指定できます。

テーマの基本

テーマは、見た目に関わるファイルを一つのディレクトリにまとめたものです。管理画面で切り替えられます。

テーマの構成
frontend/themes/my-theme/
├── theme.json      # テーマ名・バージョン・差し替える部品
├── tokens.css      # 色・余白・書体などのデザイントークン
├── overrides.css   # 任意: コンポーネントの CSS 上書き
└── components/     # 任意: ヘッダー・フッターなど部品の差し替え

まずは既定テーマの tokens.css をコピーして値を変えるのが近道です。なお、PR(広告)表記を出すかどうかと文言は管理画面のサイト設定で選べ、見た目はテーマで変えられます。

AI エージェントとの連携

記事・パーツ・タスク・Wiki は、HTTP API(MCP)から操作できます。管理画面で発行したトークンを AI エージェントに渡せば、エージェントが記事の作成や更新、タスクの整理を行えます。

公開前の自動チェックは API 経由の変更にも同じように働くので、人が最終確認をする運用と組み合わせやすくなっています。

導入や移行について相談したい方へ

環境づくりから運用の進め方まで、お気軽にお問い合わせください。

導入の相談をする