> ## Documentation Index
> Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# mod のインターフェースギャラリー
> Claude Code の mod が描画できるインターフェース要素（テキスト、ボタン、フィールド、Markdown、コード、差分など）を、サンプルコードとターミナルのスクリーンショットで確認できます。
mod は要素を組み合わせてインターフェースを描画します。要素には、テキスト、ボックス、ボタン、フィールドのほか、コンテンツを整形してくれるものがいくつかあります。このページのサンプルは要素を描画するコードを示しており、ほとんどにはターミナルのペインに表示された結果のスクリーンショットが付いているため、見た目で要素を選べます。
描画の仕組みを学ぶには、まず [インターフェースに描画する](/docs/ja/plugins/mods/interface) をお読みください。主なプロパティと、各要素を描画するアプリについては [要素リファレンス](/docs/ja/plugins/mods/reference#elements) を参照してください。すべてのプロパティは [型宣言](/docs/ja/plugins/mods/create#get-the-types-for-your-build) に記載されています。
サンプルを試す
このページのサンプルはスニペットであり、mod 全体ではありません。それぞれが 1 つの要素と、その中に入れ子になったもののコードです。
サンプルを自分のターミナルで確認するには、以下の手順で小さな mod を作成し、そこにサンプルを貼り付けます。この mod は `/gallery` コマンドを追加し、このコマンドがペインを開いてそこにサンプルを描画します。[ペイン](/docs/ja/plugins/mods/interface#pick-where-to-draw) は、幅の広いフルスクリーンのターミナルではトランスクリプトの横に表示されるサイドバーで、それ以外ではプロンプトの上に表示される枠付きの領域です。
`gallery` という名前のディレクトリを作成し、その中に `.claude-plugin` ディレクトリと `hooks` ディレクトリを作成します。各ファイルについては [mod を作成する](/docs/ja/plugins/mods/create#write-a-mod-yourself) で説明しています。
マニフェストを `gallery/.claude-plugin/plugin.json` として保存します。
```json gallery/.claude-plugin/plugin.json theme={null}
{
"name": "gallery",
"version": "0.1.0",
"description": "Opens a pane that draws one sample",
"author": { "name": "Your Name" }
}
```
`gallery/hooks/hooks.json` でエントリポイントを指定します。
```json gallery/hooks/hooks.json theme={null}
{
"modules": ["./register.js"]
}
```
コードを `gallery/hooks/register.js` として保存します。これはペインを開く `/gallery` コマンドを追加し、そのペインに `Plain text` を描画します。
```javascript gallery/hooks/register.js theme={null}
// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'
// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}
export function register(on) {
on('session.start', async ($, e, next) => {
await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
return next(e)
})
on('command.run', { command: 'gallery' }, async ($) => {
await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
return {}
})
on('ui.render', { component: 'Pane' }, async ($, e, next) => {
if (e.requestId !== 'gallery') return next(e)
const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
// Replace the element after return with a sample
return Text({ children: ['Plain text'] })
})
}
```
シェルで、`gallery` を含むディレクトリから Claude Code を起動します。
```bash theme={null}
claude --plugin-dir ./gallery
```
Claude Code のプロンプトで `/gallery` を実行します。`Plain text` が表示されたペインが開きます。
このページからサンプルをコピーします。`register.js` で、`return` の後に続くように `Text({ children: ['Plain text'] })` をサンプルで置き換え、ファイルを保存します。Claude Code は保存のたびにモジュールを再読み込みするため、もう一度 `/gallery` を実行すると新しいサンプルが表示されます。
`dimColor` はテキストをグレーで描画します。`backgroundColor` はテキストの幅の分だけ塗りつぶします。
見出しは `#` 記号なしで太字で描画されます。インラインコードはバッククォートなしで色付きで描画されます。引用は左側にバーが付いた斜体で描画されます。
ターミナルは URL をラベルの後にテキストとして描画します。クリックで開くかどうかはユーザーのターミナルによって異なります。
色はユーザーのテーマに従います。
Claude Code は `@@` の行の代わりに行番号を描画します。削除された行と追加された行が似ている場合、変更された語はより濃く網掛けされます。
枠線はペインの幅まで伸びます。
フォーカスのあるボタンは反転表示で描画されます。ここではユーザーが Tab を 2 回押しています。
フォーカスがあると、ラベルが太字になり、カーソルが表示され、`⏎` の後に `submitLabel` が表示されます。
入力するとプレースホルダーが置き換わります。
開いているときは、選択肢を一覧表示し、そのうち 1 つをマークします。
ユーザーが選択肢を選ぶと、リストが閉じます。
`Raster` は各色をより小さなパレットに丸めるため、`0x2e7d32` は `#337733` として描画されます。