コンテンツ追加手順

# コンテンツ追加手順

このドキュメントでは、AstroPaperブログに新しい記事を追加する手順を説明します。

## 📋 目次

- [前提条件](#前提条件)
- [環境変数の設定](#環境変数の設定)
- [Sanity Studioの起動](#sanity-studioの起動)
- [ブログ記事の追加](#ブログ記事の追加)
- [フィールドの説明](#フィールドの説明)
- [記事の公開](#記事の公開)
- [トラブルシューティング](#トラブルシューティング)

## 前提条件

以下のツールがインストールされている必要があります：

- Node.js (v22.16.0以上推奨)
- pnpm (v10.11.1以上推奨)
- Sanityアカウント（[sanity.io](https://www.sanity.io/)で無料アカウント作成可能）

## 環境変数の設定

### 1. SanityプロジェクトIDの取得

1. [Sanity管理画面](https://www.sanity.io/manage)にログイン
2. プロジェクトを選択（または新規作成）
3. プロジェクトIDを確認（`studio-astropaper/sanity.config.ts`に設定されている場合は既に設定済み）

### 2. 環境変数ファイルの作成

`astro-paper`ディレクトリに`.env`ファイルを作成し、以下の環境変数を設定します：

```bash
# astro-paper/.env
SANITY_PROJECT_ID=your-project-id
SANITY_DATASET=production
```

**注意**: `.env`ファイルは`.gitignore`に含まれているため、Gitにはコミットされません。本番環境では、デプロイ先の環境変数設定でこれらの値を設定してください。

## Sanity Studioの起動

Sanity Studioは、ブログ記事を管理するための管理画面です。

### 1. 依存関係のインストール

```bash
cd studio-astropaper
pnpm install
```

### 2. 開発サーバーの起動

```bash
pnpm run dev
```

または

```bash
pnpm start
```

### 3. ブラウザでアクセス

デフォルトでは、`http://localhost:3333`でSanity Studioにアクセスできます。

初回起動時は、Sanityアカウントでログインを求められます。

## ブログ記事の追加

### 1. 新しい記事を作成

1. Sanity Studioの左サイドバーから「**Post**」を選択
2. 右上の「**Create**」ボタンをクリック
3. 「**Post**」を選択

### 2. 必須フィールドの入力

以下のフィールドは必須です：

- **Title** - 記事のタイトル
- **Slug** - URLに使用されるスラッグ（タイトルから自動生成されます）
- **Author** - 著者名（デフォルト: `tatsu`）
- **Published Date** - 公開日時
- **Description** - 記事の説明（SEO用）
- **Content** - 記事の本文

### 3. 記事の保存

右上の「**Publish**」ボタンをクリックして記事を公開するか、「**Save draft**」で下書きとして保存します。

## フィールドの説明

### 基本情報

| フィールド | 説明 | 必須 | デフォルト値 |
|-----------|------|------|------------|
| **Title** | 記事のタイトル | ✅ | - |
| **Slug** | URLに使用されるスラッグ | ✅ | タイトルから自動生成 |
| **Author** | 著者名 | ✅ | `tatsu` |
| **Published Date** | 公開日時 | ✅ | - |
| **Modified Date** | 最終更新日時 | ❌ | - |

### 公開設定

| フィールド | 説明 | 必須 | デフォルト値 |
|-----------|------|------|------------|
| **Draft** | 下書きとして保存（公開されません） | ❌ | `false` |
| **Featured** | ホームページでおすすめ記事として表示 | ❌ | `false` |

### SEO・メタ情報

| フィールド | 説明 | 必須 | デフォルト値 |
|-----------|------|------|------------|
| **Description** | 記事の説明（OGPやメタディスクリプションに使用） | ✅ | - |
| **OG Image** | Open Graph画像のURL（絶対URL） | ❌ | - |
| **Canonical URL** | 正規URL（SEO用） | ❌ | - |
| **Timezone** | タイムゾーン（IANA形式、例: `Asia/Tokyo`） | ❌ | `Asia/Bangkok` |

### コンテンツ

| フィールド | 説明 | 必須 |
|-----------|------|------|
| **Tags** | 記事のタグ（複数選択可能） | ❌ |
| **Content** | 記事の本文（Portable Text形式） | ✅ |

### その他

| フィールド | 説明 | 必須 | デフォルト値 |
|-----------|------|------|------------|
| **Hide Edit Post Link** | 記事ページの編集リンクを非表示にする | ❌ | `false` |

## Contentフィールドの使い方

Contentフィールドでは、リッチテキストエディタを使用して記事を作成できます。

### テキストの書式設定

- **太字**: `Ctrl+B` (Windows/Linux) または `Cmd+B` (Mac)
- **斜体**: `Ctrl+I` (Windows/Linux) または `Cmd+I` (Mac)
- **見出し**: `/`を入力して「Heading」を選択

### コードブロックの追加

1. `/`を入力
2. 「**Code Block**」を選択
3. 言語を選択（JavaScript、TypeScript、Python、HTML、CSSなど）
4. コードを入力

### 画像の追加

1. `/`を入力
2. 「**Image**」を選択
3. 画像をアップロードまたはURLを入力
4. **Alt text**（代替テキスト）を入力（SEOとアクセシビリティのため重要）

## 記事の公開

### 下書きとして保存

記事を下書きとして保存する場合：

1. 「**Draft**」チェックボックスをオンにする
2. 「**Save draft**」ボタンをクリック

下書きの記事は、`draft: true`として保存され、ブログサイトには表示されません。

### 記事を公開

記事を公開する場合：

1. 「**Draft**」チェックボックスを**オフ**にする
2. 「**Publish**」ボタンをクリック

公開された記事は、次回のビルド時にブログサイトに表示されます。

### 記事の更新

既存の記事を更新する場合：

1. Sanity Studioで記事を開く
2. 必要な変更を加える
3. 「**Modified Date**」を更新（推奨）
4. 「**Publish**」ボタンをクリック

## ローカルでの確認

記事を追加・更新した後、ローカルで確認する方法：

### 1. Astroアプリケーションの起動

```bash
cd astro-paper
pnpm install
pnpm run dev
```

### 2. ブラウザで確認

`http://localhost:4321`でブログサイトにアクセスし、追加した記事が表示されることを確認します。

**注意**: 記事が表示されない場合：
- 「**Draft**」がオフになっているか確認
- ブラウザをリロード
- 開発サーバーを再起動

## トラブルシューティング

### 環境変数エラー

```
SANITY_PROJECT_ID is not set
```

**解決方法**:
1. `astro-paper/.env`ファイルが存在するか確認
2. `SANITY_PROJECT_ID`と`SANITY_DATASET`が正しく設定されているか確認
3. 開発サーバーを再起動

### 記事が表示されない

**確認事項**:
1. 「**Draft**」チェックボックスがオフになっているか
2. 「**Published Date**」が未来の日時になっていないか
3. ブラウザのキャッシュをクリア
4. 開発サーバーを再起動

### Sanity Studioに接続できない

**確認事項**:
1. `studio-astropaper/sanity.config.ts`の`projectId`が正しいか
2. Sanityアカウントにログインしているか
3. プロジェクトへのアクセス権限があるか

### ビルドエラー

**確認事項**:
1. すべての必須フィールドが入力されているか
2. Contentフィールドが空でないか
3. 型エラーがないか（`pnpm run build`で確認）

## 参考リンク

- [Sanity公式ドキュメント](https://www.sanity.io/docs)
- [AstroPaper公式リポジトリ](https://github.com/satnaing/astro-paper)
- [Portable Textガイド](https://www.sanity.io/docs/block-content)

## 補足

### プロジェクト構造

```
AstroPaper/
├── astro-paper/ # Astroアプリケーション
│ ├── src/
│ │ ├── lib/
│ │ │ └── sanity.ts # Sanityクライアント設定
│ │ └── ...
│ └── .env # 環境変数（作成が必要）
│
└── studio-astropaper/ # Sanity Studio
├── schemaTypes/
│ └── post.ts # ブログ記事のスキーマ定義
└── sanity.config.ts # Sanity設定
```

### よくある質問

**Q: 記事を削除するには？**
A: Sanity Studioで記事を開き、右上のメニューから「Delete」を選択します。

**Q: 記事の順序を変更するには？**
A: 記事は「Published Date」の降順で自動的に並びます。順序を変更するには、公開日時を変更してください。

**Q: タグを追加・編集するには？**
A: 記事編集画面の「Tags」フィールドで、新しいタグを直接入力できます。既存のタグは自動補完されます。

**Q: OG画像を設定しない場合、どうなりますか？**
A: `dynamicOgImage: true`が設定されている場合、自動的にOG画像が生成されます。設定されていない場合は、デフォルトのOG画像が使用されます。