Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What is going on with this article?
@kaz-u

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

サービス概要

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

サービスを制作した背景

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

サービスの使い方

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

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

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

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

いいねボタンは各投稿ページで選択することができます。
Image from Gyazo
いいねした投稿はお気に入り一覧に追加されます。
Image from Gyazo

苦労したこと

①RailsからVueに画像ファイルどうやって渡すの問題

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

②本番環境で投稿にめちゃくちゃ時間かかる問題

 ①ではgem carrierwaveを使用し、画像ファイル自体はs3に保存する形にしていました。開発環境で確認した際は問題なかったのですが、本番環境で投稿時間を測定すると画像1枚を含めて投稿するのに4sもかかっていました...
Image from Gyazo
 色々調べた結果、herokuを使用する際はブラウザからs3に直接アップロードする方法が推奨されていました。この方法を採用したところ、画像2枚を含めて投稿するのにかかる時間を1sまで抑えることができました。
Image from Gyazo

③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タグを動的に変更してあげることで解決しました。
Image from Gyazo

工夫した点

①画像をアップロードする際、トリミングを行えるようにする

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

②各投稿にアレンジ前の写真を載せるようにする

投稿一覧を閲覧する際、使用した商品が一目で分かるようにしました。
Image from Gyazo

ER図

インフラ構成

さいごに

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

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

18
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kaz-u
エンジニア転職を目指しています。 学習の気付きなどを発信していきたいと思います。
runteq
Webエンジニア就職に強いプログラミングスクールのRUNTEQ(ランテック)です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
18
Help us understand the problem. What is going on with this article?