# シェルコマンドの実行

Fluxlay 壁紙は `fluxlay.yaml` で宣言されたシェルコマンドを実行し、出力を表示できます。

## コマンドの宣言

まず `fluxlay.yaml` にコマンドを追加します。

```yaml title="fluxlay.yaml"
shell:
  hostname:
    run: hostname
    reason: コンピュータ名を表示します。
    required:
      - hostname
```

## ターミナルに表示

`useShell` と `useTerminal` を組み合わせてスタイル付きのターミナル出力を表示します。

```tsx
import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";

function Monitor() {
  const { terminalRef, instance } = useTerminal({
    theme: TerminalThemes.nord
  });

  useShell("hostname", {
    terminal: instance,
    refreshInterval: 10000
  });

  return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
}
```

## テキストとして表示

`runShell` を使って生のテキスト出力を取得します。

```tsx
import { useEffect, useState } from "react";
import { runShell } from "@fluxlay/react";

function Hostname() {
  const [name, setName] = useState("");

  useEffect(() => {
    runShell("hostname").then(result => {
      if (result.success) setName(result.stdout.trim());
    });
  }, []);

  return <p>{name}</p>;
}
```

## ネットワークアクセス

コマンドがネットワークアクセスを必要とする場合、`network` セクションで宣言します。

```yaml title="fluxlay.yaml"
network:
  - origin: https://api.example.com
    reason: データの表示に使用します。
```

詳細は [useShell リファレンス](/ja/studio/developer/reference/sdk/use-shell.md)と[マニフェストリファレンス](/ja/studio/developer/reference/cli/manifest.md)を参照してください。