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

# 目的

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

# 環境

- Rails version
    - 6.0.2.1
- SQLite3
    - 1.4
- OS
    - macOS 10.13.6

# 目標

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

# 公式の手順

- [simple_calendar](https://github.com/excid3/simple_calendar)

# 実施方法

1. Rails6のアプリを作成
    1. 下記コマンドを実行して「simple_calendar」という名前のアプリを作成する。

        ```terminal
        $ rails _6.0.0_ new simple_calendar
        ```
    1. 下記コマンドを実行して一度simple_calendarを起動する。

        ```terminal
        $ cd simple_calendar
        $ rails s
        ```
    1. ブラウザで[http://localhost:3000/](http://localhost:3000/)にアクセスし下記の画面が表示されるか確認する。

        ![スクリーンショット 2020-02-17 22.09.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a152338c-3943-9c80-f153-f385cc3ee700.png)

    1. 下記キーを押下して一旦アプリを停止する。
        - 「Ctrl」 + 「c」

1. `http://localhost:3000/home/top`の画面表示準備
    1. 下記コマンドを実行して「homeコントローラ」と「topアクション」と対応するビューファイルを作成する。

        ```terminal
        $ rails g controller home top
        ```
    1. 下記コマンドを実行して一度simple_calendarを起動する。

        ```terminal
        $ rails s
        ```
    1. ブラウザで[http://localhost:3000/home/top](http://localhost:3000/home/top)にアクセスし下記の画面が表示されるか確認する。

        ![スクリーンショット 2020-02-17 22.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d039f478-6527-6ea3-efbc-50c480b5f6fc.png)
    1. 下記キーを押下して一旦アプリを停止する。
        - 「Ctrl」 + 「c」
        
1. Gemのインストール
    1. アプリ名ディレクトリ直下にあるGemFileの最終行に`gem "simple_calendar", "~> 2.0"`と追記する。
    - 下記に記載前後のGemFileを記載する。
        - 記載前

            ```ruby
            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]
            ```
        - 記載後 

            ```ruby
            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"
            ```
    1. 下記コマンドを実行してGemをインストールする。

        ```terminal
        $ bundle install
        ```
1. Gemの設定
    1. 下記のファイルのファイルを開く。
        - アプリ名ディレクトリ/app/assets/stylesheets
            - application.css
    1. `*= require simple_calendar`を追記する。
        - 記載前

            ```javascript
            /*
             * 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
             */
            ```
        - 記載後

            ```javascript
            /*
             * 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. 表示確認
    1. 下記のファイルを開く。
        - アプリ名ディレクトリ/app/views/home
            - top.html.erb
    1. 下記のコードを追記する。

        ```erb
        <%= month_calendar do |date| %>
          <%= date %>
        <% end %>
        ``` 

    1. top.html.erbの追記前後の様子を記載する。
        - 追記前

            ```erb
            <h1>Home#top</h1>
            <p>Find me in app/views/home/top.html.erb</p>
            ```
        - 追記後

            ```erb
            <h1>Home#top</h1>
            <p>Find me in app/views/home/top.html.erb</p>
            
            <%= month_calendar do |date| %>
              <%= date %>
            <% end %>
            ```
    1. 下記コマンドを実行して一度simple_calendarを起動する。

        ```terminal
        $ rails s
        ```
    1. ブラウザで[http://localhost:3000/home/top](http://localhost:3000/home/top)にアクセスし下記の画面が表示されるか確認する。(月日はいつを表示していてもOK)

        ![スクリーンショット 2020-02-17 22.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/90a7355a-d09b-ad07-c41c-1444f4f67add.png)

# 予告

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

    ```erb
    <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](http://localhost:3000/home/top)のプレビューを記載する。

    ![スクリーンショット 2020-02-17 23.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/732a82ce-d0df-c9e8-59ba-6724ae87c140.png)