kato

旅行が好きなエンジニア

kato

旅行が好きなエンジニア

マガジン

  • Jocy Engineering Blog

    • 13本

    美容室どこでも通い放題MEZONを運営するJocyで働くEngineerのBlogです。

記事一覧

jQueryでテキストの切り替えが可能な共通ポップアップを作成する

背景ポップアップを作るとき、サイト内にポップアップを表示する箇所はいくつかある場合が多くて、同じコードを毎回も書くのはめんどくさい。 加えて、同じページに何個も…

kato
2年前
2

【Rails】gem "gretel"のseparatorにclassをあてる

railsでパンくずリストを作る時、便利なgemにgretelがある。 https://github.com/kzkn/gretel 使ってみてちょっと困ったことがあったので今後のために書き残しておく。 <d…

kato
2年前

【Rails,JavaScript】画面遷移時にチェックボックスの状態を保持できるようにする

背景Railsでエリア選択機能を作っていて、都道府県名が表示されたタブをクリックすると、表示されるエリアの一覧(例えば渋谷とか銀座など)が変わるという内容の実装をして…

kato
2年前
5

【Rails,JavaScript】現在地を取得、保存し、そのまま画面遷移する

Railsで現在地を取得、保存し、そのまま画面遷移させたい。 現在地の取得にはjavascriptのgetCurrentPositionを使う。 おおまなかな流れ①「現在地を取得する」ボタンを…

kato
2年前
1

繰り返し処理で区切った最後の余計なカンマを消す

繰り返し処理で表示した要素をカンマで区切った時の最後の余計なカンマを消したい。 <% @areas.each do |area| %> <div><%= area.name %>、</div> <% end %> 舞浜の後…

kato
2年前
2

【Rails】条件分岐を使ったコードを読みやすくする

備忘録です。 条件分岐を書く上で、ここ意識すると読みやすい、イケてそうって書き方をまとめました。 辞書的な感じにもしたいので、どんどん加筆していきます。 今のとこ…

kato
2年前
2

【Rails、MySQL】configの文字コードを変えずに、一部で絵文字を保存&表示する

Railsのデフォルトの文字コード(utf-8)だと絵文字が保存できないので、使えるようにしたいってとき、あると思います。 おそらく、「✌️」こういう絵文字は保存できるけれ…

kato
2年前
2

Simple Calendar をカスタマイズする

https://github.com/excid3/simple_calendar ほぼほぼここに書いてあることなのですが、備忘録として書いていきます。 ■曜日を並び替える 日曜日を始まり(一番左)にした…

kato
2年前
4

【Rails】date_select のそれぞれのフォームにclassを設定する

Railsのviewで、日付選択フォームを表示する際、多くの場合はdate_fieldもしくはdate_selectを使うことになると思います。 date_selectはデフォルトだとデザインが寂しい…

kato
2年前
3

ソースコードが読めないときの対処方法

未経験からJocyのエンジニアになって、現在二ヶ月ほど働かせていただいている加藤です。 既存のソースコードを理解する時、「長い、、読めない、、」ってなって挫折しそう…

kato
2年前
3
jQueryでテキストの切り替えが可能な共通ポップアップを作成する

jQueryでテキストの切り替えが可能な共通ポップアップを作成する

背景ポップアップを作るとき、サイト内にポップアップを表示する箇所はいくつかある場合が多くて、同じコードを毎回も書くのはめんどくさい。
加えて、同じページに何個もポップアップがある場合には、表示内容の切り替えもめんどくさい。
なので、共通化しつつテキストの切り替えが容易にできるポップアップを作る。

やりたいことMEZONメニューとサロンメニューというものがあり、各メニュー横の❓アイコンを押したらそ

もっとみる
【Rails】gem "gretel"のseparatorにclassをあてる

【Rails】gem "gretel"のseparatorにclassをあてる

railsでパンくずリストを作る時、便利なgemにgretelがある。
https://github.com/kzkn/gretel
使ってみてちょっと困ったことがあったので今後のために書き残しておく。

<div class="breadcrumb-container"> <%= breadcrumbs separator: "/" %></div>

区切り文字のデザインを微妙に変えたく、セ

もっとみる
【Rails,JavaScript】画面遷移時にチェックボックスの状態を保持できるようにする

【Rails,JavaScript】画面遷移時にチェックボックスの状態を保持できるようにする

背景Railsでエリア選択機能を作っていて、都道府県名が表示されたタブをクリックすると、表示されるエリアの一覧(例えば渋谷とか銀座など)が変わるという内容の実装をしていた。
都道府県は47つあり、display: block;とnoneを切り替える実装方法は難しいなと思ったので、エリア一覧部分のテンプレートを作って、都道府県名のタブをクリックしたら、js.erbでそのテンプレートだけを切り替えると

もっとみる
【Rails,JavaScript】現在地を取得、保存し、そのまま画面遷移する

【Rails,JavaScript】現在地を取得、保存し、そのまま画面遷移する

Railsで現在地を取得、保存し、そのまま画面遷移させたい。

現在地の取得にはjavascriptのgetCurrentPositionを使う。

おおまなかな流れ①「現在地を取得する」ボタンを設置
②JavaScriptで現在地を取得し、railsのアクションへajaxで送信する
③保存する
④成功後、window.location.href = 'url';でページ遷移させる。

①「現在地

もっとみる
繰り返し処理で区切った最後の余計なカンマを消す

繰り返し処理で区切った最後の余計なカンマを消す

繰り返し処理で表示した要素をカンマで区切った時の最後の余計なカンマを消したい。

<% @areas.each do |area| %> <div><%= area.name %>、</div> <% end %>

舞浜の後に余計なカンマがついてしまっている。

これを↓のようにしたい。

jQueryでこのように書いて消した。
やっていることとしては、繰り返した最後の要素のテキストを書き

もっとみる
【Rails】条件分岐を使ったコードを読みやすくする

【Rails】条件分岐を使ったコードを読みやすくする

備忘録です。
条件分岐を書く上で、ここ意識すると読みやすい、イケてそうって書き方をまとめました。
辞書的な感じにもしたいので、どんどん加筆していきます。
今のところif文が多めです。

①一行で書く

主にtrue、falseで結果を分ける時

before

if 条件 result1(trueの時の処理)else result2(falseの時の処理)end

after

条件 ? re

もっとみる
【Rails、MySQL】configの文字コードを変えずに、一部で絵文字を保存&表示する

【Rails、MySQL】configの文字コードを変えずに、一部で絵文字を保存&表示する

Railsのデフォルトの文字コード(utf-8)だと絵文字が保存できないので、使えるようにしたいってとき、あると思います。

おそらく、「✌️」こういう絵文字は保存できるけれど、「😊」こういった顔文字は保存できないはず。

では、絵文字を使えるように変更しようと、調べて出てくるのは、文字コードをutf-8からutf8mb4に変えるといった記事です。

ただ、文字コードを途中で変更するとなると色々

もっとみる
Simple Calendar をカスタマイズする

Simple Calendar をカスタマイズする

https://github.com/excid3/simple_calendar
ほぼほぼここに書いてあることなのですが、備忘録として書いていきます。

■曜日を並び替える
日曜日を始まり(一番左)にしたい場合
Controllerに記載する

before_action :set_beginning_of_weekprivatedef set_beginning_of_week Date.b

もっとみる
【Rails】date_select のそれぞれのフォームにclassを設定する

【Rails】date_select のそれぞれのフォームにclassを設定する

Railsのviewで、日付選択フォームを表示する際、多くの場合はdate_fieldもしくはdate_selectを使うことになると思います。

date_selectはデフォルトだとデザインが寂しい感じなので、デザインを変更したいなーと思いますが、変更するのがなかなか難しいと感じます。

そこで、デザインを変更する際には、classを設定しますが、
それぞれのフォームごと(年、月、日ごと)のc

もっとみる
ソースコードが読めないときの対処方法

ソースコードが読めないときの対処方法

未経験からJocyのエンジニアになって、現在二ヶ月ほど働かせていただいている加藤です。

既存のソースコードを理解する時、「長い、、読めない、、」ってなって挫折しそうになりませんか。
私はなります。そして同じように苦戦している方はたくさんいると思います。

そういった時の対処方法として、先輩に教わった非常に便利な方法をお伝えします。

それは、「不要そうなコードをひたすら削っていく」です。

ここ

もっとみる