LoginSignup
10
3

More than 1 year has passed since last update.

@miya1221(miya)

【Rails】『エクササイズを楽しく継続したい』をテーマに、ポートフォリオを作成しました

Last updated at Posted at 2021-07-27

Image from Gyazo

1.はじめに

閲覧して頂き、ありがとうございます。
今回Railsで作成したアプリについて、その概要や開発の経緯をまとめました。
最後まで、読んで頂けると幸いです。

2.アプリの特徴

『エクササイズを楽しく継続したい』をテーマにしたSNS型記録アプリです。

  • SNSにはお馴染みの投稿、コメント、いいね、フォロ-４つの機能
  • 目標にそって、好きなエクササイズを設定
  • 積み上げ時間によって、どんどんレベルがアップしていく仕組み
  • レベルが上位３名になると、ランクインする

3.アプリ作成背景

私自身、健康のために毎日運動に取り組んでいます。
しかし、孤独な環境では楽しさを感じず、モチベーションを維持するのが大変でした。

そこで、同じ様に「エクササイズを楽しく継続したい」と感じているユーザーと積極的にコミュニケーションをとりながら、励まし合うことのできるツールがあれば、今よりももっと楽しくエクササイズを継続できるのではないかと考え、本アプリを作成しました。
また、本アプリにはゲームフィケーション要素を取り入れ、「楽しさ」を感じて頂けるように工夫しました。
（アプリ名は、「ツミエク」と呼びます。”エクササイズを積み上げる”ので、コレにしました。）

4.機能一覧

Tumiekuにつけたすべての機能は、以下の16機能です。

機能 Gem
① ログイン・ログアウト機能 devise
② アカウント登録、プロフィール編集機能 devise
③ ゲストログイン機能 ☓
④ 目標登録・編集機能 ☓
⑤ いいね機能(Ajax) ☓
⑥ コメント機能 ☓
⑦ 投稿機能(CRUD) ☓
⑧ エクササイズ登録機能(CRUD) ☓
⑨ フォロー機能 ☓
⑩ ページネーション機能 kaminari
⑪ レベルアップ機能 ☓
⑫ ランキング機能 ☓
⑬ 画像アップロード機能 carrierwave
⑭ フラッシュメッセージ表示機能 ☓
⑮ レスポンシブ対応 Bootstrap
⑯ Rspecテスト実装 rspec-rails / factory_bot_rails / faker

5.使用技術

  • 言語：Ruby (2.7.2)
  • フレームワーク：Ruby on Rails (6.1.3.2)
  • フロントエンド：HTML&CSS/Bootstrap/JavaScript/jQuey
  • DB：PostgreSQL
  • テスト：Rspec
  • インフラ：Heroku(ステージング環境→本番環境)+AWS(S3)
  • ソースコード管理：GitHub(Projectsのカンバン方式でタスクを管理)
  • その他使用ツール&素材等
    • Visual Studio Code
    • draw.io
    • unDraw(イラスト素材)
    • Color Hunt(カラーパレットツール)
    • Material Design Icon(アイコン)
    • ロゴメーカー / STORES(ロゴ)

6.ER設計

ER図.png

7.ポートフォリオのURL

  • URL:https://tumieku-app.herokuapp.com
  • ホーム画面・ヘッダーから、ゲストログインボタンで簡単にログインできます。（その他、アカウント登録・ログイン画面でもゲストログインが可能です。）

スクリーンショット 2021-07-26 23.01.19.png

8.アプリの使用イメージ

  • 好きなエクササイズ登録できる

Image from Gyazo

  • 投稿内容をシェア

最初から日付入力されているため、エクササイズの選択・時間・感想を入力するだけで、毎日簡単に投稿できます。

Image from Gyazo

  • コメント投稿・いいね機能（Ajax）

投稿をクリックするだけで、簡単に詳細ページへ移行できます。
モチベーションが上がるように、コメント数といいね数が表示しました。

Image from Gyazo

  • ゲームフィーション要素（レベルアップ機能・ランキング機能）

毎日楽しくエクササイズを継続できるように、エクササイズの合計時間によって、レベルがアップする機能を取り入れ、上位3名になるとランクインする仕組みを作りました。

スクリーンショット 2021-08-13 8.27.40.png

9.工夫したこと

①チーム開発を意識

実務でのチーム開発を想定した開発を行いました。
① Git, GitHubを用いたソース管理
② Projects のカンバン方式でタスクを管理
③ ブランチ運用は、「管理のしやすさ・リリースの頻度・複雑さ」を比較し、Gitflowを採用
④ こまめにcommitし、プルリクエストを出しマージする流れで開発

ブランチ名 本番用 備考
master 本番用 本番リリース用のブランチ
develop 開発用 機能実装用のブランチはここから切る
feature 機能実装用 派生元は develop ブランチ
release リリース用 develop ブランチから分岐、タグ付けを行う

②ゲストユーザーは、編集・削除できないように設定

  • 下記のように設定し、誤って「更新」や「削除」をクリックしても、フラッシュメッセージが表示され、ホーム画面にリダイレクトされるようにしました。
routes.rb
Rails.application.routes.draw do
  root 'homes#index'
  devise_for :user, controllers: {
    registrations: 'users/registrations'
  }
(略)
end
app/controllers/users/registrations_controller.rb

class Users::RegistrationsController < Devise::RegistrationsController
  before_action :ensure_normal_user, only: %i[update destroy]

  def ensure_normal_user
    if resource.email == "guest@example.com"
      redirect_to root_path, alert: "ゲストユーザーの更新・削除はできません。"
    end
  end
end

③UI/UX

  • ファーストビューは、何のアプリなのかが伝わるように作成。
  • アイコンやロゴを積極的に使用し、全体的にシンプルなデザインへ。
  • アプリのカラーは、TumiekuがSNS的な要素を持ち、｢人との繋がり｣｢励まし合い｣といった要素も含むため、メインカラ−のオレンジに設定。
  • 統一感をだすため、下記の配色を参考にデザインしました。

Color Hunt Palette (1).png

10.苦労したところ

①Rspecテストのエラー

  • 状況

エクササイズの情報（exercise：外部キー）をもつ、記事（article）の新規投稿（create）で、「パラメーターが正常な時、リクエストが成功する」テスト実行中に、テストでは、「302を予想していたけど、200です。」と弾かれテストが通らない状況。

テストの結果
 1) Articles Logind POST #create パラメータが正常なとき リクエストが成功する
   Failure/Error: expect(response).to have_http_status(302)
    expected the response to have status code 302 but it was 200
   # ./spec/requests/articles_spec.rb:110:in `block (5 levels) in <main>'
  • 原因

今回の原因は、下記の２つです。
① テスト用のデータを上手く作成出来ていなかった。（Fakerの書き方の間違い。）
② テスト用データをコントローラーに渡せていなかった。（上手く作成出来ていなかったので、渡せていない。）

  • 解決策

exercise_id は、外部キーのため、このarticle(記事)は、exercise(エクササイズ)に紐づいて作成される。そのため、このようなexercise_id { FactoryBot.create(:exercise).id }書き方で、紐づけるexerciseのデータを作成する必要がありました。

spec/factories/articles.rb
FactoryBot.define do
 factory :article do
  day { Faker::Date.in_date_period }
  minutes { Faker::Number.within(range: 1..300) }
  body { Faker::Lorem.paragraph }
  user
  exercise_id { FactoryBot.create(:exercise).id }
 end
 trait :invalid do
  body { nil }
 end
end

②レスポンシブの実装

基本BootstrapのGridsystemを利用しましたが、レスポンシブすると崩れたり、ホーム画面端に謎の余白ができてしまい、原因を探して改善するのに苦労しました。
また、アプリの機能を作るだけでなく、「ユーザーにとって使いやすいデザインや設計になっているのか？」も意識することが大切だと学びました。

11.開発で意識したこと

①エラー解決に対して

実務に入ったときに先輩社員や上司の時間を無駄に奪うことにならないように
まずは、下記の順番にそって自分の力で解決することを意識しました。

① エラーメッセージやログをよく読む
② エラー文から、どの段階でエラーが出ているか考える
③ bindnig.pry でデバッグする
④ エラー内容を検索する(できるだけ一次情報から読み解くことを意識)
⑤ どうしても解決できなければメンターの方へ質問する

  • 質問する場合は、下記の2つを実施。
    • 質問する前に、コミュニティ内で同じような質問がないか検索し、似た内容は参考にする
    • 質問して学んだことは、Qiita等へアウトプットし同じエラーが起こっても、今度は自分で解決できるようにする

②質問の仕方

Slackを使って、以下の構成で質問していました。
なるべく少ないやり取りで済み、相手の人の時間を無駄に奪わない内容にすることを意識しました。

① 何をしたいのかを明確に記載する
② 試したこと（コード・参考記事も一緒に添付）
③ どこで詰まっているのか（エラーメッセージ）
→メンターの方から意見を頂いたところで、わからない所は恥ずかしがらず即確認する。（わかったふりをして進めると、メンターの方の時間を奪ってしまうため。）

  • 「質問しないこと＝自走力」と勘違いしがちですが、実務において1人でずっと悩み続けることはかえって損失になってしまうと思うので、 上記の方法である程度(30~40分)自力で解決できなかった場合には、端的かつ過不足ない内容で質問することで、時間的な損失を最小限にすることを心がけていきたいと思います。

12.今後の課題

  • AWSへデプロイ
  • デザイン面の改善（2021/08/07に対応完了しました。）
  • 「いいね」通知機能
  • ログイン後のリダイレクト先変更
  • ログイン時、毎日1日1回ランダムに一言表示
  • パスワード忘れた場合のパスワード再発行機能
  • TwitterAPIの導入（アプリのつぶやき内容をTwitterへ投稿できる）

「ポートフォリオ品評会」、コードレビューを通して、下記の機能を今後の課題へ追加

  • 検索機能（エクササイズを検索できる）
  • 継続日数など、もっと自身の積み上げがわかりやすい機能
  • カレンダー機能（投稿するとマークがついていくなど）
  • ファビコンの設定（2021/08/01に対応完了しました。）
  • ナビバーの設定（✖で閉じるボタン追加）（2021/08/02に対応完了しました。）

13.感想

設計から考えたアプリが、どんどん形になっていく過程は、楽しく夢中になりました。
実装中は、何度もエラーに躓きましたが、最後まで諦めずアプリをデプロイできて良かったです。

また、作成したアプリの評価・意見・要望を頂いて、改善していく過程も楽しく、とても刺激的です。今後の課題を通して、一つずつ学習しながら実装していきたいと思います。
長い記事になってしまいましたが、ここまで読んで頂きありがとうございました！

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
3