# 光に包まれるニュージーランド

Niarra Travel風の、写真を主役にした上質な旅行紹介ページです。Cloudflare PagesのDirect Uploadでそのまま公開できます。

公開URL:

```text
https://new-zealand-tour-2026.pages.dev/
```

ページ構成:

```text
/                         旅行一覧LP
/new-zealand/             次回: ニュージーランド旅行
/osaka-kobe-takarazuka/   前回: 大阪・神戸・宝塚旅行
/iriomote/                前々回: 西表島旅行
```

## ファイル構成

```text
new-zealand-tour-2026/
├── index.html
├── new-zealand/
│   └── index.html
├── osaka-kobe-takarazuka/
│   └── index.html
├── iriomote/
│   └── index.html
├── styles.css
└── README.md
```

- `index.html`: 旅行一覧LP
- `new-zealand/index.html`: ニュージーランド旅行の詳細ページ
- `osaka-kobe-takarazuka/index.html`: 大阪・神戸・宝塚旅行の記録ページ
- `iriomote/index.html`: 西表島旅行の記録ページ
- `styles.css`: レイアウト、写真表現、レスポンシブ対応
- 画像: Unsplashのリモート画像URLをHTML/CSS内で参照

ローカル画像に差し替える場合は、`assets/images/` を作って画像を置き、`src="assets/images/queenstown.jpg"` のように参照します。

## ローカル確認

```bash
cd /Users/m-macbookairm3/Desktop/MAKI-CODES/new-zealand-tour-2026
python3 -m http.server 8789
```

ブラウザで `http://localhost:8789/` を開きます。

## Cloudflare Pagesへ公開する方法

Cloudflare Pagesは、ビルド済みの静的ファイルを直接アップロードできます。公式ドキュメントではDirect Uploadとして案内されています。

### 方法A: Wranglerでアップロード

1. Cloudflare API Tokenを用意します。
2. ターミナルで以下を実行します。

```bash
cd /Users/m-macbookairm3/Desktop/MAKI-CODES
CLOUDFLARE_API_TOKEN="ここにAPIトークン" npx wrangler pages deploy new-zealand-tour-2026 --project-name new-zealand-tour-2026
```

3. 成功すると、`https://new-zealand-tour-2026.pages.dev` のようなURLが表示されます。

API Tokenを使わず対話ログインする場合は、ローカルのターミナルで以下を先に実行します。

```bash
npx wrangler login
npx wrangler pages deploy new-zealand-tour-2026 --project-name new-zealand-tour-2026
```

### 方法B: Cloudflare Dashboardでドラッグ&ドロップ

1. Cloudflare Dashboardにログインします。
2. `Workers & Pages` → `Create application` → `Pages` を開きます。
3. `Upload assets` またはDirect Upload系の画面を選びます。
4. `new-zealand-tour-2026` フォルダの中身をアップロードします。
5. プロジェクト名を `new-zealand-tour-2026` にします。
6. デプロイ後に表示される `pages.dev` のURLを控えます。

## Cloudflare AccessでGoogleログイン制限をかける

目的は「サイト自体はCloudflare Pagesで公開するが、閲覧できるのは指定したGmailアドレスの人だけ」にすることです。

設定の全体像は以下です。

1. Cloudflare Zero TrustでGoogleをIdentity Providerとして追加
2. Cloudflare Accessでアプリケーションを作成
3. 対象ホスト名をPagesのURLまたは独自ドメインにする
4. Allowポリシーで許可するGmailアドレスだけをInclude
5. 許可されていない人はログイン後もブロックされることを確認

### 1. Cloudflare Zero Trustを開く

1. Cloudflare Dashboardにログインします。
2. 左側またはアカウントメニューから `Zero Trust` を開きます。
3. 初回の場合はチーム名を作成します。

### 2. GoogleログインをIdentity Providerに追加する

Cloudflare Zero Trustで以下を開きます。

`Settings` → `Authentication` → `Login methods` または  
`Integrations` → `Identity providers`

画面名はCloudflareのUI更新で少し変わることがあります。

1. `Add new identity provider` を選びます。
2. `Google` を選びます。
3. Google Cloudで作成したOAuth Client IDとClient Secretを入力します。
4. 保存します。

Google OAuth Clientを作る時は、Cloudflare画面に表示されるリダイレクトURLをGoogle Cloud Console側の `Authorized redirect URIs` に登録します。

### 3. Accessアプリケーションを作成する

Cloudflare Zero Trustで以下を開きます。

`Access` → `Applications` → `Add an application`

1. 種類は `Self-hosted` を選びます。
2. Application nameは例として `光に包まれるニュージーランド`。
3. Application domainには公開URLのホスト名を入れます。

例:

```text
new-zealand-tour-2026.pages.dev
```

独自ドメインで公開する場合は、例として以下です。

```text
nz-trip.example.com
```

### 4. 許可するGmailアドレスだけを指定する

Accessアプリケーション作成中のPolicy設定で、以下のようにします。

- Policy action: `Allow`
- Include rule: `Emails`
- Value: 許可したいGmailアドレス

例:

```text
senpai@gmail.com
friend@gmail.com
```

ポイント:

- `Emails ending in gmail.com` にすると、Gmailを持つ人全員が候補になってしまうので使いません。
- 必ず個別のメールアドレスで指定します。
- 複数人を許可する場合は、メールアドレスを複数追加します。
- ExcludeやBypassポリシーは作らない方が安全です。

### 5. Googleログインだけを使わせる

アプリケーションまたはZero Trustの認証設定で、Login methodsにGoogleが選ばれていることを確認します。

メールOTPやCloudflare One-time PINを使わせたくない場合は、対象アプリでGoogle以外のログイン方法が有効になっていないか確認します。

### 6. 動作確認

1. 公開URLをシークレットウィンドウで開きます。
2. Cloudflare Accessのログイン画面が出ることを確認します。
3. 許可したGmailアドレスでGoogleログインします。
4. サイトが表示されることを確認します。
5. 別のGoogleアカウント、または許可していないGmailでログインします。
6. Access deniedになることを確認します。

確認できたら、指定Gmailだけが閲覧できる状態です。

## 参照した公式ドキュメント

- Cloudflare Pages Direct Upload: https://developers.cloudflare.com/pages/get-started/direct-upload/
- Cloudflare Pages overview: https://developers.cloudflare.com/pages/
- Cloudflare Access web applications: https://developers.cloudflare.com/cloudflare-one/access-controls/applications/http-apps/
- Cloudflare Access policies: https://developers.cloudflare.com/cloudflare-one/access-controls/policies/
- Cloudflare Google identity provider: https://developers.cloudflare.com/cloudflare-one/integrations/identity-providers/google/