【個人開発】アレンジ飯を共有するサービスArrangy(アレンジー）をリリースしました

サービス概要

コンビニ商品や外食店の料理を使用したアレンジ飯を共有するサービスです。
URL: https://arrangy.jp/
Github: https://github.com/kazu-2020/arrangy

サービスを制作した背景

　一人暮らしをしていた際、食事を外食店やスーパー、コンビニの惣菜で済ませることが多くありました。そのため、次第に同じ物を食べてばかりの食生活になり、結果、好きで食べていた物を「食べ飽きてしまった」という経験がありました。また、昨今のコロナによって外食が難しくなり、「食の選択肢」そのものが少なくなっているという印象を受けていました。
　そこで、これらの問題を解決する手段として私がサービスを通じて提案したのが「アレンジ飯」という選択肢です。アレンジ飯とは既に出来上がっている料理に一手間加えることで別の料理に変えることを言います。アレンジ飯の良さを一人でも多くの方に知ってもらいたいと思い、Arrangy(アレンジー)を制作しました。

サービスの使い方

注: タブレットサイズではデザインが崩れます!

まずはトップページです。
ログインしなくても、投稿されたアレンジ飯を確認することができ、ページ上部には新しく投稿されたアレンジ飯をカールセルを用いて表示しています。
また、ページをスクロールして頂くとアレンジ飯の一覧が表示され、「いいね数」の多い順に表示されるようになっています。

ログイン後は「新規投稿、コメント機能、いいね機能」を使用することができます。

新規投稿する際は、下記の項目を設定してもらうようになっています。
・　画像投稿　・・・　アレンジ前の写真とアレンジ後の写真を１枚ずつ選択する。
・　タイトル
・　投稿内容・・・　材料や作り方を記入する
・　アレンジ度　・・・　アレンジの度合いを「ちょい足し」「激変」の2択から選択する。
・　おすすめ度　・・・　5段階で設定する。

いいねボタンは各投稿ページで選択することができます。

いいねした投稿はお気に入り一覧に追加されます。

苦労したこと

####①RailsからVueに画像ファイルどうやって渡すの問題
Railsのみ使用していた時は、form_withがよしなにやってくれていたので、何も意識せずに画像ファイルを扱うことができました。しかし、フロントにVueを使用した場合はよしなにやってくれていた箇所を自分で実装しなければなりません。
そこで今回はVueからRailsへエンコードしたデータURLを渡し、Rails側でデコードを行うことでこの問題を解決しました。しかし、この実装は次の問題で泣く泣く変更することになりました(笑)。

####②本番環境で投稿にめちゃくちゃ時間かかる問題
　①ではgem carrierwaveを使用し、画像ファイル自体はs3に保存する形にしていました。開発環境で確認した際は問題なかったのですが、本番環境で投稿時間を測定すると画像１枚を含めて投稿するのに4sもかかっていました...

　色々調べた結果、herokuを使用する際はブラウザからs3に直接アップロードする方法が推奨されていました。この方法を採用したところ、画像2枚を含めて投稿するのにかかる時間を1sまで抑えることができました。

####③TwitterのOGPが動的に変更されない問題
フィードバックを元に各投稿をtwitterでシェアできる機能を実装する際に発生した問題です。これはVue側でmetaタグが動的に変更されるようにしていても、twitterのクローラーがJavaScriptを実行してくれないのが原因でした。この問題を解決するためにNuxtを使用するといる案もありましたが、既にサービスがほとんど完成していた状態でしたので別の案を採用しました。
それがtwitterクローラーがアクセスしてきた場合のみ、静的なHTMLを返すという手法です。
まず判別方法ですが、twitterクローラーの場合は、Twitterbot/1.0という情報がユーザーエージェントに含まれます。そのため、routingのオプションにあるconstraintsを使用して下記のようなルーティングを設定してあげることで実現しました。

  get '/arrangements/:id', to: 'crawlers#show', constraints: { user_agent: /Twitterbot\/1.0/ }

後は、gem metatagsを使用してmetaタグを動的に変更してあげることで解決しました。

工夫した点

####①画像をアップロードする際、トリミングを行えるようにする
サイトに表示される際にアスペクト比1:1で表示されるのですが、cssのcontainやcoverでは不自然な画像に整形されることがあったので、ユーザーにアスペクト比1:1でトリミングした画像を投稿してもらうようにしました。

####②各投稿にアレンジ前の写真を載せるようにする
投稿一覧を閲覧する際、使用した商品が一目で分かるようにしました。

ER図

インフラ構成

さいごに

今回初めてのサービスを無事にリリースすることができました。
個人的にはサービスのアイディア出しに非常に苦労したので、就活用の１ポートフォリオではなく、大変思い入れのあるサービスになりました。
今後も引き続き、改善していきたいと思っているのでフィードバックなど貰えると幸いです。

是非、ご家族やご友人にアレンジ飯を振る舞ってみてください！