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

Codexの方は、この一言を送ります

「ダウンロード」にある展開済みの archive-site-kit フォルダを読み込み、キット直下のAI用案内を先に読んでください。キット全体を隠しフォルダも含めて「書類（Documents）／ドキュメント」へ作業用としてコピーし、ダウンロード側は控えとして残してください。コピー後は書類側の archive-site-kit を作業場所にして、キット内の案内とスキルを使い、このキットをセットアップしてアーカイブサイトの構築を始めて

Codexの入力欄に貼り付け、送信します。 Codexがダウンロードのキットを探し、書類／ドキュメントへ作業用コピーを作ります。保存場所を選ぶ画面やアクセス許可が出たときだけ、下の図を見てキットのフォルダ全体を選びます。

Claude Codeの方は、フォルダを選んだあと、上の開始文を送ります

Codexの方は、すでに送っているのでそのまま待ちます。 Claude Codeの方は、上の開始文を入力欄に貼り付けて送ります。ここから先はAIが順番に聞いてきます。だいたいは番号で答えるだけです。分からない言葉が出てきたら「もっとかんたんに説明して」とそのまま伝えてください。

まとめて答える例

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の共有リンクを貼れます。