English 4-Line Writer

目次

1. アプリ概要

本アプリは、英語初学者向けの 4 線付き文字列画像を生成する単一ページ Web アプリケーションです。 文字列の入力、ローマ字変換、フォント選択、色・線・余白・ワークシート行数などを調整し、 最終的に PNG として保存、または対応環境ではクリップボードへ画像コピーできます。

2. 画面構成

左側: 設定パネル

• 表示する文字列
• ローマ字変換トグル
• ワークシートモードと追加行数
• フォント選択、システムフォント読込、手動フォント入力
• 文字サイズ、色、線幅、余白、文字間隔、最低行数
• 透明背景、設定リセット

右側: プレビューと出力

• 現在の設定を反映したライブプレビュー
• PNG ダウンロード
• 画像クリップボードコピー
• マニュアル表示

3. 入力と文字列処理

既定入力

初期表示文字列は Practice writing English です。保存済み設定がある環境では、 その入力値が優先して復元されます。

ローマ字変換

日本語からローマ字への変換は、アプリ内の変換テーブルを用いて処理します。 ひらがな、カタカナ、促音、長音の一部に対応し、入力欄の値そのものではなく描画前テキストに適用されます。

改行と折り返し

• 手動改行はそのまま行として保持されます。
• 長文は固定最大幅を基準に単語単位で折り返します。
• 長単語のみ、文字単位にフォールバックして分割します。
• 折り返し時も、通常の非空行では空白を極力維持する仕様です。

4. フォント仕様

同梱フォント

公開版に同梱するフォントは Klee One と Klee One SemiBold です。 現在のデフォルト選択は Klee One SemiBold です。

システムフォント読込

対応ブラウザでは queryLocalFonts() を使って端末内のフォント一覧を追加できます。 これはユーザーの端末に存在するフォントを参照するものであり、アプリがそれらを再配布するものではありません。

手動入力

手動フォント入力欄に値がある間は、その指定がプルダウン選択より優先されます。 見つからない可能性が高い場合は警告を表示します。

プルダウン表示

フォント一覧の option には、それぞれの font-family を割り当てています。 ただしネイティブ select の表示品質は OS とブラウザ依存です。

対応環境では、候補名そのものが各フォントで表示されます。したがって Word 風の一覧に近い見え方になりますが、 実際の描画品質や反映範囲はブラウザと OS のネイティブ UI に依存します。

5. 描画仕様

描画エンジン

描画は Canvas ベースです。文字列は 4 線モデルに沿って 1 行ずつ描画されます。 文字メトリクスはフォント読込後に計測し、可能であれば actualBoundingBoxAscent/Descent を使用し、 未対応時はピクセル走査にフォールバックします。

4 線の構成

• ascender line
• mean line
• baseline
• descender line

各線はフォントメトリクスから算出され、ベースラインは別色で描画できます。

文字間隔

文字間隔は Canvas の標準レタースペーシングではなく、文字単位の描画位置制御で実現しています。

現在の実装では、左右の 4 線自体は十分な長さを保ったまま、文字列の描画開始位置だけを少し内側へ寄せています。 これにより、Live Preview 上で文字が 4 線の端に密着しない見え方になります。

6. ワークシートと行構成

ワークシートモード

見本の下に空の練習行を自動追加できます。追加行数はスライダーで指定します。

最低行数固定

入力行数が不足する場合、指定行数に達するまで空行を補完します。 これらの補完行は、手動空行やワークシート行と同じ空行ギャップルールに従います。

空行間隔

手動空行、ワークシート追加行、最低行数補完行は、通常行より広い空行ギャップを持ち、 4 線どうしの干渉を避けます。

7. 出力仕様

PNG ダウンロード

Canvas から PNG Blob を生成し、タイムスタンプ付きファイル名で保存します。

クリップボードコピー

対応ブラウザでは navigator.clipboard.write() と ClipboardItem により画像コピーを行います。 非対応環境ではコピーボタンを無効化し、PNG ダウンロードへの利用を促します。

透明背景

プレビュー上では市松模様を表示しますが、出力画像自体は設定どおりの透過状態を維持します。

8. 保存・復元・初期化

バージョン情報の正本は app-meta.json です。現在のバージョンはサイドバー下部とマニュアル上部で確認でき、変更履歴は CHANGELOG.md で管理します。

主要設定は localStorage に保存され、再訪時に自動復元されます。 保存対象には入力文字列、フォント選択、色、線幅、余白、ワークシート設定、トレース状態などが含まれます。

「保存済み設定をリセット」は、保存済み状態の削除に加え、フォント UI の初期状態も復元する実装です。

9. マニュアルとプロフィール

マニュアル上部には現在のバージョンも表示されるため、表示中の仕様や説明がどの版に対応しているかをフロート内で確認できます。

マニュアルとプロフィールはフロート表示のオーバーレイです。 背景クリック、閉じるボタン、Escape キーで閉じられます。

クリエイターカードにはプロフィール写真、肩書き、外部リンクを含みます。

マニュアルは 使い方、フォントガイド、詳細仕様 の 3 タブ構成です。 詳細仕様 では同じフロート内でパネル幅を広げ、原版の仕様書を iframe で表示します。 タブ切替時には軽いフェードと横スライド、仕様表示時には幅の遷移を入れています。

10. PWA 実装

キャッシュ名には CACHE_VERSION を使い、公開時には app-meta.json のバージョンと揃えて更新します。これにより PWA 更新時のキャッシュ切り替えを明確にします。

本アプリは manifest、icon、service worker を備えた最小構成の PWA として実装されています。 インストール可能化とローカル shell キャッシュを目的とし、同一オリジンの静的資産を中心に扱います。

現在の service worker は、エントリ文書と manifest を network-first、それ以外のローカル静的資産を cache-first とする方針です。

11. 制約事項

• ネイティブ select のフォント表示はブラウザ依存です。
• queryLocalFonts() はブラウザ対応状況に依存します。
• 画像クリップボードコピーもブラウザ依存です。
• UI 用 Google Fonts は完全オフライン時にフォールバックへ落ちる可能性があります。
• 本仕様書は現行実装ベースであり、今後の改修に伴って更新が必要です。