Railsポートフォリオにゲストユーザー向けログインを作る

こんばんは!

f:id:yukitoku_sw:20200205212113p:plain

一生懸命ポートフォリオ作ってるんですけど、 見てもらわないと意味がないじゃないですか・・

思ったんですよ・・
見る側の人って、いちいち新規ユーザー登録なんかしてくれるのか?


【学習アウトプット2】離脱率を下げる!かんたんログイン機能の実装 - Qiita

【rails】かんたんログイン機能導入方法 - Qiita

ゲストログイン・簡単ログイン機能の実装方法(ポートフォリオ用) - Qiita


やはり!ありました!

そう簡単には見てもらえないらしいです!!


私みたいに単身・孤独・孤高の独学勢にはアドバイスくれる人なんていないんですよ!

目隠し綱渡りなんで、手思っきしブルンブルン振り回していかないと

実装方法(マネしてみました!!!)

*Deviceは使ってません


まず!

Controller

% rails g controller guest_sessions

既存のsessionsコントローラにアクションを追加してもokですが、一つのコントローラーに何でもかんでもアクションをブチ込むのはよくない!って何かで見ました!


新しく作りましょう


[ guest_sessions_controller.rb ]

class GuestSessionsController < ApplicationController
  skip_before_action :login_required

  def create
    user = User.find_by(email: 'test@example.com')
    log_in(user)
    flash[:success] = 'ゲストユーザーでログインしました'
    flash[:warning] = 'よろしくお願いします!'
    redirect_to todo_tasks_path(user)
  end
end
  1. user にゲストの方に入場して欲しいアカウントのemailをぶち込みます。*1

  2. そのユーザーでログインします。*2

  3. flashメッセージでちょっと遊びます。

  4. redirect_to でログイン後の表示ページを指定します。

  5. skip_before_action(最初忘れてて焦りました)


*1 ゲストユーザー用のアカウントを作りましょう。

*2 [ application_controller.rb ]

  def log_in(user)
      session[:user_id] = user.id
    end

こんな感じでやってます。

Routes

先ほどのアクションが実行されるようにします。

[ routes.rb ]

# 追加
post '/guest', to: 'guest_sessions#create'

多分どこでも良い。名前もなんでも良い。

とにかく、postであってコントローラー名#createです


View

先ほどのアクションが実行されるようにしたurlへ飛ばしましょう

 = link_to 'ゲストユーザー', guest_path, method: :post, class: 'btn btn-success'

method: :post大事。


ゲストユーザーでログインしてくれる人が必ずしも善人とは限らない。

ヘッダーに表示している編集画面へのリンクを隠す。(完璧な守りではない)

[ header ]

- if current_user
  - if guest_user              
    li.nav-item = active_link_to current_user.name, "#", class: 'nav-link disabled'
  - else
    li.nav-item = active_link_to current_user.name, edit_user_path(current_user), class: 'nav-link'

viewは極力シンプルを心がける

[ application_controller.rb ]

    def guest_user
      current_user == User.find_by(email: 'test@example.com')
    end

current_userがゲスト用アカウントの時はdisabledしてます。


以上です。


これでみんな気軽に見てくれるはず!!

<br /.

herokuを24時間稼働させる設定

herokuは30分アクセスがないとスリープモードになる


知ってましたか?

herokuに自分のポートフォリオをあげてて、仕事の休憩時間に自分のサイトに入ろうとしたんですよ。


入れないんですよ!!!!


対処法

Heroku Schedularで叩き起こす

Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法 | Casual Developers Note

この記事を参考にさせていただき実際にやってみました。


ヘロクスケジューラーをインストール

% heroku addons:create scheduler:standard
Creating scheduler:standard on ⬢ アプリ名... free
 To manage scheduled jobs run:
 heroku addons:open scheduler

Created scheduler-reticulated-50611
Use heroku addons:docs scheduler to view documentation

なぜか、クレジットカードの登録はしてありました。

% heroku addons:open scheduler
Opening https://addons-sso.heroku.com/apps/..........

f:id:yukitoku_sw:20200204221752p:plain

こんな画面が開くので、create jobを押します。

f:id:yukitoku_sw:20200204221942p:plain

なんか右端に出てきます。

寝てもらっては困るので、

  • Every 10 minutes

  • curl https://your-herokuapp-xxxxx.herokuapp.com/

  • free

チェックしてもらうことで寝させません。 実行内容は、無料枠で・10分おきに・ルートページにアクセス

これで寝かせません (welldoneは私のアプリ名です)

f:id:yukitoku_sw:20200204222031p:plain

これでsave jobすると

f:id:yukitoku_sw:20200204222757p:plain

寝させない機能が完成します。


heroku注意報

herokuについて勉強した内容を紹介します。

herokuは30分アクセスがないとスリープモードになる(止まる)

全然知らなかった。ちゃんと調べない自分が悪いんですが・・

Dyno sleeping
If an app has a free web dyno, and that dyno receives no web traffic in a 30-minute period, it will sleep.

Free web dynos do not consume free dyno hours while sleeping.

If a sleeping web dyno receives web traffic, it will become active again after a short delay (assuming your account has free dyno hours available).

heroku/free-dyno-hoursより引用

[ ガバガバ翻訳 ]
よく寝るダイノ
無料ダイノは30分アクセスがないと寝ます。
寝てる時は、無料ダイノの無料枠を消費しません
寝てる時にアクセスがあれば、少し遅れて起きます(無料枠が残っていればね)。


全然起きなかったんですけど!
何回試しても起きませんでしたけど!

少し遅れて起きて30分後また寝るってずるくね?


てか、ポートフォリオ なんですけど!
最初アクセス出来なかったらもうアウトでしょ!!


無料枠を消費しませんだと???


herokuは完全無料ではない?

知ってました?


Free dyno hour pool
Personal accounts are given a base of 550 free dyno hours each month. In addition to these base hours, accounts which verify with a credit card will receive an additional 450 hours added to the monthly free dyno quota. This means you can receive a total of 1000 free dyno hours per month, if you verify your account with a credit card.

heroku/free-dyno-hoursより引用


[ ガバガバ翻訳 ]
無料ダイノ時間枠
個人アカウントには毎月550時間分のダイノが与えられます。クレジットカードを登録すると、さらに450時間分あげちゃいます。つまり、クレジットカードを登録すると毎月1,000時間分の無料ダイノがもらえます。


31d * 24h = 744h

256h分余るのだが??結局ただじゃん?


謎システム


Heroku Schedularの闇

大丈夫なのか?

Known issues and alternatives
Scheduler is a free add-on

Scheduler is a free add-on with no guarantee that jobs will execute at their scheduled time, or at all:

・In very rare instances, a job may be skipped.
・In very rare instances, a job may run twice.

heroku/known-issues-and-alternativesより引用

[ ガバガバ翻訳 ]
最初に言っておくが。
スケジューラーは無料のアドオンですからね
スケジューラーは無料のアドオンですから、必ずしも予定時刻に実行されるとは限りませんので
・ごくまれにね、働かないかも。
・ごくまれにね、2連撃しちゃうかも。


ガバガバアドオン!


私みたいにただ、アクセスするだけの設定ならいいが、メールを送信するとか、何かを取得する設定の人は注意が必要かも!


2020/02/04現在の情報です!
定期的に監視してなんかあれば報告します!

では


Railsのmaster.keyで泣くほどハマった・・

rails6とherokuとmaster.keyと私。。

半ベソで5時間の格闘の末に解決できたのでまとめる

激闘の火蓋を切ったエラーがコチラ

ActiveSupport::MessageEncryptor::InvalidMessage

herokuへのpushは何度もしていたが、ずっとローカル環境でしか確認していなかったので始まりがいつだったのかはわからない。(ちゃんと確認せなかんな・・泣)

最終的な解決策

% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

そう、私はherokuに自分のアプリのmaster.keyを登録していなかった。


無駄にグルグル回った話(読んでも時間の無駄です)

最初のエラーを調べていると

  • credentials.yml.enc
  • master.key

この2人がキーマンだとわかった(keyだk)


私には、この2人に見覚えがあった。

あれ?ActiveStorageの保存先をAmazonS3に設定したときにみたやつじゃん!

あんときにちょっとミスっちゃったのかな?てへ


調べているとこの件についての記事はいっぱいあった。

Rails5.2から追加された credentials.yml.enc のキホン - Qiita

Rails 5.2 で ActiveSupport::MessageEncryptor::InvalidMessage - Qiita

[Rails]credential.yml.encの編集方法 - Qiita

Rails 5.2をProduction環境に切り替える時にハマった点 - Qiita

ActiveSupport::MessageEncryptor::InvalidMessage - Qiita

めちゃくちゃある笑。みんなミスってんな(笑)


既にエラー耐性を習得している私は、軽く微笑んでいた。


そして、"どの記事にも書いてある通り"credentials.yml.encの編集を行った。



なおらない。


みなさんが、


「これで動くようになりました!」


「これで解決!!」


というなか、


なおらない。


落ち着いてもう一度やってみる。


なおらない


私だけ、なぜだ。


ここで少しパニックにな逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ


ここで暴挙に出る。

どうしてもできない場合は、
credentials.yml.encを一度消して、$ EDITOR="vi" bin/rails credentials:editを再度実行することで、credentials.yml.encmaster.keyが新しく作り直されます。


やるしかない。


よし。これで行こう。 なおらなかった。


焦るな。


そういいながら、何回も見たQitaの記事をさらに何回も読む


どうしてもできない場合は、
credentials.yml.encを一度消して、$ EDITOR="vi" bin/rails credentials:editを再度実行することで、credentials.yml.encmaster.keyが新しく作り直されます。


もしや、credentials.yml.encだけでなくmaster.keyも消してからなのでは?


2つのファイルを削除し、

$ EDITOR="vi" bin/rails credentials:edit


その2つは、新しくなって無事に帰ってきた。よかった


さあ。設定だ


慣れた手つきで設定をしていると

[ master.key ]

  
  


・・・


・・・


え?


master.keyのフォルダにはなにも入っていなかった。


動揺を隠し切れずひとりタバコに火をつける

(これはいったいどうゆうことなんだ)


[ master.key ]

  
  


もしや、railsには人工知能が搭載されていて、「こいつにmaster.keyを渡したら危ない」と判断されたのか。


そんなはずはない


もしや、クッソ暇人なハッカーが俺のPCを暇つぶしにハックしたのか?


そんなはずもない


  • もう一度やる


これしか方法はない

ここまで作ったアプリを1から作り直すことを想像しながら、クッッッソ落ち込みながら、私はもう一度やり直した。


上手くいった。


今回は全て順調だ


そして設定を済ませ、試しにローカルで開いてみる。

undefined method `upload' for nil:NilClass

そう、新たな敵が現れた。


休息などない。


調べてみると、ActiveStorageと上手く噛み合っていない模様

冷静に、落ち着いて、config内の該当ファイルを調べた。


全てあっている・・・(?)


なぜだ


不安に押し潰されそうになりながら、$ EDITOR="vi" bin/rails credentials:showcredentials.yml.encをもう一度確認してみた。

# aws:
#   access_key_id: WATASHINOKEYID
#   secret_access_key: wAtaInoSecreTNaacCesKey

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: jofjadkgjaigrjgigjwtu30tujag8hu3j4oi9aehg4ij4pq4itjrgtekitou


そう、コメントアウトを消していなかった。


一人ぼっちの部屋で、一人少し照れながら、一人で虚しく直した

リンカーン


これで完璧だ!


ローカルでは上手く動いている!


$ git push heroku master


・・・


ActiveSupport::MessageEncryptor::InvalidMessage



振り出しに戻った


顔面蒼白で見つけた記事

HerokuにRailsアプリをデプロイする - Qiita

f:id:yukitoku_sw:20200204144615p:plain

やってみたらできた!

そもそもherokuの設定をちゃんと終わらせていなかったみたい←


Rails Flashメッセージで遊んでみた

現在作成しているポートフォリオFlashメッセージにオリジナリティを加えてみた


弄った内容は、Flashに分岐をつけて状況によって内容を変化させる。そして、message_typeによってアイコン画像も変化させる。

てな感じ

f:id:yukitoku_sw:20200202152630p:plain


めちゃくちゃいいです!!!


自分の作っているTodoAppのざっくり説明

Taskテーブルにdone:booleanというカラムを付けて、実行中のタスク or 完了済みタスクと分けて表示できるようになっています。

あとは普通です・・


作り方

設計とかはせずに思いついたままに書いてたらできただけ

controller

まず初めに。FizzBuzz計算ってあるじゃないですか?

それを利用したくて書いたもの

tasks_controller.rb内のprivateの中に書いてます。(どこに書くのが最適か調べたがわからなかった。けど動いてるからいいか。。)

[ tasks_controller.rb ]

(省略)

    def fizz_buzz_flash
      done_count = current_user.tasks.where(done: true).count
      if @task.done?
        if done_count % 50 == 0
          flash[:warning] = "#{done_count}件のタスク達成!<br>おめでとうございます"
        elsif done_count % 12 == 0
          flash[:warning] = "よくやったな、#{@task.user.name}。"
        elsif (done_count + 1) % 12 == 0
          flash[:warning] = '次<br>回、司 令 官'
        elsif done_count % 5 == 0
          flash[:warning] = 'すごいです!!'
        else
          flash[:warning] = 'お疲れ様です。'
        end
      end
    end

新規作成か更新 された@taskのdoneカラムがtrue(完了済み)だった場合に、回転数 完了済みタスクの数によってFlashの値を変化させています。


重み付けランダムも調べてはみたが意味不明すぎました・・・


これをcreateupdateの中に埋め込んでます。

class TasksController < ApplicationController
  
  (省略)

  def create
    @task = current_user.tasks.new(task_params)
    if @task.save
      flash[:success] = "タスク「#{@task.title}」を登録しました。"
      fizz_buzz_flash
      redirect_to task_url(@task)
    else
      render :new
    end
  end

  def edit
  end

  def update
    if @task.update(task_params)
      flash[:success] = "タスク「#{@task.title}」を更新しました!"
      fizz_buzz_flash
      redirect_to task_url(@task)
    else
      render :edit
    end
  end

 (省略)

もともと書いていたflash[:success]はあえて残しています。


view

[ layouts/_flash.html.slim ]

- flash.each do |message_type, message|
  .d-flex.flex-row.mb-2
    .mr-2
      - if message_type == "warning"
        = image_tag src="/assets/flash_cat.png", size: '50x50'
      - else
        = image_tag src="/assets/flash_robot.png", size: '50x50'
    .mb-0
      = content_tag(:div, message.html_safe, class: "alert alert-#{message_type}")

割り振りとしては、

type 担当 内容
warning ネコ 応援
success ロボット 業務的

にしてます。


f:id:yukitoku_sw:20200202163127p:plain

Datepickerが読み込まれない?? バグ?を見つけたので対処する

よろしくお願いします。

yukitoku-sw.hatenablog.com

この記事でBootstrap Material DatepickerのCDN版を実装しました。

上手くいっていいたんですが別の作業をしていたときに上手く読み込まれていなかったので対処しました。

内容

ul.nav.nav-pills.nav-justified.mb-3
  li.nav-item = active_link_to 'タスク追加', new_task_path,, class: 'nav-link'
  li.nav-item = active_link_to "TODO(#{@todo_count}件)", todo_tasks_path, class: 'nav-link'
  li.nav-item = active_link_to "DONE(#{@done_count}件)", done_tasks_path, class: 'nav-link'

'タスク追加', new_task_pathのリンク先が問題のform画面です。


  • サイト内navlink_toから、Datepickerを埋め込んだform画面へ移動すると、Datepickerが表示されない。

  • ページを再読み込みするとDatepickerが表示される


解決策

ul.nav.nav-pills.nav-justified.mb-3
  li.nav-item = active_link_to 'タスク追加', new_task_path, data: { turbolinks: false}, class: 'nav-link'
  li.nav-item = active_link_to "TODO(#{@todo_count}件)", todo_tasks_path, class: 'nav-link'
  li.nav-item = active_link_to "DONE(#{@done_count}件)", done_tasks_path, class: 'nav-link'

link_todata: { turbolinks: false}を付けることで上手く表示されます。


ソース

コチラの記事から対処法を学びました。

Railsでページ読み込みしないとjsが効かないのを解決する方法 - Qiita


turbolinksが悪さしてたみたいです(turbolinksは悪くない)


何者??


turbolinksは、Ajaxを利用してにページ遷移を高速化してくれるライブラリのようです。はい


turbolinksについては

turbolinksチートシート - Qiita

勉強になります。


おまけ

最初に自分で思いついた対処法を紹介(無意味な方法)

ul.nav.nav-pills.nav-justified.mb-3
  li.nav-item = active_link_to 'タスク追加', new_task_url, class: 'nav-link'
  li.nav-item = active_link_to "TODO(#{@todo_count}件)", todo_tasks_path, class: 'nav-link'
  li.nav-item = active_link_to "DONE(#{@done_count}件)", done_tasks_path, class: 'nav-link'


わかりますか?


 new_task_path



 new_task_url


に変えてみたんですよ。


なんか、名前_pathrender的な??

そんで、_urlは``redirect_to```的な????


と思って


Railsチュートリアルの演習でなんかやった気がするううって思って


これで、ちゃんとHTTPリクエストが実行されるぞおおって思ったんすよ



違いました!!!!!

TodoAppに期限日をつける 力技で条件分岐させる編

前回に続き期限日機能の実装を行っていく

ただ単にそのまま日付を表示しても面白くないのでちょっといじるよ

オリジナルでメソッドを作ってみた

[ tasks_helper.rb ]

module TasksHelper

  def deadline_count(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "今日が期限日のタスクです!"
    elsif countdown.between?(1, 3)
      "期限日まで残り#{countdown}日"
    else
      "期限日:#{l task.deadline}"
    end
  end
end

if タノシス

こんな感じで呼び出します。

[ index.html.slim ]

- private_tasks.each do |private_task|
    .border.index_link.p-1
      .container-md
        = link_to task_path(private_task)
          .row.mb-1
            .text-muted = deadline_count(private_task)  # 追加
          .row.pl-1
            strong = private_task.title
          .row.pl-1
            = private_task.description
          .row.justify-content-end.text-muted
            .pl-2 = private_task.public? ? '公開' : '非公開'
            .pl-2 = private_task.done? ? '完了済' : '実行中'
            .pl-2 = l private_task.created_at

すると・・


f:id:yukitoku_sw:20200201163155p:plain

タイトルの上に期限日が表示されて、近づくと内容が変化します!!


すごくね????

*右下のは投稿日です。期限日の方がいいかな?


もう少し弄るぜ

オリジナルでメソッドを作ってみたcss

私はね。cssをね。動的に? 弄って変化させたいんですよ!!!


そっちの方がカッコいいい!絶対に!

と思ったんですけど全然わからん。いろいろ試しました。


いろいろ試して、

いろいろ試して、


いろいろ試した結果、最終的に閃いた力技がコチラ

[ tasks_helper.rb ]

module TasksHelper

  def deadline_count(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "今日が期限日のタスクです!"
    elsif countdown.between?(1, 3)
      "期限日まで残り#{countdown}日"
    else
      "期限日:#{l task.deadline}"
    end
  end

  def deadline_style(task)
    today = Date.today
    deadline = task.deadline
    countdown = (deadline - today).numerator
    if countdown == 0
      "dl-style1"
    elsif countdown.between?(1, 3)
      "dl-style2"
    else
      "dl-style3"
    end
  end
end

同じようなメソッドをもう一個作ってやりましたよ!

えぇ、これを<div>にぶち込んでやりましょう


すごい似てるから合体させようと頑張ったんですが、うまくいかず・・

調べた限りこんなコード書いてる人は誰もいないです。笑


とりあえずこれでよしとする!

viewで表示しよう

[ index.html.slim ]

  - private_tasks.each do |private_task|
    .border.index_link.p-1
      .container-md
        = link_to task_path(private_task)
          .row.mb-1
            div class="text-muted #{deadline_style(private_task)}" = deadline_count(private_task)
          .row.pl-1
            strong = private_task.title
          .row.pl-1
            = private_task.description
          .row.justify-content-end.text-muted
            .pl-2 = private_task.public? ? '公開' : '非公開'
            .pl-2 = private_task.done? ? '完了済' : '実行中'
            .pl-2 = l private_task.created_at

これも結構悩みました!

slimでの埋め込みがよくわからなくて。でもこれで行けます


f:id:yukitoku_sw:20200201161702p:plain

すごくね???


これも忘れずに、、

[ javascript/src/style.scss ]

/* Deadline Style*/
.dl-style1 {
  background: linear-gradient(transparent 70%, #ff99ab 70%);
}
.dl-style2 {
  background: linear-gradient(transparent 70%, #f8e58c 70%);
}
.dl-style3 {
  background: linear-gradient(transparent 70%, #f3f3f3 70%);
}


個別ページでやるときは引数変えないとネ!

div class="text-muted #{deadline_style(@task)}" = deadline_count(@task)


f:id:yukitoku_sw:20200201162432p:plain

カッコいいいい

TodoAppに期限日をつける 一番簡単なDatePicker編

ポートフォリオとして作成中のTodoAppに期限日機能を付けていきます

Taskテーブルにdeadline:dateカラムを加える

% rails g migration AddDeadlineToTasks deadline:date

sqliteはややこしい・・

class AddDeadlineToTasks < ActiveRecord::Migration[6.0]
  def up
    add_column :tasks, :deadline, :date
    change_column :tasks, :deadline, :date, null: false
  end

  def down
    remove_column :tasks, :deadline
  end
end
% rails db:migrate


StrongParameterに:deadlineを追加する

忘れがちなやつ

[ tasks_controller.rb ]

(省略)
    def task_params
      params.require(:task).permit(:done, :title, :description, :image, :public, :deadline)
    end


シードにdeadlineを追加して、`rails db:seedする

[ db/seeds.rb ]

deadline = Date.today.next_day(2)

こんな感じに入れてみる


Viewをいじる

formにdeadlineの場所を作ってあげる

[ form.html.slim ]_

  = form_with model: task, local: true do |f|
   
(省略)

      = f.label :deadline, '期限日'
      = f.text_field :deadline, class: 'form-control'
    .row.justify-content-center
      = f.submit '登録', class: 'btn btn-success col-2'

一覧ページに表示されるようにする(適当に)

[ tasks/index.html.slim ]

=  "期日:#{l private_task.deadline}"


Bootstrap Material DatePicker

やっとです!

一番簡単なdatepickerです。(がちで)

いろいろ試して失敗しまくった末に見つけたンスよ。

https://designlink.work/ja/bootstrap-material-datepicker/

こちらのサイトを見ればすぐ使えますが、説明していきます


準備は簡単

views/layouts/application.html.slimheader内に上記URLの組み込みファイルとベーシックマークアップを記述するだけ。全て、CDNとして読み込まれるので、bundleyarnを使う必要なしです。楽ちん

そして、使いたいページで

<input class="result" type="text" id="date-time" placeholder="Date Picker...">(例)

と書くだけ!


実際にやってみます!

私は、application.html.slimがごちゃごちゃになるのが嫌なので_datepicker.html.slimを作成しました。

[ layouts/_datepicker.html.slim ]

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css"
link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"
script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"
script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"
script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/ja.js"
script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"
javascript:
  $(function(){
    $("#date").bootstrapMaterialDatePicker({
      weekStart:0,
      lang:"ja",
      time: false,
      format:"YYYY-MM-DD"
    });
  });

設定について

  • weekStart:0 不明

  • lang: "ja" 表記を日本語にしてくれる

  • time: false 日時ではなく日付のみになる

  • format:"YYYY-MM-DD 日付のみのフォーマット

  • #date はidです!viewと合わせてください。

詳しくはドキュメントを! https://designlink.work/ja/bootstrap-material-datepicker/


これをhead内にrenderするのを忘れずに

[ layouts/application.html.slim ]

doctype html
html
  head
    title
      | Welldone
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = render 'layouts/datepicker'      #これよ!
  body
    = render 'layouts/header'
    .container-md
      = render 'layouts/flash'
      = yield
    = render 'layouts/footer'


そして

単独で使うなら

input class="result" type="text" id="date"

でいいんですが、form内に使いたかったので、

[ _form.html.slim ]

  = form_with model: task, local: true do |f|
   
(省略)

      = f.label :deadline, '期限日'
      = f.text_field :deadline, class: 'form-control result', id: 'date'
    .row.justify-content-center
      = f.submit '登録', class: 'btn btn-success col-2'


試しにclass: 'result'id: 'date'を書いてみたら・・


f:id:yukitoku_sw:20200201092747p:plain

見事表示されました!


選択して、okを押すと

f:id:yukitoku_sw:20200201092825p:plain

日付のみ入力されました!

ラッキー


次回、期限日にそのまま日付を表示してもつまらない(つまらない)