Demo
Password
Protect.

鉄則 これだけは守る

1つでも破るとデモが流出する。クライアント信頼喪失＝案件失注。妥協しないこと。

構成図 2リポジトリ構成

VAIZO-jp は Free org のため Private repo の Pages が使えない。 Source は Private で守り、暗号化済成果物だけを Public repo 経由で Pages に配信する構成が唯一の現実解。

前提条件 事前準備

初回セットアップ 案件ごと・15分

1. 案件略号を環境変数に Set Variable

   以下を bash / zsh で実行（PowerShellは $env:SLUG="bnr"）。

   bashCopy

   SLUG=bnr   # 案件略号（小文字）に置き換える

2. リポジトリを2つ作成 Create Repos

   Source（Private）と Pages配信用（Public）を作成する。

   bashCopy

   gh repo create VAIZO-jp/${SLUG}-site --private --clone
   cd ${SLUG}-site
   
   gh repo create VAIZO-jp/${SLUG}-demo --public \
     --description "Encrypted demo for ${SLUG}. Source: VAIZO-jp/${SLUG}-site"

3. 12文字ランダムPWを生成 Generate PW

   記号なし英数字16文字（口頭伝達ミス防止）。生成後すぐ1Passwordへ。

   bashCopy

   openssl rand -base64 16 | tr -dc 'A-Za-z0-9' | head -c 16; echo

   例：K3xQ9mNpL2vRtBhZ

4. 1Password に保管＆共有準備 1Password

   1. Vault Client-{{案件略号}} を開く（無ければ作成）
   2. 「Login」アイテム作成
      • Title：{{正式名称}} デモサイト
      • URL：https://vaizo-jp.github.io/{{SLUG}}-demo/
      • Password：上で生成したPW
      • Notes：公開日 / 有効期限 / 案件Issue番号
   3. Share → Item Sharing リンク作成
      • 有効期限：7日（最長14日）
      • 閲覧回数：クライアント担当者数 +2
      • メール認証：必須

   How to · 1Password Operations

   1Passwordの使い方（クリックで詳細を表示）

   初めて触る人向けの操作手順。慣れている人は閉じたままで OK。 全社運用の詳細は 1Password Teams セットアップ 参照。

   はじめての方へ：アカウント参加〜初回ログインOnboarding

   1. 櫻井CTOから 1Password Teams 招待メール（差出人：1Password <noreply@1password.com>）が届く
   2. メール内の「Join VAIZO」をクリック
   3. Master Password を設定（16文字以上推奨・忘れたら復旧不可なので必ず記憶）
   4. Secret Key をダウンロード（PDF）→ 自宅金庫 or 印刷して安全な場所に保管
   5. Emergency Kit も同様にダウンロード保管
   6. デスクトップアプリをインストール：1password.com/downloads
   7. ブラウザ拡張機能もインストール（Chrome / Edge / Firefox）→ 自動入力が効くようになる

   重要 Master Password と Secret Key の両方が無いとログインできない。両方を別々の場所に保管すること（同じPCに置かない）。

   Vaultの選び方（どこに入れる？）Vault

   デモ案件のPWは 案件機密度 で振り分ける。

   Vault名	使う案件
   Enter-Web-VIP	S案件（年100万超・上場企業・政府関連） / VIP案件のデモ
   Enter-Web-Standard	通常案件（A/B案件・年100万未満） / 大半のデモはここ
   Onboarding-Inbox	クライアントから受領したばかりで未振り分けの一時保管

   迷ったら Enter-Web-Standard。VIP案件か疑問があれば案件CTO（櫻井理也）に確認。

   Loginアイテム作成 詳細（フィールド・命名・タグ）New Item

   1. 1Passwordアプリで対象 Vault を選択
   2. 左下 「+ New Item」（または右上の「+」）
   3. カテゴリ 「Login」 を選択
   4. 各フィールドを以下のとおり入力：

   フィールド	入力内容（例）
   Title	[BNR] デモサイト（命名規則：[案件略号] アイテム種別）
   Username	（空欄でOK・staticryptはPWのみ）
   Password	右の生成ボタンは使わず、事前に openssl rand で生成した12文字PW を貼り付け
   Website	https://vaizo-jp.github.io/bnr-demo/（実際のSLUGに置換）
   Notes	公開日 / 有効期限 / 案件Issue番号 / 想定閲覧者
   Tags	client:bnr type:demo status:active rotation:none

   Saveで保存完了。アイテムがVault一覧に表示される。

   Item Sharing リンクの発行（クライアントへ共有）Share

   1. 作成したLoginアイテムを開く
   2. 右上 「Share」 ボタン（または「⋯」メニュー → Share）
   3. 「Share via Link」（リンクで共有）を選択
   4. 共有設定を以下のとおり：

   設定	推奨値
   Expires after（有効期限）	7 days（最長14 days）
   Available for（閲覧回数）	クライアント担当者数 +2（例：担当2名 → 4回）
   Restrict to people who can verify their email	ON（必須） — メール認証を要求
   Allowed emails	クライアント担当者のメールアドレスを列挙（カンマ区切り）

   5. 「Get Link to Share」 をクリック
   6. 表示された URL（https://share.1password.com/s#...）をコピー
   7. このURLを §06 共有メール雛形 の {{1Password Item Sharing URL}} に貼り付けて送信

   UXメモ クライアント側は「リンクを開く → メールに認証コードが届く → コード入力 → PW表示」という流れ。LINEアカウント認証より少し手間だが、漏洩リスクが激減する。

   共有リンクをrevoke（停止）するRevoke

   納品後・担当変更時・漏洩疑い時は即停止。

   1. 1Passwordアプリで対象アイテムを開く
   2. 右上 「Share」 → 「Manage Shared Links」
   3. 該当リンクの 「⋯」 → 「Revoke」 を選択
   4. 確認ダイアログで 「Revoke」

   Revoke後、そのリンクを開こうとした人は「This link has been revoked」と表示され閲覧不可になる。

   新しいリンクを発行するには「Item Sharing リンクの発行」をもう一度実行。

   1Password CLI（op）でPWを取得＆自動化Advanced

   シェルスクリプトやCI/CDから 1Password に保管したPWを直接取得できる。手動コピペが減ってミスが防げる。

   初回セットアップ：

   bashCopy

   # Windows
   winget install AgileBits.1Password.CLI
   
   # macOS
   brew install 1password-cli
   
   # 動作確認
   op --version
   
   # サインイン（初回のみ）
   op signin

   使用例：デモPWを環境変数に設定して staticrypt 再暗号化

   bashCopy

   export DEMO_PW=$(op read "op://Enter-Web-Standard/[BNR] デモサイト/password")
   staticrypt src/index.html -p "$DEMO_PW" -o dist/index.html

   使用例：GitHub Secrets を一括更新

   bashCopy

   op read "op://Enter-Web-Standard/[BNR] デモサイト/password" \
     | gh secret set DEMO_PW --repo VAIZO-jp/bnr-site

   補足 op://Vault名/アイテム名/フィールド名 の形式。アイテム名にスペースや記号が含まれる場合はそのまま指定可（クォートで囲む）。

   困ったとき（よくある詰まり）FAQ

   症状	対処
   「Share」ボタンが出ない	Vaultがpersonal Vault（無料アカウント）になっている可能性。Teams Vault に移動 or 櫻井CTOに権限確認
   クライアントが「メール認証コードが届かない」	(1) スパムフォルダ確認 (2) リンクのAllowed emailsに登録されているか確認 (3) 5分待って再送信
   リンクの有効期限を延長したい	延長機能なし。新しいリンクを発行 → 旧リンク revoke → 新リンクを再送付
   誤って revoke してしまった	同じアイテムから新リンクを発行し直すだけ。データ自体は消えない
   クライアントが1Passwordの使い方が分からない	Item Sharing リンクは 1Passwordアカウント不要。リンクを開けばメール認証だけで閲覧可能と伝える

5. GitHub Secrets に登録 Secrets

   DEMO_PW：上で生成したPWを Source repo の Secrets に登録。

   bashCopy

   gh secret set DEMO_PW --repo VAIZO-jp/${SLUG}-site
   # プロンプトに 12文字PW を貼り付け

   DEPLOY_TOKEN：Fine-grained PAT を発行。GitHub Web → Settings → Developer settings → Personal access tokens (Fine-grained)

   • Resource owner：VAIZO-jp
   • Repository access：Only select → {{SLUG}}-demo
   • Permissions：Contents = Read and write
   • Expiration：90日

   bashCopy

   gh secret set DEPLOY_TOKEN --repo VAIZO-jp/${SLUG}-site
   # プロンプトに発行した PAT を貼り付け

6. Pages を有効化 Enable Pages

   Pages repo（Public）側で main / root を Pages source に設定。

   bashCopy

   gh api -X POST /repos/VAIZO-jp/${SLUG}-demo/pages \
     -f "source[branch]=main" \
     -f "source[path]=/"

   または GitHub Web → Settings → Pages → Source: Deploy from a branch → main / /

Workflow YAML そのまま設置

Source repo の .github/workflows/deploy-demo.yml として保存。 ファイル冒頭の SLUG を案件略号に置き換える（または env で渡す）。

name: Encrypt and Deploy Demo

on:
  push:
    branches: [main]
  workflow_dispatch:

env:
  SLUG: bnr   # ← 案件略号（小文字）に書き換える

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install staticrypt
        run: npm i -g staticrypt

      - name: Encrypt all HTML
        env:
          DEMO_PW: ${{ secrets.DEMO_PW }}
        run: |
          mkdir -p dist
          cp -r src/* dist/
          # HTMLだけ in-place 暗号化（CSS/JS/画像はそのまま）
          find dist -name "*.html" -print0 | while IFS= read -r -d '' f; do
            staticrypt "$f" \
              --password "$DEMO_PW" \
              --short \
              --template-title "デモ閲覧 - パスワードを入力してください" \
              --template-instructions "1Passwordリンクから取得したパスワードを入力" \
              --template-button "閲覧する" \
              -o "$f"
          done

      - name: Deploy to public Pages repo
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.DEPLOY_TOKEN }}
          external_repository: VAIZO-jp/${{ env.SLUG }}-demo
          publish_branch: main
          publish_dir: ./dist
          commit_message: "deploy: ${{ github.sha }}"

日常運用 デザイン修正の度

1. Source repo で平文HTMLを編集 Edit & Push

   bashCopy

   cd ~/work/${SLUG}-site
   # index.html などを修正
   git add .
   git commit -m "fix: ヒーロー画像差し替え"
   git push origin main

2. Actions が自動で暗号化→Pages公開 Auto Deploy

   1〜2分でデプロイ完了。進捗・失敗ログを確認。

   bashCopy

   gh run watch --repo VAIZO-jp/${SLUG}-site
   # 失敗時:
   gh run view --log --repo VAIZO-jp/${SLUG}-site

3. クライアント確認URLを自分で動作確認 Self Check

   1. https://vaizo-jp.github.io/{SLUG}-demo/ をシークレットウィンドウで開く
   2. 1PasswordからPWを取り出して入力
   3. 修正が反映されているかチェック
   4. PCとスマホ両方で確認

共有メール雛形 クライアント送付用

パスワードは 必ず1Password Item Sharingリンク で送る。本文に直接書かない。 {{...}} のプレースホルダを案件情報に置き換えて使用。

件名

【{{正式名称}}様】{{案件名}}デモサイトご確認のお願い

本文

{{先方担当者名}} 様

お世話になっております、株式会社VAIZO の {{自分の名前}} です。

{{案件名}} のデモサイトをご確認いただける状態になりましたので、URLとパスワードをお送りいたします。


■ デモURL
https://vaizo-jp.github.io/{{SLUG}}-demo/


■ パスワード（1Password共有リンク）
{{1Password Item Sharing URL}}

※ リンクを開くとメール認証コードがご登録メールアドレス宛に届きます
※ リンクは {{有効期限日}} まで有効です（最長14日）
※ 閲覧パスワードは12文字のランダム英数字です。コピー＆ペーストでの入力を推奨します


■ ご確認のお願い
{{確認期限}}までに、以下の観点でご確認をお願いいたします。

1. デザイン全体の印象（配色・フォント・レイアウト）
2. 文言の誤字脱字・修正希望
3. 写真・画像の差し替え希望
4. その他、お気づきの点


■ ご確認方法
- PC・スマートフォン両方でご覧いただくことを推奨いたします
- パスワード入力欄でコピー＆ペースト可能です
- 復元できない場合はシークレットウィンドウ（プライベートブラウズ）でお試しください


■ ご質問・修正ご希望
本メールへのご返信、または Slack {{共有チャンネル名}} でお気軽にお知らせください。
頂いたフィードバックは「修正対応表」（別途共有済）に記録のうえ反映いたします。


何卒よろしくお願いいたします。

────────────────────────────
{{自分の名前}}
株式会社VAIZO / V/ENTER WEB事業部
{{メールアドレス}}
────────────────────────────

PWローテーション 即時実施

以下のいずれかが起きたら即ローテーション：クライアント担当者変更／1Passwordリンク期限切れ／PWを誤投稿（漏洩疑い）／案件開始から30日経過。

# 新PW生成
NEW_PW=$(openssl rand -base64 16 | tr -dc 'A-Za-z0-9' | head -c 16)
echo "$NEW_PW"

# 1Password Item を更新（旧Item Sharingリンクは revoke）
# → 新しい Item Sharing リンクを生成

# GitHub Secrets を更新
echo "$NEW_PW" | gh secret set DEMO_PW --repo VAIZO-jp/${SLUG}-site

# Workflow を再実行（再暗号化）
gh workflow run deploy-demo.yml --repo VAIZO-jp/${SLUG}-site

# クライアントに新リンクを送付（旧リンクの停止も明記）

納品後の撤去 翌営業日中

トラブル対応 よくある詰まり

別方式への切替 判断フロー

切り替え判断は案件CTOが エスカレーション順 と合わせて実施。

関連ドキュメント