Rails6 シンプルなカレンダーを実装する

Last updated at 2020-02-18Posted at 2020-02-17

目的

Rails6のアプリ作成からシンプルなカレンダーを表示させるまでの手順をまとめる

環境

Rails version
- 6.0.2.1
SQLite3
- 1.4
OS
- macOS 10.13.6

目標

http://localhost:3000/home/topにアクセスした時にカレンダーが表示される。
データベースからのデータをセルに表示して。。。などややこしいことはせずとにかくカレンダーを表示する。

公式の手順

simple_calendar

実施方法

Rails6のアプリを作成
1. 下記コマンドを実行して「simple_calendar」という名前のアプリを作成する。
```
$ rails _6.0.0_ new simple_calendar
```
2. 下記コマンドを実行して一度simple_calendarを起動する。
```
$ cd simple_calendar
$ rails s
```
3. ブラウザでhttp://localhost:3000/にアクセスし下記の画面が表示されるか確認する。
4. 下記キーを押下して一旦アプリを停止する。
  - 「Ctrl」 + 「c」
http://localhost:3000/home/topの画面表示準備
1. 下記コマンドを実行して「homeコントローラ」と「topアクション」と対応するビューファイルを作成する。
```
$ rails g controller home top
```
2. 下記コマンドを実行して一度simple_calendarを起動する。
```
$ rails s
```
3. ブラウザでhttp://localhost:3000/home/topにアクセスし下記の画面が表示されるか確認する。
4. 下記キーを押下して一旦アプリを停止する。
  - 「Ctrl」 + 「c」

Gemのインストール

アプリ名ディレクトリ直下にあるGemFileの最終行にgem "simple_calendar", "~> 2.0"と追記する。

下記に記載前後のGemFileを記載する。

記載前

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

記載後

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "simple_calendar", "~> 2.0"

下記コマンドを実行してGemをインストールする。
```
$ bundle install
```

Gemの設定

下記のファイルのファイルを開く。
- アプリ名ディレクトリ/app/assets/stylesheets
  - application.css

*= require simple_calendarを追記する。

記載前

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

記載後

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require simple_calendar
 *= require_tree .
 *= require_self
 */

表示確認
1. 下記のファイルを開く。
  - アプリ名ディレクトリ/app/views/home
    - top.html.erb
2. 下記のコードを追記する。
```
<%= month_calendar do |date| %>
  <%= date %>
<% end %>
```
3. top.html.erbの追記前後の様子を記載する。
  - 追記前
    <h1>Home#top</h1> <p>Find me in app/views/home/top.html.erb</p>
  - 追記後
    <h1>Home#top</h1> <p>Find me in app/views/home/top.html.erb</p> <%= month_calendar do |date| %> <%= date %> <% end %>
4. 下記コマンドを実行して一度simple_calendarを起動する。
```
$ rails s
```
5. ブラウザでhttp://localhost:3000/home/topにアクセスし下記の画面が表示されるか確認する。(月日はいつを表示していてもOK)

予告

ビューファイルを下記のように記載するとカレンダーのセルに指定のコンテンツを記載できることがわかったため、DBの特定レコードのcreate_atなどとリンクさせてDB内コンテンツの記載をしてみようと思う。

忘れないように予告として書かせていただいた。

<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

<%= month_calendar do |date| %>
  <%= date %>
  <p>わろた</p>
<% end %>

下記に前述のコードを記載した際のhttp://localhost:3000/home/topのプレビューを記載する。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up