目的

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

環境

• Rails version
  • 6.0.2.1
• SQLite3
  • 1.4
• OS
  • macOS 10.13.6

目標

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

実施方法

1. 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」

2. 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」

3. Gemのインストール

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

   2. 下記に記載前後の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 Recordgem'sqlite3','~> 1.4'# Use Puma as the app servergem'puma','~> 3.11'# Use SCSS for stylesheetsgem'sass-rails','~> 5'# Transpile app-like JavaScript. Read more: https://github.com/rails/webpackergem'webpacker','~> 4.0'# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinksgem'turbolinks','~> 5'# Build JSON APIs with ease. Read more: https://github.com/rails/jbuildergem'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.rbgem'bootsnap','>= 1.4.2',require: falsegroup:development,:testdo# Call 'byebug' anywhere in the code to stop execution and get a debugger consolegem'byebug',platforms: [:mri,:mingw,:x64_mingw]endgroup:developmentdo# 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/springgem'spring'gem'spring-watcher-listen','~> 2.0.0'endgroup:testdo# Adds support for Capybara system testing and selenium drivergem'capybara','>= 2.15'gem'selenium-webdriver'# Easy installation and use of web drivers to run system tests with browsersgem'webdrivers'end# Windows does not include zoneinfo files, so bundle the tzinfo-data gemgem'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 Recordgem'sqlite3','~> 1.4'# Use Puma as the app servergem'puma','~> 3.11'# Use SCSS for stylesheetsgem'sass-rails','~> 5'# Transpile app-like JavaScript. Read more: https://github.com/rails/webpackergem'webpacker','~> 4.0'# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinksgem'turbolinks','~> 5'# Build JSON APIs with ease. Read more: https://github.com/rails/jbuildergem'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.rbgem'bootsnap','>= 1.4.2',require: falsegroup:development,:testdo# Call 'byebug' anywhere in the code to stop execution and get a debugger consolegem'byebug',platforms: [:mri,:mingw,:x64_mingw]endgroup:developmentdo# 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/springgem'spring'gem'spring-watcher-listen','~> 2.0.0'endgroup:testdo# Adds support for Capybara system testing and selenium drivergem'capybara','>= 2.15'gem'selenium-webdriver'# Easy installation and use of web drivers to run system tests with browsersgem'webdrivers'end# Windows does not include zoneinfo files, so bundle the tzinfo-data gemgem'tzinfo-data',platforms: [:mingw,:mswin,:x64_mingw,:jruby]gem"simple_calendar","~> 2.0"

   3. 下記コマンドを実行してGemをインストールする。

      $bundle install

4. Gemの設定

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

   2. *= 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
         */

5. 表示確認

   1. 下記のファイルを開く。
      • アプリ名ディレクトリ/app/views/home
        • top.html.erb

   2. 下記のコードを追記する。

      <%=month_calendardo|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_calendardo|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_calendardo|date|%><%=date%><p>わろた</p><%end%>

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