リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: SignCraft - 手書き風サイン&署名ジェネレーター
サインにスタンプ風日付・テキストラベル追加機能
1. 目的
ダウンロードしたサイン画像に「署名日付」や「役職・会社名」などのラベルテキストをスタンプ風に重ねて出力できるようにする。契約書や申請書への貼り付け用途でそのまま使えるサインを1ステップで作れるようにし、実用性を高める。
2. 具体的な仕様
【UI追加箇所】
既存の「デコレーションパーツ」パネルの下に「ラベル設定」セクションを新設する。
【ラベル設定項目】
- テキスト入力欄(最大40文字、例:「2025年1月1日」「代表取締役」「山田商事株式会社」)
- 日付の自動挿入ボタン(押すと「YYYY年MM月DD日」形式で今日の日付をテキスト欄に入れる)
- フォントサイズ(小/中/大 の3段階プリセット、実ピクセルは12/16/22px)
- テキストカラー(カラーピッカー、デフォルト #333333)
- スタンプ風装飾のON/OFF(ONにすると文字を薄い角丸矩形の枠で囲む、枠色はテキストカラーと同色で opacity:0.25)
- 配置位置(左下 / 中央下 / 右下 / 右上 の4択ラジオ、デフォルト: 右下)
【キャンバスへの描画】
- 既存のCanvas描画パイプラインの最終レイヤーとして、ラベルをCanvas 2D API の fillText / strokeRect で上書きする。
- サイン本体の描画には一切手を加えず、ラベルのみ最前面に合成する。
- ラベルのフォントは既存ストロークスタイルに関わらず「sans-serif」固定とし、手書き系フォントとの混在を避ける。
- ラベルテキストが空欄の場合は何も描画しない(既存動作と完全に同一)。
【ダウンロード時の扱い】
- 透過PNG / 白背景PNG / SVG の3形式すべてでラベルを含めて出力する。
- SVG出力時は `<text>` 要素として追記し、スタンプ枠はONの場合 `<rect>` 要素で追記する。
【ギャラリー保存】
- LocalStorageへの保存時にラベル設定をJSON化して一緒に保存し、ギャラリーから呼び出した際にラベル設定欄が復元されるようにする。既存の12件上限・保存スキーマはキー追加のみで対応し、後方互換を保つ(ラベルキーが無い旧データはラベル空欄として扱う)。
3. 既存機能との整合
- フリーハンド描画・テキスト自動変換・デコレーションパーツ・線色・背景設定・キャンバスサイズ変更のいずれにも変更を加えない。
- ラベルは既存の描画結果の上に重ねるだけなので、既存のストローク生成ロジックに影響しない。
- 比較モード(最大4件横並び)ではサムネイル表示のみのため、ラベルはサムネイル生成時にも同様に描画されるが、比較モードのレイアウト自体は変更しない。
- スマホ縦1カラム表示でもラベル設定セクションは折りたたみ式アコーディオン(`<details><summary>`)にして画面を圧迫しない。
ダウンロードしたサイン画像に「署名日付」や「役職・会社名」などのラベルテキストをスタンプ風に重ねて出力できるようにする。契約書や申請書への貼り付け用途でそのまま使えるサインを1ステップで作れるようにし、実用性を高める。
2. 具体的な仕様
【UI追加箇所】
既存の「デコレーションパーツ」パネルの下に「ラベル設定」セクションを新設する。
【ラベル設定項目】
- テキスト入力欄(最大40文字、例:「2025年1月1日」「代表取締役」「山田商事株式会社」)
- 日付の自動挿入ボタン(押すと「YYYY年MM月DD日」形式で今日の日付をテキスト欄に入れる)
- フォントサイズ(小/中/大 の3段階プリセット、実ピクセルは12/16/22px)
- テキストカラー(カラーピッカー、デフォルト #333333)
- スタンプ風装飾のON/OFF(ONにすると文字を薄い角丸矩形の枠で囲む、枠色はテキストカラーと同色で opacity:0.25)
- 配置位置(左下 / 中央下 / 右下 / 右上 の4択ラジオ、デフォルト: 右下)
【キャンバスへの描画】
- 既存のCanvas描画パイプラインの最終レイヤーとして、ラベルをCanvas 2D API の fillText / strokeRect で上書きする。
- サイン本体の描画には一切手を加えず、ラベルのみ最前面に合成する。
- ラベルのフォントは既存ストロークスタイルに関わらず「sans-serif」固定とし、手書き系フォントとの混在を避ける。
- ラベルテキストが空欄の場合は何も描画しない(既存動作と完全に同一)。
【ダウンロード時の扱い】
- 透過PNG / 白背景PNG / SVG の3形式すべてでラベルを含めて出力する。
- SVG出力時は `<text>` 要素として追記し、スタンプ枠はONの場合 `<rect>` 要素で追記する。
【ギャラリー保存】
- LocalStorageへの保存時にラベル設定をJSON化して一緒に保存し、ギャラリーから呼び出した際にラベル設定欄が復元されるようにする。既存の12件上限・保存スキーマはキー追加のみで対応し、後方互換を保つ(ラベルキーが無い旧データはラベル空欄として扱う)。
3. 既存機能との整合
- フリーハンド描画・テキスト自動変換・デコレーションパーツ・線色・背景設定・キャンバスサイズ変更のいずれにも変更を加えない。
- ラベルは既存の描画結果の上に重ねるだけなので、既存のストローク生成ロジックに影響しない。
- 比較モード(最大4件横並び)ではサムネイル表示のみのため、ラベルはサムネイル生成時にも同様に描画されるが、比較モードのレイアウト自体は変更しない。
- スマホ縦1カラム表示でもラベル設定セクションは折りたたみ式アコーディオン(`<details><summary>`)にして画面を圧迫しない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (signcraft))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「SignCraft - 手書き風サイン&署名ジェネレーター」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=signcraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/signcraft/
ご利用ありがとうございます!
ご要望いただいた「SignCraft - 手書き風サイン&署名ジェネレーター」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=signcraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/signcraft/
ご利用ありがとうございます!
Echo
Iris