論文表メーカー

全体の流れ

1. 左の『データ入力』でセルに値を打ち込むと、内部の表データ（行×列＋各列の配置・キャプション・脚注・書式設定）が更新される。
2. セルの文字列はパーサが解釈し、`^{…}`→上付き、`_{…}`→下付き、`**…**`→太字、`*…*`→斜体 のマークアップをスタイル付きの文字片に変換する（未閉じのマーカーは警告表示）。
3. 変換結果を Canvas に描画し、三本線（上端・ヘッダー下・下端の3本）の論文体裁テーブルとして右にライブプレビューする。行の高さ・罫線の太さ・フォント・文字サイズは設定値を反映。
4. 『PNG画像をダウンロード』は同じ描画を指定解像度（1x/2x/3x、背景透過も可）でPNG出力する。
5. 『Wordにコピー』はクリップボードにWord貼付用HTML（罫線を `mso-border-*-alt` 併記、末尾に不可視スペーサで行落ち回避）を入れる。『LaTeXをコピー』は booktabs 形式のLaTeXコードを生成してコピーする。
6. 処理はすべてブラウザ内で完結し、データは外部に送信しない。入力状態は localStorage に保存され次回開いたとき復元される。

使った技術

HTML / CSS / JavaScript（単一ファイル・依存なし）

UI・状態管理・パース・描画・書き出しをすべてバニラで実装した自己完結の1ファイル。

Canvas API

三本線テーブルのライブプレビュー描画と、PNG画像の書き出し。

Clipboard（Word用HTML / LaTeX）

Word貼付用HTML（mso-border併記）と booktabs 形式のLaTeXコードを生成してコピー。

localStorage

入力した表・設定の保存と次回起動時の復元。

Cloudflare Workers

単一HTMLを静的ホスティングで公開。

実装の工夫

• エディタをスプレッドシート風に再設計し、列の配置切替を『各列ヘッダー直下の左/中/右アイコン』に置いて、セル選択→上部バーという間接操作をなくした。
• キーボード操作（Tab=次セル / Enter=下・最終行で行追加）と Undo/Redo（Ctrl+Z / Ctrl+Shift+Z）を実装。
• 書式は記法（`^{}` `_{}` `**` `*`）と、選択文字を囲む書式ボタンの両対応。未閉じマーカーは警告を出す。
• Word貼付の罫線崩れ対策として、罫線セルに CSS `border` と `mso-border-<side>-alt` を両方出力。Excel/Word貼付で最終行が落ちる既知挙動は、表の後ろに不可視スペーサを付けて回避した。
• 罫線は各線（上端・ヘッダー下・下端）を pt 単位で太さ指定でき『なし』で消去可能。本文とキャプションの文字サイズは別々に設定できる。
• ミニマル志向に合わせ、いったん盛った機能（行/列の太字トグル・記号パレット・Excel/CSV取込・小数点揃え）を削って整理した。
• 実機やブラウザ自動化を使わず、`<script>`本文を抽出→`node --check`＋vmの最小DOMスタブで、パーサ・Word HTML生成・LaTeX生成・描画no-throw・Undo を単体検証した。

用語

HTML

Webページの『骨組み』を記述する言語。見出し・入力欄・ボタンなどの構造を作る。

CSS

HTMLの『見た目』を指定する言語。色・余白・配置・フォントなどを整える。

JavaScript

ブラウザ上で動く『処理』を書く言語。入力に応じて表を組み立てたり、プレビューを更新したりする動きを担う。

Canvas API

JavaScriptからブラウザ画面に図や文字を直接『描く』仕組み。ここでは三本線テーブルを描画し、PNG画像に書き出すのに使う。

クリップボード（コピー）

『コピー』した内容を一時的に保持するOSの仕組み。Word用HTMLやLaTeXコードをここへ渡し、貼り付けで使えるようにする。

localStorage

ブラウザ内にデータを保存しておく小さな保管庫。入力した表を次に開いたとき復元するのに使う。

Cloudflare Workers

作ったWebページをインターネットに公開（ホスティング）するサービス。

LaTeX

論文や数式の組版に使われる文書作成システム。三本線の表は booktabs というパッケージで書く。