Codex・Claude Codeでつくる動画アーカイブサイト

このマニュアルに出てくる「開く」は3種類あります

1. Codexを使う場合はChatGPTデスクトップアプリで Codex を選びます。Claude Codeを使う場合はClaudeデスクトップアプリで Code を選びます。
2. 使うAIの「フォルダを開く（Open Folder）」を押します。ターミナル版の場合は、先に archive-site-kit フォルダへ移動してからAIを起動します。
3. 「書類（Documents）」または「ドキュメント」にコピーした archive-site-kit フォルダ全体を選びます。ZIP、隠しスキルフォルダ、個別のファイルは選びません。
4. フォルダが開いたら、下の一言をそのまま送ります。ZIPをチャットへ添付したり、ファイルを1つずつ参照するよう頼んだりする必要はありません。

このキットをセットアップして、アーカイブサイトの構築を始めて

まとめて答える例

1,1,3,8
はじめてのAI活用講座
基礎講座・録画・特典

最初の4つの数字が質問1〜4への答えです。続く2行がサイト名とカテゴリ名です。1つずつ答えてもかまいません。

「D05が好き」「明るく親しみやすく」「このスクリーンショットの雰囲気」のように伝えることもできます。ベースを選ぶと、そのベースに用意された2〜3枚の完成画面だけが一度に表示されます。おすすめ配色を確認し、番号を1回送って決めます。29枚すべてを一度に開く必要はありません。

下は説明用のイラストではなく、キットに入っている実物のデザイン一覧です。 一覧画像を大きく開く

小さい画面では、画像を横へ動かして確認できます

画像はあとから管理シートの「カテゴリ画像URL」で差し替えられます。画像生成を使わない場合は、標準アイコンで先に完成させられます。動作確認はどの進み方でも省略しません。

このあと使うAIが自動で行うこと

1. サイトの土台をコピーし、選んだデザインを適用します。
2. サイト名・カテゴリ・確認用動画を入れます。
3. エラー、ログイン、期限切れ、スマホ表示などを検証します。
4. パソコン内のプレビューを開きます。

1. Cloudflareを許可します。使うAIが開いた画面で、サイトを自分のCloudflareへ置くことを許可します。2段階認証が出たら自分で完了し、確認コードはAIへ送りません。
2. Googleを許可します。管理スプレッドシートを作るGoogleアカウントを選び、利用を許可します。
3. Apps Script APIをオンにします。これは使うAIが管理シートへ仕組みを設置するための設定です。画面を閉じた場合は、AIに「画面を開き直して」と伝えればやり直せます。
4. 専用の更新キーを作成します。Cloudflare画面では API Token と表示されます。

1. 使うAIが開いた管理シートで、上部メニューの 「アーカイブ管理」 を開きます。
2. 「専用の更新キーを設定」を選び、Cloudflareからコピーした値を貼り付けます。チャットを経由させません。
3. 「接続テスト: 成功」と表示されたら、使うAIへ 1 と送ります。
4. 「サイトに反映する」を押し、件数の確認で進めます。
5. 「サイトを確認する」から本番サイトを開きます。

使うAIへ渡す内容

• 動画の共有URL
• 受講生に見せる動画タイトル
• 入れたいカテゴリ
• 開催日・収録日、視聴期限がある場合はその日付

管理シートを使うAIが直接編集できる場合は、そのまま1行を追加します。直接編集できない場合は、AIが貼り付け用の1行を用意するので、「動画一覧」の最初の空き行へ貼るだけです。

1. カテゴリIDを候補から選びます。
2. タイトルと動画URLを入れます。サービスの種類はURLから自動で分かります。
3. 必要な場合だけ視聴終了日などを入れます。右側の追加項目は空欄でもかまいません。
4. 「公開」にチェックを入れます。下書き中は外します。
5. 「アーカイブ管理」から「サイトに反映する」を押します。
6. 本番サイトへログインし、再生または安全な別画面リンクを確認します。

サイト名、カテゴリ、受講区分、パスワード、視聴期限も管理シートから変更できます。カテゴリの表紙画像を変えるときは、「カテゴリ設定」の「カテゴリ画像URL」へGoogle Driveの共有リンクを貼れます。