プロジェクトの作成

kind を選ぶ

Fluxlay の壁紙はマニフェストで kind を必ず宣言します。やりたいことに応じてセットアップ手順が変わるため、まず以下から選んでください。

やりたいこと	kind	セットアップ手順
静止画 1 枚を表示（GIF アニメ含む）	`image`	画像壁紙の作成
動画をループ再生	`video`	動画壁紙の作成
マウス・音声・システム情報に反応	`web`	このガイド（以下）
カスタムプロパティでユーザーが変更可能	`web`	このガイド（以下）

以下は Web 壁紙（kind: web）を React/Vite で構築する手順です。

初期化

mkdir my-wallpaper && cd my-wallpaper

pnpm init

依存パッケージのインストール

pnpm add react react-dom @fluxlay/react

pnpm add -D @fluxlay/cli @fluxlay/vite @vitejs/plugin-react vite typescript

マニフェストの作成

fluxlay.yaml を作成します。

fluxlay.yaml

schemaVersion: 1
name: My Wallpaper
slug: my-wallpaper
version: 0.1.0
kind: web
description: 壁紙の簡単な説明。

slug は Fluxlay ストア全体でユニークである必要があり、小文字、数字、ハイフンのみ使用できます。

Vite 設定の作成

vite.config.ts を作成します。

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 を作成します。

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

src/main.tsx を作成します。

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
 
function Wallpaper() {
  return <main style={{ height: "100vh", width: "100vw", backgroundColor: "#1a1a2e" }}>{/* 壁紙のコンテンツ */}</main>;
}
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Wallpaper />
  </StrictMode>
);

スクリプトの追加

package.json に追加します。

package.json

{
  "scripts": {
    "dev": "fluxlay dev",
    "build": "fluxlay build",
    "publish": "fluxlay publish"
  }
}

プロジェクト構成

fluxlay.yaml
index.html
package.json
vite.config.ts
main.tsx