プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸領域のフロントエンド開発をしています。 今回はLIFULL HOME'S の UI 構築を手助けするコンポーネントカタログ（以下「カタログ」）を作った取り組みについて紹介します。 最初にお断りしておくと、この「カタログ」はいわゆる 「デザインガイドライン」「デザインシステム」のことではありません🙇 背景 LIFULL では日々プロダクトの改善を行っており、UI の改修もそのひとつです。 しかし以前から複数のフロントエンドエンジニアが開発生産性と品質面での課題を感じていました。 開発生産性の課題 LIFULL HOME'S の UI はすべて、サービスのベースとなる「LIFULL HOME'S デザインガイドライン」をもとに設計されています。 このデザインガイドラインは現在 Adobe XD で公開されて

こんにちは！ LIFULLエンジニアの吉永です。 普段はLIFULL HOME'SのtoC向けCRMチームにてエンジニアリングマネジャーをやっています。 本日は私がCRMチームにジョインしてからの4年間で行ってきたチームとしての技術負債解消活動について紹介します。 技術負債解消活動の変遷、技術負債解消と新規開発がどのようなバランスで進められてきたのか、現状はどうなっているか、今後取り組んでいきたいことについて触れていきます。 アジェンダ 技術負債解消活動の変遷 技術負債解消と新規開発のバランス 現状について 今後取り組んでいきたいこと 最後に 技術負債解消活動の変遷 2020年～2021年ごろ 当時はレコメンド物件をユーザー毎に取得してメールコンテンツを作成するサーバ、LINEサーバからのWebhookで応答するチャットボットサーバ、メールを送る為のマーケティングオートメーションツールなど

フロントエンドエンジニアの嶌田です。 アイコンは、UIデザインにおいて欠かせないパーツです。弊社が提供する不動産情報サイトであるLIFULL HOME'Sでも、多数のアイコンが使われています。 ウェブページにアイコンを埋め込む手段は無数にあります。あなたはいくつ言えますか？　それぞれのメリットとデメリットについて説明できるでしょうか？ この記事では、LIFULL HOME'Sのフロントエンドで選ばれているアイコン表示方法およびその理由を説明します。その後、アイコンの管理や実装にまつわる不便な点をサービス横断的に解消するために作られた社内ツールと配信システムである、LIFULL Icon CDNを紹介したいと思います。 私たちのアイコン実装方法 無数にあるアイコン実装方法のうち、私たちが選んだ実装方法は極めてシンプルです。 <img src="assets/icon-star.svg" wi

こんにちは、エンジニアの中島です。 この記事は2024年7月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。 この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。 目次 目次 サービス改善 ログイン画面の入力フォームの名前設定 物件登録画面のステップ情報のスクリーンリーダー対応 売買物件登録画面のテーブル文脈の排除 物件登録画面内の物件画像編集モーダルのアクセシビリティ対応 取扱物件の一覧ページにある各コントロールへの名前設定 育成・啓発の取り組み アクセシビリティ1on1 社内表彰 お知らせ サービス改善 本期間中の改善取り組みのターゲットはLIFULL HOME'S 賃貸・流通マネージャーサイトです。 こちらはLIFULL HOME'Sをご利用いただいている会員様(不動産会社様)が、物件を掲載する際にお使いになる管理画面に

こんにちは、エンジニアの中島です。 この記事は2024年4月〜6月のLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。 この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されています。 目次 目次 サービス改善 取扱物件検索の検索方法選択タブのボタン化 物件登録画面(賃貸のみ)のタブのボタン化とテーブル文脈の破棄 物件登録画面(賃貸のみ)内のダイアログのキーボード操作を可能に 物件登録画面(賃貸のみ)内の郵便番号からの住所入力補完機能をキーボード操作可能に 物件登録画面(賃貸のみ)内の画像登録UIをキーボード操作可能に 取扱物件一覧(賃貸のみ)内のフォーカス不能なボタンを修正 育成・啓発の取り組み 新入社員研修 アクセシビリティ1on1 WCAG解説書 輪読会 社内表彰 お知らせ サービス改善 本期間中の改善取り組みのターゲットはLIFULL

QAの山下です。 QAグループという名前で横断組織として手動&自動テストやツール開発、プロセス改善など仕組みづくりに取り組んでいます。 今回は LIFULL HOME'S の開発で実行されているE2Eテスト（リグレッションテスト）をシフトレフトし、実行時間を80％短縮した話を紹介します。 ざっくり何をやったのか 大規模なリポジトリでのdevelopマージ後のE2Eテストの9割をPR上で実行可能にした コードのpushからE2Eテスト完了まで5～8分で完了できる 運用上の課題も頑張って解消した 目次 ざっくり何をやったのか 目次 結論 前提情報 E2Eテストとは リグレッションテストとは LIFULL HOMESでのE2Eテストの位置付け シフトレフトとは EEとは 対象のプロダクトの規模 起こっていた課題 テストの削除とリファクタを行い、テストケースを3割削減した デプロイ後のアプリケーシ

データサイエンスグループの島です。 普段は機械学習システムバックエンドの開発や運用を行っております。 2024年5月25日に半蔵門の本社2Fにて機械学習(AI・人工知能)に関するライトニングトーク(LT)会が開かれました。 素晴らしいLT会でしたので、内容をいくつかシェアさせてください。 第89回 Machine Learning 15minutes! Hybrid - connpass 「Machine Learning 15minutes!」というコミュニティを運営している門前さんが主催するLT会です。 以前の開催に引き続き、LIFULL AI Hubが協賛という形での開催となりました。 現地参加とオンラインのハイブリッド開催で、会場20名、オンライン100名ほどがいらっしゃいました。 様々な方が発表してくださり非常に盛り上がりました。豪華な内容でとても示唆に富んでいました。関係者の皆

こんにちは。クオリティアーキテクトグループでQAエンジニアをしている星野です。 元々はQAグループという名前で横断組織として社内のテストプロジェクト支援などを嗜んでいましたが、 組織が統合・再編成され、より自動テストやツール開発、プロセス改善などエンジニアリングに寄った仕組みづくりに取り組んでいます。 ３行まとめ 共通のフォーマットを開発したよ 抵抗感なく浸透させるように工夫したよ こっそり横断的なメトリクスも取ったら便利っぽかったよ ３行まとめ 背景 課題 対策 やったこと 当たり前品質編 : 満たさないと論外 魅力品質編: 乗り換える理由をつくる 横断部署が常にぶちあたる浸透の課題 ロガー 広報 効果と現状とこれから 終わりに 背景 課題 LIFULLではチームごとにやりやすい開発体制を選択しています。 奇抜な開発スタイルをとっているわけではありませんが、それぞれに特色があり独自に改善

プロダクトエンジニアリング部の興津です。私は普段アプリケーションエンジニアとしてLIFULL HOME'Sのサイト改善業務しています。そのかたわらで、社内の制度を利用して、LIFULLのサービスの一つであるACTION FOR ALLの企画もしています。 今回はそんなLIFULLの独自の制度である「キャリフル」と、その経験を通して私が得られたものについて紹介します。 LIFULLの独自制度「キャリフル」について まず初めに、エンジニアの自分が企画に挑戦することを可能にした、LIFULLの独自制度である「キャリフル」を紹介します。 キャリフルとは、LIFULLの社内兼業制度で、業務時間の1割程度を本業とは別の業務ができる制度です。 私のように、普段とは別の職種に挑戦することもできるほか、たとえば同じエンジニアでもLIFULLの別のサービスの開発に携わることも可能です。 キャリフルについては公

こんにちは。エンジニアの小林建太です。 今回はフロントエンド業務での課題をChrome拡張機能で解決を試みた事例をご紹介させていただきます。 LINEヤフー Techから2024年1月に公開された「Tappy」というツールにインスパイアされた拡張機能「Tap Analyzer」を開発し、公開しました。 chromewebstore.google.com Tappyとは Tappyの課題と着想 開発した機能 技術 技術選定 開発 chrome debugger API LLMの利用 活用のメリット 今後の展望 Tappyとは Tappy（https://twitter.com/lycorptech_jp/status/1752587301564436593 より） Tappyは、LINEヤフー Techが開発したスマートフォンのウェブサイトでのタップ操作の成功率を可視化するツールです。URL

こんにちは、プロダクトエンジニアリング部の山﨑です。 私は LIFULL HOME'S 賃貸マーケットのプロダクト開発を行うグループに属しており、その中でも技術負債解消に取り組むエンジニアリングチームのリーダーをしています。 本記事では、LIFULL HOME'S の賃貸マーケットにおける技術負債の現状と、本チームの具体的な取り組み内容を紹介します。 LIFULL HOME'S の技術負債解消への取り組みを知っていただくことで、LIFULL HOME'S でのエンジニアリングに興味を持っていただけたら幸いです。 LIFULL HOME'S の賃貸マーケットにおける技術負債の現状 さっそくですが、現状、賃貸マーケットの基盤刷新後のアプリケーションは刷新前のアプリケーションへリクエストを送ることで一部機能の実行を担保しているという課題があります。 以前別の記事でも紹介させていただいた通り、賃貸

エンジニアの市川と申します。 LIFULL HOME'S の売買領域の開発を担当しています。 さて、さっそくではありますが、読者の皆さんは普段ABテストを実施しているでしょうか。 私たちの開発しているLIFULL HOME'Sでも、日々多くのABテストが実施されています。 ABテストの実施によって市場学習回数を増やし、より良いプロダクトを作り上げることが目的です。 その中で私たちエンジニアが貢献できる点といえば、市場学習のスピードを上げることです。 LIFULL HOME'Sでは長年ABテストを実施してきていますが、いくつかの問題がありました。 今回はその問題と、どのように解決に向けて動いたのかという点について紹介します。 ※LIFULL HOME'SでのABテストにつきましては、以下のリンクをご参照ください。 A/Bテストは事前準備で決まる！？LIFULLのA/Bテスト事前設計の取り組み

賃貸領域でフロントエンドエンジニアをしている齋藤です。 今回はここ数年取り組んでいたフロントエンド領域における自動テスト導入とテスト工数削減について、書いていきたいと思います。 なぜ導入したのか、導入して見えた課題、そしてその課題を解決するためにどうしていったのか、という流れで書いていきます。 目次 目次 なぜ導入したのか たびたび障害が発生 開発効率が悪い 自動テストを導入する 自動テストの導入 導入して見えてきたもの ほぼコードを書かない解決策 まとめ お知らせ なぜ導入したのか まず弊社では日々の機能開発は基本的にABテストを実施して効果を検証しながら進めていきます。 そのため、対象となるページが見られたか、対象となる要素が表示されたか・使われたかなどを計測する必要があります。 静的な単一ページであればそれほど問題はありませんが、動的であったり複数のページでそれを行うとなると正しく計

エンジニアの渡邉です。普段はLIFULL HOME'Sの売買領域のエンジニアチームにて技術リーダーとして開発を担当しています。好きなNginxのモジュールはngx_small_lightです。 ここ数年、LIFULLの開発部門では「開発生産性」と「品質担保」の重要性が再注目されています。 LIFULL HOME'Sの主要なリポジトリは、10年以上にわたり運用され続けており、数多くの開発者が日々の改善に尽力しています。 しかし、長年にわたる蓄積によって、アプリケーションの要件を満たすための実装が複雑化し、現在では実装時に調査、開発、レビュー、テストのすべての工程でそれぞれ必要以上に時間がかかる結果となっており、開発の生産性を低下させています。 この問題に対処するため、LIFULL HOME'Sでは既存のアプリケーションから必要に応じてシステムを切り出し、部門ごとでの運用管理を行っています。

こんにちは！ LIFULLエンジニアの吉永です。 普段はLIFULL HOME'SのtoC向けCRMチームにてエンジニアリングマネジャーをやっています。 マネジャーとなり、未経験分野へチャレンジしてくれるメンバーと接する機会が増えました。 自身が経験や知見のある分野であれば相談にのったりサポートはしやすいですが、未経験の分野となるとどのようにしてメンバーと接していくかは悩むことが多いと思います。 メンバーに「これお願い」と丸投げできると楽ですが、現実問題なかなか難しい場面も多いと思います。 マネジャーは自身がレビュアーになるか、レビュー対応できない場合は、他部署の有識者を募ってレビュアーやアドバイスをくれる人を確保する必要もあるでしょう。 本日はこんな悩みを抱えているマネジャーの方向けに、私なりにどんな風にメンバーと接したか、その結果どうだったかについて共有したいと思います。 アジェンダ

プロダクトエンジニアリング部の興津です。 私は現在、LIFULLの海外拠点の一つである、LIFULL Tech Malaysia Sdn. Bhd.（以下LFTM）のメンバーとともにLIFULL HOME'Sの賃貸領域でサイト改善業務をしています。 今回は、言語や文化の違う私たちがどのようにコミュニケーションをとりながら働いているのかを紹介します。 LIFULLの海外拠点の紹介 2024年現在、LIFULLにはベトナム（LIFULL Tech Vietnam Co.,Ltd.以下LFTV）とマレーシアにグループ会社があります。 さらなる事業拡大を目指すために、より優秀な開発リソースを確保したいという考えから行き着いたのが、これらのグローバルな開発拠点の設立でした。 それぞれの現地で採用されたエンジニア達が本社メンバーと協働しながら、開発業務を担っています。 本社メンバーが現地に駐在したり、

こんにちは。フロントエンドエンジニアの根本です。 LIFULL HOME'Sのプロダクト開発と、スポーツ関連の新規事業開発に携わっています。 過去のブログでは新規事業開発におけるUXエンジニアとしての取り組みを紹介しました。 ご興味のある方はぜひご覧ください。 UXエンジニアとは？新規事業での取り組み - LIFULL Creators Blog 新規事業開発におけるUXリサーチの実践 - LIFULL Creators Blog 今回はLIFULL HOME'Sの既存事業におけるUXエンジニアとしての取り組みを紹介したいと思います。 新規事業とは異なる点の一つとして挙げられるステークホルダーの違いに焦点を当て紹介したいと思います。 はじめに 私の携わっている新規事業では、事業オーナー1名・エンジニア2名という体制のため必然と全部やらないといけない = やりたいことは全部できる環境です。

KEELチームの相原です。 今回はeBPFを利用してKubernetesクラスタの可観測性の隙間を埋めている話です。 前回のエントリではLLMにうつつを抜かしていたので本業(?)の話をしようと思います。 www.lifull.blog LIFULLの可観測性の現在地 eBPFとは 可観測性の隙間 NAT Loopback eBPFを実行するには BPF CO-RE libbpf-rsを利用したNAT Loopbackの検知 1. (ユーザ空間) コマンドライン引数として受け取ったDNSをTTLごとに名前解決してIPアドレスを取得する 2. (ユーザ空間) IPアドレスに変化がある度にカーネル空間で動くBPFプログラムにそのIPアドレスのリストを渡す 3. (カーネル空間) Kprobesで tcp_v4_connect/tcp_v6_connect にフックを仕込む 4. (カーネル空間)

プロダクトエンジニアリング部の興津です。私は前職が客先常駐（SES）専門の会社でエンジニアをしていて、2022年10月にLIFULLへ中途入社しました。 客先常駐でお客様のシステムを開発する前職から、自社のサービスを開発するLIFULLへ転職することは、不安な点が多かったことを覚えています。 今回は、転職して1年が経過した今振り返ってみて、これまでの経験が活かせた点と、活かせなかった点の乗り越え方を紹介します。 同じように客先常駐エンジニアから自社サービスエンジニアへのキャリアチェンジを検討している方の参考になれば幸いです。 （ただし、あくまでも私の・LIFULLに転職した結果であることはご留意ください） 私がLIFULLに転職を決めた理由 もともとは前職と同じ客先常駐ができるような会社に転職をしたいと考えておりました。 そんな中登録した転職サービスでLIFULLからスカウトメッセージをも

こんにちは、エンジニアの中島です。 この記事は2023年10月から翌年1月までのLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。 この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されていく予定です。 目次 目次 サービス改善 トップページのエリア選択UIのフォーカス管理 地域・路線から探す検索フロー中にあるエリア選択リンクにアクセシブルな名前を設定 路線から探す・地域から探す検索フロー中にある送信ボタンのバリデーション設定 フッタ近くにある物件の種類から選び直すことができる機能の「もっと見る」ボタンのフォーカス関連の不具合を修正 物件一覧ページの見出し順番の不整合を修正 物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正 おすすめ物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正 ページトッ