CodePenでは足りない認証・期限管理をどう補うか

できること

CodePenの有料プラン（PRO）ではペンをPrivateに設定でき、CodePenの検索機能やギャラリーからは非表示になります。また、URLを意図的に公開しない限り偶然の発見はされにくくなりますが、URLを知っている人は誰でもアクセスできる点は変わりません。

HTMLにBasic認証を組み込むことも技術的には可能ですが、CodePenのサーバーはBasic認証ヘッダーを制御できないため、JSベースのフォームで代替するしかなく、ソースコードを見れば突破できてしまいます。試みる価値があるのは、内容が低機密でURLを偶然見つけられることだけを防ぎたい場合に限られます。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

できないこと

CodePenにはURLへの有効期限設定機能が存在しません。「1週間後には見れなくする」「プレゼン終了後に閉じる」という管理はすべて手動のペン設定変更に依存します。これを忘れると旧バージョンのレビューURLが半永続的にアクセス可能な状態になります。

誰がいつアクセスしたかのアクセスログも取れません。情報管理上の監査が必要な案件（コンプライアンス部門が関与するものや法的証拠が必要になり得るもの）では、ログが残らないCodePenの共有は使用を避けるべきです。

認証と期限の違い

CodePenの不足を補う実践的な方法は、CodePenでの制作と外部への共有を別ツールで行う分担です。HTMLを完成させたらエクスポートし、パスワード認証と期限設定を備えた共有サービスにアップロードします。この流れで認証・期限・アクセスログのすべてを補えます。

会社ドメイン認証を提供するサービスを使えば、「@取引先会社.co.jpのメールを持つ人だけが閲覧可能」というアクセス制御が実現します。案件ごとに許可ドメインを設定することで、複数クライアントが混在する業務でも閲覧権限を混同させずに管理できます。

• 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
• 特定の相手だけ: パスワードまたはメール認証を使う
• 会社内だけ: 会社ドメイン認証を検討する
• 短期レビュー: 期限を設定して古いURLを残さない

差し替え・レビュー運用

CodePenで修正を重ねた後、外部共有サービスへのアップロードを「差し替え」として運用するサイクルを決めておくと管理が楽になります。「コードが固まったらエクスポート→アップロード→URLをレビュアーに通知」という3ステップをテンプレートとして共有チームに共有しておくとよいでしょう。

レビュアーへの依頼時は観点を3点以内に絞ることを徹底してください。「フォームのバリデーションエラーメッセージは分かりやすいか」「CTAボタンはスクロールせずに見えるか」「会社ロゴの配置に違和感はないか」のように具体的に書くと、的確なフィードバックが返りやすくなります。

• 確認してほしい観点を3つ以内に絞る
• 期限と返信先を明記する
• 修正後も同じURLで見られるか伝える
• 最終版と途中版が混ざらないようタイトルを付ける

向いているケース早見表

認証・期限なしでCodePenを使い続けてよいのは、公開用のサンプルコードや技術記事の補足デモ、勉強会での発表資料など、広く開かれていることが価値になる場面です。フォーク・改変を歓迎するオープンな成果物の共有にも向いています。

それ以外の外部向けプレビュー共有には補完ツールが必要です。ギガサイト便のようなサービスであれば、HTMLのzipをドロップして3秒でパスワード付きURLが生成されるため、CodePenの不足を最小限の操作で補えます。認証・期限・差し替えの3機能をセットで提供しているサービスを選ぶと運用が一元化できます。