ブックマーク / made.livesense.co.jp (12)

  • DMARCレポートの可視化ダッシュボードを作りました - LIVESENSE ENGINEER BLOG

    はじめに そもそもDMARCって何? Googleの発表によってDMARC対応が必要に SaaSの検討 OSSの検討・選定 構成 動作 GmailからGoogle Driveへ格納する XMLをパースしてOpenSearchに格納する Google Driveからコンテナ内にダウンロードする パースと格納 可視化 苦労した点 Gmailの仕様とparsedmarcの相性が悪い OpenSearch突然データが全部消えた 作ってみてよかったこと 今後の運用 はじめに インフラGの鈴木です。ガールズケイリンアニメことリンカイ!の放映が近くなってきましたね。 最近小倉にギャンブル旅行にいったのですが、北九州競輪には等身大パネルがありました。気(マジ)度が伝わってきます。アニメの放映日が楽しみです。 ところで、今回はDMARCの可視化基盤を作った話をします。なかなか大変1でしたので、共有したいと

    DMARCレポートの可視化ダッシュボードを作りました - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2024/04/03
  • 何度も挫折してきたE2Eテストだけど、今後はDatadog Synthetics Testsが良さそうかも - LIVESENSE ENGINEER BLOG

    これは Livesense Advent Calendar 2022 DAY 20 の記事です。 はじめに 株式会社リブセンスの転職会議事業部Webエンジニアの @ishitan-liv です。 今回は、過去に転職会議でも導入しようとして挫折してきたE2Eテストについて書きます。 E2Eテストを自作するか、SaaSを使うのかで比較した結果と、Datadog Synthetics Testsの使い方を軽く紹介したいと思います。 なお、この導入については完全に個人プロジェクトとしてやっております。 リブセンスではエンジニアの権利として毎月10%の技術投資枠確保というものがあり、Googleの20%ルールのようなもので、約20日勤務だと想定して2日間は興味のある技術的なことに使えます。 grow.google はじめに このブログ記事を読むと得られる(と思われる)もの 今回書かないこと 導入検討

    何度も挫折してきたE2Eテストだけど、今後はDatadog Synthetics Testsが良さそうかも - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2022/12/20
  • 転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て - LIVESENSE ENGINEER BLOG

    これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエンドのサービス群とAPI通信する構成をとっています。 サービスの性質上口コミを中心とした検索流入が重要であり、SEOの文脈でフロントエンドのパフォーマンス改善の必要性は認識されていましたが、機能開発や負債解消もあり、まとまった対応ができない状況が続いていました。 この状況を改善すべく、1年間継続的に改善に取り組み、Web Vitalsの健全化、パフォーマンススコアの大幅な改善を達成することができました。 記事では、特に効果が大きかった改善

    転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2022/12/19
  • 最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG

    こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね! しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか

    最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2022/06/30
  • 複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG

    転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-config-template モチベーション 転職会議は現在ページごと・機能ごとにサーバーを別で管理するマイクロサービス構成で開発を行っています。その中で利用する静的コード分析やコードフォーマッタのルールは

    複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2021/08/24
  • ISR化でIESHILの建物詳細ページの読み込み速度を10倍に改善した話 - LIVESENSE ENGINEER BLOG

    初めに こんにちは、IESHILでエンジニアをしているgccjです。 IESHILはマンション査定価格がいますぐわかるサービスです。 2021年4月6日にその中でも一番アクセスされている建物詳細ページをISR(Incremental Static Regeneration)化しました。 それについて、目次の順番でご紹介していきたいと思います。 目次 前提--SST, CSR, SSR, SSGの説明 既存のシステム構成 既存のシステム構成における課題 建物詳細ページをISR化した理由 建物詳細ページをISR化した結果 建物詳細ページをISR化した後のシステム構成 最後に 前提--SST, CSR, SSR, SSGの説明 まず、「そもそもISRって何?」という説明はこの後の ISRをした理由で触れる予定です。 一方、それを理解するために、 Server-Side Templating(以下

    ISR化でIESHILの建物詳細ページの読み込み速度を10倍に改善した話 - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2021/05/31
  • 日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG

    インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。 はじめに 前提知識 解決案の候補 解決案1: 手でspanタグをつける 解決案2: サーバーサイドの処理 解決案3: クライアントサイドの処理 クライアントサイドで文節区切り 実装 結果と考察 さいごに 2024/05/16追記 はじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日語らしさが求められるデザインとなっています。 縦書きはWebエンジニアにとっても珍しい実装ですが、

    日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2021/02/15
  • AWSの構成図をいい感じに出力してくる「Cloudcraft」を使ってみた - LIVESENSE ENGINEER BLOG

    背景 Cloudcraft 概要 料金プラン Cloudcraftを使ってみた 初回作成 最終的に出来上がった構成図 良かった点 Live Sync機能 関係する各コンポーネント間を自動でリンク フィルタ機能 コンポーネントの自動更新 構成図を作成するだけで、月額料金が分かる マネジメントコンソールへのリンク あったらいいなと思う機能 サブネットの自動配置 注意点 まとめ 番外編 havaも使ってみた こんにちは、リブセンスのインフラグループに所属している竹です。 主にDOOR賃貸(AWS)や転職ドラフト ITエンジニア版 / デザイナ版(オンプレ)のインフラまわりを担当しています。 インフラグループでは、各プロダクト毎に担当者(窓口役)をつけて定期的にローテーションをしているため、業務引き継ぎの際に構成図が必要な場面が多々あります。 そこで日はAWSの構成図をいい感じに出力してくれる

    AWSの構成図をいい感じに出力してくる「Cloudcraft」を使ってみた - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2017/06/05
  • 転職会議の会員情報ページをReact化しました - LIVESENSE ENGINEER BLOG

    はじめまして。16卒で入社したエンジニアの渡部です。 現在は転職会議のプロダクト開発グループに所属していて、最近は会員情報ページのフロントエンド開発を行っています。 今回はReact化にあたって直面した問題、それを解決するために採用・参考にした技術を幾つか紹介したいと思います。 コード例はTypeScriptで書いています。 目次 型を欲する声の高まり(TypeScript) action層の肥大化(redux-observable) formのvalidation(Computing Derived Data(reselect)) viewをシンプルに保つ(High Order Components) 型を欲する声の高まり(TypeScript) react-reduxで実装していると関数から関数へと値を引き回すので、型をつけて安心して実装したいという声がチーム内で高まってきました。 そ

    転職会議の会員情報ページをReact化しました - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2017/05/08
  • レガシーコードの最適化とPHPバージョンアップ - LIVESENSE ENGINEER BLOG

    少し前のことになりますが、正社員転職サービス「ジョブセンスリンク」を構成するPHPアプリケーション群のPHPバージョンアップ対応と、それに合わせてレガシーコードの大幅な整理を行いました。 「PHPのバージョンあげて、リファクタリングしたんだ」と一言で言えば簡単ですが、日々のサービス改善を滞らせず、システムのリニューアルを同時に進めていくのは多大な労力を要しました。 今回はその仕事を主に担当した、キャリア事業部技術基盤チーム*1の海野がお届けします。お手柔らかにどうぞ。 ミッション PHPのバージョン問題。レガシーコードの山積。システムが歳を重ねるにつれ、必ず直面する大きな問題です。 システムは、初めてリリースされた数年前の数倍の規模になっているでしょう。 売上を支えるシステムを維持し、事業を加速させる施策を阻むこと無く、システムのリニューアルを進める。これが今回のミッションとなりました。

    レガシーコードの最適化とPHPバージョンアップ - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2016/11/01
  • チームによる継続運用を意識したAWS環境におけるTerraformの活用 - LIVESENSE ENGINEER BLOG

    概要 背景 複数人数で一つの環境をコードで管理する場合の移行期と運用期の特性 移行期 運用期 Terraformの採用理由 実際の運用 ディレクトリ構成 stateファイルの配置 環境の定義 tfvarsによる切り替え 環境固有のリソース定義 GitHubのPRフロー よかったこと・課題 よかったこと 課題 概要 どうも。篠田です。 「特定の"インフラ担当"・"開発メンバー"」や「古の記憶」に頼らず、『開発メンバー全員が拡張や移行作業を気軽にできるインフラ』を実現するために、私のチームで採用しているTerraformを使ったAWS環境運用フローをご紹介いたします。 Terraformで移行および運用するフローにしたことで、構成全体に対する変更の柔軟性が高まり、コードがあることで運用および拡張期において設計の変更や手戻りを恐れずに開発を進められるようになりました。 次は概要図です。 背景 先

    チームによる継続運用を意識したAWS環境におけるTerraformの活用 - LIVESENSE ENGINEER BLOG
    kkeisuke
    kkeisuke 2016/07/13
  • MySQLテストデータを自動生成&インポートする、PHPライブラリ「MagicalGirl」を公開 | LIVESENSE made*

    テスト・開発に使用するデータ生成の必要性 動作確認テストや開発時に使用するデータベースのデータ、どのように準備していますでしょうか?毎回手動で作成している、番環境から持ってくる。これらは一番良くない例ですよね。 毎回手動で作成していては、開発環境構築の度に、テスト実行の度に作業コストがかかり、オペレーションミスも発生しやすくなります。知っていないと用意できないデータ項目などもあるでしょう。それらを毎回一つ一つ確認するのは大変な作業です。 番環境のデータを使用することが危険であることは言うまでもないと思います。個人情報を扱っているシステムであれば、情報保護の点から大変なリスクを犯す行為です。メールアドレスを保存してあるシステムであれば、オペレーションミスにより不要なメールを実際に送信してしまう危険性も伴います。 特に、動作確認の際に自動テストを実行する場合、想定通りのデータが入って

    MySQLテストデータを自動生成&インポートする、PHPライブラリ「MagicalGirl」を公開 | LIVESENSE made*
    kkeisuke
    kkeisuke 2015/11/02
  • 1