# はじめよう
このチュートリアルでは、はじめてのライブ壁紙を Fluxlay で作成し、デスクトップでプレビューします。
> ⚡ **手書きを省略したい方は** 公式の [Claude Code プラグイン](/ja/studio/developer/tutorials/with-claude-code.md)を使うと、作りたい壁紙を伝えるだけで足場作成から実装までを 1 つのプロンプトで完結できます。
## 前提条件
- [Node.js](https://nodejs.org/) v18 以降
- お好みのパッケージマネージャー（npm / pnpm / yarn / bun）
- [Fluxlay デスクトップアプリ](/download)がインストール済み
## プロジェクトの作成
新しいディレクトリを作成し、プロジェクトを初期化します。
```bash
mkdir my-wallpaper && cd my-wallpaper
```
必要な依存パッケージをインストールします。
## マニフェストの設定
プロジェクトルートに `fluxlay.yaml` を作成します。
```yaml title="fluxlay.yaml"
schemaVersion: 1
name: My First Wallpaper
slug: my-first-wallpaper
version: 0.1.0
kind: web
description: はじめての 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()]
});
```
## エントリーポイントの作成
`index.html` を作成します。
```html title="index.html"
```
`src/main.tsx` を作成します。
```tsx title="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 (
Hello, Fluxlay! ({count}s)
);
}
createRoot(document.getElementById("root")!).render(
);
```
## デスクトップでプレビュー
開発サーバーを起動します。
Fluxlay デスクトップアプリが開発サーバーを検出し、ホットリロード付きで壁紙を表示します。ファイルを保存するたびに壁紙が即座に更新されます。
## 次のステップ
ここから先は興味のあるテーマを選んでください。チュートリアル間に依存関係はないので、どの順番でも、片方だけでも構いません。
- [インタラクティブな壁紙](/ja/studio/developer/tutorials/interactive-wallpaper.md) — SDK のフックを使ってマウスの動きに反応する壁紙を作る。
- [シェル壁紙](/ja/studio/developer/tutorials/shell-wallpaper.md) — シェルコマンドでライブなシステム情報を表示する。
> 💡 **Tip**: 外部 API からデータを取得したい場合は [外部 API の取得 (CORS 回避)](/ja/studio/developer/how-to/development/fetch-external-api.md) も合わせてどうぞ。CSP の `network:` 宣言と、CORS を返さないエンドポイント向けの `proxiedFetch` の使い分けを解説しています。
手早く動かしたい場合は [GitHub の公式サンプル集](https://github.com/fluxlay/examples) も参考にどうぞ。クローンしてそのまま動作する実プロジェクトが揃っています。
完成したら[壁紙を公開する](/ja/studio/developer/tutorials/publish-wallpaper.md)で Fluxlay ストアに公開できます。