トップに戻る

クリエイター向けの詳細

開発キットをAIエージェントに読み込ませて「◯◯ができるアプリを作って」とお願いしてみよう!

動作する技術

プログラムは HTML、CSS、JavaScript のみ動作します。投稿したプログラムはNext.jsのページとして配信されるので、Next.jsのクライアントサイドレンダリング(CSR)で書くのがおすすめです。

外部との通信について

プログラムから当サービス以外の外部との通信(インターネットアクセス、外部APIの呼び出しなど)はできません。プログラムは当サービス内のサンドボックス環境で動作するため、外部通信は親フレーム(当サービス)への postMessage のみ許可されています。

会員ごとの入力値の保存について

当サービスで会員を判別しているため、各会員ごとに入力した内容を保存することができます。会員がプログラム内で入力したデータは、その会員に紐づけて保存され、次回アクセス時にも引き継がれます。個人情報を入力させることは利用規約で禁止しております。

画面の縦横比

プログラム実行画面(iframe)の縦横比は 16:10(横:縦)です。

postMessage で許容している JSON

プログラム詳細ページで実行されるプログラムは、親フレームへ postMessage で以下の形式の JSON のみ送信できます。api_id: 1・2 は会員別情報の取得・更新、api_id: 3 はワーカー上でのコード実行、api_id: 4 は閲覧ユーザーのログイン状態の取得に対応します。

会員別情報の取得(api_id: 1)

content は null である必要があります。結果が postMessage で返されます。

{"api_id": 1, "content": null}

成功時のレスポンス例:

{"content": {"score": 100, "level": 1}}

会員別情報の更新(api_id: 2)

content は任意の型のjsonオブジェクトにしてください。結果が postMessage で返されます。

{"api_id": 2, "content": {"score": 100, "level": 1}}

成功時のレスポンス例:

{"content": {"score": 100, "level": 1}}

コード実行(api_id: 3)

content.code に記載されたコードをWorkerというもので実行します。これを使わずに重い処理をして画面が重くなるとプログラムが公開停止になる場合があるので、重い処理を行うときにこれを使うことを推奨します。

{"api_id": 3, "content": {"code": "return 2 + 3"}}

成功時のレスポンス例:

{"api_id": 3, "content": {"result": 5}}

ログイン状態の取得(api_id: 4)

content は null である必要があります。レスポンスでは閲覧ユーザーのログイン状態が返されます。項目は今後追加される可能性があります。

{"api_id": 4, "content": null}

成功時のレスポンス例:

{"content": {"isLoggedIn": true, "is_privacy_mode": false}}

上記以外の形式では { "error": true, "message": "invalid_request" } が返されます。

エラーレスポンスの内容

許容されない形式で送信した場合:

{"error": true, "message": "invalid_request"}

ネットワークエラー時:

{"error": true, "status": 500, "message": "network_error"}

閲覧ユーザーが未ログインで、かつプライバシーモードが OFF のときに api_id が 1 または 2 の postMessage を送った場合:

{"error": true, "status": 401, "message": "login_required"}

ユーザーがプライバシーモードを ON にしているときにapi_idが1または2のpostMessageを送った場合:

{"error": true, "status": 403, "message": "privacy_mode"}
開発キットはこちら
クリエイター向けの詳細 | ProgEnjoy