目的
- Rails6のアプリ作成からシンプルなカレンダーを表示させるまでの手順をまとめる
環境
- Rails version
- 6.0.2.1
- SQLite3
- 1.4
- OS
- macOS 10.13.6
目標
- http://localhost:3000/home/topにアクセスした時にカレンダーが表示される。
- データベースからのデータをセルに表示して。。。などややこしいことはせずとにかくカレンダーを表示する。
公式の手順
実施方法
-
Rails6のアプリを作成
-
下記コマンドを実行して「simple_calendar」という名前のアプリを作成する。
$ rails _6.0.0_ new simple_calendar
-
下記コマンドを実行して一度simple_calendarを起動する。
$ cd simple_calendar $ rails s
-
ブラウザでhttp://localhost:3000/にアクセスし下記の画面が表示されるか確認する。
-
下記キーを押下して一旦アプリを停止する。
- 「Ctrl」 + 「c」
-
-
http://localhost:3000/home/top
の画面表示準備-
下記コマンドを実行して「homeコントローラ」と「topアクション」と対応するビューファイルを作成する。
$ rails g controller home top
-
下記コマンドを実行して一度simple_calendarを起動する。
$ rails s
-
ブラウザでhttp://localhost:3000/home/topにアクセスし下記の画面が表示されるか確認する。
-
下記キーを押下して一旦アプリを停止する。
- 「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
- アプリ名ディレクトリ直下にあるGemFileの最終行に
-
Gemの設定
- 下記のファイルのファイルを開く。
- アプリ名ディレクトリ/app/assets/stylesheets
- application.css
- アプリ名ディレクトリ/app/assets/stylesheets
-
*= 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 */
-
- 下記のファイルのファイルを開く。
-
表示確認
- 下記のファイルを開く。
- アプリ名ディレクトリ/app/views/home
- top.html.erb
- アプリ名ディレクトリ/app/views/home
-
下記のコードを追記する。
<%= month_calendar do |date| %> <%= date %> <% end %>
-
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 %>
-
-
下記コマンドを実行して一度simple_calendarを起動する。
$ rails s
-
ブラウザで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のプレビューを記載する。