kato

旅行が好きなエンジニア

kato

旅行が好きなエンジニア

  • Jocy Engineering Blog

    • 13本

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

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

背景ポップアップを作るとき、サイト内にポップアップを表示する箇所はいくつかある場合が多くて、同じコードを毎回も書くのはめんどくさい。 加えて、同じページに何個もポップアップがある場合には、表示内容の切り替えもめんどくさい。 なので、共通化しつつテキストの切り替えが容易にできるポップアップを作る。 やりたいことMEZONメニューとサロンメニューというものがあり、各メニュー横の❓アイコンを押したらそれぞれの説明を記載したポップアップを表示したい。 実装方法jQueryでポップ

kato

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

      railsでパンくずリストを作る時、便利なgemにgretelがある。 https://github.com/kzkn/gretel 使ってみてちょっと困ったことがあったので今後のために書き残しておく。 <div class="breadcrumb-container"> <%= breadcrumbs separator: "/"  %></div> 区切り文字のデザインを微妙に変えたく、セレクタを確認するため検証ツールを開いてみたら、" / "となっていていじりづらい

      kato

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

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

        kato

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

          Railsで現在地を取得、保存し、そのまま画面遷移させたい。 現在地の取得にはjavascriptのgetCurrentPositionを使う。 おおまなかな流れ①「現在地を取得する」ボタンを設置 ②JavaScriptで現在地を取得し、railsのアクションへajaxで送信する ③保存する ④成功後、window.location.href = 'url';でページ遷移させる。 ①「現在地を取得する」ボタンの設置 <button type="button" clas

          kato

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

          kato

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

          kato

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

          kato

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

          kato

        マガジン

        • Jocy Engineering Blog
          13本

        記事

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

          繰り返し処理で表示した要素をカンマで区切った時の最後の余計なカンマを消したい。 <% @areas.each do |area| %> <div><%= area.name %>、</div> <% end %> 舞浜の後に余計なカンマがついてしまっている。 これを↓のようにしたい。 jQueryでこのように書いて消した。 やっていることとしては、繰り返した最後の要素のテキストを書き換えている。 $(function(){ const lastElem = $

          kato

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

          kato

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

          備忘録です。 条件分岐を書く上で、ここ意識すると読みやすい、イケてそうって書き方をまとめました。 辞書的な感じにもしたいので、どんどん加筆していきます。 今のところif文が多めです。 ①一行で書く 主にtrue、falseで結果を分ける時 before if 条件 result1(trueの時の処理)else result2(falseの時の処理)end after 条件 ? result1(trueの時の処理) : result2(falseの時の処理)

          kato

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

          kato

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

          Railsのデフォルトの文字コード(utf-8)だと絵文字が保存できないので、使えるようにしたいってとき、あると思います。 おそらく、「✌️」こういう絵文字は保存できるけれど、「😊」こういった顔文字は保存できないはず。 では、絵文字を使えるように変更しようと、調べて出てくるのは、文字コードをutf-8からutf8mb4に変えるといった記事です。 ただ、文字コードを途中で変更するとなると色々リスクがありそう。 utf8→utf8mb4の場合は、拡張的な感じなので大きなリス

          kato

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

          kato

          Simple Calendar をカスタマイズする

          https://github.com/excid3/simple_calendar ほぼほぼここに書いてあることなのですが、備忘録として書いていきます。 ■曜日を並び替える 日曜日を始まり(一番左)にしたい場合 Controllerに記載する before_action :set_beginning_of_weekprivatedef set_beginning_of_week Date.beginning_of_week = :sundayend ■背景を消すデフォ

          kato

          Simple Calendar をカスタマイズする

          kato

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

          Railsのviewで、日付選択フォームを表示する際、多くの場合はdate_fieldもしくはdate_selectを使うことになると思います。 date_selectはデフォルトだとデザインが寂しい感じなので、デザインを変更したいなーと思いますが、変更するのがなかなか難しいと感じます。 そこで、デザインを変更する際には、classを設定しますが、 それぞれのフォームごと(年、月、日ごと)のclassを設定したいとなった時に、少し詰まったので方法を簡単にまとめました。

          kato

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

          kato

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

          未経験からJocyのエンジニアになって、現在二ヶ月ほど働かせていただいている加藤です。 既存のソースコードを理解する時、「長い、、読めない、、」ってなって挫折しそうになりませんか。 私はなります。そして同じように苦戦している方はたくさんいると思います。 そういった時の対処方法として、先輩に教わった非常に便利な方法をお伝えします。 それは、「不要そうなコードをひたすら削っていく」です。 ここでの不要なコードとは、「最低限の処理にはなくてもいいコード」 です。 何十行、

          kato

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

          kato