好きなものだけ書く。ポジティブに。

好きなことを楽しく。プログラミング、写真、音楽、ガジェットとか。

Rails7 で button_to の data-confirm の挙動が変わって data.confirm から form.data.confirm に変わってました

おつかれさまです!のぶじゃすです。

最近Rails7でWebアプリケーションを開発しているのですが、削除の処理などの後戻りができないときや、事前に確認が必要な処理を書く際にブラウザのconfirm機能を使って確認ダイアログを出す処理を出したい場面がありました。

Rails7でこの機能の処理が変わってしまっていてハマりました。今回はある程度詳細な理由も調べてみました。

想定以上にアタフタ困ってしまった動画はこちら

実は動画撮影中にこの変更にハマってしまいました。まんまとハマって困りまくり焦りまくりの動画はこちらです。面白かったら高評価おねがいしますw


www.youtube.com

Rails7より前の button_to で confirm を出す方法

Railsでは button_to などで簡単にconfirmを出す機能がありました。

<% button_to "削除", any_path(any), { method: :delete, data: { confirm: "本当に削除してもいいですか?" } } %>

のように書くことで確認ダイアログが表示されていました。

Rails7 ではこれだと出ない

Rails7ではこの方法では確認ダイアログが表示されず、そのまま処理されてしまいます。これでは簡単に削除できすぎてしまいます。

そこでいくつか調べた所、 解決策を見つけました。

Rails7 で button_to で confirm を出す方法

<%= button_to "削除", rabbit_weight_path(@rabbit, weight), { method: :delete, form: { data: { turbo_confirm: "本当に削除しますか?" } } } %>

data: { confirm: "確認" }form: { data: { turbo_confirm: "確認" } } に直す事で正しく表示されます。

挙動としてはこれで正しくなりましたがなぜなのかはよく分かりません。どういう処理でこれが動作しているのか少し調べてみました。

form: でくくると何が起こるのか

button_to の第3引数で form: { data: を設定するとそれ自体が form タグで囲まれます。そして form タグのアトリビュートに data-turbo-confirm が設定されます。

具体的には

erbに下記のように書くと

<%= button_to "削除", rabbit_weight_path(@rabbit, weight), { method: :delete, form: { data: { turbo_confirm: "本当に削除しますか?" } } } %>

HTMLとしてはこのようにレンダリングされます。

<form data-turbo-confirm="本当に削除しますか?" class="button_to" method="post" action="/rabbits/1/weights/2">
  <input type="hidden" name="_method" value="delete" autocomplete="off">
  <button type="submit">削除</button>
  <input type="hidden" name="authenticity_token" value="..........................." autocomplete="off">
</form>

そしてどうやってconfirm処理が動いているのか

Rails7ではturboが動いているため、以前のバージョンと変わったようです。

ということで turbo のコードを読んでみましょう。

  1. confirm 処理を探して読んでみた
  2. form_submission.ts にそれっぽいコードを見つけました
  3. FormSubmission というクラスでは formElement を constructor で受け取ります
  4. confirmationMessagedata-turbo-confirm を探します
  5. needsConfirmation では confirmationMessage が存在した場合に true を返します
  6. needsConfirmationtrue の場合には confirmMethod が発火します
  7. confirmMethod ではJavaScript標準(ブラウザ標準?)の cofirm 処理を動かしています

この辺りの処理です

github.com

正しい対応っぽいので大丈夫そう

コードをざっと読んでみた所、特におかしな所はなく想定されている挙動のようだったのでこれで安心して開発が進められます。

アクセスありがとうございます🙇‍♂️

ここまで読んでいただき誠にありがとうございました。もしこの記事が役に立ったらはてブや、Twitterのフォローしていただけると大変喜びます😊

それではよいRails7ライフを!

Rails で多対多のリレーションをした時に、joinレコードも同時にnew & save したい

おつかれさまです!のぶじゃすです。

最近よくRails7でコードを書いています。modelsを作っていく中でどうしても多対多のモデルになることがあります。

多対多のリレーションをするときには中間モデル(join モデル)を作る必要があるのですが、create時に中間モデルも一緒にcreateする必要があります。自動でcreateされると思っていたのですが、されなくて困りました。色々試して解決できた&あまり明確に書いてある記事が見当たらなかったので備忘録的にBLOG書いておきます。

サーバの線につまづいて転びそうになる人のイラスト
モデル周りはよく躓きますよね

  • 今回使用したバージョン
  • うさぎと親が多対多
    • models/rabbit.rb
    • models/breed.rb
    • models/user.rb
  • has_many :through関連付け
  • 元々のうさぎ新規作成機能
    • controllers/rabbits_controller.rb#create
  • 間違った方法
  • 正しい方法
  • 最終的な controller は current_user.save にしました
    • controllers/rabbits_controller.rb#create
  • アクセスありがとうございます🙇‍♂️
続きを読む

html.erbファイルをVisual Studio CodeでAuto FormatするのはERB Formatter/Beautifyがよさそう

最近Rails7でコードを書いているのですが、 Visual Studio Code(以下VSCode)でhtml.erbファイルを編集する場面が多いです。Rails7のRails Wayでやっていてhtml.erbでturboで書いている場合はJSよりはhtml.erbを編集する機会が増えるのではないかと思っています。

VSCodeでhtml.erbを書いているとAuto Formatしてほしくなります。インデントとか空行とかあまり意識せずに勝手に整えてほしいですよね。

結論

いくつか調べたのですが、結局 ERB Formatter/Beautify というVSCodeのExtensionが今の所良さそうでした。

marketplace.visualstudio.com

必要な設定

setting.json

  "files.associations": {
    "*.html.erb": "erb"
  },
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
  },
  "vscode-erb-beautify.useBundler": true

Gemfile

gem 'htmlbeautifier'

私は group :development doend の間に書いています。productionには不要ですからね。

Prettierでやりたかったけどイマイチでした

rubyとかはPrettierでフォーマットしているのでhtml.erbも一緒にできないかなと思ったのですが私には合いませんでした。

Prettier でフォーマットするには、 html.erbhtml として扱う必要があります。erb用のparserは多分無い。

setting.json にこんな感じで設定すればhtmlとしてフォーマットしてくれます。

"files.associations": {
   "*.html.erb": "html"
}

しかし、erbとしてハイライトしている部分とかがハイライトされなくなります。

ハイライトが動作していなくてerb独自コードが白色で書かれているスクリーンショット
<% とかが真っ白ですね。。。

eslint にも eslint-plugin-erb ってのがあるみたい

これは試していないです。 ERB Formatter/Beautify で満足いかない所があったりしたらまた試してみようと思います。

www.npmjs.com

開発する動画を公開してみたので振り返ってみる(ボロボロ)

先日Rails7を触る動画を撮影&編集&公開してみました。その動画の振り返りをしてみようと思います。

なにかアウトプットをしたら振り返る。振り返って次の改善につなげる。というのが成長の基本です。今回KPTで動画の撮影、編集、公開について振り返っていこうと思います。もし気になった事がある方がいらっしゃいましたらコメントよろしくおねがいします。

今後も自分が出して面白いと思う動画を出していきたいと思っているので、スキルやノウハウは向上していきたい。そのためには振り返りが必要だ!(公開後に見てもらえたとか宣伝が良かった、悪かったみたいのはまだわからないので今回はスコープ外です。)

普段からKPTが使い慣れているので、KPTで振り返りやっていこうと思います

KPT(けいぴーてぃー):情報マネジメント用語辞典 - ITmedia エンタープライズ

Keep

撮影について

  • Webカメラで撮影したけど思ったより画質も良かった
  • 台本を準備したのは良かった。撮影中に次何やるかを思い出すのは困難
  • 撮影するために特別なツールや道具の準備がほとんどなくサクッと撮影を開始できた
  • 開発の動画撮るの楽しかったのでまたやりたくなった
  • FHD 1080p で撮影したけど思っていたより綺麗だった
  • うさぎかわいい

編集について

  • ライセンスフリーのBGMを探してつけた
  • 動画の途中でBGMを変えるのをやってみた
  • Davinci Resolve の編集に慣れてきた
  • 開始直後に見どころをカットして挿入してみた
  • エンディングを簡易だけど作ってみた

公開について

  • YouTubeに動画をアップする体験は楽しい
  • 概要欄、サムネなど設定できた

Problem

撮影について

  • 1本が長すぎる
  • Typoとかミスが多すぎる
  • OBSで4K撮影しながらは無理だった(PCの限界)
    • 正しく録画できないレベル
  • 声が小さい
  • 話が面白くない
  • 都度都度オチがない
  • コード書きながら話すると中身が無い
  • 全体として喜怒哀楽の起伏が少ない
  • 今何しているのか、何をしたのかの説明が無い場面が多い
  • 左側の台本を見すぎてる

編集について

  • 音声がおかしい部分がいくつかある
  • 編集の時間がめっちゃ長い
  • テロップ入ってない

公開について

  • タイムタグ作ってなくて公開後に作った
  • 多くの事をやってたからタイトルがざっくりしてる

Try

撮影について

  • 今後も改善してチャレンジするぞ
  • Typoは気をつける。少しゆっくりでもTypoしない方が見やすい
  • ミスは解決方法を説明できたら良さそう
  • 声ははっきり大きく
  • 都度都度説明をする、コード書きながらは仕方ないから書いた後に説明する
  • 台本の置く位置を検討する
  • もう少し1つ1つを小さいテーマにする

編集について

  • ちょっと波形がおかしい所は処理するなどの対応をしてみる
  • 編集スキルアップ
  • テロップは編集スキルアップ後にチャレンジ

公開について

  • タイムタグは編集後半で一緒に作る

振り返ったボロボロの動画はこちら

今回の反省を踏まえて次回はもう少しいい動画を作れるようにガンバリマス。

もしよく頑張った or 頑張れ! と思ってもらえたら高評価を・・・


www.youtube.com

【2022年版】今更ちゃんとRuby on Railsをキャッチアップしてみる。ついでに最新Ruby on Rails ver 7.0.0で!

おつかれさまです!のぶじゃすです。

今回はRuby on Railsの新規バージョン7.0.0が2021/12/15にリリースされたので、キャッチアップもかねて学習していこうと思います。

私は Ruby on Rails (以下Rails)を使っている会社に勤めているのですが、普段はSalesforce開発が主なので普段は全くと言っていいほどRailsに触れていません。先日偶然バージョン7が出たというツイートを見たのでスキマタイムで何かしらWebサービスを作る所までキャッチアップしていこうかなと思います。

対象読者

今回はそもそもの基本をやっていきます。

  • Ruby on Railsはほとんど触ったことない
  • プログラミングはざっくり分かる
  • なにか作ってみたい

という人むけに書いていきます。分かりづらい事などありましたらコメント頂けたら嬉しいです。

「読者」とか書きましたが今回は動画です

Ruby on Rails キャッチアップ動画を作成してみました。この動画を見ていただければ全部わかります。是非ご覧ください!

www.youtube.com

細かい説明や補足などを以下にテキストとして記載しています。

今後キャッチアップしていきたいこと

  • 体重削除機能を作る
  • 誕生日から年齢を計算して表示する
  • heroku に deploy して世界中からアクセス可能に
  • フォントを綺麗にする
  • firebase でログイン機能を作る
  • localeを設定してみる

撮影中にググったサイト紹介

action_text のミスで調べたサイト

blog.alea12.net

dependent オプション

qiita.com

本番で見ていた台本はこちら

本番はこんな台本を見ながら撮影していました。よく左側をみているのはこれですw

$ rails new demo
$ cd demo
$ rails g scaffold rabbit name:string birthday:date description:text
$ code .
# migration
# model
# controller
# view/index
$ rails db:migrate
$ rails s
# /rabbits
@application.html.erb
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
# /rabbits.json
# controller
@models/rabbits.rb
validates_presence_of :name, :birthday
$ rails c
>> Rabbit.first
>> Rabbit.create! name: 'aaaa'
$ rails action_text:install
$ bundle
$ rails db:migrate
@ models/rabbits.rb
has_rich_text :description
# create rabbit demo
$ ./bin/importmap pin local-time
@ application.js
import LocalTime from "local-time"
LocalTime.start()
@ _rabbit.html.erb
<p>Weights <%= time_tag rabbit.created_at, "data": {"local": "time-ago"} %></p>
$ ./bin/importmap pin local-time --download
$ rails g resource weight rabbit:references gram:integer note:string 
$ rails db:migrate
>> Rabbit.first.weights
@ models/rabbit.rb
has_may :weights
>> reload!
>> Rabbit.first.weights
>> Rabbit.first.weights.create! gram:1000
@ rabbits/show.html.erb
<%= render "rabbits /weights", rabbit: @rabbit %>
@ rabbits/_weights.html.erb
<h2>Weights<h2>

<div id="weights">
  <%= render rabbit.weights %>
</div>

<%= render "weights/new", rabbit: rabbit %>
@ weights/_weight.html.erb
<div id="<%= dom_id(weight) %>">
  <%= l(weight.create_at %>: <%= weight.gram.to_formatted_s(:delimited) %> g
</div>
@weights/_new.html.erb
<%= form_with model: [ rabbit, Weight.new ] do |form| %>
  <div>
    <%= form.number_field :gram %>g<br>
    <%= form.submit %>
  </div>
<% end %>
@rabbits/_rabbit.html.erb
<p>体重を記録した回数: <strong><%= rabbit.weights.count %>回</strong>
@weights_controller.rb
  before_action :set_rabbit

  def create
    @rabbit.weights.create! params.required(:weight).permit(:gram)
    redirect_to @rabbit
  end

  private

  def set_rabbit
    @rabbit = Rabbit.find(params[:rabbit_id])
  end
@routes.rb
  resources :rabbits do
    resources :weights
  end
# create weight demo
# turbo stream demo
@rabbit/show.html.erb
<%= turbo_stream_from @rabbit %>
@models/weights.rb
broadcasts_to :post
# live refresh demo
$ rails c
>> Rabbit.find(1).weights.last.destroy
>> Rabbit.find(1).weights.last.update! weight: 2000
$ rails test
dependent: :destroy 

Raills7いいぞ。JavaScriptの事考える時間がめっちゃ減る

いくつか動画外でもさわっていて、Rails7めっちゃ楽しいです。フロントエンドの事を考えなくていいのでかなり快適。 機能の開発に時間を注げる感じです。

今後もキャッチアップしつつBLOG, 動画出していきたいと思っています。

よいRails7ライフを!

【2021年読んでよかったマンガ】異世界転生系マンガのおすすめ!

今週のお題「買ってよかった2021」

今年は異世界ものばかり読んで異世界への夢をはせてばかりいました。のぶじゃす です。

前回の買ってよかったものランキングに続いてまとめシリーズです。

blog.y-i.jp

今年はマンガをたくさん読みました。毎日のルーティンです。朝起きたらすぐに、野菜ジュースを飲みながらLINEマンガ少年ジャンプ+を毎日読んでいます。

異世界転生モノ面白いゾ

今年は特に異世界モノを読んだ量が異常でした。少し読んでイマイチだなと思ったらやめて次を読み、また新たにポップアップが表示されては読み。面白いものは継続して読んでみるけど展開がイマイチだと思ったら読むのをやめてみたりしていました。

個人的には気に入ったマンガはKindleで購入して読むようにしています。電子書籍は出来る限りKindleにまとめたい& Kindle Paperwhite で読みたいのでLINEマンガは毎日無料とか試し読みとかをするのをメインにしています(とはいえ色々買ってしまってはいますw)

その中でも楽しく読めた異世界転生モノのオススメを紹介しようと思います。2021年に読んだものなので2021年に始まったりしたものではないので古い作品もあるかも?あまり気にしないで読んでるので、もし読んだことのない作品で、興味あるものがあったら是非読んでみてください。

ネタバレに気をつけて書きます

できるだけネタバレの無いように書きます。無いように無いように・・・

とはいえ私が面白いと思ったポイントを書く上でどうしても外せない設定とかは書いちゃってます。どうしても知りたくない人は見ないほうがいいですw

独断と偏見で評価をつけていきますw

マンガをレビューする上で、個人的な独断と偏見で評価ポイントをつけて並べてみたらわかりやすいかなと思いました。やってみます。

評価項目は以下です。私が異世界転生モノのマンガを読む時に「面白い」と思うマンガはこういうポイントを見て判断しているのではないか。という項目でつけてみます。

絵が好き

絵が好きな度合いです。

も読みやすい絵、読みたくなる絵、細部まで見直したくなる絵などを基準に独断と偏見で評価してみます。

転生活用度

異世界転生モノなので、転生している事のメリットの使い方や活用している具合は大切。

「なるほど!」と思える転生スキルの使いこなしや納得感、転生している前提がどれぐらい生かされているのかを独断と偏見で評価してみます。

意表をつくストーリー

異世界転生モノに限らずですが、予定調和を壊してくれるマンガが個人的にすごく好きです。

先が予想できなかったり、予想を裏切ってくれるストーリーが設計されているかどうかを独断と偏見で評価してみます。

独自性

異世界転生モノは類似しているストーリーが多いです。独自なストーリーや設定があるとワクワクして読めます。

ワクワク具合を独断と偏見で評価してみます。

続きを読む

Amazonで2021年買って良かったもの10選

今週のお題「買ってよかった2021」

2020年の12月に東京都民から神奈川県民になりました。のぶじゃす です。引っ越してから全然BLOG書いていなかったのですが、個人としてのアウトプットをしたくなってきたのでちょいちょい書いていこうかなと思います。

2020年末に神奈川に引っ越してから2021年買ってよかったものをまとめてみようかと思います。

今回は10個に厳選して書いてみようと思います。新たな暮らしで日々役立つものと、リモートワークが捗るもので分けてみました。是非なにかのアイデアになれば嬉しいです。

暮らしが捗るもの

[Amazonブランド] SOLIMO ごみ袋

ゴミ袋です。中身はただのゴミ袋です。このゴミ袋が気に入ったのは外装です。

ダンボールにごみ袋が入ったセットが更にダンボールに包まれて届きます。一番外側のダンボールを開けると2つのダンボール箱が入っています。ダンボールには取り出し口になる切り口がついていて、それに合わせて切り取ります。そうしたら1枚毎にごみ袋が取り出せます。

それだけなんですけど、大きささえ問題なければどこにも収納できるし縦にも横にも置いておけます。とてもコンパクトです。コンパクトさがとてもよくて世界中のごみ袋はこの方法になればいいのにと思っています。

mineo SIMカード

格安SIMですね。今までは楽天モバイル、LINEモバイルを使っていました。今までギガを使い切れた事が無く勿体ないなと思っていました。奥さんがmineoだったので話を聞いたら「めっちゃ安いじゃん」となって切り替えました。

速度や通話品質などの問題は何もないです。値段以外の良かった点でいうと、登録している人のホームページのクオリティが高い事や関連コミュニティが存在している事がエンジニアとしてはとてもポジティブに感じています。

あまり押し付けるつもりはないので是非ご自身で価格含め検証してみてください。

漢方五苓散

私は低気圧に弱いです。曇りの日はだいたい頭が痛くなります。そんな時にはこの漢方を飲みます。今の所私は副作用は感じていないです。

完璧とまでは言いませんがまあ大体効きます。ちなみに二日酔いにも効きます。

リモートワークが捗るもの

Kensington Pro Fit Ergo Vertical ワイヤレストラックボール ホワイトK75264JP

リモートワークが始まってしばらく経過してからマウスやトラックパッドに嫌気がさしてきました。手首が痛かったり、机が狭かったりして嫌気がさしてきました。

トラックボールはポインターを操作している時に手を動かさなくていいので隣のキーボードや横に置いてあるお菓子に手がぶつかることがありません。そしてきっと腱鞘炎にもいいです。

私がつかっている Kensington Pro Fit Ergo Vertical ワイヤレストラックボール はトラックボールをボタン一つで取り出せる機構がついているのが最高に使い勝手がいいです。他のトラックボールだと下部に穴が空いていて細長い何かで突いて取り出す必要があるのですがこのトラックボールはボタンになっていて細長いなにかを探す必要がありません。ボールの周辺についているセンサーは結構汚れます。コロコロしているとひっかかりというか、ガサガサした感触が出てきます。すぐ掃除したいです。そんな時にこのボタンを押すと「買ってよかったな」という気持ちになります。

トラックボールにお悩みの方はこちらのサイトが非常に非常に詳しいので、おすすめです。私もこのサイトを見て選びました。

kohzuka-trackball.netlify.app

1度接続が不調だったため、Kensingtonの代理店のサポートに連絡した所とても丁寧に対応していただいたのが印象的で、今後も使っていきたいなと思っています。

TP-Link WiFi ルーター Archer AX4800/A

我が家は私も奥さんもリモートワークです。大体ほぼ毎日自宅でPC作業をしているのでたくさん通信が行われます。そんな時に接続が遅くなったり、なんなら瞬断したりしたら発狂します。

発狂しなかったとしても仕事に対するやる気は減少してしまいます。早く仕事を終わらせてポケモンユナイトをやりたいのに仕事のやる気が出なくて通信速度も出ないとなるともうポケモンユナイトが出来ません。

もっと上位モデルもあると思いますが、コスパ的にはこれぐらいがいいところだと思って購入しました。今では無事ポケモンユナイトに段々飽きてプレイしなくなってきています。

BUFFALO WEBカメラ BSW505MBK

WEBカメラ悩みますよね。高いWEBカメラは数万円するものもあり、ちょっと失敗が怖い。リモートワークだと毎日使うし失敗したら毎日うつりの悪い自分のブサイクな顔を見ないといけない。

少しだけでもきれいに映りたい。画質だけでも。ということで高くなくて良い画質のやつはないのかと探していたらここに行き着きました。今の所特に不便なく満足して使っています。

ちなみにこれは下記の記事で見つけました。たくさん比較されてて素敵です。

moov.ooo

USBスイッチャー

私は会社用のPCと別に私用のPCも同じデスクに設置しています。しかし先述のトラックボールやキーボードは1台しか置いていません。というか置けるほど広くありません。

USBを差し替えて使っていました。切り替えるたびに差し替え。差し替えた後に元のPCを使いたくなってまた差し替え。流石に非効率だったのでUSBスイッチャーを購入しました。バスパワーの大きな物は少し不調になります。具合悪くなります。たとえばオーディオインターフェースをつないだりするとなかなか不安な挙動になったりします。

キーボードとトラックボールのドングルぐらいなら全然余裕で使えています。とても快適です。

電源タップ 縦型コンセント タワー式 オフィス・会議用 USB急速充電 3m スイッチ付 12口 3層

電源がたくさんさせます。景観は悪いので足元に置いています。USB口も付いているので何かと便利です。「どこまで同時に指して給電出来るのか」とかは不安ですがそこまでギュウギュウに使っているわけではないので私は問題ないです。

シビアに使う人は細かく調べてから購入しましょう。

Anker PowerWave II

仕事をしながらスマホを見ることが地味に多いです。Uber Eatsを頼んだり、通知を見たり、LINEマンガやジャンプ+を開くこともあるかもしれません。リアルな所だと二段階認証のアプリを開いたりしますね。

私はiPhoneなので指紋認証ではなくFaceIDです。FaceIDはスマホの正面に顔がないといけません。ということは机にスマホが横たわっていると上から覗き込むか、スマホを持ち上げるしかありません。

このスタンドに立てておけば目線を向けるだけで二段階認証が完了します。スマート!更に充電もされるなんて最高じゃありませんか?

Type-Cで繋がる4Kモバイルモニター

PC2台体制だとモニターが足りません。同時に見たいこともあります。仕事用のPCはメインモニターで大きくうつしながら、サブモニターでNetFlixやPrime Video、YouTubeなどを流したくなるかもしれません。

しかし何度も言いますがそこまで机は広くありません。有限です。でもそれなりに綺麗な画質で見たいですよね。NetFlix。

ちなみにこのモバイルモニターはタッチで操作が出来ます。そろそろ打ち合わせでビデオ会議に入らないといけないって時にUSBスイッチャーでトラックボールを切り替えてNetFlixを停止して、USBスイッチャーで元のPCに戻りビデオ会議に入る。なんてことは必要なく指でタッチ1発です。1発。

リモートワークのモチベーションをあげよう!

いかがでしたでしょうか?今年は昨年よりリモートワークに慣れ家で生活する時間が更に長くなった気がします。

そんな中でも快適に仕事をするためのものを多く紹介しました。環境を良くするとモチベーションも少し上がるのではないでしょうか?

リモートワークを続ける日々がどれぐらい続くのかはまだまだ不安ですが、少しでもストレスを減らして快適に生きていきたいです。それでは、よいリモートワーク生活を!