ごめんね、でも愛してる — 反省文ジェネレーター

Web
ごめんね、でも愛してる — 反省文ジェネレーター

ごめんね、でも愛してる — 反省文ジェネレーター

만우절（エイプリルフール）向けのインタラクティブなウェブアプリ。ユーザーの応答（はい/いいえ）や連続拒否回数に応じて“罪”が強制的に確定され、古風な原稿用紙や各種用紙フォーマットで「反省文」を作成・編集できる。CSSアニメーションやテーマ対応のレスポンシブUI、作成した反省文のPNG/PDFダウンロード機能も備えたフロントエンド中心のプロジェクトです。

https://github.com/ttalkkak-and-pray/im-so-sorry-but-i-love-you

概要

このリポジトリは「im-so-sorry-but-i-love-you」という、いたずら寄りのインタラクティブWebアプリです。ユーザーは初期の問いかけでニックネームを入力し、続く選択（はい/いいえ）に答えていきます。回答の組み合わせや「いいえ」の連続回数（※10回連続で強制確定）に応じておもしろおかしい“罪名”が割り当てられ、最終的に確定した罪名とテーマに合わせた原稿用紙・各種申告書風のテンプレートに沿って反省文を執筆できます。アニメーション効果やテーマ切り替え、作成した反省文のPNG／PDFダウンロードといったフロントエンド機能が特徴です。

GitHub

リポジトリの統計情報

  • スター数: 4
  • フォーク数: 1
  • ウォッチャー数: 4
  • コミット数: 16
  • ファイル数: 14
  • メインの言語: TypeScript

主な特徴

  • インタラクティブな「尋問」フローでユーザーの応答に応じた罪名を割り当てる（強制確定ルールあり）
  • テーマ別のビジュアル（原稿用紙、各種申請書など）で反省文を編集可能
  • CSSによるアニメーション（Shakeなど）を活用した演出
  • 作成した反省文をPNGやPDFとしてダウンロード可能（フロントエンドで完結）

技術的なポイント

本プロジェクトはフロントエンド特化で、Vite + React（v18） + TypeScript を基盤に構築されています。UIはレスポンシブ設計を意識しており、テーマごとに見た目を切り替えることで「古風な原稿用紙」や「各種申請書」など異なるレイアウトに対応しています。インタラクティブ部分は質問→選択（はい/いいえ）→状態管理（ニックネーム、累積拒否数、確定済みの罪名など）という単純なステートマシン的フローで設計されており、Reactの状態管理（useState/useReducer等）で実装されていることが想定されます。演出面では特定条件（例：いいえ10回）でトリガーされるアニメーション効果をCSSで実現しており、軽快な体験をクライアント側で完結させています。

また、反省文の出力機能（PNG/PDF）はREADMEでも言及されており、DOMの可視部分を画像化・印刷可能にする処理が組み込まれている点が注目されます。これには一般的にhtml2canvasやdom-to-image、jsPDF等のライブラリを組み合わせるパターンが用いられますが、実装の詳細はソースを確認してください。配布物（dist）ディレクトリが含まれているため、ビルド済みの静的ファイルをそのままホスティングして公開できる構成です。ガイドラインやテンプレート類はguidelinesディレクトリで管理されており、見た目や文面の調整を行いやすくしている点も実用的です。全体として、遊び心のあるUX設計と、フロントエンドで完結する実用的な出力機能が両立した小規模プロジェクトです。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • README.md: file
  • dist: dir
  • guidelines: dir
  • index.html: file

…他 9 ファイル

まとめ

遊び心あるUXと実用的な出力機能を備えた、フロントエンド中心の軽量なWebアプリです。

リポジトリ情報：

READMEの抜粋：

im-so-sorry-but-i-love-you (진정성 100% 반성문 봇)

다 거짓말 🎶

🔨 프로젝트 개요

“당신은 이미 유죄입니다.” 어떤 대답을 해도 최종적으로 죄목이 확정되고 강제로 반성문을 쓰게 되는 만우절 인터랙티브 웹 애플리케이션입니다. 초기 심문을 통해 닉네임을 입력받고, 질문에 대한 사용자의 대답(예/아니오) 및 누적 거절 횟수(아니오 10회 연속 클릭 시 강제 죄 확정 및 애니메이션 효과)에 따라 재치 있는 범죄가 할당됩니다. 이후 확정된 죄목과 테마에 맞춰 고풍스러운 원고지, 각서, 사직서 등의 양식으로 직접 반성문을 작성할 수 있습니다.

  • 핵심 기능: 인터랙티브 심문 (강제 혐의 부과), 특수 CSS 애니메이션 (Shake 효과), 동적 테마 기반 반응형 작성 페이지, 작성된 반성문의 이미지(PNG) 및 PDF 다운로드 기능

💻 기술 스택

  • 프론트엔드: Vite, React (v18), TypeScript
  • …