縦書き台本整形ツール

https://straw.bblab.org/

これは何ですか？

映像制作で使われる縦書き台本を作成するためのWebアプリケーションです。

主な特徴：

• ブラウザ上で動作するため、インストール不要
• リアルタイムプレビューで縦書き表示を確認
• B5サイズの印刷に最適化されたレイアウト
• 柱書・ト書き・セリフ行の自動認識と整形
• 日本語禁則処理による美しい改行
• ショートカットキー（Ctrl+S/Cmd+S）での快適な保存操作

学生、脚本家、映像制作者などが台本作成を効率的に行えるよう開発しました。

使い方

アプリ内の左サイドバーを参照してください。

開発

ビルド工程・依存パッケージはありません。index.htmlをブラウザで開けば動きます。

ファイル構成

ファイル	役割
format.js	台本整形エンジン。DOM非依存の純粋ロジック
app.js	UIレイヤー。DOM生成・イベント・ファイル入出力
styles.css	スタイル。紙面ジオメトリは:rootのCSS変数に集約
sw.js	Service Worker（PWA・オフライン対応）
customHttp.yml	Amplifyの配信キャッシュ設定
test/	format.jsの回帰テスト
tools/	保守用スクリプト
jsconfig.json	型チェック（@ts-check）の設定

index.htmlはformat.js→app.jsの順に読み込みます（app.jsが format.jsのグローバル関数に依存しているため、順序を入れ替えると動きません）。

テスト

Node組み込みのテストランナーを使います（インストール不要）。

node --test test/format.test.js

折り返し・禁則処理・柱書の採番・タイトル判定に加えて、 JSとCSS/HTMLに分かれている数値（1行の文字数、印刷倍率、バージョン文字列）が 一致しているかも検証します。

型チェック

format.jsとapp.jsは先頭に// @ts-checkを付けてJSDocで型を書いています。 エラーが出ない状態を保ってください。

npx tsc -p jsconfig.json

jsconfig.jsonが必要なのは、2つのファイルを1つのプロジェクトとして 検査させるためです。これがないとエディターがapp.jsを単独で見てしまい、 format.jsのグローバル関数を「未定義」と誤報告します。

リリース手順

customHttp.ymlがJS/CSSを1年間immutableでキャッシュさせるため、 変更をデプロイする前に必ずバージョンを上げてください。 上げ忘れると、利用者には新しいindex.htmlと古いJSの組み合わせが届きます。

node tools/bump-version.js 26.8.8   # index.htmlの ?v= / ver. と sw.jsのキャッシュ名を一括更新
node tools/bump-version.js --check  # 全箇所が一致しているか確認