はてなブックマーク

初めまして、 @takano-hi です。 2023年2月に AlphaDrive にジョインして、主にフロントエンド領域を中心に設計・実装などの業務を担当しています。 最近、Next.js のプロジェクトを新たに立ち上げる機会があり、せっかくなので App Router を採用しました。 そのプロジェクトの認証機能の実装に当たり、今まで他プロジェクトでも利用していた Keycloak と @auth0/nextjs-auth0 の組み合わせを試したところいくつかの困難に遭遇したので、その解決方法についてまとめようと思います。 環境 next v13.4.9 @auth0/nextjs-auth0 v3.1.0 keycloak v20.0.1 ライブラリの選定背景 私が所属しているチームでは、認証基盤（IDプロバイダー）に Keycloak を利用しています。 Keycloak は Op

みなさんこんにちは。ソーシャル経済メディア「NewsPicks」を運営する、ユーザベースの技術広報チームです。 NewsPicks のプロダクト開発チームでは、技術やデザイン領域をテーマとした社内勉強会が多数開催されており、日々学びの場としてインプットに励んでいます。 本日は、定期的に開催している社内勉強会を一挙ご紹介します！ iOS勉強会 Android知見共有会 ゆる frontend 共有会 ABテスト輪読会 AI論文読み会 Kotlin 知見共有会 インフラ・運用勉強会 ポートフォリオ発表会 輪読会 ChatGPT 勉強会 iOS勉強会 【開催日程】 隔週金曜 15:00~ 【会の目的】 ・知見の共有 ・アウトプットする場を設けてインプットを強化 ・他のメンバーから刺激をもらう 【これまでの内容】 ・Sendableと@SendableとTCA ・Easingを意識してみよう ・え

こんにちは。NewsPicks CPO／CTO の文字です。先週、仕事が少し落ち着いたタイミングで久しぶりに DX Criteria を測定したので、今回はその結果を大公開しようと思います。 はじめに：NewsPicks は開発者体験に注力しています NewsPicks は、まもなくサービス開始から 10 周年を迎える息の長いサービスです。およそ 10 年前に Uzabase の新規事業として立ち上がり、以降は比較的少人数のエンジニア体制で長らく開発が続けられていました。4 年ほど前からビジネスの多角化に伴いエンジニアを大幅に増員していますが、高成長の裏でシステム面では様々な箇所が老朽化しており、エンジニアを増員してもスケールできない状態に陥っていました（きっと多くの方が想像できる状況だと思います）。 そこで 2020 年に私と高山（現 VP of Data Engineering）が執行

導入 企画の背景 ハンズオン 環境構築 攻撃開始 XSS の説明 順位発表 ハンズオンをやってみてどうだったか？ 良かったこと 伸びしろ 学び 今後に向けて We are hiring 導入 こんにちは、BtoB SaaS Product Team (以下 Product Team) の利根です。SPEEDA、FORCAS、INITIAL といったプロダクトの開発を行っています。 Product Team 内には、全社セキュリティを担うチームとは別に、プロダクトセキュリティの底上げを担うセキュリティチームが存在しています。 このセキュリティチームの課題はいくつもあるのですが、この数年でエンジニアの人数が大きく増えたため、メンバーのセキュリティ知識の底上げが重要な課題の一つでした。 今回は、その課題への対応として、Product Team 内の全メンバーを対象に、やられアプリ（Bad Tod

UB ResearchとNewsPicksの両方を担当している高山です。 去る7月10日に株式会社プレイドさんとNewsPicksの合同で、次のようなイベントを開催しました。 uzabase-tech.connpass.com 実はこのテーマは、僕から是非ともとお願いしてやってもらったのでした。 というのも、NewsPicks社内で蓄積されているA/Bテストの施策レポートが2年少々で120個（！）も溜まっていたので、是非ともその良い話を自分が聞きたいし、世の中にもシェアしたいと思ったのです。 NewsPicksでABテストの学びのストックが凄すぎるので絶対に世の中にアウトプットしたい！と思って是非にとお願いしてイベントで話してもらうことになりました！！もしかしたら地味なテーマなんですが、それは承知の上で、他社さんでABテストとかをやってる方々には参考にしてもらえるはず。 https://t

NewsPicks Androidエンジニアの sefwgweo です。 今回はモバイルチームで取り入れているE2Eテストでのリトライ自動化とリリース完全自動化を作った話を紹介します。 モバイルチームでは品質担保のために毎晩定時にBitriseでE2Eテストを実行していますが、 端末やクラウドのネットワーク状態など、本来グリーンになるはずのテストでもエラーになることで余計な確認が必要でした。 自動リトライとリリース完全自動化を入れる前後では以下な違いがありました。 Before After 毎朝Slackで失敗したテストを目視後、BitriseのWebコンソールでPassするまで手動でRetryを実行し、テスト結果が正しいかわからないため3回以上失敗した場合にBitriseでエラーログをみて対処 テスト結果が正しい。失敗していた場合は、ほぼ確実にデグレが起きてるので、Bitriseで確認す

こんにちは。NewsPicks App Reader Experience Unit でエンジニアしている青木です。 NewsPicks では日々のサービス改善において AB テストを数多く実施しています。 施策毎に AB テストを柔軟に実施できるのは過去紹介した AB テスト基盤があってこそです。 https://tech.uzabase.com/entry/2022/12/25/183334 App Reader Experience Unit（以下 ARX）でも上記の AB テスト基盤を使ってモバイルアプリの改善を行なっています。 今回は ARX で AB テストを行う際に特に大事にしていることについてお話ししていきます。 ABテストの結果よりも大事なたった一つのこと 目的 ~ AB テストの結果が良かったから施策を適用するわけではない ~ 仮説 ~ 事前調査に基づく観点での仮説検証

こんにちは。NewsPicksでエンジニアをやっております崔（チェ）です。現在は Data / Algorithm チームで検索エンジンの開発を担当しております。 弊社は、検索エンジンとしてElasticsearch（以下、ES）をAmazon EC2に乗せて構築しておりましたが、ヤクの毛刈りも含め、約1年かけてマネージドサービスであるAmazon OpenSearch Service（以下、OpenSearch）に移行することができました！今回は、マネージド化のための諸タスクの中から、かなりハマっていたセキュリティの設定部分を中心にお話したいと思います。ご興味ある方は是非読んでいただけると嬉しいです。 はじめに OpenSearch DashboardsにOktaでログインできるようにしたい SAML認証とは きめ細かなアクセスコントロールとは Dashboards接続時にOktaのログ

NewsPicks Mobile App Unitでインターンをしているりゅう(@ryu_hu03)です。 NewsPicksのiOSおよびAndroidアプリは基本的に週一で新しいバージョンがリリースされています。 リリース作業の多くは自動化されており、重要な機能についてはUIテストによって品質が担保されるようになっているのですが、見た目上のデザイン崩れが起きていないかの確認はこれまで手動で行っていました。 デザイン崩れがないかどうかの確認は目視でやるしかなく、確認項目もそれなりに多いので、デザイン崩れの見落としがあったりリリース作業自体の負荷が大きいといった課題がありました。 そこで、デザイン崩れが起きていないかどうかの確認を自動化すべく、Visual Regression Testingを実装しました。 本記事では、その実装や効果についての話をしたいと思います。 使用したツールと流れ

こんにちは、Product Teamのあやぴーです。 今回はここ1年くらい私のいるチームで使っているF#とASP.NET Coreを使ったAPI開発について簡単にまとめていきます。 F#ってなんだ？ なぜ、今F#を採用したのか Minimal APIを使って、APIをつくる アプリケーションの雛形をつくる 任意のHTTPステータスとJSONレスポンスを返却する ルートパラメータやJSONボディの受け取り方 最後にF#を採用してみた雑感 F#ってなんだ？ F#はMicrosoft(MSFT)が開発した、いわゆる関数型言語の特徴(第一級関数,イミュータブルデータなど)を持つ言語です。.NET VM上で動き、OCaml(ML系)に近いシンタックスを持っているというのがユニークなところです。また.NET VM上で動作するため、C#などのライブラリを使うことができるのもメリットです。JVM上で動くS

はじめに 経歴 キャッチアップ方法の結論 やったこと（時系列） 参画前（2ヶ月） Kotlin Android アーキテクチャ 参画後（6ヶ月） やっていたこと NewsPicksだからできたこと 最後に はじめに はじめまして、Androidエンジニアのa7therです。 Androidエンジニアとはいっても、まだまだAndroid開発に従事して8ヶ月の駆け出しのため、 自分なりの技術キャッチアップ方法と参画前後でどのようなことをしてきたかを書きたいと思います。 経歴 前提情報として自分の経歴を軽く.. 業務系Webアプリケーション開発と組込み系Java開発に約6年従事していました。 そのため、エンジニア初心者というわけではなく、また、以下の本に影響を受けています。 リーダブルコード Java言語で学ぶデザインパターン入門 Java言語で学ぶデザインパターン入門 マルチスレッド編 Eff

NewsPicks SREチームのEdwin Wilsonです。 NewsPicksでは開発環境のテストデータのプロビジョニングを行うツールとしてDatarefreshというものがあります。 このツールは本番環境のデータストアから開発環境のデータストアに対してデータを同期するアプリケーションです。 対象のデータストアは以下となります。 Amazon RDS Amazon DynamoDB Amazon S3 Amazon ElastiCache 個人情報はRDSにのみに存在しており、マスク処理を行った後、同期しています。 DynamoDB ,S3, ElastiCacheには個人情報を存在しないため、開発に必要なデータをそのまま同期しています。 Datarefreshの実行は開発者がいつでもChatopsで行えます。 ChatopsでDatarefreshの実行の仕方 Chatopsで呼び

概要 どうやって指標を確認しているの？ NewsPicksのFour Keysはどんな感じ？ 改善前はどんな感じ？ 改善のために何をした？ 終わりに 概要 NewsPicksは「最高の開発体験の追求」をしている会社です。エンジニア向けのサイトの1ページでも謳っており、そこから弊社高山の記事に辿れるので、こちらも読んで頂けると幸いです。 そして、これはサーバーサイドだけの話しではなく、モバイルチームでも同じように開発者体験向上を目指し、Four Keysを追っています。 Four Keys とは、ソフトウェア開発チームのパフォーマンスを計測する4つの指標です。Four Keys 指標を用いることで、ソフトウェアデリバリの「スピード」と「安定性」を測定できます。 いわゆる組織の開発生産性が可視化できるということですね。 私が所属するモバイルチームもさまざまな改善をすることで、Four Keys

皆様こんにちは、NewsPicksエンジニアの米澤です。 先日 2023/03/30は、こちらでアナウンスしていた通り、サービスの停止を伴うシステムメンテナンスを実施させて頂きました。 NewsPicksをご利用頂いている皆様には、ご迷惑おかけいたしました。 今回はこのメンテナンスの中で行われたDBテーブルのmigrationについてお話ししたいと思います。 ことの始まり NewsPicksではバグの検知にBugSnagを利用しています。 ある時、BugSnagにこんなエラーが通知されてきました。 org.springframework.orm.hibernate4.HibernateJdbcException: JDBC exception on Hibernate data access: SQLException for SQL [n/a]; SQL state [HY000]; e

はじめに NewsPicksエンジニアの七五三です。 最近はChatGPTの話題が尽きません。弊社でもChatGPT APIの社内勉強会やブログの執筆が行われ盛り上がりを見せています。 tech.uzabase.com そんな中、ChatGPTを利用したプロダクト改善アイディアの発散や実装事例の作成を目的にNewsPicksプロダクトチームで「ChatGPT開発合宿」が開催されました。 開催から少し日が経ってしまいましたが、本記事で合宿の様子をご紹介します。 スケジュール 3月30日から2日間に渡って開催された開発合宿は以下のスケジュールで進行しました。 1日目 10:00 集合・アイディア出し オフィスに集まり合宿スタートです。 アイスブレイクののち、アイディア出しを行いました。 プロダクトの新機能や社内の業務改善ツールなど、大小様々なアイディアが創出され、開発合宿では2つのアイディアを

こんにちは、NewsPicks サーバーサイドエンジニアの池川です。 こちらのイベントご存知でしょうか？ server-side-kotlin-meetup.connpass.com www.youtube.com 実は先日 4/7 (金) に、東京駅目の前にある、ユーザベースオフィスにて、オフライン会場の提供をさせていただきました。 今回のブログではその裏側について書いていきたいと思います。 きっかけ 開催までの準備 リハーサル・当日の準備 当日 イベント終了後 終わりに (オフライン会場での勉強会に興味がある方々) 宣伝 ー LLM 勉強会 with 朝日新聞さん きっかけ 今年に入って以下のようなツイートをお見かけしました。 久しぶりにオフラインでのMeetupに裏方として参加したけど、オンラインと違って熱気というか人の圧を感じた！笑 オンラインはオンラインで良いところもあるんだけど

あいさつ こんにちは。Product Team の 下川、9sako6、手嶋、藤原です1。 本記事では、我々が開発している Deno 製アプリケーションのパフォーマンス監視を Elastic APM で行った方法を紹介します。 背景 Product Team では、パフォーマンス監視を目的として部分的に Elastic APM の導入を進めています。 本記事で監視対象としたアプリケーションは Deno で書かれており、対応する Agent がありませんでしたが、 必要なものは自分たちで用意すべきと考え、Agent を自作することにしました。 (厳密には、Node.js には対応していましたが、Deno で試したところうまく動きませんでした) Elastic APM と今回実装した Deno 向け Agent の概要 Elastic APM の簡単な説明 Elastic APM とは、Ela

この記事は、NewsPicks Advent Calendar 2022 の 17 日目の記事になります。 qiita.com こんにちは。AlphaDrive で Web アプリケーションエンジニアをしている fmatzy です。普段は主に Go でバックエンドの開発を行なっています。 現在新規開発中のプロダクトにて、パスワードログインの導入に Keycloak を利用しました。社内ではすでに Keycloak の導入事例があり、かなり参考にできる環境が整っていました。一方で Keycloak 自体は近年 WildFly から Quarkus に移行し、公式含め技術情報が outdated なものが多く見受けられました (例えば、公式の docker-compose の example は WildFly 版がアーカイブされた後 Quarkus 版が追加されていない…)。 本記事では、今

こんにちは、NewsPicksの米澤です。 ところで皆様、テストコードって書いてますか...? ネットでテストコードについて検索すると 「テストコードを書きましょう」 「テストコードとはこうあるべし」 「TDD(Test Driven Development)だ」 等々が叫ばれています。 ただ、なんとなく「方法論ありきでとにかくテストを書け」と言われているようで、テストの必要性について納得感に欠けている方もいらっしゃるのではないでしょうか? なぜ テストコードを書くのでしょうか? テストコードを書く理由 諸説ありますが、私が思うテストコードを書く理由は 将来リファクタリングをしやすくする テストコード書く途中で、開発者自身が仕様を理解し、成長できる の2つです。 将来リファクタリングをしやすくする 「昔書かれたこのコードはどういう挙動になるべきなんだ...?さっぱり分からん!」 ある程度コ

NewsPicksモバイルチームの森崎（asa）です。 今回はモバイルチームで取り入れているライブラリの自動更新について紹介します。 スピーディーかつ複雑な開発が求められる現場では、ライブラリにお世話になることも多いと思います。しかし、実装時の楽さとは引き換えにライブラリのバージョンアップデートの追従や、ライブラリ自体がメンテナンス停止で移行を余儀なくされたりと、保守コストが上がってしまうという側面に悩まされる経験がある方も多いと思います。 そんな悩みを解消してくれるのがライブラリの更新の自動化です。今回の方法はモバイルだけでなくバックエンドやフロントエンドでも導入可能になっています。参考になれば嬉しいです。 全体の流れ Renovateがライブラリのリリースを検知してバージョンアップのPRを作成する PRの作成を検知してタスクチケットを作成する PRをレビュー・マージしてチケットを閉じる

NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く

はじめに こんにちは！NewsPicks の Web Reader Experience Unit で Web フロントエンドを中心にエンジニアをしております、イイダユカコ（ @becyn ）です。 このブログは、3月8日に Findy 社主催の アクセシビリティのイベント、「高まるウェブアクセシビリティの需要ーfreee×ニューズピックスー〜フロントエンド最前線〜」に登壇した内容を紹介するものです。 イベントについて 当日はフロントエンドエンジニア、デザイナーの方を中心に256名（キリが良い）の方々に参加応募していただきました！ありがとうございました！ 正直なところ、現状の NewsPicks は「完璧にアクセシブルな状態である」とは言えません。 そんな中登壇機会をいただき、「今 Unit で行えている共有できることの全てのことを正直に話そう」と気合いを入れるところから始まりました。 （

iOSエンジニアの金子です。 NewsPicks iOSアプリでは2021年7月ごろからThe Composable Architecture（TCA）を採用したアーキテクチャへの移行を進めています。 tech.uzabase.com メインのニュースフィード画面もTCA+SwiftUI/UIKitで全面的に書き換え、TCAを使った実装もだいぶこなれてきたなと思っていた矢先、TCAで大きなアップデートがありました。 tech.uzabase.com このReducerProtocolへのマイグレーション作業を1月から開始し、1ヶ月ちょっとかけてようやく全てのReducerをReducerProtocol化することができました。 本記事では、NewsPicksで取り組んだReducerProtocolへのマイグレーション作業についてご紹介します。 どのようにマイグレーションを進めたか 公式ド

NewsPicksのWeb Reader Experience Unitで学生インターンをしています。西(@yukinissie)です。 弊チームの開発基盤では、reg-suitやstorycapを利用したVisual Regression Test（以降 VRT）を導入しています。本ブログではVRTが誤検知した動画やアニメーション周りの問題に対してどのように解決したかをそれぞれご紹介します。 VRTの誤検知とは？ 弊チームではVRTを以下の6ステップで行なっており、これらはGitHub Actions（CI）上で自動化されています。 Storybookでプレビューできるコンポーネント（以降、story）のソースコードを更新する Storybookをビルドする storyをstorycapでスクリーンショットする reg-suitで3.のスクリーンショットからスナップショットを作成する r

こんにちはNewsPicks SREチームの美濃部です。 NewsPicksのSREのミッションの1つに「コストを適正化する」というものがあります。サービスの規模拡大に比例してインフラコストが増えないようにし、売上に対するコストの割合を低く維持していくのがミッションになります。 今回はこのミッションに対するアクションとして開発環境のインフラコストを適正化した話をします。 NewsPicksの開発環境について 開発環境のコストをどうやって適正化したか 稼働時間対応を実現する仕組みについて 実際どれくらい削減できたのか まとめ NewsPicksの開発環境について まず、NewsPicksの開発環境について概要を説明します。 インフラ基盤は本番環境と同様にAWSを利用しており開発チームは現在10以上のチームが存在し、それぞれのチーム専用に用意された開発環境を利用しています。 2年程前までは開発

こんにちは。NewsPicksのWeb Reader Experience Unitで学生インターンをしている西（@yukinissie）です。 昨年の 9 月までSREチームに所属しており、その頃にNewsPicksの全ての常駐バッチサーバーをAWS CDKを用いてAWS FargateとAWS Fragate Spotを併用するようにさせましましたのでコストの変化や工夫した点についてご紹介します。 AWS Fargate Spotとは？ 実際どれくらいのコストを削減できたか 0. ECSコンテナ化 1. 使用量はほぼ横ばい 2. Fargate Spotの適用 3. コストが約47％削減！！！ AWS CDKでAWS Fargate Spot機能を適用する際に工夫したこと 課題 解決策 FargateとFargate Spotの併用 キャパシティープロバイダー戦略を自動で決定するIaC

こんにちはNewsPicks SREチームの飯野です。 今年の1月入社の新入社員です。そろそろお仕事に慣れてきました。今回は研修と研修の合間に地道に行っていたCloudWatchアラームの整理について話していきたいと思います。ちょっと長くなりますがお付き合いください。 よくわからないしアラームを整理しよう まずはスプレッドシートで一覧してみよう 整理の方針を決めよう さまざまな問題をかかえたアラームたち Case#1 AlarmActionが未設定のアラーム（5個） Case#2 ActionのSNSトピックが存在しないアラーム（16個） Actionを差し替えるのはちょっと手間 Case#3 ActionのSNSトピックの通知先が退職した社員のメールアドレス（97個） Case#4 監視先のDynamoDBのテーブルがすでに存在しないアラーム（97個中の85個） Case#5 監視先のE