📆

【初心者向け】Railsでメモ付きカレンダーを作ってみよう。SimpleCalendar

2022/10/14に公開

どうも、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

追加したメモはカレンダーの中に表示させたいため、必要な情報をマイグレーションファイルに以下のよう記入します。

db/migrate/作成日_create_blogs.rb
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

をしっかりと行いましょう。

モデルが作成できたので、コントローラー・ビューを追加します。
コントローラーは以下のように

app/controllers/blogs._controllers.rb
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は作成してないので、追加しましょう。)

app/views/blogs/index.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>
app/views/blogs/edit.html.erb
<%= 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 %>
app/views/blogs/show.html.erb
<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を以下のように編集。

config/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が反映されないので気をつけましょう。

app/assets/stylesheets/application.css
/*
 *= require simple_calendar #こちらを追加
 *= require_tree .
 *= require_self
 */

機能面はこれで完成!お疲れ様です!
実際にローカルサーバーで確認してみましょう。

以下のようになっていれば完成です。

Railsカレンダーをアレンジしてみよう

Railsカレンダーの見た目をもう少しアレンジしてみたい、そんな方はぜひCSSをいじってみましょう!

また、コードを書き換えることで週ごとのカレンダーの表示やカレンダー内の文字を日本語にすることができます。

コードを書き換える際はSimpleCalendar公式Gitページを参考にしましょう。英語ですが詳しく書かれています。
https://github.com/excid3/simple_calendar

また、実際に僕がアレンジしたカレンダーはこちらです。

https://calendar0214.herokuapp.com/

Herokuという無料サーバーに上げているため、表示に十数秒かかるかもです...。

ぜひアレンジしてみましょう。

まとめ

この記事ではRailsでカレンダーを作成する方法をご紹介しました。
SimpleCalendarを使えば簡単に作成することができます。

ぜひ、Rails練習中の方は一度作成してみましょう!

比較的簡単な構成になっているので、Railsの概要を掴むのに最適です。
また、記事の中で質問などあれば遠慮なくTwitterへDMしてください。

では、お互いRailsの勉強を頑張りましょう!

Discussion