できること
CodeSandboxのプレビューURLはログイン不要でアクセスでき、ReactやVueなどのフレームワークを使ったUIも動作します。社内のデザインレビューであれば、URLをSlackに投稿するだけで即座に確認してもらえます。スマートフォンのブラウザでも開けるため、モバイル表示の崩れを実機で確認するのも容易です。
CodeSandboxにはコードのフォーク機能があるため、レビュアーが改善案をコードで提示するというコラボレーションも可能です。エンジニア同士の技術的なレビューでは、コメントと合わせてコードの変更提案をURL経由でやり取りする使い方ができます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
できないこと
CodeSandboxのPublicプロジェクトには認証機能がなく、URLを知っている誰もがアクセスできます。社外のクライアントやパートナーにURLを送ると、転送先の第三者も同じページを見ることができ、情報漏えいリスクを制御できません。特に未発表UIや競合情報が含まれる素材には不適切です。
CodeSandboxはブラウザIDEであるため、プレビュー環境の安定性がクライアントの環境に依存します。特定のブラウザや企業のファイアウォール環境でブロックされるケースがあり、「クライアントが開けない」というトラブルが社外レビューで発生することがあります。期限設定機能もなく、URLは削除か非公開にするまで有効なままです。
認証と期限の違い
CodeSandboxと認証付き共有サービスの最大の違いは、アクセスコントロールの有無です。CodeSandboxのPublicプロジェクトはインターネット上に公開されており、誰でもアクセスできます。ギガサイト便のようなサービスでパスワードや会社ドメイン認証を設定すると、指定した条件を満たす人だけに閲覧を限定できます。
期限については、CodeSandboxは手動でPrivateに変更するまで公開が続きます。認証付き共有サービスでは1日・7日・30日などの期限を設定でき、期限後はURLが自動で無効になります。「この資料はキャンペーン本番公開まで社外秘」という要件を自動で満たせるのは、期限機能を持つサービスだけです。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
差し替え・レビュー運用
CodeSandboxでコードを修正するとプレビューが即時更新されます。社内レビューではこのリアルタイム性が便利ですが、社外クライアントが確認中に画面が変わるとクレームになります。レビューに出す版を確定させるには、コードの変更を止めるかビルド済みファイルを別サービスで共有する必要があります。
同URLで差し替えられる共有サービスを使えば、修正のたびに新URLを通知する手間がなくなります。「返信は〇〇日までにこのアドレスへ」という期限と連絡先を共有メッセージに含め、修正が入ったら「本日v2に更新しました」と一言添えるだけで運用できます。最終承認版と修正途中版が混在しないよう、版の識別ルールを最初に決めておくことが重要です。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
向いているケース早見表
CodeSandboxが向いているのは、フレームワークを使ったUIコンポーネントの技術確認や、オープンソースコードのデモです。コードそのものを見せる必要がある場面、相手がエンジニアでコードのフォークによるコラボが必要な場面では代替が難しいツールです。
認証付き共有サービスが向いているのは、静的HTMLやZIPで納品できる成果物を社外クライアントにレビューしてもらう場面です。LPのデザインカンプHTML、メールテンプレートのプレビュー、スタイルガイドなど、コードの実行環境が不要なコンテンツはギガサイト便のほうがシンプルに共有できます。
よくある質問
CodeSandboxのプレビューURLは検索エンジンにインデックスされますか?
CodeSandboxのPublicプロジェクトはPublicと明示されているためクローラーにアクセスされる可能性があります。未発表コンテンツが含まれる場合は、Privateプロジェクトにするかビルドして認証付きサービスで共有することを推奨します。
CodeSandboxで企業のファイアウォール環境でアクセスできなかった場合の代替手段は?
ビルドした静的HTMLをZIPにまとめてギガサイト便にアップロードすれば、WebContainerへの依存がなくなり一般的なHTTPSサーバーから配信されます。ファイアウォールの制限を受けにくい通常のWebページとして表示できます。
CodeSandboxのプレビューとギガサイト便の共有URLでは表示速度に差がありますか?
CodeSandboxのプレビューはWebContainer起動のオーバーヘッドがあり初回表示に数秒かかることがあります。ギガサイト便はCloudflare上で静的ファイルを配信するため初回表示が速く、非技術者のクライアントが確認する場面での印象が良好です。