FLUXLAY

はじめよう

このチュートリアルでは、はじめてのライブ壁紙を Fluxlay で作成し、デスクトップでプレビューします。

⚡ 手書きを省略したい方は 公式の Claude Code プラグインを使うと、作りたい壁紙を伝えるだけで足場作成から実装までを 1 つのプロンプトで完結できます。

前提条件

プロジェクトの作成

新しいディレクトリを作成し、プロジェクトを初期化します。

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

マニフェストの設定

プロジェクトルートに fluxlay.yaml を作成します。

fluxlay.yaml
schemaVersion: 1
name: My First Wallpaper
slug: my-first-wallpaper
version: 0.1.0
kind: web
description: はじめての 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()]
});

エントリーポイントの作成

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, useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
 
function Wallpaper() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
 
  return (
    <main
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
        width: "100vw",
        backgroundColor: "#1a1a2e",
        color: "#e0e0e0",
        fontSize: "2rem",
        fontFamily: "sans-serif"
      }}
    >
      Hello, Fluxlay! ({count}s)
    </main>
  );
}
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Wallpaper />
  </StrictMode>
);

デスクトップでプレビュー

開発サーバーを起動します。

pnpm fluxlay dev

Fluxlay デスクトップアプリが開発サーバーを検出し、ホットリロード付きで壁紙を表示します。ファイルを保存するたびに壁紙が即座に更新されます。

次のステップ

ここから先は興味のあるテーマを選んでください。チュートリアル間に依存関係はないので、どの順番でも、片方だけでも構いません。

💡 Tip: 外部 API からデータを取得したい場合は 外部 API の取得 (CORS 回避) も合わせてどうぞ。CSP の network: 宣言と、CORS を返さないエンドポイント向けの proxiedFetch の使い分けを解説しています。

手早く動かしたい場合は GitHub の公式サンプル集 も参考にどうぞ。クローンしてそのまま動作する実プロジェクトが揃っています。

完成したら壁紙を公開するで Fluxlay ストアに公開できます。