こんにちは！ プロダクトエンジニアリング部の吉永です。 LIFULLには2020年8月に入社しました。 今回は入社後、早々に任せていただいた仕事について記事を書きたいと思います。 内容としては、静的サイトをホスティングしている、とあるサービスのAWS構成を刷新し、CI/CDを導入したプロジェクトについて、どんな理由でどんなことに考慮して刷新していったのかについてご紹介していきます。 アジェンダ 刷新対象サイトの旧AWS構成図 AWS構成刷新の背景 新AWS構成について Lambda@Edgeについて イン

プロダクトエンジニアリング部の柴田です。 普段は LIFULL HOME'S の賃貸領域でフロントエンドの開発・設計を担当しております。 今回は LIFULL HOME'S での Web フロントエンドおけるレガシーブラウザ対応の負債解消への取り組みについてご紹介いたします。 背景 現在の LIFULL HOME'S の大枠は 2011 年ころに作られたものであり、当時の CSS3 サポート状況に差異のあるブラウザで表示を担保するには装飾的なパーツはほぼ画像で実装する必要がありました。 例えば、次に示すよ

プロダクトエンジニアリング部のえびさわです。 この一年でLIFULL HOME’Sのメイン開発サーバーのフロントエンド環境が大きく刷新されました。 以前は使えなかったSassも導入され、モリモリとDXが向上しております😭 今回はマークアップにフォーカスし、刷新前に感じていた課題とSass導入後に行なった改善策をご紹介します。 課題 カラーコードのtypo, 種類が多い LIFULL HOME’S にはデザインガイドラインが存在し、使う色はある程度パターン化されています。 代表的なもので言うと弊社のコーポレ

Hi, I'm Jye Ruey . A SET(Software Engineer in Test) from LIFULL. We published an End-to-End testing framework "Bucky" at last time. www.lifull.blog In this time, an image difference detection tool "Gazo-san", which is for visual testing, is also published

前書き こんにちは、BASEのフロントエンドチームでエンジニアリングマネージャーをやっている松原( @simezi9 )です BASEではフロントエンドエンジニアの積極採用を行っています。 その過程で、面接を受けに来られた方によく「BASEはVueとTSを採用しているとのことですが、相性がいまいちじゃないですか？なんでVue＋TSにしてるんですか？」 という感じの質問をいただくことがあります。 この記事は、そんなBASEのフロントエンドにおける、技術・・・というよりもVue.jsに対するスタンスについて嘘

こんにちは、ECプラットフォーム部の鶴見、竹中です。普段はZOZOTOWNのリプレイスに関わるID基盤とAPI Gatewayの開発を行っています。 本記事では、API Gatewayの開発で取り入れているJSON Schemaを使ったドキュメントの自動生成および、スキーマの自動検証を紹介します。 API Gateway設定ファイルの運用改善 弊社で開発しているAPI Gatewayは、APIへのリクエストのルーティングやリトライなど様々な機能の制御を設定ファイルで行っています。 バックエンドチームはアプ

ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。 この記事のゴール Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、 <input :style

メンテナンスのため、一時的にWebサーバへのアクセスを止める必要が発生しました。 その時間帯は、いわゆる「メンテナンスページ」「Sorryページ」を表示させる必要があります。 ふと、 HTMLとかCSSで多少はデザインされたページを返したい と思いました。 今回はEC2インスタンスのフロントにあるALB単体での実現を試みました。 設定 ALBの固定レスポンス機能 を利用します。 リスナーにルールの追加 リスナーのルールに対して設定を追加します。 HTTPとHTTPSがある場合は、それぞれにルールを追加する

はじめに こんにちは、aptpodに入社しそろそろ1年になりますWebチームの松本です。 aptpodでは日々フロントエンドエンジニアとしてReact/TypeScriptを用いた、お客様向けアプリケーションのUIを実装しています。 Reactは実は入社してから初めて触ったフレームワークでしたが、頼れる先輩方のサポートもありつつ日々成長を感じながら開発に励んでいます。 入社当初から開発に関するノウハウやコードに関する考え方など、具体的なプログラムのプロジェクト構成やコンポーネントのファイル分け、コード全体

初めまして！8月よりスマートキャンプにエンジニアとして中途入社した吉永です！ 私は現在19歳で、通信制の大学に通いながらエンジニアチームの一員として開発に携わっています。 プログラミングは中学生の時に始め、高校在学時にとあるスタートアップ企業でインターンしたり、卒業後はエンジニアとして正社員で開発を行っていました。 得意分野はフロントエンドで、主にVueやNuxtを使った開発が好きですが、前職ではLaravelやDjangoを使ったバックエンドの開発も行っていたため、メンバー構成に左右されない柔軟な開発を

こんにちは。LIFULLでエンジニアをしている中村優太です。 2020年4月に新卒で入社して、早くも4ヶ月、配属されて2ヶ月が経過致しました。 この記事では、配属までのLIFULL新卒エンジニア研修についてご紹介したいと思います。 はじめに 研修スケジュール プログラミングの基礎 個人開発演習 その他トピック 最後に はじめに LIFULLのエンジニアは2ヶ月間の新卒研修があります。 最初の2週間は全職種合同で会社のビジョンの理解や社会人の心構え、ビジネス基礎を学び、残りの1.5ヶ月間はエンジニア研修にな

技術開発部の相馬です。好きな UI フレームワークは Svelte です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 今回は、LIFULL HOME'S の Web フロントエンド（以降はフロントエンドと表記します）開発環境を、Node.js の資産を用いて近代化した話（以降は近代化と表記します）をご紹介したいと思います。 目次 はじめに 近代化として取り組んだ内容 Sass の導入 Rollup の導入 Babel

はじめに 株式会社Re:Buildのカンボ(鈴木孝之)です。 6月21日（日）にチャリ ティー カンファレンス沖縄2020を実行委員長として、企画・運営した中で背景や 開催にあたって込めた想いをまとめましたので、よろしければ、読んでください！ 今回のカンファレンスは全体で約110人の方が参加して下さいました。 charity-conf.okinawa.jp チャリ ティー カンファレンス沖縄とは？ 今年は コロナウイルス の影響で、多くのお土産品店や食品のお店などの方々が苦しい状況にあると思います。 そん

メドレーのデザイナー酒井です。最近、 JobMedley から CLINICS に異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のよう

メドレーのデザイナー酒井です。最近、 JobMedley から CLINICS に異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のよう