Wix KickstartX Challenge 2026 — 完全版Writeup

結果：200/200（100%） — トークン：WKX-9245FA70-200 日付：2026年3月24日

1. 発見と偵察

チャレンジの発表

LinkedInの投稿で、Wix KickstartX（ジュニア開発者プログラム）向けの特別なチャレンジが発表されました。ルール：

30分、挑戦は1回のみ
上位10名の最高スコアが試験ステージに直接進出
提供されたリンクは2つ：wix-kickstartx-challenge-2026.base44.app/ と wixkickstart.com

チャレンジのエントリーポイントを探る

メインサイトwixkickstart.comはWixがホストするサイトです（WixのThunderboltエンジンによるサーバーサイドレンダリング）。標準のcurlはJavaScriptのシェルのみを返し、実際のコンテンツは含まれません。レンダリングにはヘッドレスChromiumを使用しました：

chromium --headless --disable-gpu --no-sandbox --virtual-time-budget=10000 \
  --dump-dom "https://wixkickstart.com" > /tmp/wix_rendered.html

レンダリングされたDOMから、埋め込まれたiframeを抽出しました：

これはp5.jsによるパーティクルアニメーション（ヒーローセクションの見た目を飾るもの）であり、チャレンジ本体ではありませんでした。実際のチャレンジはBase44アプリ上にあります。

2. チャレンジアプリのリバースエンジニアリング

プラットフォーム：Base44

チャレンジはBase44（ローコードアプリプラットフォーム）上で動作します。このアプリはシングルページのReactアプリケーションで、すべてのロジックが1つのJSバンドルにまとめられています：

https://wix-kickstartx-challenge-2026.base44.app/assets/index-oTG160r9.js

サイズ： 410,809バイト（minified React + アプリロジック + Base44 SDK）

APIサーフェスの抽出

JSバンドルをgrepすることで、API全体をマッピングしました：

関数	目的
`startGame`	ゲームセッションを作成し、200枚の画像と200件の説明文を返す
`scoreGame`	`{matches: {}, sessionId: ""}`を受け取り、`{correctCount: N}`を返す
`generateToken`	sessionIdを受け取り、完了トークンを返す
`getLeaderboard`	上位スコアを返す
`saveNickname`	リーダーボード用の表示名を保存する

エンティティ： GameSession、Participant

API URLパターン：

POST /api/apps/{appId}/functions/{functionName}

アプリID： 69aea07cbcb9a3dd1039a58d

バンドル内の主要定数

const or = 1800;   // Time limit: 1800 seconds (30 minutes)
const rm = 200;    // Total items: 200 image-description pairs

JSON一括送信の発見

重要な発見：このアプリにはJSON一括送信モードがあります。minifyされたソースより：

function Ik({onSubmit:r, onClose:n}) {
    // ...
    h = JSON.parse(s)  // Parse JSON input
    // Validation: must be object like { "IMG-001": "DESC-042", ... }
    r(h)  // Submit all matches at once
}

モーダル内のプレースホルダーテキスト：

{
  "IMG-001": "DESC-042",
  "IMG-002": "DESC-017",
  ...
}

つまり、UI上で200回クリックする必要はなく、200件すべてのマッチのJSONマッピングをプログラム的に送信できます。

認証フロー

Base44 SDKはJWT認証を使用します：

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

JWTペイロードには以下が含まれます：

{
  "sub": "[email protected]",
  "exp": 1782162460,
  "iat": 1774386460
}

すべてのAPI呼び出しに必要なヘッダー：

Content-Type: application/json
Authorization: Bearer {jwt_token}
X-App-Id: 69aea07cbcb9a3dd1039a58d
Base44-Functions-Version: prod
X-Origin-URL: https://wix-kickstartx-challenge-2026.base44.app/

3. ゲームデータの理解

startGame レスポンス

POST /api/apps/69aea07cbcb9a3dd1039a58d/functions/startGame
Status: 200
Transferred: 62.87 kB compressed (2.20 MB decompressed)
Content-Encoding: br (Brotli)

レスポンス構造：

{
  "status": "active",
  "sessionId": "69c2fd218e5b26f307c941c9",
  "startedAt": "2026-03-24T21:07:45.101Z",
  "imageOrder": ["IMG-154", "IMG-102", ...],   // 200 items (display order)
  "descOrder": ["DESC-125", "DESC-109", ...],  // 200 items (display order)
  "imagesData": { "IMG-001": "data:image/svg+xml;base64,...", ... },  // 200 SVGs
  "descriptionsData": { "DESC-105": "milky field, overlaid with...", ... }  // 200 texts
}

画像形式：インラインSVG（base64エンコード）

各画像は200x200のSVGで、以下を含みます：

背景グラデーション（ライトまたはダークテーマ）
オプションのオーバーレイパターン（線、点、リングなど）
特定の色、サイズ、不透明度、回転、位置を持つ幾何学シェイプ

デコードされたSVGの例（IMG-001）：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="bg" ...>
      <stop offset="0%" stop-color="#f5f0eb"/>
      <stop offset="100%" stop-color="#e8e0d5"/>
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#bg)"/>
  <!-- Optional overlay lines/dots/rings here -->
  <polygon points="..." fill="#E2725B" transform="translate(128.6,185.7) rotate(90)"
           style="opacity:0.5;filter:drop-shadow(...)"/>
  <!-- More shapes... -->
</svg>

説明文の形式：構造化された自然言語

各説明文は厳密なパターンに従います：

{background} field[, overlaid with {overlay}]. {N} elements total:
{size} {opacity} {color} {shape} ({rotation}, at {position}) ·
{size} {opacity} {color} {shape} ({rotation}, at {position}) · ...

例：

milky field, overlaid with tilted cross-lines. 10 elements total:
minuscule nearly solid dim gray pike (steeply angled, at center inner-left) ·
substantial solid azure pike (diagonal, at top center) · ...

4. 自動ソルバーの構築

ステップ1：すべての定数をマッピングする

SVGのプロパティを説明文の語彙に対応付ける必要がありました。正確な対応を見つけるには、200件すべての画像と200件すべての説明文を分析する必要がありました。

背景のマッピング（12タイプ）

両側の出現回数を数えることで、1:1のマッピングを確立しました：

SVGグラデーション開始色	件数	説明語	件数
`#0a1628`	28	`pitch`	28
`#eef2f7`	20	`frosted`	20
`#0d0d0d`	19	`tenebrous`	19
`#fef9f0`	18	`pearlescent`	18
`#1e0a2e`	18	`nocturnal`	18
`#0a1a0a`	17	`midnight`	17
`#1a0a0a`	15	`inky`	15
`#f5f0eb`	14	`milky`	14
`#f7f3ee`	14	`ethereal`	14
`#f0f0f0`	14	`radiant`	14
`#f0f7f4`	13	`glowing`	13
`#1a1a2e`	10	`somber`	10

方法： 200件すべてのSVGでユニークなグラデーション開始色を数え、200件すべての説明文でユニークな最初の単語を数え、件数で照合します。

オーバーレイのマッピング（7タイプ）

SVGのオーバーレイはタイプによって実装方法が異なります：

SVGパターン	検出方法	件数	説明名	件数
`<line>` elements, horizontal (`dy=0`)	x1,y1,x2,y2をチェック	35	`striped overlay`	35
`<line>` elements, vertical (`dx=0`)	x1,y1,x2,y2をチェック	34	`lattice pattern`	34
`<circle>` with `opacity="0.06"` (dots)	低不透明度の円を数える	30	`stippled layer`	30
No overlay elements at all	線も背景シェイプもない	28	(none)	28
`<line>` elements, diagonal	傾きの方向をチェック	27	`tilted cross-lines`	27
Small `<polygon>`/`<path>` with `opacity="0.06"`	低不透明度属性のシェイプ	25	`arrow-band texture`	25
`<circle>` with `fill="none" stroke="#888"`	ストロークのみの円	21	`ringed pattern`	21

重要な洞察： 背景パターンの要素はopacityをXMLの属性として使用します（例：opacity="0.06"）。一方、前景シェイプはopacityをstyle属性内で使用します（例：style="opacity:0.7"）。この区別は、背景パターンと実際のシェイプを分離するうえで決定的に重要でした。

色のマッピング（28色）

200件すべてのSVGは、正確に28種類のユニークなhexフィル色を使用しています。200件すべての説明文は、正確に28種類のユニークな色名を使用しています。

Hex	説明名	Hex	説明名
`#708090`	blue-gray	`#cd7f32`	brass
`#f5f5f5`	near white	`#dc143c`	fiery red
`#00bcd4`	electric cyan	`#2196f3`	azure
`#ff6b6b`	salmon pink	`#228b22`	rich green
`#98ff98`	pale green	`#b0b0b0`	platinum
`#0f52ba`	deep sapphire	`#800020`	oxblood
`#ff8c00`	deep orange	`#4b0082`	dark purple
`#e2725b`	terra rosa	`#ffbf00`	marigold
`#b7410e`	russet	`#ff69b4`	candy pink
`#ffd700`	bright gold	`#c0c0c0`	tin
`#6b8e23`	moss	`#008080`	deep teal
`#40e0d0`	pale teal	`#0047ab`	royal blue
`#e34234`	burnt sienna	`#a0522d`	deep red
`#4a4a4a`	dim gray	`#36454f`	dark gray

シェイプタイプのマッピング（10タイプ）

SVG要素	検出ロジック	説明名
`<polygon>` 3 vertices	スペース区切りの座標ペアを数える	`pike`
`<polygon>` 4 vertices		`tilted square`
`<polygon>` 5 vertices		`quint form`
`<polygon>` 6 vertices		`bee cell`
`<polygon>` 10 vertices		`asterisk`
`<rect>` (non-background)	width/heightを持ち、200x200ではない	`tilted square`
`<circle>`	タグ名	`disc`
`<path>` with `fill-rule="evenodd"`	2つの同心円弧パス	`donut`
`<path>` with single arc + Z	半円のパス	`half-disc`
`<path>` with 6+ L commands	十字／プラス形状	`crosshair`
`<path>` with 3-5 L commands	矢印状のシェイプ	`pointer`

サイズのマッピング

原点からのシェイプ頂点の最大半径に基づく：

半径の範囲	説明名
0–12	`minuscule`
13–16	`modest`
17–20	`mid-sized`
21–25	`substantial`
26+	`massive`

不透明度のマッピング

SVGのopacity値	説明名
1.0	`solid`
0.85	`nearly solid`
0.7	`semi-transparent`
0.5	`faint`

wix-kickstartx-challenge-writeup

人気