RandoSpark クリエイター向け アプリ登録マニュアル

最終更新：2026年10月15日 ／ 対象：外部URL（自分のサーバー・ホスティング）で動いているWebアプリを登録するクリエイター

RandoSpark内蔵のStudioでアプリを作る場合、この章の「事前準備」は不要です（7章参照）。

0. 登録の全体像

1. 事前準備 — アプリ側で「埋め込み起動」を許可する設定を確認・調整する（★ここでつまずく人が最も多い）
2. アカウント作成 — メールアドレス + @ハンドル（公開ID）
3. メールアドレスの確認（確認メールのリンクを開く）
4. アプリ情報の入力（/submit）→ 送信時に自動で「埋め込み起動できるか」をチェック
5. 運営の公開前審査を経て公開（自動チェックとは別に、運営が内容を確認してから公開されます）
6. 公開後：アイコン／スクリーンショットの追加、プロフィール編集など

1. 事前準備：あなたのアプリをRandoSpark内で起動できるようにする

RandoSparkでは、アプリ詳細ページ内の小さな画面（iframe）にあなたのアプリを直接表示して、ユーザーがRandoSparkを離れずにそのまま使える「埋め込み起動」が基本の体験です。

この埋め込み表示をあなたのサーバーが許可していない場合、新規の外部URL登録は登録自体ができません。（既存の公開済みアプリにのみ、埋め込み不可でも外部タブで開く救済が適用されます。新規登録では使えません）

1-1. 判定基準（自動チェックの中身）

送信ボタンを押した瞬間、RandoSparkのサーバーがあなたのアプリURLに実際にアクセスし、返ってきたレスポンスのHTTPヘッダーだけを見て次の2点を確認します。

どちらのヘッダーも送っていなければ自動的に「埋め込みOK」と判定されます。多くの静的ホスティング（Vercel／Netlify／ Cloudflare Pages／GitHub Pages など）は初期状態でどちらも送らないため、何もしなくても登録できるケースが大半です。 引っかかるのは主に、WordPressのセキュリティ系プラグインが自動付与する場合、自前のNginx/Apache設定で一括付与している場合、 企業向けCMS・ノーコードツールの「セキュリティ強化」設定です。

1-2. ★よくある誤解：HTMLに<meta>タグを埋め込んでも直りません

CSPは<meta http-equiv="Content-Security-Policy">タグでも設定できますが、RandoSparkの自動チェックはHTTPレスポンスヘッダーのみを見ます（HTMLの中身は一切読みません）。さらにX-Frame-Optionsはそもそも仕様上 metaタグでは設定できません。対応は必ずサーバー／ホスティング側のレスポンスヘッダー設定で行ってください。

1-3. 具体的な直し方（ホスティング別）

目的は次のどちらかです（どちらか一方で構いません。両方を同時に送っている場合は両方を満たす必要があります）。

• (A) X-Frame-Options ヘッダーを送らないようにする（または値を外す）
• (B) Content-Security-Policy に frame-ancestors https://randospark.com を追加する

Vercel（vercel.json）

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Content-Security-Policy", "value": "frame-ancestors 'self' https://randospark.com" }
      ]
    }
  ]
}

※ 既存の X-Frame-Options 設定がある場合はその行を削除してください。

Netlify（netlify.toml または _headers）

/*
  Content-Security-Policy: frame-ancestors 'self' https://randospark.com

Cloudflare Pages（_headers ファイルを public ルートに配置）

/*
  Content-Security-Policy: frame-ancestors 'self' https://randospark.com

Nginx

# X-Frame-Options は送らない（既存の add_header 行を削除）か、以下を追加
add_header Content-Security-Policy "frame-ancestors 'self' https://randospark.com" always;

Apache（.htaccess）

Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors 'self' https://randospark.com"

WordPress：クリックジャッキング対策プラグインの「X-Frame-Options」設定で SAMEORIGIN／DENY を 無効化するか、RandoSparkのオリジンをフレーム許可リストに追加してください。個別設定がなければサーバー側（上記Nginx/Apache例）で対応します。

1-4. 登録前に自分で確認する方法

ブラウザの開発者ツール → Networkタブ → 自分のアプリのトップページを開く → 最初のリクエストのResponse Headersでx-frame-options と content-security-policy を確認してください。ターミナルがあれば以下でも確認できます。

curl -sI https://あなたのアプリのURL/ | grep -i -E "x-frame-options|content-security-policy"

何も表示されなければ（＝両ヘッダーとも未設定）、基本的に埋め込みOKと判定されます。

1-5. 注意：iframe内の制限

RandoSparkの埋め込み起動はsandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"という制限付きのiframeで表示されます。通常のWebアプリ（フォーム送信、別ウィンドウでのOAuthログインなど）は問題なく動きますが、カメラ／マイクなど端末の権限を要求する機能は動作しない可能性があります。該当する場合は登録前に実機で確認してください。

2. アカウント作成

1. /signup から登録します。メールアドレス・パスワードに加え、@ハンドル（公開ID）が必須です （半角英小文字・数字・. _ - のみ、3〜30文字。一度決めると公開プロフィールURLになります）。
2. 登録後、確認メールが届きます（メール確認が完了するまでアプリの送信はできません）。

3. アプリ情報の入力（/submit）

4. 送信すると何が起きるか（審査について）

送信されたアプリは審査待ち状態になり、検索・カテゴリ一覧・おすすめなど、どの公開画面にも表示されません。 運営が内容を確認し、問題がなければ公開操作を行って初めて一般公開されます。クリエイター自身が審査待ち状態から 直接公開に切り替えることはできません。公開後は、通報が一定件数たまると自動的に非公開になり、運営が再確認する 仕組みが働きます（詳細は掲載基準参照）。

5. 公開後にできること

• アプリ編集画面からアイコン・スクリーンショットの追加/差し替え
• アプリURLの変更（変更すると埋め込み可否が再チェックされます。設定を変えてブロック条件を足すと、次回の定期再チェック時に外部起動扱いへ切り替わるので注意）
• 公開／非公開（下書き）の切り替え（初回公開後のみ）

6. トラブルシューティング

7. RandoSpark Studioでアプリを作る場合（補足）

自分でサーバーを持たず、RandoSpark内蔵のStudio機能でアプリ自体を作成する場合は、ホスティング環境がRandoSparkの管理下になるため、上記「事前準備」（ヘッダー設定）は一切不要で、常に埋め込みOKとして扱われます。

参考

• 本番ドメイン：https://randospark.com（frame-ancestors に許可する値はこちら）
• 掲載基準