1
Help us understand the problem. What are the problem?

posted at

updated at

カレンダーミニアプリを作ってみた

RailsのGemであるSimple Calendarを利用して、ミニアプリを作ってみた。

アプリの新規作成

まずはアプリの新規作成から。
ターミナルで以下を実行する。

ターミナル
rails _6.0.0_ new minicalendar -d mysql

次にencodingの設定を変更。

config/database/yaml
default: &default
  adapter: mysql2
  encoding: utf8  #ここを変更する
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root

.gitignoreファイルの一番下の行に、.Ds_Storeと追記。

gitignore
/public/packs
/public/packs-test
/node_modules
/yarn-error.log
yarn-debug.log*
.yarn-integrity
.Ds_Store  #ここに追記

続いてGemfileの編集。

Gemfile
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
 # Use mysql as the database for Active Record
gem 'mysql2', '>= 0.5.3'  #ここを変更

ターミナルでbundle installを実行する。

ユーザー機能の実装

次にユーザー機能を実装していく。
まずはGemの導入。

Gemfile
gem 'devise'
#一番下に追記する

追記後、bundle install。

ターミナルで以下を実行してdeviseをインストール → モデルの作成。

ターミナル
rails g devise:install
rails g devise user

今回初期設定のメールアドレスとパスワード以外にユーザー名も登録したいので、以下のようにカラムを追加する。

db/migrate/xxxxxx_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      t.string :name  #追記

追記したらbundle install

nameカラムをパラメーターとして渡してあげる記述とauthenticate_user!メソッドを記述。
authenticate_user!メソッドを使用すると、処理が呼ばれた段階で、ユーザーがログインしていなければ、そのユーザーをログイン画面に遷移させる事ができる。

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

続いてビューファイルの作成。

ターミナル
rails g devise:views

ビューファイルにnameカラムの入力フォームを追加する。

app/views/devise/registrations/new.html.erb
 <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  </div>

シンプルカレンダーの導入

Gemfileに以下を記述。

Gemfile
gem "simple_calendar", "~> 2.4"
# 一番下に追記

bundle installを実行。

モデル作成。

ターミナル
rails g model calendar

次にルーティングを設定。
今回ルートパスにindexページを設定している。

config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'calendars#index'
  resources :calendar, only: [:index]
end

次にコントローラー。

ターミナル
rails g controller calendars
app/cotrollers/calendars_controller.rb
class CalendarsController < ApplicationController
  def index
  end
end

最後にビューファイルの作成。
とりあえずは以下のように記述すると、カレンダーのフォーマットのようなものが表示されるようになる。

app/views/calendars/index.html.erb
<%= month_calendar do |date| %>
  <%= date %>
<% end %>
app/assets/stylesheets/application.css
*= require simple_calendar  #追記
 *= require_tree .
 *= require_self
 */

実装確認

rails sでローカルサーバーを起動。
ユーザー登録を経て、表示されたのが、以下のページ。
スクリーンショット 2022-03-23 21.55.34.png

デザインは味気ないが、とりあえずは成功。

あとはこれに新規スケジュールの作成機能などを追加していくつもりだが、それはまた次回に。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?