開発

Next.js の Parallel Routes に入門したらユーザー体験に関する悩みが良い意味で増えた話

はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の NewsPicks Stage. チームの三嶋です。 普段は、NewsPicks Stage. という経済情報に特化したオンライン番組配信プラットフォームの開発をしています。 NewsPicks Stage. チームでは、昨年末から…

Flexbox内でのテキスト省略の謎を解く

はじめに こんにちは!株式会社ユーザベース SaaS事業 Product Team の沖です。 この記事では、私がプロダクト開発中に遭遇した問題とその解決方法について共有します。具体的には、Flexbox 内の要素にカードのタイトルが「…」で省略される仕様を追加した際…

ソフトウェアエンジニアのライブラリアップデートの向き合い方

こんにちは。ソーシャル経済メディア「NewsPicks」NewsPicks Stage.事業のエンジニアをしています、林です。 業務では Next.js / Rust / Go などを用いて、経済・ビジネス情報に特化した動画配信サービスであるNewsPicks Stage.の開発・運用を行っています。…

プログラミングの原則:enumの比較はすべてバグ

こんにちは、ソーシャル経済メディア「NewsPicks」のむとうです。 この記事は NewsPicks アドベントカレンダー 2023 の3日目の記事です。 昨日は@J_Nakagawa(隼佑 中川)さんによる『LambdaレスポンスストリーミングとAWS-SDKを使ってSlackに進捗バーを表示さ…

プログラミングの原則:構造化テキストを文字列結合で作らない、置換でいじらない

こんにちは、ソーシャル経済メディア「NewsPicks」のむとうです。 先日から『Ghost of Tsushima』の開発者が書いた『ルールズ・オブ・プログラミング』という本をちょっとずつ読み進めていて、プログラミング熱が高まっています。この本は大きな指針を示すだ…

Skaffoldで誰でも簡単に開発を始められる世界に

こんにちは。 株式会社ユーザベース SaaS事業 板倉です。 私たち Product Teamではkubernetesを用いた開発・運用を行っています。 今回はkubernetesを用いた開発をする際に利用しているSkaffoldについて書いていこうと思います。 Skaffoldとは Skaffoldを端…

信頼を資産のように管理する

導入 こんにちは、Product Teamの朴です。 プロダクトを開発する中で、信頼が大事という話は良く聞きます。プロダクトマネジメントに関する本の「INSPIRED」、「Radical Candor」などでもメンバー同士の信頼関係の構築の大事さが強調されています。 特にプロ…

Amazon OpenSearch Serviceへ移行:AWS CDKで構築するSAML+OktaでOpenSearch Dashboardsにログインできる環境

こんにちは。NewsPicksでエンジニアをやっております崔(チェ)です。現在は Data / Algorithm チームで検索エンジンの開発を担当しております。 弊社は、検索エンジンとしてElasticsearch(以下、ES)をAmazon EC2に乗せて構築しておりましたが、ヤクの毛刈…

キャリア決済を導入してみたら課金開始率が10%以上UPした話

はじめに これまでのNewsPicks有料プランの決済手段と課題 なぜキャリア決済にしたのか 開発 キャリア決済導入という山に登る ABテスト 振り返り はじめに こんにちは、NewsPicksエンジニアの上村です。 NewsPicksのプレミアム月額プランがキャリア決済に対…

監視強化!Deno アプリに自作 Elastic APM Agent を導入

あいさつ 背景 Elastic APM と今回実装した Deno 向け Agent の概要 Elastic APM の簡単な説明 Elastic APM Agent で計測 Elastic APM Agent の使い方(簡単なミドルウェアのコード例つき) 設計と実装 環境 Middleware として実装 Span の計測と fetch への…

NewsPicks のプッシュ通知開封数を最小限の開発で 10% 以上改善した話

はじめに NewsPicks のプッシュ通知について プッシュ通知事前テストの導入 構築した基盤の概要 Braze の設定 導入結果 おわりに はじめに こんにちは、NewsPicks エンジニアの佐藤と申します。 NewsPicks Advent Calendar 2022 の11日目を書かせていただき…

Local環境の開発セットアップに必要な時間を1 /10に短縮することで、スムーズにチームにジョインしてもらえるようにした話

初めまして、アプリケーションエンジニアの杉浦(saba_can00)です! 本記事は、NewsPicks Advent Calendar 2022 の12/7 のブログとして記載させていただいています。 この記事でお伝えしたいこと ざっくり状況の説明 プロダクトを内製化がスタート 引き取った…

GitHub Actions / GitHub CLI を使った PR レビューをサポートする取り組み

NewsPicks でサーバーサイドエンジニアを務めている池川です。 サービス運営をされている会社さんであれば、どの会社さんでも何らかの障害を起こし、その対策のための MTG を実施されていると思います。 が、サービスを長く運営していると、過去に発生してし…

安全安心の開発体験のために Visual Regression Testing はじめました。

NewsPicks Web Experience Unit でフロントエンドエンジニアをしているじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えつつ、見ためも刷新するプロジェクト(以下リニューアルプロジェクト)を進めてい…

iOSアプリ起動高速化に挑戦!不要コードやリソースの見直しとライブラリのstatic化編

みなさんこんにちは。NewsPickでiOSアプリの開発をしている森崎です。 当記事ではどのアプリも一度は見直しを検討したことがあるであろう、アプリの起動時間の高速化についてお話しします。 他の記事で起動時の処理や高速化への改善策を書いたので、ここでは…

コンテナイメージのバージョン管理を自動化したい!

皆様はじめまして! NewsPicks SREチームの中川です。 本日はコンテナイメージのバージョン管理についての記事をお届けします。 概要 実装 ビルド デプロイ Pros Cons おわりに 概要 NewsPicksではECSやKubernetesに代表されるコンテナサービスを使用してお…

インターン生がDBのテストをKotlinで書けるようにした話

はじめに タスクについて 実装までの流れ 1. 採用するに相応しいインメモリDBがどれかを調査して決定する 2. インメモリDB向けにデータを初期化するプログラムを開発する 作ったもの 3. テストコードを書く 4. テストコードをリファクタリングする 4-1. Sess…

arrow.core.Either 使い方メモと、初めてのKotlinコードリーディング

はじめに arrow.core.Eitherとは arrow.core.Eitherのサンプル arrow.core.Eitherの生成方法 1. Any#left / #right 2. Either#fx arrow.core.Eitherの利用方法 arrow.core.Eitherに関するまとめ Kotlinソースをデコンパイル 2回呼ばれる#bindメソッドの謎 ca…

コンポーネントとGraphQLクエリの管理にFragment Colocactionを導入したら素晴らしかった件

はじめまして、NewsPicks Web Product Unitのじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えるプロジェクト(以降、リアーキプロジェクト)を進めています。 新 Web 基盤のフロントエンドはReact (Next…

残業と生産性とリアーキテクチャの効果

はじめに 残業と生産性の相関 リアーキテクチャ時の生産性の推移 おわりに はじめに こんにちは、モバイルチームスクラムマスターのko2icです。 NewsPicksのモバイルチームでは、1スプリント1週間で、全てのタスクをストーリーポイントに落としています。た…

「面白い」から人が集まる。1人の思いから始まったNewsPicksアプリのリアーキについて聞いてみた

ユーザベースの開発組織では、The 7 Valuesの1つである「自由主義で行こう」のもと、エンジニアメンバーが自分の意志でリアーキプロジェクトを推進できる環境があります。 技術の進歩や開発組織の拡大とともに、既存のシステムアーキテクチャがフィットしな…

学生認証に海外サービスのSheerIDを導入してみた

はじめに こんにちは、NewsPicksの小林です! 今回は、NewsPicks サービスのアプリに学割プランを追加するため、内製の学生認証を廃止して、外部認証サービスのSheerIDを導入したので、ご紹介したいと思います。 はじめに SheerIDとは 学生認証サービスの精…

とある中規模開発プロジェクトの記録

こんにちは。NewsPicksのkitoです。 NewsPicksでは、JobPicksという「みんなでつくる仕事図鑑」をコンセプトにしたサービスを提供しています。様々な職種のロールモデルの実名でリアルな経験談を閲覧・投稿でき、就活、転職、副業の仕事選びに役立ちたいと思…

【登壇情報】3/11 Observability Conference 2022「NewsPicks のプロダクト開発エンジニアが実践する スキルとしての SRE」

3/11(金) 15:05-15:45 Observability Conference 2022のTrack A「NewsPicks のプロダクト開発エンジニアが実践する スキルとしての SRE」にNewsPicks Web Product Unitチームの飯田 有佳子が登壇します。 NewsPicks のプロダクト開発エンジニアがスキルとし…

Fluent Bitを導入しました:ローカル実行・確認方法と、導入の過程でハマったこと

AlphaDrive、NewsPicks兼務でエンジニアしている大場です。 最近はNewsPicks Webの新基盤開発を行っています。 新基盤はNext.jsで開発していてAWSのFargateで構築しているのですが、このFargate上で取得したログをS3、New Relicに送るためにFluent Bitを導入…

【イベントレポート】技術的負債との付き合い方のススメ|「Qiita Engineer Summit 2021 Winter」

2021年12月17日、エンジニアとして活動している方を対象にしたオンライントークセッション「Qiita Engineer Summit 2021 Winter」が開催されました。 セッションテーマは「技術的負債との付き合い方のススメ」。エンジニアリングをしている中で議論として取…

暗黙的フィードバックのための逐次行列分解ライブラリを公開しました

NewsPicksエンジニアの北内です。今回は、先日公開した協調フィルタリングのための行列分解ライブラリについて紹介します。 ニュースの推薦アルゴリズム 行列分解による協調フィルタリング 行列分解アルゴリズムeALSの実装 ニュースの推薦アルゴリズム 私が…

フロントの動作確認用の環境をGithub Actionsで自動構築してみた

AlphaDrive、NewsPicks兼務でエンジニアしているスギウラ (saba-can00)です。 今回、Github Actionsを利用してコードをpush すると動作確認ができるコンテナが自動で立ち上がるように環境整備したので、その内容をまとめます。 背景 Webのリアーキテクチャプ…

Amazon VPC内の独自サービスをPrivateLinkでプライベート接続する

こんにちは、NewsPicksエンジニアの美濃部です。 この記事ではAWSのPrivateLinkについての概要について説明していきます。PrivateLinkの知識が全くない方が理解をして頂く為の最初の入り口としてお役に立てればと思います。 PrivateLinkとは VPCエンドポイン…

NewsPicksにおけるレコメンドエンジニアのお仕事について

NewsPicksでCTOをしている高山です。最近の仕事のうちの大きな部分は、レコメンドエンジンを開発するチームのプロダクトマネージャー的な役割です。 今回はレコメンドエンジニアに興味のあるエンジニア向けにNewsPicksにおけるレコメンドエンジニアのお仕事…

NewsPicksの姉妹メディアを立ち上げ。そのプロダクト開発の裏側。

こんにちは、NewsPicksエンジニアの大森です。 今回はNewsPicksの姉妹メディア『JobPicks』を昨年立ち上げた際の裏側をエンジニア視点で振り返りたいと思います。NewsPicksのプロダクト開発の雰囲気や新規サービスでやって良かったことや次回への反省点など…

システムの複雑さはどこから来るのか – Out of the tar pitを読む

Uzabase Saas Product Divisionフェローの矢野です。 この記事は、Rich Hickey(プログラミング言語Clojure作者)のプレゼンテーションSimple Made Easyへと繋がっていく、Ben MoseleyとPeter Marksによる「Out of the tar pit」というシステム設計について…

新卒エンジニアが 『リーダブルコード』 を読んで感じたこと

初めまして。2020年4月NewsPicksに新卒エンジニアとして入社した崔(チェ)です。 実は私は、大学では語学を専攻し大学院から情報系に進学したもので、入社当時コーディング歴2年という浅い経験しかありませんでした。 そんな中、むしろ変な癖のついてない今…

NewsPicks AndroidアプリにPicture in Picture機能を実装した話

こんにちは。 NewsPicksエンジニアのmarshallStonesです。 NewsPicksではiOS/Androidアプリケーションを開発するチームに所属しています。 レビューやお問い合わせなどからユーザーの皆様から導入を希望されておりましたPicture in Pictureを Androidアプリ…

Spring におけるエンドポイントの列挙と IntelliJ IDEA の呼び出し階層による影響範囲調査

こんにちは、 NewsPicks でソフトウェアエンジニアをしているガニエです。 2019年に NewsPicks に新卒入社してから現在に至るまで、基本的には toC サービスである NewsPicks の上に顧客組織内に閉じたコミュニティを作って NewsPicks をコミュニケーション…

Amazon SQSのロングポーリング設定でコストを99%削減した話

こんにちは。 NewsPicksエンジニアの美濃部です。 NewsPicksではAWSをインフラ基盤として利用しているのですが、この記事では実際に行ったSQSのコスト削減の話をしたいと思います。 結論から話すとタイトルにもありますが「SQSでメッセージを受信する時には…

Elasticsearchの中国語Analyzer

こんにちは!SaaS Product Teamの成です。 出身は中国・上海です。学生のときからは国語が苦手でテストもよく落ちましたが、一応中国語は分かります。 最近Product開発で中国語文章の全文検索について調べたことがありましたので、ここでElasticsearchの中国…

億件オーダーのデータ移行ツールの検証の際に、確率計算とサンプリングを用いて効率的にテストをした話

こんにちは。 NewsPicksエンジニアの鶴房です。 2020年1月に入社して、既に1年が経ちました! 今回は入社して最初に任せていただいた案件で、億件オーダーのデータ移行ツールの検証の際に、サンプリングを用いて効率的にテストをした話をさせてもらいます。 …

Grafana の Backend plugin を利用して BigQuery と連携した監視をする

はじめに こんにちは、UZABASE SREの鈴木(@sshota0809)です。 今回は、Grafana の Backend plugin という仕組みを利用して、データソースを BigQuery とした監視設定を行う方法を紹介します。 はじめに TL;DR はじめに 現在のログ収集構成 やりたかったこと …

Spring Data R2DBCでリアクティブにDBアクセスを行なう

はじめに こんにちは、SaaS Product Teamのヒロオカです。 SPEEDAではSpring Webfluxの採用が行われおり、一部リアクティブなシステムが動いています。 今回は、R2DBCという、リアクティブな非同期でRDBにするための仕様とSpring(Reactor Project) による実…

Smalltalk かつ TDD で『オブジェクト指向設計実践ガイド』の「第5章 ダックタイピングでコストを削減する」をハンズオンしたら 9章も確認せざる得なかった

今日は。 SPEEDA を開発している濱口です。 前回の続きです。 以下の通り、今回も設計の段階的な進化に沿った忠実な写経ができたと思います。 ダックを見逃す 問題を悪化させる ダックを見つける 概要としては、依存関係でがんじがらめになった設計を、ダッ…

Smalltalkで『オブジェクト指向設計実践ガイド』の「第4章 柔軟なインタフェースをつくる」を考える

今日は。 SPEEDA を開発している濱口です。 前回の続きですが、この章にはコードが出てこないため、 前回までのようないわゆる写経にはなりませんでした。 そもそも、この章の趣旨のひとつとして、コードを書かずシーケンス図を用いることで かんたんにイン…

Vue.jsでComposition APIを使ってクリーンアーキテクチャ

こんにちは! Saas Product Teamの板倉です。 今回は少し前にバージョン3がリリースされたVue.jsとComposition APIを使ってクリーンアーキテクチャをどう組むのかを書いてみたいと思います。 クリーンアーキテクチャについてはこちらを参照ください 今回のエ…

WebComponentsを使ってみよう(その1)

こんにちは、SaaS Product Teamのとみたです。 今回は、WebComponentsについて調べてみたことを書きます。その1として、 カスタムエレメント に注目して書いています。ほかの項目については、また別の機会に書きます。 また、今回のサンプルコードと、デモで…

EnvoyをFront Proxyとして利用する

こんにちは、ユーザベースのProductチームでSREをやっています阿南です。弊社ではKubebrnetes + Istioを利用してサービスメッシュの構築、マイクロサービスの運用を行っています。Istioでは sidecar proxyとしてEnvoyが利用されていますが、このEnvoyをFront…

Kubernetes で運用する JVM アプリケーションの OutOfMemoryError に備える

こんにちは。SPEEDA 開発チームの old_horizon です。 JVM アプリケーションの運用について回るのが、OutOfMemoryError (以下 OOM) への対処です。 しかし実際に発生した際に、適切なオペレーションを行うのは意外と難しいのではないでしょうか。 特に本番環…

フロントエンドのコンポーネント設計で気をつけているn個のこと

はじめまして、昨年の12月に入社しました根岸です。 UZABASEに入社する前はフロントエンドエンジニアとして働いており、ここ1年間くらいはReactとTypeScriptの開発ばかりやっていました。 今回はフロントエンドのコンポーネントを設計するときに気をつけてい…

方法より原理 〜正規化ルールとリレーショナルモデルについて〜 【実践編】

今日は。 SPEEDA を開発している濱口です。 理屈編では、まずリレーショナルデータベース(以下、RDB)の論理設計やその後において、 正規化ルールを運用する難しさについて述べました。 主な要因として、 例えば正規化を一度完了したテーブルに対し SELECT …

Ktor で小さな API を作る

こんにちは。SPEEDA 開発チームの緒方です。 システムをマイクロサービスで構成するメリットのひとつに、採用する技術にバリエーションを持たせることができるという点が挙げられると思います。 実際、SPEEDA でも様々な言語・フレームワークを利用してマイ…

Sealed Secretsを利用したKubernetes Secretリソースのセキュアな管理

はじめに はじめまして、UZABASE SPEEDA SREの鈴木(@sshota0809)です。 今回は、Sealed Secretsを利用したKubernetesのSecretリソースをセキュアに管理する方法を紹介します。 はじめに TL;DR Sealed Secretsとは 概要 アーキテクチャ インストール〜リソー…

Page top