Daily Summary Poster Generator（Daily Log Maker）

毎日の振り返り、タスク、仕事や学習のまとめを縦長のポスターに整え、高解像度の PNG として保存できる軽量なウェブツールです。

主な機能

• 画面上で編集：左のパネルで日付、見出し、今日の一言を変更すると、右のキャンバスにすぐ反映されます。
• 書式ツールバー：太字、箇条書き、5 色のハイライト、灰色の背景ブロック、赤い取り消し線などを利用できます。
• テーマカード：色を選び、絵文字と見出しを入力してキャンバスに追加します。本文は直接編集できます。
• 縦長画像の書き出し：画面外にはみ出した内容も含め、背景が透明な高解像度 PNG に出力します。
• ビルド環境は不要：HTML を直接開くと、CDN 経由で html2canvas とフォントが読み込まれます。

使い始める

1. プロジェクト直下の次のファイルを、Chrome や Edge などのブラウザで開きます：Daily Log Maker.html。
2. 左側で日付、見出し、今日の一言を入力すると、右のキャンバスに反映されます。
3. 項目を追加する：
   • テーマカラーを選びます。
   • 絵文字と項目の見出しを入力します。
   • 「+ 添加到画布」（キャンバスに追加）を押し、カード本文を直接編集します。書式も設定できます。
4. 左の「保存图片」（画像を保存）を押すと、縦長画像が生成され、ダウンロードされます。ファイル名の形式は次のとおりです：每日记录_Long_YYYY.MM.DD.png）。

使い方のコツ

• 文字を選択してからツールバーを押すと、太字、ハイライト、取り消し線などを適用できます。
• 本文に複数行を入力して「リスト」を押すと、まとめて箇条書きにできます。
• カード右上の「✕」はそのカードだけを削除し、ほかの内容には影響しません。
• 背景が透明な PNG なので、ほかの画像や文書と組み合わせやすくなっています。

技術的な説明

• 画像の生成には CDN から読み込んだ html2canvas を使います。キャンバスを複製し、内容に応じて高さを広げることで、長い文章を切らずに保持し、影の干渉を避けます。
• 画像生成時は scale = 2.5 に設定し、一般的な画面で画質とファイルサイズのバランスを取っています。
• カード本文は contenteditable を利用し、基本的な編集コマンドでリッチテキストを操作します。

オフラインで使う

完全にオフラインで利用する場合：

• まず html2canvas の CDN 参照をローカルファイルに変更し、Google Fonts をシステムフォントかローカルのフォントに置き換えます。
• ページ構造を維持すれば、画像の書き出しも利用できます。

ブラウザへの対応

• 新しい Chrome、Edge、Firefox を推奨します。
• 極端に長い内容では、処理時間とメモリ使用量が増えます。問題があれば scale を下げるか、分割して出力してください。

出力例