はてなブックマーク

はじめに こんにちは！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の開発環境について概要を説明します。 インフラ基盤は本番環境と同様にAWSを利用しており開発チームは現在10以上のチームが存在し、それぞれのチーム専用に用意された開発環境を利用しています。 2年程前までは開発環境はIaC化されておらず手動で構築していたのでチーム毎に環境を構築するのは手間と時間がかかりなかなか増やせない状態でした。その課題を解決する為にcdkでI

こんにちは。NewsPicksのWeb Reader Experience Unitで学生インターンをしている西（@yukinissie）です。 昨年の 9 月までSREチームに所属しており、その頃にNewsPicksの全ての常駐バッチサーバーをAWS CDKを用いてAWS FargateとAWS Fragate Spotを併用するようにさせましましたのでコストの変化や工夫した点についてご紹介します。 AWS Fargate Spotとは？ AWS Fargate Spot（以降、Fargate Spot）とは、AWS re:Invent 2019にてAWSが発表したAWS Fargate（以降、Fargate）の新しい機能です。この機能を有効にすると通常のFargateよりもコスト（料金）が最大70%割引で利用することができます。 AWS公式ブログ「AWS Fargate Spotの発表

こんにちは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

はじめに こんにちは！Product Teamのデータサイエンティストの堀内です。 私が所属しているProduct Teamは、リーダーがいないフラットな組織として、ほかのエンジニア組織にはない独自のカルチャーを様々持っていると日々感じています。 今回は、そんな「リーダーがいない組織で1on1がどのように行われているか」をご紹介します。 1on1自体・ユーザベースのProduct Teamのカルチャー・フラットな組織のマネジメント、などにご興味がある方には是非読んで頂きたいと思います。 概要 企業の組織の多くは階層構造を持ち、そういった組織の1on1は、一般に、上司と部下で行われます。 しかし、弊社のProduct Teamには、そういった階層構造がなく、リーダーがいません*1。 そのため、1on1はメンバー同士で行われ、一方がコーチ、一方はクライアントとなり、コーチングという形で行われて

こんにちは！ NewsPicksの法人向けサービス開発チームの森です。 私は元営業職でエンジニアとして働くのはNewsPicksが初めてで、入社して3ヶ月の頃に入社エントリーを書かせていただきました。 tech.uzabase.com 前回はなぜエンジニアに？なぜNewsPicksに？といったお話をさせていただきましたが 今回は入社から半年経って、NewsPicksのエンジニア組織が大事にしている「開発者体験向上」に繋がる取り組みに挑戦してみました！といった内容について書いていこうと思います。 お時間がない方はぜひ！採用ページだけでも見てくださると泣いて喜びます！（ここが一番大事） tech.uzabase.com NewsPicksは開発者体験向上を大事にしています 今回やったこと：フロントエンドをslackからリリースできるようにする 前提 変更前 変更後 実装方法 Slackからリリ

自己紹介 初めまして、NewsPicksエンジニアの米澤翔です。 2022年の6月に入社し、そこから初めてKotlinを触り始めました。 私は昔軽くJavaを触ったことがあったり、C#をメインにコードを書いていたりしたのですが... Kotlinはまさに「ちょうど良いパートナー」でした。 kotlinlang.org 今回はそんなKotlinの魅力について、特にWebエンジニアの視点から語らせてください。 Kotlinの魅力 「使い手の心理的安全性が高く保たれ、書いたり読んだりする負担が小さい」 「それでいてJavaの便利なライブラリやフレームワークを利用できる」 これにつきると思っています。 null安全がデフォルトとなっている 一番でかいメリット。 例えばJavaで「安全な」コードを書こうとしたら、こんなコードになるのではないでしょうか? public void save(FreeTr

こんにちは。AlphaDrive アプリケーションエンジニアの芥川です。 弊社では選考フローにモブプロ形式のライブコーディング面接を取り入れています（記事内では省略して「コーディング面接」と呼びます）。 私も昨年コーディング面接を受けて AlphaDrive に入社し、この 1 年くらいは面接官を担当するようになりました。 この記事では面接官としてコーディング面接をする上で意識していることを紹介したいと思います。主に「進め方」「フィードバック」「評価観点」について話します。 これから弊社の採用を受けようとしている方はもちろん、採用に携わっていてコーディング面接を導入・検討している方にも参考になればと思います。 本記事は、 NewsPicks Advent Calendar 2022 の 12/24 公開分の記事になります。 qiita.com 前日の記事からの連作です 本記事は前日の CT

はじめに 本記事は、 NewsPicks Advent Calendar 2022 の 12/23 公開分の記事になります。 qiita.com AlphaDrive CTO／NewsPicks 技術フェローのアカザワです。 本記事ではAlphaDriveが2年前にエンジニア組織を立ち上げて以来継続しているモブプロ型のライブコーディング面接が、立ち上げから一貫して内定承諾率を85%以上の水準で継続できていることに大きく寄与している要因の１つだと、入社を決めてくれる仲間が増えるに連れて強く感じるようになったため、この方式の面接を導入した背景や効果について書きたいと思います。 ライブコーディング面接は、昨年度からはNewsPicksのエンジニアチームの採用プロセスにも取り入れられ、ワークショップ面接という呼称で社内で運用しております。そちらに関しては、4日目のNewsPicks CTO／CPO

はじめに 本記事は、NewsPicks Advent Calendar 2022 の 12/22 公開分の記事になります。 こんにちは、Androidチームのアーキテクトのko2icです。 久しぶりの投稿でございます。 なぜ久々なのかというと、ここ数ヶ月Androidの起動時間を爆速にすべく、奮闘していたからです。 そしてなぜ、高速化が必要なのか。これは、ユーザ目線で考えると当たり前でやるべきなのですが、それ以外にもKPIにとてもいい影響が出るからです。 ちなみに以前の会社では起動高速化したことで、広告売上が（インターステシャル広告をなくしても）2倍になりました。全員にとっていいことしかありません。 ちなみにIOS版の途中経過として、以前、iOSエンジニアの森崎が投稿しているので、以下もご覧ください。 tech.uzabase.com 結果から発表 どーん Android起動時間の推移 ど

本記事は、NewsPicks Advent Calendar 2022 の 12/19 公開分の記事になります。 はじめまして、11月からAlphaDriveにJoinし、Webアプリケーションエンジニアをしている畠山(keyamin)です。 今回は、Goで関数のオプション引数を実現するための方法を紹介しようと思います！ お題 コーヒーショップを題材に、コーヒーインスタンスを作成するプログラムを考えます。コーヒーファクトリー関数の呼び出し側は、サイズ、ミルクの有無、角砂糖の数を指定することができます。 ※こちらの題材はO'Reilly Japanより出版されている実用 Go言語を参考にしています。めちゃくちゃいい本なので是非読んでみてください...！ type Portion int const ( Regular Portion = iota Small Large ) type Cof

本記事は、NewsPicks Advent Calendar 2022 の 12/14 公開分の記事になります。 こんにちは。NewsPicks SREチームの 海老澤 です。 今回は iOSのE2Eテストを実機で動かす上でのインフラ周りの設定方法を紹介しようと思います。 課題 NewsPicksではサーバーリリース時に Firebase Test Labで iOSのE2Eテストを実行していました。 Firebase Test Labは時間帯(夕方くらいになると混んでくる傾向)によってはテスト開始が遅い場合があり、リリースサイクルを高速化するために実機iPhoneでの安定したE2Eテストの実行に取り組みました。 構成図 構成図は以下です。 まずリリース時にAWS Step Functionsから SQSにメッセージを送信し、S3のテスト結果をポーリングします。 受け取り側のMacはSQSメ

こんにちは、NewsPicksエンジニアの桐畑です。 NewsPicks Advent Calendar 2022 の 12 日目です。 全25回の Advent Calenderも、明日から折り返しとなります。 qiita.com 本日は、NewsPicksの動画配信の仕組みを書かせていただければと思います。 NewPicksでは 2017年から動画コンテンツを配信しています。多い時だと毎日、少ない時でも週3本は配信をしています。 5年間、配信の安定化および人手を最小化するためにシステムの改善を続けてきました。当初は動画配信中にエンジニアが待機していましたが、2020年ごろより、エンジニア待機無しで配信をしています。2022年 現在、主にAWSのMediaServices を使った構成になっています。今回は配信形式ごと(ユースケースごと)にどのような仕組みになっているかご紹介させていただ

はじめに こんにちは、NewsPicks エンジニアの佐藤と申します。 NewsPicks Advent Calendar 2022 の11日目を書かせていただきます。 qiita.com 本記事では、2022年秋頃から導入しているプッシュ通知事前テストについてご紹介できればと思います。 NewsPicks のプッシュ通知について NewsPicks では、毎日決まったタイミングに配信する定時プッシュと緊急度の高い情報を含むコンテンツを不定期に配信する速報プッシュの2種類があります。記事の選定は編成チームが行っており、特に定時プッシュに関しては、毎回直前まで、どの記事を送るか吟味しています。 ユーザーのみなさまにいち早く重要な経済情報をお届けするためにも、プッシュ通知は重要な役割を担っています。 プッシュ通知事前テストの導入 今回、プッシュ通知の開封数を改善できないか検討することになりまし

前書き こんにちは。NewsPicksの一人目QAエンジニアの西薗（@yurizono）です。 NewsPicks Advent Calendar 2022 の9日目をお送りします。 qiita.com この記事に書かれていること 2022年に私が取り組んだ、リグレッションテストの改善活動についてお話します。家計簿の話はちょびっとだけします。 テストケースに問題あり 私の入社以前から、NewsPicksでは毎月、アプリのリグレッションテストを外部ベンダーさんにお願いしていました。私がこの運用を引き継いだのですが、数回の実施を通じて、ここで使われているテストケースにいくつか課題が見えてきました。 可読性 まず、読みづらい。私も2年弱ほどテストベンダーに所属していたので分かりますが、月に一度の案件だと、毎回同じテスターをアサインすることは稀です。テストリーダーですら毎回違うかもしれません。そう

初めまして、アプリケーションエンジニアの杉浦(saba_can00)です! 本記事は、NewsPicks Advent Calendar 2022 の12/7 のブログとして記載させていただいています。 この記事でお伝えしたいこと Dockerを利用するようにしたら開発セットアップの時間が大幅に短縮できた! Local環境用にコメントアウトしていた箇所を環境変数で切り替えられるようにしたら、開発者体験が良くなった！ 開発セットアップの時間を短縮することで、新しいメンバーの受け入れがスムーズになったよ！ ざっくり状況の説明 プロダクトを内製化がスタート 外部の開発会社さんに委託していたシステムを今年(2022年)から内製のチームで引き取って、開発することになりました。 ちょこちょこ設計やいわゆるプロジェクトマネジメント、PRレビューなどでプロダクトのコードについては触れていたもののきちんと向

こんにちは。NewsPicks CPO／CTO の 文字 です。NewsPicks Advent Calendar 2022 の 4 日目を担当します。昨日は 池川さん による Kotlin 知見共有会 ー 社内勉強会を継続させるための工夫 でした。 qiita.com ちょっとキャッチーなタイトルを付けてしまいましたが、今日は NewsPicks のエンジニア採用に関する取り組みと、そこから得た学びについて共有できればと思います。 はじめに おかげさまで NewsPicks は、このご時世には珍しいほど エンジニア採用が絶好調 です。毎月のように素晴らしい仲間たちが、次々と入社してくれています。数値で見ると 2021 年 → 2022 年にかけて、我々のエンジニア採用状況は次のように好転しました（もちろん、採用基準は落としていません。むしろ選考通過率は下がっています）。 しかし昨年までは

こんにちは、NewsPicks サーバーサイドエンジニアの池川です。 NewsPicks Advent Calendar 2022 の 3 日目です。 qiita.com 昨日は、 Virtual Muto さんによる 2 日目の記事で、感想などを書きたいところですが、実は本記事を 11 月末に書いているので、当日のお楽しみにしたいと思います。 本題ですが、NewsPicks では、もともと Java で書かれていたサーバにおいて、Kotlin を全面的に採用しており、現在では Kotlin を変更しない PR はないのではというほど、 Kotlin 開発が浸透しております。 この状態を達成するための設けられた施策の 1 つで、現在も脈々と続いている、「Kotlin 知見共有会」について共有したいと思い、ブログにすることにしました。 背景 どのような会か 運営のやること 登壇者のやること

このブログは NewsPicks Advent Calendar 2022 2日目の記事です。 qiita.com こんにちは。むとうです。 プログラミングって難しいですよね。昔スゴーク頑張って何十行も書いたコードをベテランの人に一行に直されて、衝撃が走ったことを覚えています。手練との歴然とした力の差を見せつけられる、みなさんもそういう経験があるのではないでしょうか？ 私はかれこれ20年近くプログラミングを教えてきており、人のコードの書きっぷりを見て「これを身につければもっといい感じにできるのに」と感じることも増えてきました。そういう技は決して難しいものばかりではありません。誰でもすぐに身につけられて一生もののスキルとして使える技の一つに「コレクション処理」があります。実用的なプログラムの多くの部分はコレクション操作で成り立っています。コレクション操作を適切につかえば難しい仕掛けや独自実装

このブログは NewsPicks Advent Calendar 2022 1日目の記事です。 qiita.com NewsPicksのSREチームでリーダーをしている安藤です。 NewsPicksに入社して1年が経ちましたが、最近は円安により親の顔よりもAWS Cost Explorerを見る毎日です。 ということで、コストの話をしていきたいと思います。 NewsPicksでのコンテナ移行について NewsPicksでは、Amazon ECSによる全面コンテナ化を進めています。 本丸の共通バックエンドのコンテナ移行は完了し、AWS Dev Day 2022 Japanでも事例として発表させていただきました。 tech.uzabase.com ここで、「当初はマネージドサービスを優先してFargateを利用するつもりだったが、コストメリットの観点からECS on EC2を選択した」という話

こんにちはNewsPicks SREチームのエドウィンです。 NewsPicksが提案した「「最高の開発者体験」への挑戦 〜Amazon ECSによる全面コンテナ化の軌跡〜」というテーマが「AWS Dev Days Japan 2022」の発表テーマとして選ばれました。 「AWS Dev Day」はAWSさんが開催する「開発を牽引するエンジニアのためのテクニカルカンファレンス」です。 今回の「AWS Dev Day Japan 2022」は2022年11月8日から2022年11月12日の間に開催されて、NewsPicks SREチームリーダー安藤裕紀さんとDay 1の15時のセッションで発表しました。 NewsPicksで行ったメインアプリケーションサーバーのコンテナへの移行とコンテナ化をする事はNewsPicksの開発者体験にどう影響したかについて話してきました。 AWS Dev Day

こんにちは。NewsPicks SREチームの 海老澤 です。 今回はGithub Actionsで実行していたテストを高速化したので紹介したいと思います。 課題 NewsPicksでは Junitのテスト等をGithub Actions から実行しているのですが、2013年のサービス開始当初から存在する、一番コードベースが大きいリポジトリのビルド・テストの実行時間に 20~30分ほどかかっていました。 テスト自体はバグを産まないためにも必要なものですが、時間がかかるため開発効率が下がってしまいます。そのためテスト高速化の取り組みを行いました。 取り組み テストの高速化をする上でやったことは大きく下の二つです テストの並列化 GitHub Actionsから AWS CodeBuild への移行 テストの並列化 maven-surefire-pluginを使うと、pom.xml上での設定を

こんにちは。Product Team の竹原です。 先日、社内用の小さな Web アプリを追加開発する機会がありまして、その際に CI/CD パイプラインの作成も行いました。 CI/CD パイプライン構築のために Argo Workflows を使ってみたところ非常に感触がよかったので、感想などを記載しておこうと思います。 ※ 今回は概要の紹介程度となります。実際に作成したワークフローはまた次回ご紹介します。 Argo Workflows とは Argo Workflows はタイトルで書いたとおりワークフローエンジンです。 エンジニアの身近なところで言えば近いのは Jenkins とか GitHub Actions とかでしょうか。 公式サイト では以下のように紹介されています。 Argo Workflows is an open source container-native work

NewsPicks でサーバーサイドエンジニアを務めている池川です。 サービス運営をされている会社さんであれば、どの会社さんでも何らかの障害を起こし、その対策のための MTG を実施されていると思います。 が、サービスを長く運営していると、過去に発生してしまった事故と似た事故を発生させてしまうということが往々にしてあります。 NewsPicks でも、そのような事故が発生し、どうしたものかということが MTG での話題にのぼりました。 そこで、 NewsPicks ではそのような事故を風化させないための取り組みとして、事故が発生しそうな PR に対して、 GitHub Actions を用いて注意をうながすメンションを投げるワークフローを設定しました。 簡単な取り組みとなっているので、ご参考になれば幸いです。 背景 使用したツール 処理フロー GitHub Actions での実装 実際の

NewsPicks Web Experience Unit でフロントエンドエンジニアをしているじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えつつ、見ためも刷新するプロジェクト（以下リニューアルプロジェクト）を進めています。 今回は、弊プロダクトで Visual Regression Testing をはじめて、3ヶ月ほど運用してきたので、今回はその導入や運用にあたっての話をしたいと思います。 導入に至った背景と目的 使用したツールと構成 ツール 構成 導入の流れ ライブラリのインストール storycap の設定 reg-suit の準備 Amazon S3 の準備 Github Actions の設定 運用して出てきた課題と解消 日本語で表示されるはずの部分が□で表示されてしまっている 画像など外部リソースから

こんにちは！Product Teamのtakenokoです。 2022年4月に Ubuntu 22.04 LTS がリリース*1されました。皆さんはもう試されましたか？ Ubuntuのアップグレードって、基本的にはdo-release-upgradeコマンドを実行するだけなのですが、久しぶりのアップグレードだったりaptパッケージを長いこと更新していないと、何かと時間が掛かるものです。 そこで今回は細かい補足も交えながら、Ubuntu 20.04 LTS を Ubuntu 22.04 LTS にアップグレードする手順をまとめました。「もう準備OKだよ！」という方は、事前準備を読み飛ばしてもらっても大丈夫かと思います。 目次 目次 Ubuntu LTS について 事前準備 マシンのUbuntuバージョンを確認する アップグレード可能なバージョンを確認する aptパッケージの更新 apt up