公開したページが正しく表示されないとき

公開は成功したのにページが真っ白になる、画像やスタイルが表示されない、ページ移動後の再読み込みで404になる場合は、ファイルの参照方法と公開画面の制限を確認します。

まず確認する

1. マイページで対象のロールを選びます。
2. 状態が「公開中」であることを確認します。
3. 「プレビューを開く ↗」を押します。
4. ブラウザの開発者ツールを開き、ConsoleのCSPエラーとNetworkの404を確認します。

状態が「期限切れ」または「削除済み」の場合、その共有URLは復元できません。必要なら新しいロールとして公開します。

CSS、画像、JavaScriptが404になる

RORではファイル名の大文字・小文字を区別します。HTMLにassets/Logo.svgと書いた場合、実際の名前もLogo.svgである必要があります。手元の環境で動いていても、logo.svgでは別ファイルとして扱われます。

同じロール内のファイルは、次のような相対パスで参照することをおすすめします。

<link rel="stylesheet" href="./styles.css">
<img src="./assets/hero.webp" alt="">
<script type="module" src="./app.js"></script>

CSS内のurl(...)やJavaScriptのfetch(...)も、実際に同梱したファイルへの相対パスにします。

外部CDNやAPIが読み込めない

公開画面では、外部CDN、外部APIへのfetch、外部画像、外部Webフォントなど、主要な外部読み込みが制限されます。外部URLへ依存するコードは、RORで正しく動きません。

• CSSやJavaScriptはビルドして同梱する
• 画像とフォントをダウンロードして同梱する
• fetch("./data.json")のように、同じロール内のJSONを使う
• Tailwind CDNではなく、生成済みCSSを使う

iframe、Worker、Service Worker、外部フォーム送信、ポップアップなども制限されます。見た目だけのフォームは、JavaScriptで送信を止め、画面内だけで完結させてください。

これらは公開物の一般的な動作を制限する仕組みであり、すべてのブラウザで外部通信が完全にゼロになることを保証するものではありません。HTML自体に外部URLへの参照や遷移を含めない構成にしてください。

Reactなどのソースを公開した

RORはjsx、ts、tsx、scssを変換せず、npm installや開発サーバーも実行しません。ローカルでビルドし、生成されたdistまたはbuildの中身を公開してください。

ページ移動後の再読み込みで404になる

RORにはSPA fallbackがありません。たとえば/aboutを開いたとき、RORが自動でindex.htmlを返すことはありません。

次のどちらかに変更します。

• about.htmlなど、移動先に対応する実ファイルを同梱する
• https://.../#aboutのようなハッシュルートを使う

クライアント側ルーターを使う場合は、History APIによるパスではなくhash routeへ設定してください。

合言葉を入力しても開けない

「合言葉が違います」と表示された場合は、文字の大文字・小文字や全角・半角を確認します。合言葉を忘れた場合、公開者はロールの詳細画面から新しい合言葉へ変更できます。