Help us understand the problem. What is going on with this article?

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

目的

  • 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/にアクセスし下記の画面が表示されるか確認する。

      スクリーンショット 2020-02-17 22.09.47.png

    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にアクセスし下記の画面が表示されるか確認する。

      スクリーンショット 2020-02-17 22.13.44.png

    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 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"
        
    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_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)

      スクリーンショット 2020-02-17 22.39.52.png

予告

  • ビューファイルを下記のように記載するとカレンダーのセルに指定のコンテンツを記載できることがわかったため、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のプレビューを記載する。

    スクリーンショット 2020-02-17 23.15.37.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした