【初心者向け】Railsでメモ付きカレンダーを作ってみよう。SimpleCalendar
どうも、Railsを勉強中のYumaです。
先日、勉強をかねてWeb上で動くメモ付きカレンダーアプリをRailsで作成しました。
実際に作ってみると簡単ですが、まだRailsに慣れてないと難しく感じるかもしれません。
そこで、今回の記事はRailsを使い始めて三ヶ月〜半年の初学者の方向けにRailsでカレンダーを作成する方法を解説します。
一緒に手を動かして作成していきましょう!
Railsカレンダーの完成イメージ
まず最初に今回作成するカレンダーの完成イメージを見てみましょう。
こちらが完成イメージです。
上にはメモ一覧とメモ投稿欄、下にはカレンダーがありますね。
しっかりと順番通りに進めば10分ほどで完成できます。
では、作成していきましょう。
Railsカレンダーを作ってみよう
一からRubyを使ってカレンダーを作ると時間がかかってしまうので、ここではSimpleCalendarというgem(Rubyのライブラリ)を使います。
注)すでにカレンダー用のファイルを作成している方は次のファイル作成を飛ばし、SimpleCalendarのgemを追加から参考にしてください。
ファイル作成
まずはファイルを作成しましょう。
$ rails new calendar #好きなアプリ名で大丈夫
calendarというファイルがしっかり作成されてることを確認して、次に進みましょう。
SimpleCalendarのgemを追加
次にカレンダーを簡単に表示できるSimpleCalendarのgemを追加しましょう。
まずは/Gemfileにgemを追加します。
gem 'simple_calendar', '~> 2.0'
分かりやすいように一番下に記述しておきましょう。
その後、追加したライブラリをインストールするためbundle installをしっかり行いましょう。
コントローラーを追加
次にコントローラーを追加してあげましょう。
$ rails g controller blogs index
作成に成功するとblogs_controller.rbとviewsにblogsフォルダ、indexファイルが以下のように追加されます。
今回の目的はメモ機能付きカレンダーなのでモデルも作成しましょう。
モデルを作成
$ rails g model blog
追加したメモはカレンダーの中に表示させたいため、必要な情報をマイグレーションファイルに以下のよう記入します。
class CreateBlogs < ActiveRecord::Migration[5.2]
def change
create_table :blogs do |t|
#ここから
t.string :title
t.text :content
t.datetime :start_time
#ここまでを追加
t.timestamps
end
end
end
記述後は
rails db:migrate
をしっかりと行いましょう。
モデルが作成できたので、コントローラー・ビューを追加します。
コントローラーは以下のように
class BlogsController < ApplicationController
def index
@blogs = Blog.all
@blog = Blog.new
end
def new
@blog = Blog.new
end
def show
@blog = Blog.find(params[:id])
end
def create
Blog.create(blog_parameter)
redirect_to blogs_path
end
def destroy
@blog = Blog.find(params[:id])
@blog.destroy
redirect_to blogs_path, notice:"削除しました"
end
def edit
@blog = Blog.find(params[:id])
end
def update
@blog = Blog.find(params[:id])
if @blog.update(blog_parameter)
redirect_to blogs_path, notice: "編集しました"
else
render 'edit'
end
end
private
def blog_parameter
params.require(:blog).permit(:title, :content, :start_time)
end
end
ビューは以下のように追加しましょう!(edit.html.erbとshow.html.erbは作成してないので、追加しましょう。)
<p id="notice"><%= notice %></p>
<div class="toppage">
<h1 class="top">カレンダー</h1>
<br>
<div class="row">
<div class="col-md-4">
<div class="schedule">今後の予定一覧</div>
<table class="table">
<thead class="thead-light">
<tr>
<th>タイトル</th>
<th>日程</th>
</tr>
</thead>
<tbody>
<% @blogs.each do |blog| %>
<tr>
<td><%= link_to blog.title , blog %></td>
<td><%= blog.start_time.strftime("%m-%d") %></td>
</tr>
<% end %>
</tbody>
</table>
<%= form_with(model: @blog, local: true) do |form| %>
<div class="title">
<div class="form-tag">タイトル</div>
<%= form.text_field :title %>
</div>
<div class="content">
<div class="form-tag">内容</div>
<%= form.text_field :content %>
</div>
<div class="time">
<div class="form-tag">時間</div>
<%= form.datetime_select :start_time %>
</div>
<div class="submit">
<%= form.submit %>
</div>
<% end %>
</div>
<br>
<br>
<div class="col-md-8">
<%= month_calendar events: @blogs do |date, blogs| %>
<%= date.day %>
<% blogs.each do |blog| %>
<div>
<%= link_to blog.title, blog %>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
<%= form_with(model: @blog, local: true) do |form| %>
<div class="title">
<div class="form-tag">タイトル</div>
<%= form.text_field :title %>
</div>
<div class="content">
<div class="form-tag">内容</div>
<%= form.text_field :content %>
</div>
<div class="time">
<div class="form-tag">時間</div>
<%= form.datetime_select :start_time %>
</div>
<div class="submit">
<%= form.submit %>
</div>
<% end %>
<p id="notice"><%= notice %></p>
<div class="show">
<p>
<strong>タイトル</strong>
<%= @blog.title %>
</p>
<p>
<strong>内容</strong>
<%= @blog.content %>
</p>
<p>
<strong>日時</strong>
<%= @blog.start_time.strftime("%m-%d") %>
</p>
<%= link_to '編集', edit_blog_path(@blog) %>
<%= link_to '消去',blog_path(@blog.id), method: :delete, data: { confirm: '本当に?' } %>
<%= link_to '戻る', blogs_path %>
</div>
これで一連の機能を作成することができました。
見やすいカレンダーにするためindex.html.erb上で新規投稿ができるようしているため、あえてnew.html.erbを作成していません。アレンジする方はぜひ作成してみてください。
最後に以下の三つを行えば完成です。
ルーティングを設定。
routes.rbを以下のように編集。
Rails.application.routes.draw do
root to: 'blogs#index'
resources :blogs
end
SimpleCalendarのviewsを追加
SimpleCalendarの編集をするためにもviewを作成しておきましょう。(現時点で中身はいじらなくて大丈夫)
$ rails g simple_calendar:views
SimpleCalendarのCSSを追加
application.scssに以下の一文を追加しましょう。追加することでSimpleCalendarにCSSが適応されます。
\この一文を正しく記述しないとCSSが反映されないので気をつけましょう。
/*
*= require simple_calendar #こちらを追加
*= require_tree .
*= require_self
*/
機能面はこれで完成!お疲れ様です!
実際にローカルサーバーで確認してみましょう。
以下のようになっていれば完成です。
Railsカレンダーをアレンジしてみよう
Railsカレンダーの見た目をもう少しアレンジしてみたい、そんな方はぜひCSSをいじってみましょう!
また、コードを書き換えることで週ごとのカレンダーの表示やカレンダー内の文字を日本語にすることができます。
コードを書き換える際はSimpleCalendar公式Gitページを参考にしましょう。英語ですが詳しく書かれています。
また、実際に僕がアレンジしたカレンダーはこちらです。
Herokuという無料サーバーに上げているため、表示に十数秒かかるかもです...。
ぜひアレンジしてみましょう。
まとめ
この記事ではRailsでカレンダーを作成する方法をご紹介しました。
SimpleCalendarを使えば簡単に作成することができます。
ぜひ、Rails練習中の方は一度作成してみましょう!
比較的簡単な構成になっているので、Railsの概要を掴むのに最適です。
また、記事の中で質問などあれば遠慮なくTwitterへDMしてください。
では、お互いRailsの勉強を頑張りましょう!
Discussion