はじめに
はじめまして、Qiita初投稿です。
平（@tairanobuhiko）と申します。
業界未経験からWeb業界への転職を目指し、効率的に学習することと高め合えるコミュニティを求めてプログラミングスクール（テックキャンプ）で学習を行なっています。
3月初頭から個人開発のオリジナルアプリを制作しましたので紹介したいと思います。
アプリの概要
アプリケーション名
【しりとり画像ジェネレーター】
URL
GitHub
アプリの特徴
- 「ローマ字の学習も、タイピング練習もつまらない！」という課題をもった小学校低学年層のユーザーが楽しみながら学習できる環境を提供します
企画背景
- 私の長女がローマ字タイピングを苦手としており、習得のサポートできるようなアプリを開発したかったこと
- PCを扱うためには基本的なキーボードタイピングが必要で、子供に対して早いうちからキーボードタイピングを覚えさせることが大切だと考える親御さんが多くいること
- 2020年より小学生からラップトップ端末の貸与が一般化され幼少期からITリテラシーが求められる時代になったこと
これらの背景から、子供たちがローマ字入力タイピングを習得しやすく、楽しく学べる環境でITリテラシー向上のきっかけにしてほしいという狙いで企画、開発に至りました。
基本的な使い方
- しりとりの単語をタイピング入力します
- 単語を5つ以上つなげ、画像生成ボタンを押すとしりとりの要素を含む画像が生成されます
どんな画像ができるかは毎回異なり、楽しみながらタイピング練習をする動機に繋がります。
機能画面紹介
ゲストユーザーのまま利用可能です。
- ゲストユーザー
- 自身で生成した過去作品の参照不可
- 画像の削除不可
- 登録ユーザー
- ユーザーに紐づく過去作品の参照が可能
- ユーザーに紐づく画像の削除が可能
| トップ画面（画像生成例） | ギャラリーページ（作例ページ） |
|---|---|
 |
 |
| ユーザー詳細ページ | 画像詳細ページ |
|---|---|
 |
 |
| サインアップページ | ログインページ |
|---|---|
 |
 |
技術スタック
| カテゴリ | 技術内容 |
|---|---|
| フロントエンド | HTML(ERB)/CSS JavaScript Tailwind CSS |
| バックエンド | Rails 7.0.8.1 PostgreSQL 14.10 |
| インフラ | Render.com |
| ファイルサーバー | AWS S3 |
| API | StableDiffusion API（Hugging Face） OpenAI API（DALL-E3） GAS翻訳API（自作） Twitter API Tiny_URL（短縮URL生成） |
| バージョン管理 | Git/GitHub |
| CI/CD | CI:GitHub Actions CD:Render.com |
| ワイヤーフレーム 画面遷移図 |
Figma |
| ER図 | Draw.io |
こだわったポイント
UI/UX
- レスポンシブ対応するために仮想キーボードを導入しました（娘も外出先やお風呂で遊んでます）
- ローマ字をすぐに確認できるようモーダル形式でローマ字表を実装しました
- 画像生成待ちの間にインジケーターの表示と待機音（SE）を鳴動させる仕様にし、待ち時間に対するUX向上に努めました
バックエンドロジック
- 画像生成のリクエスト制限（429エラー）やサーバーエラー（500, 503）の対策として指数バックオフ方式（2秒〜32秒、最大5回）でリトライを行うロジックにしました
また、429エラーの場合は別の生成モデルのAPIへフォールバックする仕様とし、画像生成の安定性向上に努めました - テストコード実装においてテストのたびに画像生成APIを叩く処理をエミュレートし外部APIによる依存を制御することでテストの安定性を向上させました
さいごに
最初はHTML/CSSとはなんぞ？というレベル感でしたが、誰かの課題解決にアプローチできるオリジナルアプリケーションを開発する！という目的意識を持って学習した甲斐もありここまで実装することができました。
使っていただいたり、フィードバックくださった全てのみなさまに感謝です！
小学校低学年のお子さまがいらっしゃる方はぜひ使ってみて感想くださるとたぶん泣いて喜びます！
今後も技術研鑽をつづけていきます！