# プロジェクトの作成
## kind を選ぶ
Fluxlay の壁紙はマニフェストで `kind` を必ず宣言します。やりたいことに応じてセットアップ手順が変わるため、まず以下から選んでください。
| やりたいこと | kind | セットアップ手順 |
| -------------------------------------- | ------- | ----------------------------------------------------------------------- |
| 静止画 1 枚を表示（GIF アニメ含む） | `image` | [画像壁紙の作成](/ja/studio/developer/how-to/setup/create-image-wallpaper.md) |
| 動画をループ再生 | `video` | [動画壁紙の作成](/ja/studio/developer/how-to/setup/create-video-wallpaper.md) |
| マウス・音声・システム情報に反応 | `web` | このガイド（以下） |
| カスタムプロパティでユーザーが変更可能 | `web` | このガイド（以下） |
以下は **Web 壁紙**（`kind: web`）を React/Vite で構築する手順です。
## 初期化
```bash
mkdir my-wallpaper && cd my-wallpaper
```
## 依存パッケージのインストール
## マニフェストの作成
`fluxlay.yaml` を作成します。
```yaml title="fluxlay.yaml"
schemaVersion: 1
name: My Wallpaper
slug: my-wallpaper
version: 0.1.0
kind: web
description: 壁紙の簡単な説明。
```
`slug` は Fluxlay ストア全体でユニークである必要があり、小文字、数字、ハイフンのみ使用できます。
## Vite 設定の作成
`vite.config.ts` を作成します。
```ts title="vite.config.ts"
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { fluxlay } from "@fluxlay/vite";
export default defineConfig({
plugins: [react(), fluxlay()]
});
```
`fluxlay()` プラグインはビルド設定（出力ディレクトリ、ミニファイ、コンソール除去）を自動的に構成します。
## エントリーファイルの作成
`index.html` を作成します。
```html title="index.html"
```
`src/main.tsx` を作成します。
```tsx title="src/main.tsx"
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
function Wallpaper() {
return {/* 壁紙のコンテンツ */};
}
createRoot(document.getElementById("root")!).render(
);
```
## スクリプトの追加
`package.json` に追加します。
```json title="package.json"
{
"scripts": {
"dev": "fluxlay dev",
"build": "fluxlay build",
"publish": "fluxlay publish"
}
}
```
## プロジェクト構成