注目のストーリー
All posts
htmlメールをダークモード対応させた
マーケティング業務も担うため、htmlメールの改修を行なったりもします。htmlメールの参考記事は少ない方（だと思っている）で四苦八苦したので、今後誰かのためにと思い、すごくざっくり、殴り書き的にやったことをまとめたいと思います。ダークモードへの挑戦実際のコード参考にしたサイトエンジニア募集中です絶賛ダークモードへの挑戦だいぶ前からダークモード対応したい方針はあったと記憶してますが、誰もやらなかったのでこの機会にやってみました。こんな感じでダークモードは実装できました。大きくいうと画像を変更するのと文字色を変更する、この2点です。実際のコードある程度土台になるコードに関してはstyleの...
Reactでクリック時に該当セクションへスムーズスクロールする実装方法
はじめに実装の背景実装方法1. イニシャルボタンの作成2. スクロール先の要素にIDを付与3. スムーズスクロールの実装4. モーダルからのイニシャル選択（モバイル対応）5. 全体のコード注意点まとめはじめにこんにちは、READY TO FASHIONの開発チームの片桐です。現在はブランドの一覧ページを実装しています。弊社のサービスでは、ユーザーがブランド一覧をより快適に閲覧できるように、イニシャル（頭文字）をクリックすると、そのイニシャルに対応するブランドリストの部分までスムーズにスクロールする機能を実装しました。今回は、その実装方法とポイントについてご紹介します。実装の背景ブランド一...
僕とアジャイルと時々スクラム。
釣りタイトルみたいになってしまいましたが、弊社が採用しているアジャイル開発について少し書きます。そもそもアジャイル開発って？スクラムとは？アジャイル開発手法（スクラム）の基本的な仕組みアジャイル開発手法の恩恵① 多くのタスクをこなすことになるので、様々な機能を作れる② テスト項目が少なく済む③ 主体性を持ち開発を行えるので、自信がつく④ 定量的な良い評価をしてもらえるまとめそもそもアジャイル開発って？テックブログ読んでる方は「いやもう知ってるよ」という方ばかりだと思うのですが、そもそもを省いてしまうとテックブログの文章量が少なくなってしまうので、書かせてください。ごめんなさい。アジャイル...
CSS / Sass スタイルガイド
社内のコーディングルールについてそもそもの目的上記2点の目的を達成するためには？結論：他社のコーディング規約導入主なコーディング規約スタイルの宣言セレクタプロパティコメントCSSのフォーマットディレクトリ構成1-settings2-mixin3-base4-layout5-modules6-utility7-librayまとめ社内のコーディングルールについて創業から弊社は様々な開発メンバーと協働しシステム開発に勤しんできました。企業であれば当然だと思いますが、弊社はまだまだ小規模ということもありこの機会に社内外向けにコーディング規約をまとめてみました！そもそもの目的コーディング規約を作成...
手付かずの登録フォームを改修し始めた話
このブログの背景改修の目的今回やったこと結果登録フォーム周りで今後やりたいことREADY TO FASHIONでは一緒に働くエンジニアを募集しています！このブログの背景2017年のREADY TO FASHIONサービスのリリース以来、なかなか手付かずだったユーザーの登録フォームを改修（今回は簡単なデザインの変更を）したので、記録として残しておきます。改修の目的手付かずだった。というのは理由のひとつですが、一番は登録率の伸び悩みがありました。READY TO FASHIONは人材サービスなので、求職者の活動に波がありますが、平均すると約40%前後というのが直近の登録率です。その登録率をい...
Rails←React導入
弊社は創業からRuby on Railsを使用していましたが、創業から3~4年が経過した時点で、「あれ・・サイト表示重くない？？」「画面遷移10秒くらい経たないと変わらないページあるよ・・」とちらほら社内外からご意見（クレーム）をいただくことがあり、じゃあフロントエンド改善するかという流れになりました。React / Vueどちらか導入したいよねということになったのですが、ベースがrailsということで、erb / slimなどのviewの中でreactを使用できるgemがあるということでreact-railsを採用しました。Gemの導入ファイルの準備Reactコンポーネントの作成Rai...
Reactにおける状態のリフトアップとコンポーネント設計の重要性
はじめに公式ドキュメントを参照してみる状態管理とコンポーネント設計の課題状態のリフトアップ（Lifting State Up）とはなぜリフトアップが必要なのか状態のリフトアップを使った実装例アプリケーションの構成コード例親コンポーネント：App検索バーコンポーネント：SearchBarフィルターコンポーネント：Filterリスト表示コンポーネント：ItemList実装のポイントサンプルコードにおける状態のリフトアップの適用なぜこの設計が効果的か状態のリフトアップによるメリットまとめコンポーネント設計の重要性単一責任の原則プレゼンテーションとロジックの分離状態管理を親コンポーネントに集約す...
Ruby on RailsでSendGrid(Web API)メール送信を実装
業務でSendGridのSMTPを用いてメールをユーザー宛に送信していたが、送信されるメール毎にカテゴリーを付与し、コンバージョン率を調査したいとの社内マーケからの要望を受け実装。そのため、SMTPでカテゴリーを付与しようとしたが、カテゴリー設定がSMTPではできないことが判明し、Web APIにて実装しようと思ったところ、意外と参考文献が少なかったので備忘録も兼ねて記事とします。ちなむと今回は、Web APIを用いてメール送信するところが難所なのではなく、カテゴリーを付与するところで詰まりました。また、今回APIの呼び出しに使用したのはsendgrid-rubyというgemになります。...
テックブログ始めました
はじめにこんにちは！READY TO FASHIONテックブログへようこそ。READY TO FASHIONの開発部門統括をしております高草木です。本ブログでは、READY TO FASHIONの開発部門に所属する技術者を中心に、弊社が使用している技術的な挑戦・学びを中心にアウトプットしていきたいと思います。READY TO FASHIONでは一緒に働くエンジニアを募集しています！ファッションに興味があるエンジニアのご応募お待ちしております！READY TO FASHIONテックブログの目的ITエンジニアの採用私たちは常に一緒に働いてくれるエンジニアを求めています。ファッション業界✖️エ...
