はじめに
初めまして。
未経験からエンジニアを目指しRUNTEQでプログラミング学習中のあいと申します。
この度、卒業制作として「あむ編むコミュ！」というアプリを本リリースしました。
「感謝を編もう」 をテーマに、同じコミュニティ内で「感謝の気持ち」を表現し、相手が喜ぶ画像をAIで生成してプレゼントするサービスです。
今回は、「あむ編むコミュ！」ついてお話しします。
よろしくお願いいたします！
サービス
GitHubリポジトリ
サービス概要
あむ編むコミュ！（あむコミュ！）は、同じコミュニティ内で「感謝の気持ち」を表現し、相手が喜ぶ画像をAIで生成してプレゼントするサービスです。
ユーザーは、感謝メッセージを3回送信するごとに「ニット系アイテム」を獲得でき、コレクションとして収集できます。
感謝の循環によって、普段のコミュニティ活動をより豊かにし、相手の気持ちが目に見える形で伝わることを目指しています。
このサービスへの思い・作りたい理由
オンラインコミュニティ、特にRUNTEQでは日々のプログラミング学習の中で助け合うことが多く、感謝の気持ちを伝えたくなる瞬間が多くあります。
普段はテキストで感謝を伝えますが、もう少し気持ちを込めた形で贈り物をしたいと感じることがありました。
私は昔から知らない人に話しかけてすぐに仲良くなれます。そして、仲良くなったさまざまな立場の方々から、お世話になることが多かったです。
感謝の形は様々で、助けてもらったことによる活動の成果を報告したり、プレゼントを用意したりしてきましたが、今回はオンラインで「テキストとは違う感謝の伝え方」を追求しました。
過去に感謝を伝えるために努力してきた経験や、その思いをプログラミングに生かしたいと考え、このアプリを開発しました。
このサービスが、コミュニティの人々が「感謝」をより積極的に表現し、つながりを深められるきっかけになればと願っています。
使い方イメージ
| 感謝状一覧 | 感謝状作成 |
|---|---|
 |
 |
| みんなのそれぞれの感謝と相手を思って作られたニットの画像が閲覧できます。 | ログイン後、1ヶ月に2回、感謝のメッセージとAI画像の感謝状作成ができます。 |
| 画像生成 | アイテム一覧 |
|---|---|
 |
 |
| キーワードをもとに画像を最大2枚生成できます。 | 感謝状を3つ投稿すると、アイテムを1つ獲得できます。 |
| 感謝状詳細 | Xシェア |
|---|---|
 |
 |
| 感謝状をXでシェア、投稿の編集、コメントができます。 | ご自身の生成された画像によって中心の画像が変わります。 |
技術スタック
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Rails 7.2.1, TailwindCSS, DaisyUI |
| バックエンド | Rails 7.2.1 (Ruby 3.2.3 ) |
| データベース | PostgreSQL |
| インフラ | Render.com, AWS S3 |
| 認証 | Sorcery, GitHub認証, GitHubログイン |
| 開発環境 | Docker |
| API | OpenAI API, GitHub API |
サービスの利用イメージ
- ユーザーはサイトにアクセス
ログインした場合の流れ
- 感謝状を書いてAIで画像生成
感謝状に相手の名前と感謝メッセージを書きます。
自分でタグを作る（感謝の内容やその人自身を連想させるようなAIが具体的な画像を生成しやすいキーワード）。
タグを元にAIで画像生成し、感謝状と共に掲示板投稿できる。
ログイン済みの場合
- 感謝メッセージ作成: 相手の名前、感謝メッセージ、相手に関連するタグを指定。
- AI画像生成: AIがタグをもとに画像を生成し、感謝メッセージと共に掲示板に投稿。
- 画像保存: 生成された画像は、自身のデバイスにも保存可能。
- アイテム獲得: 感謝メッセージを3回送信するとニット系アイテムを獲得。ユーザーのマイページと「とある場所」にて閲覧可能。
感謝メッセージの例：
〇〇さんいつもありがとうございます！この間、Rails基礎のメーラーの部分がわからなくて、〇〇さんさんに丁寧に解説していただけて理解することができました！
本当にありがとうございます！
タグの例：バトミントン, しば犬, 薬、ピンク、イチゴ、お酒
(タグには、その人の好きなものや関連するモチーフを入力する。)
-
感謝状を3回送ると、一つのアイテムを獲得
- アイテムは、編み物をテーマにしたもの。
- 獲得したアイテムは、ユーザーのマイページでにて表示。
- 自分でコレクションにして楽しむことがでる。
-
Xシェア機能
- 生成された画像をXシェア。
感謝状投稿後に感謝状詳細ページにある、「Xでメッセージを送る」ボタンをクリックする。 - 投稿ごとの画像に合わせて加工された画像がXシェアされる。
- 生成された画像をXシェア。
-
検索機能
- 感謝状一覧画面で、名前と感謝のメッセージとタグを検索することができる。
ログインしていない場合
- 閲覧のみ: 感謝状一覧や検索機能のみ利用可能。
サービスの深掘りについて
ログイン必須に対する理由
匿名での感謝表現も需要があると感じますが、このサービスは個別に感謝を届けることに重きを置いています。
ログインを必須にすることで、感謝の履歴ややりとりの記録が残り、ユーザー間でのつながりが深まる効果が期待できます。
この設計によって、感謝がよりパーソナルに届けられると考えています。
アイテム獲得と主目的の関係
ユーザーが獲得したアイテムは、プロフィールに表示されます。
アイテムは13種類の中からランダムに付与されるため、ユーザー間でどのアイテムが獲得できたか会話をするきっかけにもなります。
自分でコレクションする楽しみがあり、アイテムはただの報酬ではなく、感謝の可視化と共有を助ける存在として設計しています。
ユーザー感謝メッセージ送信のハードルについて
感謝のメッセージは、相手の特徴を反映させた画像が理想ですが、もし相手の好みがわからない場合でも、基本のテンプレートや一般的なタグで画像を生成することが可能です。
相手を思い浮かべること自体が大切であり、リサーチをしなくても送れる設計になっています。
工夫した点
ユーザビリティ面
【ビジュアル面 1】
編み物や感謝から伝わる温かいイメージを表現するために、ところどころに手作りのものを施しました。トップページは手描きのイラストにし、Xシェアの加工される際に出てくるピンクの編み地は本当に編んだものを画像にしました。
【ビジュアル面 2】
直感的に、何ができるのかがわかりやすくなるようにしました。
ページタイトルを見て、ユーザーが入力して出てきたボタンを押したら、自然とアプリのサービスを体験できるように工夫しました。
使い方ガイドやページも用意することで、ユーザーが使い方を確認できるようにしました。
【機能面】
月の2回までの投稿制限を設け、3回投稿するとアイテムを一つ獲得できるようにしたこと。
そうすることで、ユーザーが定期的にアプリに訪問したくなる動機を作りました。
【気をつけた点】
自分に向けられた感謝状を一覧で見られるようにすることは敢えてしませんでした。（検索をしたら、ある程度見つけられるのですが。）
近年、SNSのいいね数や投稿内容で人と比較してしまって、ネガティブな気持ちになってしまうことがあると思います。このアプリでも、感謝の比較が生まれてしまう懸念点があり、敢えてアプリの中でそれを作り出すような機能は作らないようにしました。
感謝状一覧を眺める中で、たまたま自分の感謝状を見つけた時の喜びを楽しんでいただけたらと思っております。
ロジック面
【AI生成画像をデータベースに保存する前に二つ表示すること】
AI生成画像（生成されてすぐの時は、期限付きurl）はすぐにユーザーのデバイスに保存しないと消えてしまいます。
ユーザーが生成した画像を選べるようにしたかったため、一時的にセッションに入れることで解決しました。
【ユーザーの選択したAI生成画像をデーターベースに保存すること】
AI生成画像が生成されてすぐの時は、期限付きurlなので、そのままデータベースに保存することができません。そのため、一時ファイルを利用し、期限付きurlを画像データに変更してから、データベースに保存するようにしました。
【Xシェアのog画像を投稿ごとに変更し加工すること】
投稿ごとに画像を変更する方法は、キャッシュ問題を解決することでできるようになりました。参考にさせてくださった先輩ありがとうございます🙏
その後、gem MiniMagickを使った加工をしました。希望の画像にするためにロジックを考えることに苦労しましたが、無事に解決しました。
今後の展望
複雑なロジックを必死で実装してきたため、今後はファットコントローラーの解消に努めていきたいです。
加えて、ユーザーの方々からありがたいフィードバックをいただいているので、少しずつ修正していきたいと考えております。
おわりに
プログラミング学習からアプリ制作まで、壁にぶち当たった時は、RUNTEQコミュニティの皆さんにたくさん相談に乗っていただき助けていただきました。
本当にありがとうございます！
今後も、どんなことにも諦めずに突き進んでいきます！
何か私のお役に立てるようなことがあれば、いつでも話しかけてください。
アプリも愛を持って使ってくださり本当にありがとうございます。
ご覧いただき、ありがとうございました。
このアプリが少しでもコミュニティ内の人間関係を温かく編むお手伝いができたら嬉しいです。
https://amucommu.com/