記事システム_セットアップガイド-～夢へ道～
傍観者k
投稿日: 2026年02月25日 00:52
# ～夢へ道～ - 完全セットアップガイド
## 作成日: 2026年2月3日
---
## 📋 プロジェクト概要
Laravel 6.x を使用した本格的な記事管理システムです。
### 主な機能
- ✅ ユーザー認証（登録・ログイン・ログアウト）
- ✅ ダッシュボード（統計情報、最新記事）
- ✅ 記事CRUD機能（作成・閲覧・編集・削除）
- ✅ Markdownエディタ（EasyMDE、リアルタイムプレビュー）
- ✅ Markdown表示（HTMLレンダリング、コードハイライト）
- ✅ 記事一覧画面（1列レイアウト、ページネーション付き）
- ✅ 記事詳細画面（Markdown to HTML変換）
- ✅ Bootstrap 5 によるレスポンシブUI
- ✅ SQLite/MySQL データベース対応
---
## 🗂️ ファイル構成
```
myapp/
├── app/
│ ├── Article.php # 記事モデル
│ ├── User.php # ユーザーモデル
│ └── Http/Controllers/
│ ├── ArticleController.php # 記事コントローラー（CRUD）
│ └── HomeController.php # ダッシュボードコントローラー
├── database/
│ ├── migrations/
│ └── seeds/
├── resources/views/
│ ├── layouts/
│ │ └── app.blade.php # マスターレイアウト
│ ├── home.blade.php # ダッシュボード
│ ├── auth/ # 認証関連ビュー
│ └── articles/
│ ├── index.blade.php # 一覧画面
│ ├── show.blade.php # 詳細画面
│ ├── create.blade.php # 作成画面（Markdown）
│ └── edit.blade.php # 編集画面（Markdown）
├── routes/
│ └── web.php # ルート定義
└── .env # 環境設定
```
---
## 🚀 セットアップ手順
### ステップ 1: MySQL のインストール確認
MySQL がインストールされていない場合は、以下のいずれかをインストールしてください：
#### オプション A: XAMPP（推奨）
1. https://www.apachefriends.org/jp/index.html からダウンロード
2. インストール後、XAMPP Control Panel から MySQL を起動
#### オプション B: MySQL Community Server
1. https://dev.mysql.com/downloads/mysql/ からダウンロード
2. インストール後、サービスを起動
#### オプション C: 開発用に SQLite を使用（簡単）
SQLite を使用する場合は、次のステップに進んでください。
---
### ステップ 2A: MySQL を使用する場合
#### 2A-1. データベースの作成
XAMPPの場合、phpMyAdminを使用：
1. ブラウザで http://localhost/phpmyadmin にアクセス
2. 「新規作成」をクリック
3. データベース名: `laravel_articles`
4. 照合順序: `utf8mb4_unicode_ci`
5. 「作成」をクリック
または、MySQLコマンドラインから：
```bash
mysql -u root -p
CREATE DATABASE laravel_articles CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
exit;
```
#### 2A-2. .env ファイルの確認
`.env` ファイルのデータベース設定を確認（既に設定済み）：
```env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_articles
DB_USERNAME=root
DB_PASSWORD=
```
パスワードが設定されている場合は `DB_PASSWORD` を設定してください。
---
### ステップ 2B: SQLite を使用する場合（MySQL なしで試す）
#### 2B-1. SQLite データベースファイルの作成
PowerShell で以下を実行：
```powershell
# データベースファイルを作成
New-Item -Path database/database.sqlite -ItemType File -Force
```
#### 2B-2. .env ファイルの編集
`.env` ファイルを以下のように変更：
```env
DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel_articles
# DB_USERNAME=root
# DB_PASSWORD=
```
---
### ステップ 3: マイグレーションとシーダーの実行
プロジェクトディレクトリ（myapp）で以下のコマンドを実行：
```powershell
# マイグレーションの実行（テーブル作成）
php artisan migrate
# シーダーの実行（サンプルデータ15件を投入）
php artisan db:seed
# または、両方を一度に実行
php artisan migrate:fresh --seed
```
**実行結果例：**
```
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrating: 2026_02_03_003543_create_articles_table
Migrated: 2026_02_03_003543_create_articles_table
Seeding: ArticlesTableSeeder
```
---
### ステップ 4: 開発サーバーの起動
```powershell
php artisan serve
```
**実行結果：**
```
Laravel development server started: http://127.0.0.1:8000
```
ブラウザで **http://127.0.0.1:8000** にアクセスしてください。
---
## 📱 画面説明
### 1. ユーザー認証画面
#### 新規登録 (`/register`)
- 名前、メールアドレス、パスワードで新規登録
- 登録後自動ログイン
#### ログイン (`/login`)
- メールアドレスとパスワードでログイン
- デフォルト管理者: admin@example.com / password
---
### 2. ダッシュボード (`/home`)
※ログイン必須
**機能：**
- 総記事数の統計表示
- 本日の投稿数表示
- 最新記事5件のリスト表示
- 新規作成・記事一覧へのクイックリンク
---
### 3. 記事一覧画面 (`/` または `/articles`)
**機能：**
- すべての記事を1列形式で表示
- 各カードに表示される情報：
- 記事タイトル
- 本文の抜粋（Markdown、150文字まで）
- 著者名
- 投稿日
- ページネーション（1ページ10件表示）
- 認証済みユーザー：編集・削除ボタン表示
- レスポンシブデザイン対応
**アクセス方法：**
- URL: `http://127.0.0.1:8000/articles`
- ルート名: `articles.index`
---
### 4. 記事詳細画面 (`/articles/{id}`)
**機能：**
- 記事の全文をMarkdown形式でHTML表示
- コードブロックのシンタックスハイライト対応
- 表示される情報：
- 記事タイトル
- 著者名
- 投稿日時
- 最終更新日時
- 記事本文（Markdownレンダリング）
- パンくずリスト
- 一覧に戻るボタン
- 認証済みユーザー：編集・削除ボタン表示
**アクセス方法：**
- URL: `http://127.0.0.1:8000/articles/1`（数字は記事ID）
- ルート名: `articles.show`
---
### 5. 記事作成画面 (`/articles/create`)
※ログイン必須
**機能：**
- Markdownエディタ（EasyMDE）を使用
- リアルタイムプレビュー機能
- ツールバー：見出し、太字、斜体、リスト、リンク、画像、テーブル等
- Markdown記法ガイドへのリンク
- カスタムバリデーション（空欄チェック）
**アクセス方法：**
- URL: `http://127.0.0.1:8000/articles/create`
- ルート名: `articles.create`
---
### 6. 記事編集画面 (`/articles/{id}/edit`)
※ログイン必須
**機能：**
- 既存記事をMarkdownエディタで編集
- 作成画面と同じEasyMDEエディタ
- リアルタイムプレビュー機能
- 既存データの読み込み
**アクセス方法：**
- URL: `http://127.0.0.1:8000/articles/1/edit`
- ルート名: `articles.edit`
---
## 🗄️ データベース構造
### users テーブル
| カラム名 | データ型 | 説明 | 制約 |
|---------|---------|------|------|
| id | BIGINT | ユーザーID | PRIMARY KEY, AUTO_INCREMENT |
| name | VARCHAR(255) | ユーザー名 | NOT NULL |
| email | VARCHAR(255) | メールアドレス | NOT NULL, UNIQUE |
| password | VARCHAR(255) | パスワード（ハッシュ化） | NOT NULL |
| email_verified_at | TIMESTAMP | メール認証日時 | NULLABLE |
| created_at | TIMESTAMP | 作成日時 | NOT NULL |
| updated_at | TIMESTAMP | 更新日時 | NOT NULL |
### articles テーブル
| カラム名 | データ型 | 説明 | 制約 |
|---------|---------|------|------|
| id | BIGINT | 記事ID | PRIMARY KEY, AUTO_INCREMENT |
| title | VARCHAR(255) | 記事タイトル | NOT NULL |
| content | TEXT | 記事本文（Markdown形式） | NOT NULL |
| author | VARCHAR(255) | 著者名 | NULLABLE |
| created_at | TIMESTAMP | 作成日時 | NOT NULL |
| updated_at | TIMESTAMP | 更新日時 | NOT NULL |
---
## 🎨 使用技術
### バックエンド
- **Laravel**: 6.20.45
- **PHP**: 7.2.18
- **Eloquent ORM**: データベース操作
- **Laravel Authentication**: ユーザー認証
- **MySQL**: 5.7+ または **SQLite**: 開発環境
### フロントエンド
- **Bootstrap**: 5.1.3（CDN）- レスポンシブUI
- **EasyMDE**: 2.18.0 - Markdownエディタ
- **Marked.js**: 11.1.1 - Markdown → HTMLパーサー
- **Highlight.js**: 11.9.0 - コードシンタックスハイライト
- **Blade テンプレート**: Laravel のテンプレートエンジン
---
## 📝 主要なファイルの説明
### 1. モデル: `app/Article.php`
```php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
protected $fillable = ['title', 'content', 'author'];
}
```
### 2. コントローラー: `app/Http/Controllers/ArticleController.php`
```php
public function index()
{
// 最新順に10件ずつページネーション
$articles = Article::orderBy('created_at', 'desc')->paginate(10);
return view('articles.index', compact('articles'));
}
public function show($id)
{
// IDで記事を取得（存在しない場合は404エラー）
$article = Article::findOrFail($id);
return view('articles.show', compact('article'));
}
```
### 3. ルート: `routes/web.php`
```php
Route::get('/', function () {
return redirect('/articles');
});
Route::get('/articles', 'ArticleController@index')->name('articles.index');
Route::get('/articles/{id}', 'ArticleController@show')->name('articles.show');
```
---
## 🔧 トラブルシューティング
### 問題 1: データベース接続エラー
**エラーメッセージ:**
```
SQLSTATE[HY000] [1049] Unknown database 'laravel_articles'
```
**解決方法:**
1. データベースが作成されているか確認
2. `.env` ファイルの設定を確認
3. MySQL/MariaDB が起動しているか確認（XAMPP の場合）
---
### 問題 2: Class 'Article' not found
**解決方法:**
```powershell
composer dump-autoload
```
---
### 問題 3: ページネーションリンクが表示されない
Laravel 6 では Bootstrap 4 がデフォルトです。Bootstrap 5 用に設定する場合：
`app/Providers/AppServiceProvider.php` に追加：
```php
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap();
}
```
---
## 🎯 次のステップ（拡張案）
### 機能追加のアイデア
1. **記事の作成・編集・削除機能**
```powershell
php artisan make:controller ArticleController --resource
```
2. **カテゴリ機能**
```powershell
php artisan make:model Category -m
```
3. **検索機能**
4. **タグ機能**
5. **コメント機能**
6. **ユーザー認証**
```powershell
composer require laravel/ui
php artisan ui bootstrap --auth
```
7. **画像アップロード機能**
8. **マークダウンエディタ**
---
## 📚 参考資料
- **Laravel 6 公式ドキュメント**: https://laravel.com/docs/6.x
- **Laravel 6 日本語ドキュメント**: https://readouble.com/laravel/6.x/ja/
- **Bootstrap 5 ドキュメント**: https://getbootstrap.jp/docs/5.0/getting-started/introduction/
---
## 🐛 デバッグのヒント
### ルート一覧の確認
```powershell
php artisan route:list
```
### データベースの確認
```powershell
# Laravel Tinker（対話型シェル）
php artisan tinker
# 記事の件数を確認
>>> App\Article::count()
# 最初の記事を取得
>>> App\Article::first()
# 全記事を取得
>>> App\Article::all()
```
### ログの確認
```
storage/logs/laravel.log
```
---
## ✅ チェックリスト
セットアップが完了したら、以下を確認してください：
- [ ] MySQL または SQLite が正しく設定されている
- [ ] `php artisan migrate` が正常に実行された
- [ ] `php artisan db:seed` が正常に実行された
- [ ] `php artisan serve` でサーバーが起動した
- [ ] ブラウザで一覧画面が表示される
- [ ] 記事をクリックして詳細画面が表示される
- [ ] ページネーションが正しく動作する
---
**最終更新**: 2026年2月3日
**プロジェクト名**: ～夢へ道～
最終更新: 2026年03月06日 05:27