---
title: "スターターテンプレート"
description: "スターターテンプレートは、Webアプリ（`web-app`）、小さなゲーム5つ、サーバーのプログラムの雛形（`functions-starter`）です。"
url: "/ja/docs/templates/"
lang: ja
index: "/ja/llms.txt"
---
# スターターテンプレート

スターターテンプレートは、Webアプリ（`web-app`）、小さなゲーム5つ、サーバーのプログラムの雛形（`functions-starter`）です。テンプレートがなくても使えます。自分のプロジェクトのフォルダで`kumodeck init`を実行するか、AIエージェントに頼んで整えてください。

## Webアプリ

`web-app`は、多くのAIツールが作るのと同じ形（**React + Vite + TypeScript + Tailwind**）の、小さな自分専用のメモアプリです。KUMODeckのログイン（まずゲスト、あとからメール）、自分のサーバーのプログラムとデータベース（Functions + D1。メモは本人にしか見えません）、共有・再読み込みできる本物のページのURL（`/notes/123`。`"web": { "spaFallback": true }`）が入っています。

```sh
kumodeck create my-app --template web-app && cd my-app
kumodeck init                                    # 公開鍵を public/kumo-config.js に書き込みます
npm install && kumodeck config push
npm run build                                   # → dist/（kumo.json に deployDir "dist" が保存されています）
kumodeck deploy --env development
```

サーバーのプログラム（`kumodeck functions deploy`）と手元での開発は、テンプレートの`README.md`と`AGENTS.md`にあります。

## ゲーム

コピーして、作り変えて、コマンド1つで公開できる、完成した遊べるゲームです。どれもゲストログイン、自己ベストを覚えるクラウドセーブ、挑戦状つきの**Share on X**ボタンを使っていて、オフラインでも動き続けます。ランキングが欲しくなったらAIエージェント（Claude Code・Codex・Cursorなど）に頼んでください。各テンプレートに入っているランキングのSkillが、自分のデータベースとFunctionsの上に組み立てます。

| テンプレート | エンジン | ゲーム | マルチプレイ |
|---|---|---|---|
| `vanilla-canvas` | なし（素の`<canvas>`） | Star Catch — 30秒のアーケード | — |
| `phaser` | Phaser 4.2.1 | Dune Runner — エンドレスラン | — |
| `pixi` | PixiJS 8.21.0 | Bubble Pop — コンボタップ | — |
| `three` | three.js 0.186.1 | Orb Garden — 3Dでボールを転がして集める | 共有の庭（最大8人） |
| `multiplayer-starter` | なし | Cursor Party — ロビー、部屋コード、位置の同期、共有状態 | あり |

ゲームのテンプレートは**ビルド不要**です。エンジンはバージョンを固定したCDNのURLから読み込み、`public/`フォルダがそのままサイトになります。

## 使い方

```sh
kumodeck create my-runner --template phaser && cd my-runner
kumodeck init                                    # 公開鍵を public/kumo-config.js に書き込みます
kumodeck config push --env development
kumodeck deploy --env development                # kumo.json に deployDir "public" が保存されています
kumodeck share on                                # 任意: Xのカードと共有リンク
```

`--template`を省くと`vanilla-canvas`になります。`create`はCLIに同梱されたテンプレートからコピーするので、オフラインでも動き、サーバーには触りません。プロジェクトを作るのは次の`init`です。ログイン済みなら`kumodeck create my-game --init`で両方をまとめて実行できます。

`kumo.config.json`は`public/`の**外**に置くので、プロジェクトの詳細がプレイヤーに配信されることはありません。バンドラーを追加した場合は、その出力フォルダをデプロイします（`kumodeck deploy dist`、または`kumo.json`の`deployDir`を変更）。

## 構成

```
my-game/
  kumo.config.json    マスターデータ（デプロイしない）
  README.md
  AGENTS.md           AIのコーディングアシスタント向けの説明（コマンド・規則・SDKの例。デプロイしない）
  CLAUDE.md           `@AGENTS.md`の1行だけ。Claude Codeも同じファイルを読む
  GEMINI.md           `@./AGENTS.md`の1行だけ。Gemini CLIも同じファイルを読む
  .agents/skills/     AIエージェント向けのSkill（レシピ）。一覧はINDEX.md（例: leaderboard/SKILL.md。デプロイしない）
  .claude/skills/     同じSkill（Claude Codeが見る所）
  public/             そのままデプロイする
    index.html
    kumo-boot.js      APIを見つけ、SDKを読み込み、ログインする。プレイを止めない
    kumo-config.js    公開してよい: apiUrl + 公開鍵
    game.js
```

`kumo-config.js`には**環境ごとに1本ずつ公開鍵**を置きます。`REPLACE_ME`が残っている間は`kumodeck init`が書き込みます（自分で書き換えたファイルには触りません）。`kumo-boot.js`は、`<slug>--dev`のURLとlocalhostではdevelopmentの鍵を、それ以外ではproductionの鍵を選びます。1本だけの`projectKey: 'pk_…'`（以前の書き方）も引き続き使えます。

```js public/kumo-config.js
window.KUMO_CONFIG = {
  apiUrl: '',                                  // '' = ページを配信している場所（kumodeck deploy ならこれで正しい）
  projectKeys: {
    development: 'pk_dev_…',
    production: 'pk_live_…'                    // 公開鍵なのでブラウザに置いてよい。sk_ の鍵は絶対に置かない
  }
};
```

`AGENTS.md`は、アシスタント（Claude Code、Codex、Cursorなど）にゲームでの作業のしかたを伝えます。打つコマンド、アカウントはあなたがターミナルで作ること（アシスタントはパスワードを扱わない）、プレイヤーにバックエンドの名前を見せないこと、などです。Skill（一覧は`INDEX.md`）への案内も入っています。同じものが`.agents/skills/`（Codex・Cursorなど多くのエージェントが見る所）と`.claude/skills/`（Claude Code）にあります。ほかのファイルと同じように自由に書き換えてください。

## Share on X

どのテンプレートにも、結果画面に**Share on X**ボタンがあります。プレイヤーのスコアを付けて`kumo.share({ kind: 'challenge', score })`を呼びます。その投稿からゲームを開いた人には、メニューに「Challenge: beat N!」が出ます（`kumo.share.incoming()`）。オフラインやシェアが OFF のときも、共有IDが付かないだけでXの投稿画面は開きます。**`kumo.config.json`では何も ON にしていません**。カード画像や共有リンクが欲しくなったら`kumodeck share on`を実行してください。[Xでのシェア](/ja/docs/guides/sharing/index.md)を参照してください。

どのテンプレートでも使えるURLフラグ: `?player=2`（同じブラウザで2人目のゲスト。マルチプレイを自分相手に試せます）、`?offline=1`、`kumo-config.js`を上書きする`?api=…&key=…`。

## サーバーのプログラム

`functions-starter`はゲームではなく、アプリにもゲームにも使える、自分のサーバーのプログラムとSQLデータベースの出発点です。呼び出した利用者（APIではplayer）を確認し、自分のデータベースに書き込み、1時間ごとのジョブを動かす小さなAPIです。[Functions](/ja/docs/guides/functions/index.md)を参照してください。