NewsPicks のプロダクト開発組織のビジョンをつくったら、すごいパワーが生まれた話です。なぜチームビジョンを作ったのか・どう作ったのか・どんな効果があったのかを解説します。

AlphaDrive、NewsPicks兼務でエンジニアしているスギウラ (saba-can00)です。 今回、Github Actionsを利用してコードをpush すると動作確認ができるコンテナが自動で立ち上がるように環境整備したので、その内容をまとめます。 背景 Webのリアーキテクチャプロジェクトにおいてlocalで実装した画面をmainブランチにマージする前にBFFやバックエンドと連携した状態で確認したいというニーズがありました。 さらにGithubにプッシュすると環境がさくっと立ち上がるとDX的にすごく嬉しいということでGithub Actionsをトリガーとした環境の自動構築をチ…

こんにちは。NewsPicksエンジニアの takaaki.saito です。 所属しているGrowthチームでは、サービスのGrowth施策を技術面から支えるお仕事をしています。 今回はiOSアプリにオファーコード機能を実装したときのことを振り返り、実装を進める上で工夫したことやハマりどころ等をご紹介します。 実装した当時は、公式ドキュメント以外の情報が少なく、本筋とは別のところでつまづくことがあり苦労しました。本実装を通じて得た知見が、少しでもお役に立てば幸いです！ そもそもオファーコード機能とは オファーコードを使用した購読処理の全体フロー アプリ内引換えパターン アプリ非経由パターン …

こんにちは。ユーザベース Product Team の old_horizon です。 早速ですが明日 8/5 (木) 19:30 から、Qiita さんと合同で Qiita x Uzabase Tech Meetup #3 を開催します！ぜひ皆様ご参加ください。 今回は登壇するチームメンバーと日々取り組んでいる E2E テストにおける改善についてご紹介します。 開発チームにおける E2E のこれまで ファイルダウンロードを行う E2E テストの課題 Selenium Grid でファイルダウンロードを行う E2E を実行する Selenium Grid の拡張方法 実装方針 エンドポイントの…

AlphaDrive、NewsPicks兼務でエンジニアしている大場です。 フロントをメインで開発していますが、AWS CDKやServerless Frameworkを使って環境、リソース、CI/CD構築もしています。 また、最近ではGraphQLの導入のためAppSyncの検証と導入の推進もしています。 今回は、5月19日に行われた Qiita×Uzabase Tech Meetup #2 で話してきたことを紹介させていただこうと思います。 このMeetupでは、「デザイナー×フロントエンジニアで追求する最高の開発者体験」 というタイトルで話をしてきました。 なぜこの話をしたのか デザイン…

こんにちは、NewsPicksエンジニアの美濃部です。 この記事ではAWSのPrivateLinkについての概要について説明していきます。PrivateLinkの知識が全くない方が理解をして頂く為の最初の入り口としてお役に立てればと思います。 PrivateLinkとは VPCエンドポイントサービスについて VPCエンドポイントについて PrivateLinkのまとめ VPC内のサービスをPrivateLinkでプライベート接続する手順 VPCピアリングとの比較 最後に PrivateLinkとは 公式ドキュメントによるとPrivateLinkとは「VPCとサービスの間にプライベート接続を提供…

こんにちは、JobPicks チームにてフロントエンドを担当しております、イイダです。 今回の記事では、Web Client の開発をしていく中で、私達が日頃どういった視点で "HTML" と向き合っているかという話をさせていただきます。 私達は、「表示データをできるだけ正しく HTML の element tag で表現する」ため、日々模索しています。 「表現方法」なので「これが絶対に正しい」なんて言えない部分もありますが、「みんなとHTML talk したい！」と思い、筆を執りました。 温かい目で読んでいただけるとありがたいです。 この記事を読む前に HTML と向き合うってどういうこと？…

NewsPicksでCTOをしている高山です。最近の仕事のうちの大きな部分は、レコメンドエンジンを開発するチームのプロダクトマネージャー的な役割です。 今回はレコメンドエンジニアに興味のあるエンジニア向けにNewsPicksにおけるレコメンドエンジニアのお仕事を紹介してみます。 NewsPicksにおけるレコメンドのこれまで 2019年以前 2020年以降 NewsPicksのレコメンドエンジニアのお仕事 最近の改善例 オフライン評価 オンライン評価 レコメンドエンジニアリングの楽しさ これからの展望 NewsPicksにおけるレコメンドのこれまで 2019年以前 Google Chrome拡…

こんにちは、NewsPicksエンジニアの大森です。 今回はNewsPicksの姉妹メディア『JobPicks』を昨年立ち上げた際の裏側をエンジニア視点で振り返りたいと思います。NewsPicksのプロダクト開発の雰囲気や新規サービスでやって良かったことや次回への反省点などを共有したいと思います。 サービスについて チーム構成 プロダクト設計フェーズ 実装フェーズ やってよかった点 デプロイやリリースの自動化 Contentfulによる運用コストの低減 TypeScriptの型定義ファイルを自動生成 リリース後 Webメディアはエンジニアと非エンジニアの協力体制が特に大事 協力体制をどのように…

NewsPicks iOSアプリエンジニアの金子です。 NewsPicksアプリはニュース記事やコメントの投稿・閲覧といった基本的な機能に加えて、動画コンテンツや広告の表示、有料会員機能、法人向け機能など、様々な機能を持った規模の大きなアプリです。 このため社内から上がってくる機能開発要求の数も非常に多く、ほぼ毎週、多いときは週に2、3回アップデートをリリースすることもあります。 NewsPicksではデータドリブンで機能開発・改善を行っており、これのベースとなるのがアプリから送信されるログです。信頼できるログがあって初めて、データドリブンな開発が成立します。 また、NewsPicksでは広告…

Uzabase Saas Product Divisionフェローの矢野です。 この記事は、Rich Hickey（プログラミング言語Clojure作者）のプレゼンテーションSimple Made Easyへと繋がっていく、Ben MoseleyとPeter Marksによる「Out of the tar pit」というシステム設計について論じた論文の内容について説明したもので、ユーザベースのSaas Productでのテック発表の一つとしてプレゼンしたものを、ブログとして再度まとめたものです。プレゼン自体は25分くらいでしたので、おそらくこの記事の方がプレゼンよりも詳しいと思います。 ソフト…

こんにちは。 SaaS Product チームの板倉です。 SaaS Productチームでは開発運用しているサービスのマイクロサービス/マイクロフロントエンド化を進めています。 マイクロフロントエンドを実現する技術として採用しているフレームワークはAngular(TS, Dart)、Vue.js、Reactとなっています。 どれも素晴らしいフレームワークだと思いますが、私たちが進めているマイクロフロントエンドのやり方だと他にも良いフレームワークがあるんじゃないかと感じることがありました。 以前から気になっていたSvelteをブログにまとめながら自分でもキャッチアップしてみようと思ったのが今回…

初めまして。2020年4月NewsPicksに新卒エンジニアとして入社した崔（チェ）です。 実は私は、大学では語学を専攻し大学院から情報系に進学したもので、入社当時コーディング歴2年という浅い経験しかありませんでした。 そんな中、むしろ変な癖のついてない今だからこそ基礎的な技術書を読んで学んでいけばいいと 『リーダブルコード』 をオススメいただきました。 今回はその 『リーダブルコード』 を読んで現場でのコーディングについての知見を得た話を書いていきます。 内容整理 理解しやすいコード書こう 1. そもそも読みやすいコードって何？ 2. 命名 3. 美しいコード 4. コメント 5. ロジック…

こんにちは。SaaS Product Divisionのとみたです。 WebComponentsを使ってみよう(その1)の続きです。 今回は、Reactアプリケーションをカスタムエレメントとし、さらに別のフレームワークから使う、といったマイクロフロントエンドをやっていく上で実践的な部分について記載します。 Reactでカスタムエレメントを作る Reactでカスタムエレメントを使う カスタムエレメントのイベントを受け取る まとめ 最後に Reactでカスタムエレメントを作る 前回の記事では、ピュアなJavaScriptで実装する方法を書きましたが、では、Reactなどのフロントエンドフレームワー…

こんにちは。NewsPicksでソフトウェアエンジニアをしている森田です。 今回は業務の中で実際におこなった Node.js の CPU プロファイリングについてご紹介します。 なぜプロファイリングをおこなったのか プロファイリング方法 V8 simple profiler Chrome の inspect おわりに 参考文献 なぜプロファイリングをおこなったのか 現在私が運用・開発しているWebサービスの Webフロントは React で動いています。 あるとき、ありがたいことに多くのアクセスがあった際に Reactを配信するために Node.js (Express) が動いている Webサ…

こんにちは！NewsPicksエンジニアの森川です。今回はNewsPicksのオンコール(=障害対応)体制の変遷と試行錯誤をご紹介したいと思います。 オンコール1.0 ~ 全員野球時代 ~ オンコール2.0 ~ 当番制時代 ~ 1. 専門外のアラートに対応できない 2. 対応するエラーの数が多すぎる 3. 勤務時間の自由度が減る 4. slackに気づけない オンコール3.0 ~ PagerDuty時代 ~ 1. アラートを緊急度で仕分け 2. 当番ローテーションの変更 3. PagerDutyの導入 おわりに オンコール1.0 ~ 全員野球時代 ~ NewsPicksにはエンジニア全員が入る…

こんにちは！SPEEDA開発の岩見です。普段は業務でKotlinやClojureなどのJVM言語によく触れています。 今回TypeScriptを使ってテスト駆動開発（以下TDD）を実践する機会があり、良い勉強になったなと感じたので記事を書くことにしました。この記事では、TypeScriptとJestというテストフレームワークを用いてTDDをやってみる、というところまでを簡単にまとめています。 これからTypeScriptやJestに触れる方、TypeScriptは使ったことがあるが自動テストやTDDにはあまり馴染みがない方などに読んでいただけると嬉しいなと思っています。 Jestの特徴を知る …

こんにちは。 NewsPicksエンジニアのmarshallStonesです。 NewsPicksではiOS/Androidアプリケーションを開発するチームに所属しています。 レビューやお問い合わせなどからユーザーの皆様から導入を希望されておりましたPicture in Pictureを Androidアプリで実装するにあたって、苦労した点、工夫した点などを共有させていただきたいと思います。 Picture in Pictureモード移行時におけるtips Picture in Pictureの表示条件やレイアウト制限に関するTips Picture in Pictureと音声バックグラウンド…

こんにちは、 NewsPicks でソフトウェアエンジニアをしているガニエです。 2019年に NewsPicks に新卒入社してから現在に至るまで、基本的には toC サービスである NewsPicks の上に顧客組織内に閉じたコミュニティを作って NewsPicks をコミュニケーションに役立てることができる toB サービスの NewsPicks Enterprise を作るチームで開発をしています。 今回はそんな NewsPicks Enterprise の開発の過程で必要になった網羅的な影響範囲調査をできるかぎり系統的に行うためにしたことの話です。 背景 エンドポイントの網羅的調査 …

こんにちは。 NewsPicksエンジニアの美濃部です。 NewsPicksではAWSをインフラ基盤として利用しているのですが、この記事では実際に行ったSQSのコスト削減の話をしたいと思います。 結論から話すとタイトルにもありますが「SQSでメッセージを受信する時にはショートポーリングではなくロングポーリングにした方が大体においてコストが下がります」という内容です。 この話の発端はコスト削減の余地がないかを検討していてSQSのコストが高すぎないかと感じたところから調査が始まりました。SQSはAPIリクエスト数に応じた従量課金なのですがAPIリクエスト数を確認するとやはり多すぎると感じました。（…