SIITA NODE

05

DIGITAL BENCH / DESIGN NOTES

WORKBENCH

制作の裏側を見る

サイトや作品を作るための環境、道具、工程、実験を、作業台と設計ノートのように整理しています。

BENCH OVERVIEW / 04 ZONES

作業台の全体図

CURRENT SETUP / 06 MODULES

現在の制作環境

このサイトの構成と検査に実際に使っている基盤。

MODULE 01v7.1.1

Astro

静的ページ生成とファイルベースルーティングの基盤。

USE
各カテゴリーを静的HTMLとして組み立て、公開用ファイルへ出力します。
REFERENCE
astro.config.mjs / src/pages

MODULE 02v6.0.3

TypeScript

コンテンツ、表示データ、操作コードの型検査。

USE
strict設定でデータの取り違えや実装上の不整合を検出します。
REFERENCE
tsconfig.json / astro check

MODULE 03v19.2.7

React islands

操作が必要な部分だけをブラウザで動かすUI基盤。

USE
トップの円弧や絞り込みなど、状態を持つ小さな範囲に限定して使用します。
REFERENCE
src/components/react

MODULE 04

Content Collections

記事、作品、音楽のローカルコンテンツ管理。

USE
MarkdownとYAMLをスキーマで検査し、公開条件に沿ってページへ渡します。
REFERENCE
src/content.config.ts / src/content

MODULE 05v1.61.1

Playwright

実ブラウザで表示、操作、遷移を確認する検査環境。

USE
デスクトップとモバイルで横スクロール、エラー、キーボード操作を確認します。
REFERENCE
playwright.config.ts / tests/e2e

MODULE 06

Git

変更差分と制作履歴を残すバージョン管理。

USE
機能単位で変更を確認し、検査済みの状態をコミットとして保存します。
REFERENCE
.git / commit history

TOOLS / 15 PIECES

使用している道具

技術名ではなく、制作のどこで何に使うかを記録。

TRAY A / 07

DEVELOPMENT

コード、ローカル環境、変更管理に使う道具。
A-01

VS Code

コード編集とプロジェクト全体の確認。

ROLE

小さな修正から複数ファイルの作業まで同じ場所で扱います。

編集 / 差分確認

A-02

Codex

実装、調査、検証の共同作業。

ROLE

指示と検証条件を文章で共有し、小さな単位で作業します。

調査 / 実装 / 検証

A-03

WSL2

Windows上のLinux開発環境。

ROLE

Node.js、Git、ローカル開発ツールの実行環境として使用します。

ローカル実行

A-04

Git

変更履歴と実験の分岐。

ROLE

機能単位のコミットと作業前後の差分確認に使用します。

差分管理 / 保存

A-05

Ollama

ローカルLLMの実行。

ROLE

速度、モデル、データの置き場所をローカルで比較します。

ローカルAI検証

A-06

React

操作の多いWeb UIの構築。

ROLE

状態と表示の関係を部品として整理します。

UI実装

A-07

TypeScript

データと操作の型付け。

ROLE

変更時の取り違えを型検査で早めに見つけます。

実装 / 型検査

TRAY B / 05

LIVE STREAMING

配信画面、音声、アバターを構成する道具。
B-01

OBS

配信画面の合成と送出。

ROLE

ブラウザUIと映像を重ねて配信画面を構成します。

配信画面制作

B-02

TikTok LIVE Studio

TikTok LIVEの配信管理。

ROLE

プラットフォーム固有機能の確認と配信テストに使用します。

配信管理

B-03

VTube Studio

アバター表示。

ROLE

表情と動きを配信へ取り込み、OBS上のUIと合成します。

配信画面制作

B-04

SHURE MV7+

配信と収録の音声入力。

ROLE

話し声を配信・収録へ入力する共通マイクとして使用します。

音声収録

B-05

AivisSpeech

コメントの日本語音声読み上げ。

ROLE

配信コメントをローカル環境で音声へ変換します。

音声生成 / 配信

TRAY C / 03

MUSIC

音楽の試作、声の検証、素材変換に使う道具。
C-01

Suno

曲のアイデアとBGM制作。

ROLE

配信用BGMとオリジナル曲の方向性を比較します。

音楽制作

C-02

RVC

歌声変換の検証。

ROLE

公開前の個人的な制作検証として声の表現範囲を試します。

歌声実験

C-03

ffmpeg

音声と動画の変換。

ROLE

形式変換や長さ調整、書き出しの補助に使用します。

変換 / 書き出し

WORKFLOWS / 05 STEPS

制作フロー

コンテンツを記述し、検査して、履歴へ残すまでの工程票。
  1. STEP01

    コンテンツを記述

    記事と作品はMarkdown、音楽はYAMLで内容を記述します。

    表示内容と構造化データをリポジトリ内で管理します。

    INPUT
    企画 / 制作記録
    OUTPUT
    Markdown / YAML
    TOOLS
    Markdown / YAML
  2. STEP02

    Collectionへ登録

    Content Collectionsのスキーマで必須項目と型を確認します。

    公開ページへ渡すデータ形式をカテゴリーごとに揃えます。

    INPUT
    Markdown / YAML
    OUTPUT
    型付きCollection
    TOOLS
    Content Collections / TypeScript
  3. STEP03

    構文と型を検査

    astro checkでAstro構文とTypeScriptの整合性を確認します。

    静的生成前に実装とデータの問題を検出します。

    INPUT
    ページ / コンポーネント / データ
    OUTPUT
    診断結果
    TOOLS
    Astro check / TypeScript
  4. STEP04

    静的生成とブラウザ検査

    Astroで静的ページを生成し、Playwrightで画面と操作を確認します。

    複数画面幅の表示、遷移、エラー、アクセシビリティを検査します。

    INPUT
    検査済みソース
    OUTPUT
    dist / E2E結果
    TOOLS
    Astro build / Playwright
  5. STEP05

    差分を保存

    検査結果と変更対象を確認してからGitへ記録します。

    機能単位で追跡できる制作履歴を残します。

    INPUT
    検証済み差分
    OUTPUT
    Git commit
    TOOLS
    Git

EXPERIMENTS / 02 NOTES

実験ノート

完成作品とは分けて扱っている、比較と制作検証。
NOTE / 01EXPERIMENT

ローカルLLMの比較

配信中にも使える軽いモデルをOllama上で比較。

応答速度と用途に合うモデル構成を検証します。

NOTE / 02EXPERIMENT

歌声変換の検証

RVCを使った声の表現範囲の制作検証。

公開前の個人的な実験として扱い、完成作品とは区別します。