MangaName Studio

VR（Meta Quest）で漫画のネームを描くためのツールです。iPad 向け MangaSketcher のネーム作成機能を 空間向けに作り直し、キャラクターの位置関係を確かめるジオラマを加えています。データはこの端末の ブラウザ（IndexedDB）内に自動保存されます。

すぐ試す: https://tomozow.github.io/MangaNameStudio/ （Quest のブラウザで開いて「VRで開く」。PC のブラウザでもマウスで操作できます。保存先はサイトごとのブラウザ内なので、開発サーバーのデータとは別になります）

正面に見開きボードとページ列、左にツールパレットとジオラマ、右に管理パネルと PDF 資料が並びます。

主な機能

ネームを描く — コマ枠・ペン・テキスト（縦書き）でページを組み立てます。	VR で描く — 手に持ったペンの先でボードに触れて描きます。左手首にクイックメニュー。
選択 / 投げ縄 — 線画とテキストを切り取り、移動・拡大縮小・回転・反転。	ストック — 切り取ったクリップや退避したページを保管。空間のカードとしても掴めます。
ジオラマ — 人形と小道具を 1/12 の舞台に置き、監督カメラで構図を確認。黄色の線はイマジナリーライン。	管理パネル — ページの追加・並べ替え・複製、見開き / 単ページ表示、ズーム、面合わせ。

セットアップ

npm install
npm run dev        # IWSDK の管理ブラウザ付き開発サーバー
npm run typecheck
npm run build

main に push すると GitHub Actions（.github/workflows/pages.yml）がビルドして GitHub Pages に公開します。

開発中の版を Quest 実機で開くときは npx @iwsdk/cli dev status の runtimeUrls.network の URL を開き、証明書の警告を 許可してから「VRで開く」を押します。

空間の配置

方向	内容
正面	見開きボード（右開き・奇数始まり）と、その上のページ列
左	ツールパレット、さらに左にジオラマ（舞台・パレット・カメラモニター）
右	管理パネル（ページ / ストック / 資料 / ファイル）、さらに右に PDF 資料

VR に入ると作業台が自動で正面に来ます。ずれたら左コントローラーの Y、手首メニュー、または「正面に呼ぶ」。 高さ・距離は管理パネルの「表示」で微調整できます。

ウィンドウの移動

ツールパレット・管理パネル・ジオラマパレット・ボード・PDF 資料・カメラモニターの下には**つまみ（バー）**があります。

• バーをレイで指してトリガー（素手はピンチ、PC はマウスでドラッグ）→ レイに沿って動きます。
• バーに手を伸ばしてグリップ（素手はつまむ）→ 手で持って運べます。
• 動かしている間、ウィンドウは自分の方を向きます。配置は作業台ごと「正面に呼ぶ」で一緒に動きます。
• ボード以外は右下の角の丸いつまみを同じ操作（レイ / 手で掴む / マウス）で引くと拡大縮小できます（左上の角が固定）。
• 配置・大きさ・手首やベルトへの吸着はこの端末に保存され、次に開いたときも同じ状態で出ます。手首メニューの 「ウィンドウ配置を戻す」を 2 回押す（3 秒以内）と最初の配置に戻ります。

手首とベルトへの吸着

• ツールパレット・管理パネル・ジオラマパレットは、バーを持って反対側の手首の近くで離すと、その手首に吸着します （吸着できる位置ではバーが緑になります）。手首から離れた所へ運んで離すと空間に戻り、元の大きさに戻ります。
• 手首のウィンドウは手の甲を顔に向けると表示されます（コントローラーはその手のスティック押し込みで表示 / 非表示）。 手首用の小さめの大きさで出て、手首上で角のつまみを引くと手首用の大きさとして別に保存されます。
• 同じ手首に 2 枚以上付けると、上にタブが並び、押したタブのウィンドウに切り替わります。
• ツールパレットはベルト（腰の前の中央）にも付けられます。手首メニューの「ツールをベルトに付ける」か、 バーを持って腰の前で離します。体ごと向きを変えると付いてきます（首を振るだけでは動きません）。 ベルト上でバーを少し動かすと、その位置がベルトの位置になります。
• 手首・ベルトは VR の中だけです。PC 表示では空間の元の位置に出ます。

ジオラマの移動と拡大縮小

ジオラマの土台の手前にハンドル（バー）、右手前の角に丸いつまみがあります。ハンドルで土台ごと好きな位置へ動かせ、 つまみで拡大縮小できます。人形・小道具・カメラ・カメラモニターは土台に付いているので一緒に動きます。

ペンと左右のツール

• 左右の手（コントローラー）がそれぞれ別のツールを持ちます。パレットのツールボタンを押した手がそのツールを持ちます （例: 右手でペン、左手で消しゴムを押せば、右手ペン・左手消しゴム）。初期状態は右手ペン・左手素手です。
• ツールを持った手にはそのツールの 3D モデルが現れ、先端でボードに触れて使います。少し押し込むほど筆圧が上がります。 ペン（ペン先と帯がインクの色）・消しゴム（角消しゴム）・直線（定規）・コマ枠（枠のスタンプ）・テキスト（吹き出し）・ 選択（点線の枠）・投げ縄（ロープの輪）と形で見分けられ、模様の面はいつも自分の方を向きます。
• 「移動」は素手です。素手の手はペンを持たず、ピンチのレイでボタンを押したり、ボードをつまんで動かしたりします。
• ペン先をボードに近づけると、着地点に輪が出て、触れると青くなります。紙に触れた所から描き始め、 ツールパレットの「離れ」の高さ（初期 2.5mm、0〜10mm）より浮かせるとすぐに描画をやめます。
• 「位置補正」は手で持ったペンの揺れ、「線補正」は線の手ブレを抑えます（どちらもパレットで切り替え。 離れ・位置補正はこの端末に、線補正と「補正」の強さはプロジェクトに保存）。
• 色・太さなどの設定はツールごとに左右共通です。

手首メニュー

左手のひらを顔に向ける（コントローラーは左スティック押し込み）と、左手のそばにメニューが出ます。 取り消し / やり直し / 次・前のページ / 縮小・拡大 / 左右の持ち替え / 正面に呼ぶ / ツールをベルトに付ける・外す / ウィンドウ配置を戻す。もう片方の手のペン先・指・レイで押します。

コントローラー

入力	動作
ペン先をボードに当てる	描く・選ぶ（押し込むほど筆圧）
トリガー	離れた所から描く・選ぶ（押し込み量が筆圧）
A / B（右）	取り消し / やり直し
両手のグリップ	ボードをつまんで拡大縮小・移動
X（左）	最後に使った手のペン ⇔ 消しゴム
Y（左）長押し	作業台を正面に呼ぶ
左スティック 押し込み	手首メニューと左手首のウィンドウの表示 / 非表示
右スティック 押し込み	右手首のウィンドウの表示 / 非表示
左スティック 左右	ページ送り（左 = 次のページ）
左スティック 上下	ズーム
右スティック	拡大中のパン（PDFを指している間は上下でPDF拡大）
トリガー（ジオラマ上）	人形や小道具・カメラをレイで掴んで動かす
グリップ（人形・小道具・カメラ・ウィンドウのバーの近くで）	直接掴んで運ぶ（近づくと光る）

ハンドトラッキング

動作	結果
親指と人差し指でペンをつまむように持つ	ペンを握る（ペン先で描く・ボタンを押す）
手を開く	ペンを置く（半透明になり描かない。指先でボタンを押せる）
左手のひらを顔に向ける	手首メニュー
手の甲を顔に向ける	その手首に付けたウィンドウ
素手でピンチ（レイ）	ボタンを押す・ボードを動かす・ジオラマやウィンドウのバーを掴む
人形・小道具・カメラ・ウィンドウのバーのそばでつまむ	直接掴んで運ぶ（ペンを持った手でも、つまみ直せばペンをしまって掴む）
素手の両手でピンチして広げる / 狭める	ボードの拡大縮小・移動

ペンを持った手はピンチのレイを出しません（ペンを握る形がピンチと区別できないため）。 ペンの位置・接触の感度は src/studio/pens.ts の PEN_TUNING、src/studio/studio-system.ts の CONTACT、 手首メニューの位置は src/studio/wrist-menu.ts の WRIST_TUNING、直接掴める距離は src/studio/direct-grab.ts の GRAB_TUNING、手首のウィンドウ・ベルトの位置と吸着距離は src/studio/docks.ts の DOCK_TUNING で調整できます。

ツール

• ペン: 色 8 色、太さ・濃さ、筆圧、手ブレ補正、「下書き」（水色 40%）。
• 消しゴム: 線画だけを消します（テキストは残ります）。
• 直線: 角度スナップ（45° 刻み）付き。
• コマ枠: 基本枠・仕上がり・裁ち落とし・ページ端にスナップする矩形。
• テキスト: 縦書き / 横書き、白抜き、文字サイズ。タップで新規、ダブルタップで編集、角のハンドルで拡大縮小。 入力は Quest のシステムキーボード（日本語可）か PC のキーボード / IME。選んだテキストは「ストックへ」でストックに移せます。
• 選択 / 投げ縄: 線画と、範囲に一部でも重なるテキストを一緒に切り取り、移動・拡大縮小・回転・左右反転・複製・ストックへ移動。 テキストは位置と大きさが一緒に動き、文字は反転せず、確定するとまっすぐ置かれます（確定前の表示は回転に合わせて傾きます）。 見開きの両ページをまたいで確定できます。
• 移動: ボードをドラッグしてパン。

ページとストック

• ページ列のクリックで移動、ドラッグで並べ替え、+ で末尾に追加。
• 管理パネル「ページ」: 後ろに挿入、複製、前後へ移動、ストックへ、ゴミ箱へ、白紙に戻す、見開き / 単ページ表示、ズーム。
• 「ストック」: 退避したページと切り出したクリップ（線画とテキスト）。ネームに戻す / ページに貼る / 手元に戻す / 削除（ページはゴミ箱へ）。 ゴミ箱からの復元と完全削除。
• ページとストックの中身はどちらか一方にだけあります。選択範囲やテキストを「ストックへ」移すとページから消え、 ストックのクリップを貼って確定（または削除）するとストックから消えます（貼っている途中で取り消すとストックに残ります）。
• ストックの項目は空間のカードにもなり、作業台の右手前に並びます。手で掴む（レイでも可）と好きな所に置けて、置き場所は プロジェクトに保存されます。ページのカードをボードの上で離すとそのページの次に、ページ列の上で離すと印の位置に戻ります。 クリップのカードはページの上で離すとその場所に浮いた状態で貼られ、確定するとストックから消えます（取り消すとカードが戻ります）。 同じものを何度も使うときは、貼ってから選択の「複製」で増やします。
• 操作はすべて取り消し可能（セッション内 50 手）。

資料

• PDF: 「資料」→「開く」。シートをドラッグして範囲を選ぶと本文を抽出（ルビ除去、縦書き・横書き対応）。 「セリフとして配置」の後、ページをタップすると置けます。
• 台本: .txt を読み込むと 1 行ずつ並びます。行を選んでページをタップすると配置され、次の行へ自動で進みます。
• PC ではファイルをウィンドウにドロップしても読み込めます（PDF / .txt / バックアップ zip）。

ジオラマ

• キャラクター A〜D・子供・モブ、椅子・机・ソファ・ベッド・箱・街灯・壁・ドア・窓・木・車・建物を 1/12 の舞台に置けます。
• 手を伸ばしてグリップ（素手はつまむ）で直接掴むか、レイ + トリガーで遠くから掴んで動かします。離すと床に立ちます。 人形・小道具は直立のまま向きだけ変わり、カメラは傾き（ロール）をつけずに向けられます。
• 選択中の人形はポーズ（立ち・歩き・座り・指差し・寝）、回転、複製、削除。視線ラインで向きと目線を確認できます。
• 舞台の回転、「原寸で見る」で等身大にして正面の床へ（歩いて確認）。
• 2 人を続けて選ぶとイマジナリーライン（黄色）を表示し、カメラが越えると赤くなって警告します。
• 「このページに保存 / 呼出」で、配置とカメラをページごとのカットとして保存できます。
• 監督カメラを掴んで構図を決め、画角（広角 / 標準 / 望遠）を選び、「ページに下絵」で選択中ページへ青い下絵として貼れます。

現実の板に合わせる（面合わせ）

実物のペンと板（机・ボードなど）を用意すると、浮いたボードの代わりに実物の板の上へボードを重ねて描けます（手応えのある描き心地）。

1. 管理パネル「表示」→「現実の板に合わせる」。
2. 「ペン先を測る」: 実物のペンの先を 1 点に当てたまま手首を回し、ペン先までの長さを測ります。
3. 「角を打つ」: 板の角（左上・右上・右下、任意で左下）にペン先を順に当てて少し止めると、板の位置・角度・大きさが決まり、ボードがそこに置かれます。
4. ずれは手動調整（高さ・左右・上下・回転・大きさ・ペン先）で直せます。「解除」で浮いたボードに戻ります。

位置はこの端末に保存され、次回も同じ場所に出ます（ずれていたら合わせ直してください）。判定の閾値は src/studio/calibration.ts の CALIB_TUNING で調整できます。

ファイル

• 新規（8 / 16 / 24 / 32 ページ）、開く、名前変更、削除。
• 書き出し: 全ページ PNG（zip）、見開き PNG、PDF、ミニネーム（全見開きの一覧画像）、セリフ一覧（.txt）、バックアップ（zip）と読込。

PC での操作

マウスで描画、ホイールでズーム、P ペン、E 消しゴム、L 直線、F コマ枠、T テキスト、S 選択、A 投げ縄、 H / Space 移動、← → ページ送り、[ ] 太さ、Ctrl+Z / Ctrl+Y、Enter 確定、Esc 取消、Delete 削除。 開発ビルドでは F9 でセルフテスト、F8 で入力状態（ペン・左右のツール・掴める物の位置など）をコンソールに出力します。

フォント

• ページ上の文字: 源暎アンチック（public/fonts/GenEiAntiqueNv6-M.ttf、SIL OFL）
• UI: M PLUS 1p。UIKit 用に JIS 第 1 水準・かな・記号の MSDF アトラス（public/fonts/mplus-msdf.*）を同梱

ライセンス

コードは MIT License です。同梱フォント（public/fonts/）はそれぞれのライセンス（SIL OFL、public/fonts/OFL.txt ほか）に従います。