現在、個人アプリを作成しており、その中の機能として「トレーニングメモ機能」を実装することにしました。
スクールではカリキュラムになかった内容であったため、自身で色々と調べて実装したので、備忘録として記事にします。
皆様の実装に少しでも役立てていただければ、幸いです。
本記事該当Github: https://github.com/Tatsu88-Tokyo/BulkFriends2
実装に向けての考え
今回、「トレーニングメモ機能」を実装するにあたり、以下のことを考えました。
- 筋トレをする上で記録をつけることは、モチベーション維持に繋がる。
- 記録をつけるのであれば、日付別に記録をする必要がある。
- その記録を閲覧するときはできるだけ見やすい方がベター。
以上の考えから、今回の「トレーニングメモ機能はカレンダーを使用して、日付ごとに記録をつけられるようにすることを目標としました。
そこで、色々と調べた結果、今回はgemの「simple_calendar」を使用した実装をすることとしました。
以下にて、実装方法などを記載していきます。
実装イメージ
まず、今回実装するイメージを以下にて説明します。
今回、実装する機能は以下のようになってます。
1.カレンダーの表示
2.カレンダーへの投稿・削除・編集
1.カレンダー全体感+投稿内容詳細+投稿アクション
2.カレンダーへの投稿
事前準備
gem導入
まず、今回の実装に当たって必須となるgemを導入します。
gem 'simple_calendar', '~> 2.0'
#記載完了次第、Bundle installを忘れずに。
コントローラ/モデル準備
続いて、今回使用するコントローラを作成します。
$ rails g controller trainings
モデルも作成します。
rails g model training
その後、マイグレーションファイルにて、今回の仕様に合わせてテーブルを作成します。
class CreateTrainings < ActiveRecord::Migration[5.2]
def change
create_table :trainings do |t|
t.string :title
t.text :content
t.date :start_time
t.references :user, foreign_key: true
t.timestamps
end
end
end
$ rails db:migrate
コントローラとモデルの作成が完了しました。
以上で必要なファイルなどの準備ができましたので、コントローラなどを編集していきましょう。
モデル編集
まず、作成したモデルに今回の仕様に合わせて記述します。
こちらは先ほどのMigration fileに合わせて記載していきます。
class Training < ApplicationRecord
belongs_to :user
validates :title, presence: true
validates :start_time, presence: true
end
ユーザーモデルも関連しているので、忘れずに。
class User < ApplicationRecord
has_many : trainings
end
コントローラ編集
続いて、コントローラを編集します。
class TrainingsController < ApplicationController
before_action :set_user
def index
@trainings = current_user.trainings
end
def show
@training = current_user.trainings.find(params[:id])
end
def new
@trainings = current_user.trainings
end
def edit
@training = current_user.trainings.find(params[:id])
end
def update
@training = current_user.trainings.find(params[:id])
@training.update(update_params)
redirect_to trainings_path(@user.id)
end
def create
@training = current_user.trainings.new(training_memo)
if @training.save
redirect_to trainings_path(@user.id)
else
redirect_to new_training_path
end
end
def destroy
@trainings = current_user.trainings.find(params[:id])
@trainings.destroy
redirect_to trainings_path(@user.id)
end
private
def training_memo
params.permit(:start_time,:title, :content,:user_id)
end
def set_user
@user = User.find(params[:id])
end
def update_params
params.require(:training).permit(:start_time,:title, :content,:user_id)
end
end
View編集(indexのみ）
それではViewの編集をしていきます。
全てのViewを記事内に記載するとボリュームが多くなってしまうため、割愛します。
*editやdestroy向けのファイルに関して気になる方は、この記事の冒頭にある当方のGithubからご参照いただけますと幸いです。
今回のカレンダーを作成するにあたり、簡単かつ見栄えをよくするために"simple calendar"にて準備されているviewファイルをダウンロードします。
$ rails g simple_calendar:views
#=>以下のファイルが生成されます。
app/views/simple_calendar
app/views/simple_calendar/_calendar.html.erb
app/views/simple_calendar/_month_calendar.html.erb
app/views/simple_calendar/_week_calendar.html.erb
上記で作成したファイルを使用するために、cssファイルに以下のように記載いたします。
*= require simple_calendar
今回はマンスリーカレンダーを使用したかったので、Readmeに従って以下をベースに記載をします。
(ウィークリーカレンダーなど使用したい方はReadme参照ください)
<%= month_calendar events: @meetings do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<%= meeting.name %>
</div>
<% end %>
<% end %>
自身のファイルにあてはめます。
=render "home/header_login"
.trainings
=link_to "記録する", new_training_path ,class:"training-edit"
= month_calendar events: @trainings do |date,trainings|
= date.day
- trainings.each do |training|
=link_to training.title,training_path(training.id)
以上でviewの編集は完了です。
routing編集
最後にルーティングを編集します。
今回はユーザーとリンクさせるためにユーザーの記述にネスティングすることで実装しました。
resources :user, only: [:show, :edit, :update]do
resources :trainings
以上で、カレンダーを使用した”トレーニングメモ”機能が実装できました！
gemを使用することで簡単にカレンダー機能を実装できますね。
参照
Github Simple calendar
https://github.com/excid3/simple_calendar
【rails】simple_calendarを使ってカレンダーつきのブログ機能を作ってみた。
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0
simple calendarを使ってカレンダーを導入する
https://ywatanab.hatenablog.com/entry/2018/10/26/144038
以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。