おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

【Rails】調整さんのようなカレンダーを表示する

調整さんのようなカレンダーを作ると表示する内容が固定されていればtableタグなどで出来るが、 DBに保存された内容だとどうhtmlを組めば分からない。


調整さんってご存知ですか?

調整さん - 簡単スケジュール調整、出欠管理ツール

ちょっとした打合せとかする時に皆の予定を確認するのにめちゃくちゃ便利な調整さん。

これと似たような画面をrailsでどうやって作るのかな〜と思い試してみました。

調整さんを使ったカレンダー画像
調整さんを使ったカレンダー画像

こちらが完成イメージです。それではカレンダーを表示してみましょう!

この記事を読めば以下2つが分かるようになります。

調整さんを実現するモデル

キャラクターモデル

# character.rb
class Character < ApplicationRecord
  extend Enumerize

  has_many :deathblows
  has_many :character_magics, dependent: :destroy
  has_many :magics, through: :character_magics
  accepts_nested_attributes_for :deathblows, allow_destroy: true

  enumerize :name, in: [:terra, :celes, :locke, :sabin]
  enumerize :sex, in: [:male, :female]

  validates :name, presence: true
  validates :sex, presence: true

  def build_default_deathblows
    (self.deathblows.count..7).each do
      self.deathblows.build
    end
  end
end

魔法モデル

# magic.rb
class Magic < ApplicationRecord
  has_many :character_magics, dependent: :destroy
  has_many :characters, through: :character_magics
  
  validates :name, presence: true
end

キャラクター魔法モデル

# character_magic.rb
class CharacterMagic < ApplicationRecord
  belongs_to :character
  belongs_to :magic
end

調整さんのようなカレンダー表示

ルーティングや、コントラーラーは今回割愛しますが、画面の作り方になります!

view

イメージとしてはキャラクターごとに1行にまとめ、それを横に並べていく感じです。

# index.haml
%h1 調整さんのようなカレンダー
.tyousei__calendars
  %ul.tyousei__calendars-body
    %li.tyousei__calendars-item
      %p -
      - @magics.each do |magic|
        %p
          = magic.name
    - @characters.each do |character|
      %li.tyousei__calendars-item
        %p
          = character.name_text
        - @magics.each do |magic|
          %p
            - if character.character_magics.find_by(magic_id: magic.id).present?
              ●

css

横並びはdisplay: flexを使えばもう簡単にできますね。

後は、文字に応じて高さや幅が変わってしまうので一つ一つのセルに指定してやればokです!

.tyousei__calendars-body
  display: flex
.tyousei__calendars
  list-style: none
.tyousei__calendars-item
  list-style: none
  width: 100px
  text-align: center
  &:first-child
    font-weight: 700
  p
    height: 30px
    &:first-child
      font-weight: 700



そして、完成したカレンダーがこちら!

Railsで作ったカレンダー
Railsで作ったカレンダー