映像制作で使われる縦書き台本を作成するためのWebアプリケーションです。
主な特徴：
- ブラウザ上で動作するため、インストール不要
- リアルタイムプレビューで縦書き表示を確認
- B5サイズの印刷に最適化されたレイアウト
- 柱書・ト書き・セリフ行の自動認識と整形
- 日本語禁則処理による美しい改行
- ショートカットキー（Ctrl+S/Cmd+S）での快適な保存操作
- 台本を読んでもらうための共有URL
学生、脚本家、映像制作者などが台本作成を効率的に行えるよう開発しました。
アプリ内の左サイドバーを参照してください。
共有 ボタンから、台本を読んでもらうためのURLを作れます。
そのURLを渡すと、相手はこのツールを開いた時点で同じ台本を見られます。
台本そのものを預かるサーバーはありません。共有するのは
「どこかに置いた台本ファイルの場所」です。
台本の.txtファイルをクラウドストレージに置き、その共有リンクを貼り付けてください。
元のファイルを差し替えれば、配ったURLはそのままで最新の稿が読まれます。 稿を重ねるたびにURLを配り直す必要はありません。
貼り付けるのは各サービスの共有リンクそのままで構いません。
| 置き場所 | 共有できるか |
|---|---|
| GitHub（ファイルページのURL） | できる |
| Dropbox | できる |
| OneDrive | できる |
| Googleドライブ | できる |
| 自分のサーバー | サーバー側がCORSを許可していればできる |
どの置き場所でも、リンクを知っていれば閲覧できる状態にしておく必要があります。 開いた人のブラウザが、そのファイルを直接読みに行くためです。
Googleドライブは既定が「制限付き」なので、ここだけひと手間かかります。 対象のファイルを右クリック →「共有」→「一般的なアクセス」を 「リンクを知っている全員」に変更してください。
ブラウザが他のサイトのファイルを読むには置き場所側の許可（CORS）が必要で、 これはこのツール側では変えられません。読み込めなかった場合は理由が画面に出ます。
受け取った側が保存すると、その人の手元の新しいファイルになります。 共有元のファイルが書き換わることはありません。
他の人から受け取ったリンクを開いたときは、読み込む前に取得元のURLが表示されます。 心当たりのないURLであれば、そこで中止できます。
ビルド工程・依存パッケージはありません。index.htmlをブラウザで開けば動きます。
| ファイル | 役割 |
|---|---|
format.js |
台本整形エンジン。DOM非依存の純粋ロジック |
share.js |
共有URLの解釈と変換。DOM非依存の純粋ロジック |
app.js |
UIレイヤー。DOM生成・イベント・ファイル入出力・通信 |
styles.css |
スタイル。紙面ジオメトリは:rootのCSS変数に集約 |
sw.js |
Service Worker（PWA・オフライン対応） |
customHttp.yml |
Amplifyの配信キャッシュ設定 |
test/ |
format.jsとshare.jsの回帰テスト |
tools/ |
保守用スクリプト |
jsconfig.json |
型チェック（@ts-check）の設定 |
index.htmlはformat.js→share.js→app.jsの順に読み込みます（app.jsが
他の2つのグローバル関数に依存しているため、順序を入れ替えると動きません）。
Googleドライブの共有URL（drive.google.com）はCORSヘッダーを返さないため、
ブラウザからは直接読めません。CORSを返すDrive API経由で読んでおり、
そのためのAPIキーをshare.jsの先頭に置いています。
キーはMITO（mito.bblab.org）と共用です。新しいドメインで配信するときは、
Google Cloudコンソールでそのキーのリファラー制限に配信元を追加してください。
追加しないとGoogleドライブのリンクだけがHTTP 403になります（他の置き場所は影響を受けません）。
キーが空でも、Googleドライブ以外の共有はすべて動きます。
キーは配信ファイルに書かれるため閲覧者から必ず見えます。
GitHubのシークレットスキャンが警告を出しますが、この設計では想定内です
（失効させても新しいキーが同じように公開されるだけで、対処になりません）。
キーを守っているのは秘匿ではなくAPI制限とリファラー制限で、
何をどこまで防いでいるかはshare.jsのSHARE_GOOGLE_DRIVE_API_KEYのコメントに書いてあります。
Node組み込みのテストランナーを使います（インストール不要）。
node --test test/*.test.js折り返し・禁則処理・柱書の採番・タイトル判定、置き場所ごとの共有URLの変換に加えて、
JSとCSS/HTMLに分かれている数値（1行の文字数、印刷倍率、バージョン文字列）や、
app.jsが要求するDOM要素がindex.htmlにあるかも検証します。
format.js・share.js・app.jsは先頭に// @ts-checkを付けてJSDocで型を書いています。
エラーが出ない状態を保ってください。
npx tsc -p jsconfig.jsonjsconfig.jsonが必要なのは、3つのファイルを1つのプロジェクトとして
検査させるためです。これがないとエディターがapp.jsを単独で見てしまい、
format.jsのグローバル関数を「未定義」と誤報告します。
customHttp.ymlがJS/CSSを1年間immutableでキャッシュさせるため、
変更をデプロイする前に必ずバージョンを上げてください。
上げ忘れると、利用者には新しいindex.htmlと古いJSの組み合わせが届きます。
node tools/bump-version.js 26.8.11 # index.htmlの ?v= / ver. と sw.jsのキャッシュ名を一括更新
node tools/bump-version.js --check # 全箇所が一致しているか確認