はてなブックマーク

Repro Tech Meetup #8 – Deep Dive into Browsers こんにちは、Repro Booster開発責任者のEdward Fox（edwardkenfox）です。 3/15（金）に「Repro Tech Meetup #8 – Deep Dive into Browsers」という勉強会を開催しました。私たちがRepro Boosterの開発と運用を行っている中で、ブラウザの仕様や細かい挙動に関する知見が少しづつ溜まっており、テックブログとは違う形で発表できないかと思いこのイベントを企画しました。また幸運なことに、ブラウザの有識者やサービス開発を通した知見をお持ちの方々に声をかけるご縁があり、登壇に快諾いただけたおかげでこの勉強会が実現できました。 この記事では登壇者と発表の概要を簡単に紹介させてもらいます。発表資料はすべて イベントURL から見れるの

はじめに こんにちは、ReproでUI/UXデザイナー組織のマネジメントを担当している多賀です。 今回は私達が取り組んでいたチームビルディング活動のうち、ビジョンの策定とその活用について紹介したいと思います。 ※ここで言うビジョンとは、どんなチームにしたいのか？の共通認識を言語化したものと捉えています。 いかに良いチームをつくるかはどんな組織においても課題だと思いますが、私達の取り組み例が少しでもお役に立てれば幸いです。 当時の状況 ReproのUI/UXデザイナーは、プロダクト企画を行うProduct Planning Teamというチームに所属しています。 ※Product Planning Teamについて詳しくはこちら tech.repro.io チームが発足したのは約1年前で、異なる2つのチームとして活動していたUI/UXデザイナーとPMMを束ねて現在の体制となりました。（少し珍

どうも、Repro Core Unit に所属している村上です。 Repro では現在、20 を超える Kafka Streams アプリケーションが稼働しています。 その中の半分くらいが Repro システムの共通基盤を構成する Kafka Streams アプリケーションであり、それらの運用は Repro Core が持つ責務の 1 つとなっています。 この共通基盤となる Kafka Streams アプリケーション群は、Gradle のマルチプロジェクト構成になっていてコードベースはモノレポで管理されています。 本稿では、この構成におけるデプロイ性の課題とそれに対するアプローチの話をします。 ディレクトリ構造 共通基盤のコードは以下のようなディレクトリ構成になっています。 . ├── Base ├── Deployments A │ └── Kafka Streams Applica

こんにちは、Sys-Infra Unit の小山です。今回は、AWS Aurora MySQL のメンテナンス準備・実施・振り返りまでを複数チーム横断で行った話を紹介します。 背景と課題 Repro では、AWS Aurora MySQL を利用してサービスを提供しています。Aurora MySQL は、MySQL 互換のリレーショナルデータベースサービスで、Aurora MySQL にも独自のバージョン番号が設定されています。バージョンにはサポート期間が設定されているため、利用しているバージョンのサポート期間が終了する前にはアップデートしておきたいものになります。 今回、Repro で利用している Aurora MySQL のバージョンがサポート終了日に近づいてきたため、バージョンアップデートをする必要がありました。Aurora MySQL のバージョンを上げるには、Aurora MyS

はじめまして、ReproでUI/UXデザイナーを務めている河西と申します。Reproのデザイナーはプロダクト企画を行っているProduct Planning Teamに属し、プロダクトの少し先の未来を描き、中期製品戦略の策定とその浸透および状況にあわせた戦略の改定、顧客からの一次情報を収集、戦略の実行のため体験設計、UI設計まで一貫して行っています。 Product Planning Teamがなにをやっているかなど詳しくはこちらの記事をご覧ください！ tech.repro.io 今回は解約したお客さまにインタビューを行いプロダクトの企画に活かすまでをお話したいと思います。ユーザーインタビューを行っている方、プロダクトの企画を行う方になにか参考にしていただければ幸いです。 ユーザーインタビュー、難しいですよね？ ユーザーインタビュー、だれになにを聞いたらいいのか難しいですし。現場では緊張す

はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（edwardkenfox）です。 WebサイトやWebアプリケーションの表示速度を考える上では、キャッシュの活用はとても大事なテーマです。一口にキャッシュといっても、Webの文脈だけで見ても様々なレイヤーや用途のキャッシュが存在します。今回は昔ながらのキャッシュ、いわゆる HTTP Cache に的を絞り、HTTP Cache のヒット率について考えてみたいと思います。 さまざまなキャッシュレイヤー 前述のように、Webにおけるキャッシュには用途やレイヤーの異なる様々な種類のものが存在します。Webサイト／Webアプリケーションを開発する上で気にかけるべきものは、おおよそ次のようなものが該当するでしょう。 HTTP Cache （ブラウザキャッシュ） Cach

はじめまして。ReproのProduct Planning Team というチームのマネージャーをしている正木と申します。元々はReproのユーザーでしたが、なんやかんやあってReproに入社しCSを経て現在はPMMを担当しています。 今後、Product Planning Teamからはこれまであまり発信してこなかったReproというプロダクトの企画のお話や、デザインの話、作った機能のGo To Marketの話などをしていこうと思っていますので、よろしくお願いします。 今回は初めての投稿ということもあり、そもそもReproのプロダクト企画チームって何をやってるの？という話をしようと思います。 プロダクトの企画に関わる方（主にPdMやPMMなど）の組織作りや、今後関わりたい方の何かの参考になれば幸いです。 Reproのプロダクト企画 Reproではプロダクト企画チームが2022年から開発

Development Division/Repro Team/Feature 1 Unit の Watsonです。Feature 1 Unit は Repro Tool の機能開発と保守を担っています。 弊社でも利用している Oj gem のパフォーマンス改善 PR を送った話と、その PR の内容について共有します。 ことのはじまり 以前、同僚が Ruby on Rails で JSON を返す REST API を作成した際、JSON のエンコード部分のパフォーマンス計測をしていました。JSON のエンコード方法は JSON.generate、ActiveSupport::JSON.encode、Oj gem を利用する方法など色々ありますが、私としては Oj gemの ほうがパフォーマンス的にいいだろうからそちらを利用したほうが良いのではと思っておりました。 計測結果を拝見したら確

Platform Team の Repro Core という Unit に所属している村上と申します。 Repro Core の役割の 1 つとして、共通基盤となる Kafka Streams アプリケーションの運用があります。 この共通基盤は Repro の大量トラフィックを捌いている基盤になるため、日々の運用の中で様々な課題に直面します。 今回はそのような課題の中から、tombstone によって State Store のパフォーマンスが低下し、その解決策として RocksDB のパラメータを調整した話をします。 前半部分では tombstone によって State Store のパフォーマンスが低下した件を説明します。後半は RocksDB の compaction の挙動確認とそのパラメータ調整について説明します。 ちなみに、私が所属している Repro Core については、

Development Division/Platform Team/Sys-Infra Unitの伊豆です。Sys-Infra Unitはインフラエンジニア・SRE 的な役割を担っています。 今回は、ある日突然SSHログインが遅くなったときに調査した内容を共有します。 SSHログインに数分かかる ある日、AWS EC2上で動いている開発環境のSSHゲートウェイにSSHログインすると30秒以上かかると報告がありました。-vvvオプションを指定してSSHログインしてみるとpledge: filesystemというログが出力された後、数十秒から数分程度かかってSSHログインが成功する状況でした。 pledge: filesystemやssh slowなどで検索してみると、主に以下のような対処法が挙げられていましたがどれを試しても状況は改善されませんでした。 systemd-logindを再起動

はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（edwardkenfox）です。 前回の記事「ServiceWorkerの落とし穴8選」では ServiceWorker という技術に的を絞ったテクニカルなトピックを扱いましたが、今回は少し趣を変えて「プロダクトマネジメント」に関する私の考えや想いを書いてみたいと思います。Repro Boosterの開発と運用を通して自分なりに「プロダクト開発」について考えたことや、得られた示唆をまとめています。Repro Boosterの開発チームが、どのような考え方を持ってプロダクトや技術に向き合い、そして製品を改善するべく日々の活動にあたっているかという点について、少しでもその温度感や熱量が伝わるような記事になれば幸いです。 Repro Booster とは 2022年

はじめに こんにちは。Repro で Booster の開発をしている杉浦と申します。 最近は JavaScript の盛り上がりが凄いですね。今ではブラウザ内にとどまらず、サーバサイドでも活用される様になりました。 これには、言語仕様が整理されたり機能が強化されたり、非常に大きな発展があったという点が大きいです。 実は、言語としての JavaScript だけではなく、最近 HTML との境界インタフェースとしての JavaScript の仕様も最近かなり明確化されてきています。 自分も HTML5 の最初のあたりまでは把握していたのですが、Booster の開発に携わる中で久しぶりに確認したところ、随分と仕様が進化し複雑になっていました。 今回はそんな HTML 規格の変化部分の紹介と、過去からの HTML と JavaScript の流れを振り返る簡単なまとめです。 HTML 仕様と

Repro では Aurora MySQL を使用しています。いくつか数千万行を越えるデータを持つ大規模なテーブルもあります。 大規模なテーブルのスキーマを変更するときは pt-online-schema-change1 を使用していますが、今回はその必要性を判断するタイミングを早めた話です。 pt-osc が必要になる理由等は次の記事が詳しいです。 - pt-online-schema-changeの導入時に検討したこと、およびRailsアプリとの併用について - freee Developers Hub 解決したい課題 Repro では Rails アプリケーションが管理画面や API を提供しています。これらについて、目的別に複数の環境を用意しています。 member: 主に管理画面の動作確認目的で開発者が自由に使ってよい環境 いくつかのミドルウェアは dev_staging と共用

こんにちは、Platform Team というチームでマネージャーをしている荒引 (@a_bicky) です。 Platform Team は、データエンジニア・アーキテクト的な役割を担う Repro Core Unit と、インフラエンジニア・SRE 的な役割を担う Sys-Infra Unit から成るチームです。 先月 SRE Lounge #15 で「何でも屋になっている SRE 的なチームから責務を分離するまでの道のり 〜新設チームでオンコール体制を構築するまで〜」と題して次の発表をしたんですが、時間の都合上話せなかった内容があるので、それらについて触れたいと思います。 なお、当日の発表内容は動画でも視聴可能です。 アジェンダ 本エントリーのアジェンダは次のとおりです。 SRE Lounge #15 での発表内容の要約 Repro Core と Sys-Infra の棲み分け R

Reproで開発を担当しているRyoma Shindo です。前回の記事「ServiceWorkerの落とし穴」で紹介のあったRepro Boosterの開発と運用に携わっています。 私達のチームでは少し前からLookerを使ったデータ活用を強化しています。その取り組みを通して定型業務の効率化など基本的なところはもちろん、もともと期待していた以上の効果も得られたため、取り組んだ内容についてLooker自体の話やそこから得られた示唆も踏まえつつご紹介します。 Lookerとは LookerはいわゆるBIツールで、データソースをインプットとしてデータの可視化を行い、意思決定の手助けをしてくれます。類似のサービスとしてはTableauなどがあたります。Looker StudioというBIツールもあって非常に紛らわしいですがこれは別モノです。 特徴としてはLookMLという独自言語を使ったデータモ

はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ

こんにちは、@r_takaishiです。今回は、モノリシックなRailsアプリケーションが提供するAPIについてエンドポイント毎にSLOを設定できるようにしたので紹介します。 解決したい問題 ReproではRailsアプリケーションが様々なAPIを提供しています。このとき、APIのAvailabilityやLatencyについて可視化して障害が起こっていないか、パフォーマンスが低下していないかを調べることがあります。また、APIについてSLOを設定し、サービスの信頼性を保ちつつ開発を行うこともあるでしょう。 Reproでも可視化やSLOの設定は行ってきました。しかし、それらの対象がALBのTargetGroup単位だったり、APIを提供するECS Service単位でした。このような単位だと、API全体についての状況は分かりますが、個々のAPIについての情報は得られません。例えばエンドポイ

こんにちは、@r_takaishi です。最近のおすすめYouTubeチャンネルは Namibia: Live stream in the Namib Desert です。今回は、Terraformのplan結果をmarkdownで整形するツールである reproio/terraform-j2md について紹介します。 どのようなツールなのか まずはterrafororm-j2mdがどのようなツールなのかお見せします。まず、以下のようなTerraformのコードを用意します。 terraform { required_providers { env = { source = "tchupp/env" version = "0.0.2" } } } provider "env" { # Configuration options } resource "env_variable" "test

Reproでチーフアーキテクトとして働いているid:joker1007です。 今回、Kafka Brokerのcompaction動作について調査しチューニングすることでパフォーマンス改善の成果が得られたため、そのノウハウをブログにまとめておきました。 かなりマニアックな内容なので、需要は多くないと思いますが、私が調査した限りでは日本語で同じ様な内容のブログ記事はほとんど存在しなかったため、Kafkaを自前で運用している人にとっては役に立つ内容かもしれません。 compactionとは (参考: https://kafka.apache.org/documentation/#compaction) Kafkaの基本的なデータ削除ポリシーは一定時間が経過したら過去のデータをそのまま削除するdeleteというポリシーを使う。 これは、log.retention.hoursという設定でコントロー

こんにちは、@r_takaishi です。近所にスパイスカレーのお店ができてハッピーです。今回は、Reproのサーバーサイド開発環境におけるM1 Mac対応を改めて行ったので、やったことを紹介します。 なお、これまでの経緯は以下の通りです。 前回 Repro のサーバーサイド開発環境を M1 Mac に対応させるまでの道のり(撤退編) - Repro Tech Blog 前々回 Repro のサーバーサイド開発環境を M1 Mac に対応させるまでの道のり - Repro Tech Blog いつのまにかConfluent PlatformがM1 Mac上のDockerで動くようになっていた Repro のサーバーサイド開発環境を M1 Mac に対応させるまでの道のり(撤退編) - Repro Tech Blog ではConfluent Platformのコンテナイメージがx86_64の

記事執筆中に動かなくなった開発環境 Repro でサーバーサイドの開発をお手伝いしているうなすけと申します。 前回の記事を最後の脚注まで読んでくださった方はご存知でしょうが、記事執筆中にmergeされた変更によって、M1 Mac での開発環境は動かなくなってしまいました。 tech.repro.io この記事では、一体何が原因で動かなくなってしまったのか、回避のために試したことと、結局撤退する判断をした経緯について書きます。 Repro のアーキテクチャについて まず、なぜ動かなくなってしまったのかですが、これには Repro というサービスのアーキテクチャが関係してきます。 Repro では、ユーザーの端末やWebブラウザから送信されてくる大量のデータを取り扱うために、Kafka を使用してデータの処理を行っています。これに関しては、チーフアーキテクトによる以下の記事及びスライドにて K

Apple Silicon の時代が来る Repro でサーバーサイドの開発をお手伝いしているうなすけと申します。 2021年10月19日に行われた Apple の新製品発表において、M1 チップを搭載した MacBook Pro が発表されました。この発表により、Intel チップを搭載した MacBook はラインナップから消え、今後は M1 チップ上で開発する機会が増えることは確実です。 ところで、私達の開発環境は M1 に対応しているのでしょうか？ 社内の開発メンバーの大半は MacBook を使用しているので、もし対応していない場合、なるべく早く対応させないと新しい社内端末を購入できなかったりするので、結構影響が大きいです。 またインターネット上で、M1 Mac を使用している人々からの「全然発熱しない」だとか「ファンが回ることがない」とか「電池の持ちがすごい」とかの良い評判を目

Repro AI Labs で Software Engineer として働いている杉山阿聖です。Repro では機械学習の基盤として GCP を用いています。今回は Google I/O 2021 で発表された Vertex AI のサービスのひとつである、機械学習パイプラインの構築・運用を行える Vertex Pipelines で動かせるサンプルを作成したのでその紹介をします。サンプルは次のリンクからお試しください。 reproio/lab_sample_pipelines この記事ではまず、機械学習パイプラインの主な要件について述べます。次に、機械学習パイプラインの構築で用いられる Kubeflow Pipelines について概要を述べます。最後に、機械学習パイプラインの構築にあたり理解が必要な Kubeflow Pipelines の仕様について、今回作成したパイプラインを例に

こんにちは。業務委託として SRE チームのお手伝いをしている @syucream です。 本記事では Repro にて開発した、 Go 製のカラムナフォーマットへのデータ変換ツール columnify について、開発背景や技術的な取り組みを紹介します。 なぜカラムナフォーマットか？ ことのおこり 事業がスケールすると共に扱うログの量が増えることは、喜ばしい反面さまざまな悩みをもたらします。その中でも顕著なものの一つとしてコストの問題が挙げられます。 膨大なログデータはログに対するストレージ料金を増大させると共に、分析や可視化に際してクエリで求められるコンピュートのコストも無視できなくなっていきます。 近頃 Repro でもコンテナのログの管理においてこの問題が顕著になってきました。Repro のバックエンドシステムは ECS 上のコンテナで実現され、ログの閲覧・管理のため外部のログ収集サ

はじめまして、フリーランスWebエンジニアでReproさんのお手伝いさせていただいているTONYと申します。 ReproではLeSSという大規模スクラムのフレームワークを採用し、開発を行っております。 僕が所属している機能開発チームでも、スプリント内で取得したPBIのゴール条件をきちんと満たすために、日々バーンダウンチャートとにらめっこしながら、きれいに消化すべく試行錯誤しております。 その中で今日は安定してバーンダウンチャートを消化するためにチームに今まで提案した取組みを一部紹介しますので、ご参考になればと思います。 そもそもLeSSとは何か？ 簡単に言ってしまうと、1プロダクトのプロダクトバックログアイテム（以下、PBI）を複数の開発チームが取得し、出来上がり次第、リリースを行なっていく手法です。 LeSSの概要は以下のURLが参考になります。 https://slide.meguro

Repro インフラチーム (SRE + 分析基盤) の伊豆です。今回は、Repro のデータ収集基盤で私たちが遭遇した問題を紹介したいと思います。 具体的には、AWS Network Load Balancer(NLB) + Fluentd の構成でファイルディスクリプタが枯渇する謎の現象に遭遇したので、その問題の調査記録と解決策を共有します。また、この問題を解消するにあたり Fluentd に PR を送ったのでそれの紹介もします。 https://github.com/fluent/fluentd/pull/2352 データ収集基盤の構成 Repro のデータ収集基盤はFlunetd High Availability Configをもとに構成され、大まかに次のようになっています。 SDK からアップロードされたデータは、転送用 Fluentd(log forwarders)を経由し

皆さんこんにちは、@treby006 です。進捗どうですか？私はGW前最後の追い込みでヒーヒーいっているところです。がんばるよ。 Repro初のスポンサーブース出展 さて先般 @cheezenaan こと、ちーなんさんからアナウンスがありましたように ReproはRubyKaigi2019に参加してきました。 さらっと書いていますがこれ結構すごいことで、Reproとしてはなんと初の技術カンファレンスへのブース出展だったんですね。メンバーとしてはid:joker1007、@threetreeslight、@closer009、@edwardkenfox、@treby006、@cheezenaan、@katsyoshi、@taiki__t が参加していました。 各個人のブログはこちら。 ブースはこんな感じ。 スポンサーブースの様子 春のesa自慢で紹介していただいた、esa.io のトリとRe