はてなブックマーク

こんにちは ハタ です。 今回は以前iOSのクライアントサイドで実装していた通知ぼかし機能をサーバサイド(配信サーバ)上に再実装した事を書きたいなと思います 今回はかなり内容を絞りに絞ったのですが、長くなってしまいました、、 目次機能があったのでつけてみました、読み飛ばして読みやすくなった(?)かもしれません 目次 目次 通知ぼかし機能とは サーバサイド通知ぼかし プロトタイプの実装 苦労の始まり その1 画像処理速度 苦労の始まり その2 データ量 さらなる計算量の削減を求めて さらなる最適化へ Halide の世界へ 簡単な halide の紹介 苦労の始まり その3 いざ リリース リリースその後 We are hiring! 通知ぼかし機能とは 通知ぼかし機能は、ミラティブ上での配信中に写り込んでしまったiOSの通知ダイアログをダイアログの中身を見えないようにぼかし処理をしてあげる

Mirrativバックエンドのエンジニア @stakme です！ みなさんMacでDockerしてますか？今回は私から、Mac+Docker開発についての文章をお届けします。Docker Desktop for Macの有料化など、最近話題の多いところですよね。 ただし法的問題を含みますので、記事の正確性に配慮していますが、内容は保証しません。法的問題は弁護士に相談しましょう。 tl;dr まずは現状認識 必要なのはdockerd 困りがちなポイント Lima Linux バインドマウント ポートフォワード 結局どうするか あと6週間 We are hiring! tl;dr 大前提として「GUIを使わければMac版Docker Desktopは無料」ではない Docker Desktop for Macは便利だが、マウント起因でパフォーマンスに影響を受けるケースも存在する 「買わないなら

こんにちわ。shogo4405です。本エントリーは普段UI開発を行なっているクライアントエンジニア向けに、Mirrativのイヤホン配信を支えている音のプログラムの基礎を紹介していきたいといます。 音のプログラミングの概要を掴んでもらい、より詳しい部分については文献を調べるための参考になれば幸いです。 はじめに イヤホン配信の概要になります。Mirrativの配信はゲーム音源をマイクからの集音に頼っています。ユーザーが配信を行う際に、イヤホンを装着するとゲーム音源が配信にのらず視聴側としては物足りない配信になります。 これを解決する手段として、OS内部で再生中のゲーム音源をキャプチャーした音源。マイクから集音した音源。これらの音源を合成する方法があります。この手段をとることにより、イヤホンしながらでもゲーム音声を視聴者に届けることができるようになります。サービス上では、イヤホン配信と呼称し

こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ

インフラストリーミングチームの近藤 (@udzura) です。今回は、ミラティブで内製しているオブジェクトストレージサーバ「b3」の紹介記事を書きたいと思います。 今回の記事は、6月にGopher Talkというイベントで発表した「Go製ミドルウェアを実践投入するにあたりやったこと」をベースに、内容を詳細にしたり直近の開発状況に合わせて更新したものです。一部内容はこの発表と重複していますがご了承ください。 オブジェクトストレージサーバを内製した背景 1. 大量オブジェクトの操作や増え続ける転送量に対応したい 2. 一定期間しかファイルの保持をしない 3. オンメモリ/SSD/HDDを組み合わせたチューニングがしたい オブジェクトストレージb3の特徴 S3 互換の基本的なAPIを実装 LSM-Tree index＋WALなDB/マージ操作に対応 I/O 帯域を制限可能 非同期レプリケーション

こんにちは。ストリーミングチームの松本です。 Mirrativのストリーミングチームは、低遅延配信や、通知ぼかしというような機能を追加するため、配信のorigin serverの前段にtranscoder serverというものを導入してきました。 tech.mirrativ.stream tech.mirrativ.stream transcoder serverはGoによる内製のミドルウェアであり、主に映像の変換を行う目的で作られました。現在は配信プロトコルの変換（既存プロトコル -> 低遅延プロトコル）などを行っています。また、実際にはサーバー上のDockerコンテナ内で動作しています。 transcoder serverを展開していくにあたり、メモリ使用量が常に増え続ける問題が起きていたため、その際に直面したGoの実メモリ使用量に関する話を書きたいと思います。 メモリ使用量の増加問

インフラ・ストリーミングチームの id:udzura （@udzura）です。今回は、Goミドルウェアのメモリリークを見つけて解決する際に、どのようなプロセスを踏んでいったかを解説します。 Go製のミドルウェアの概要 ミラティブでは、Webアプリケーションのみならず、ミドルウェアに相当する部分についても必要なものは内製しています。その中の一つに、社内で「Radisha」と呼んでいる各種集計とキャッシュなどを行うためのミドルウェアがあります。Radishaは以下のような特徴を備えています。 GET、SET、SETEXなど基本的なRedis互換のコマンドを実装している。そのため、既存のRedisクライアントライブラリから操作が可能である。 ランキング集計、一定時間内のアクセス集計などが行えるよう、Redis にない独自のコマンドを実装している。 高い可用性を志向しており、オンメモリのデータは

こんにちは、エンジニアのちぎら @_naru_jpn です。ミラティブの iOS アプリでは 配信コメントバー 機能の実現のためにピクチャ・イン・ピクチャを活用しています。ピクチャ・イン・ピクチャは iOS16.1 以上の端末において、特定のシチュエーション *1 で異常に CPU リソースを消費することが知られています。コードの調整によってこの現象が抑制できることが分かり、ミラティブの iOS アプリではバージョン 10.0.1 で応急処置を行ったのですが、今回はその詳細とトレードオフについて解説します。 加えて、この問題は既に Apple へバグレポートとして報告済みですが、Apple への事象の説明のために問題を簡単に再現できるプロジェクトを作成したので、そちらも併せてご紹介しています。 ピクチャ・イン・ピクチャが CPU を異常に消費する問題 iOS 16.1 以上の端末でピクチャ

こんにちは、エンジニアのタテノです。 ミラティブアプリを起動するとおすすめ配信の一覧が表示されます。 今回はこのおすすめ配信の仕組みについて解説しつつ、おすすめ配信の運用・改善を行う上でのポイントなどをまとめてみました。 システム面では機械学習などのトピックも含みますが、今回はサーバサイドの設計周り、特にパフォーマンスを考慮している部分にフォーカスしています。 おすすめ配信一覧 おすすめ配信の役割 ユーザはすでにお気に入りの配信があれば、フォロータブから配信に入室しますが、ミラティブをはじめて初期の段階やお気に入りの配信がない場合は、そのほとんどはおすすめ配信から配信に入室します。おすすめ配信はユーザが配信に興味を持つきっかけとしてその役割を果たしており、とても重要です。 ミラティブでは常時、多数の配信が行われており一度に全ての配信を表示することはできません。たくさんある配信の中からそのユ

こんにちは、エンジニアの千吉良（ちぎら）@_naru_jpn です。ここ最近 QA に関して考える機会があり、Systematic Software Testing という本を読んでいたところ、色々と刺激を受けるところがありました。計画書の作成やリスク管理などテストの実施以外の領域についても多く書かれていましたが、まずはミラティブの現状に基づいた改善を行うべきだろうと考えました。今回は特にメトリクスの取得などに関して、GAS（Google Apps Script）を活用してミラティブの業務に応用してみたことについてまとめてみました。 以下では細かいことにも触れているので、3行まとめをおいておきます。 手動テストの進捗を見えるようにしたよ GAS（Google Apps Script）で実装したよ ついでに関連業務を自動化したよ ミラティブにおける QA と解決できそうと感じた課題 ミラティ

こんにちは、バックエンドエンジニアの夏（なつ）です。今回はMirrativのバックエンドで使っているライブラリをご紹介します。 これらの記事のバックエンド版になります！（2年越し） tech.mirrativ.stream tech.mirrativ.stream ライブラリ一覧 https://pkg.go.dev/ オリジナルの The Go gopher（Gopherくん） は Renée French によるデザイン cloud.google.com/go/bigquery 分析チームが生成したユーザの特徴量などがBigQuery上に存在しているため、それらをバッチ処理でMySQL上に取得する際に利用しています。 tech.mirrativ.stream cloud.google.com/go/compute/metadata 開発環境などでしか動いてほしくない処理が本番環境上で動

こんにちは ハタ です。 Mirrativのインフラ内で実際に開発・運用している内製のRedisサーバについてお話したいなと思っています。 前回の記事 は、今回紹介する内製Redisサーバで起きたメモリリーク対策に関するお話しとなっておりますので、もし未読であればあわせて読んでいただければと思います。 今回はなぜ Redis サーバを内製することにしたのかの経緯や実装についての簡単な紹介が出来たらなと思っています Redis 導入の経緯 課題感: 揮発しないでほしい 課題感: 生存時間が短いデータを保持したい 課題感: 日次データをなんとかしたい 候補 Redis Cluster のヨシアシ: slot 管理 Dynomite のヨシアシ: sharding/replication radisha = Raft + Redis + HA Raft クラスタ コマンドとデータストア レプリケ

ミラティブのAndroidエンジニアの chocomelon です。 MirrativのAndroidアプリでは、Androidアプリケーションの内部品質向上のために開発で以下を取り入れています。 データフローの単方向化（Flux導入） Viewからのロジック切り離し（Flux、Jetpack Compose導入など） 責務分割、依存方向の強制（Flux、マルチモジュール導入など） 今回の記事では特にマルチモジュールについてお話します。 MirrativのAndroidアプリは、配信/視聴機能、アバター機能、リッチなアニメーションなど複雑な要素を一つの画面で表現することが多々あります。 これらを考えなしに実装すると、可読性の悪化を招いたり、不具合が発生しやすく調査しづらいコードにしてしまいがちです。 複雑なアニメーションやアバター機能などを持つ配信画面 ミラティブでは多くのメンバーがネイテ

こんにちは ハタです。 最近 SO_REUSEADDR / SO_REUSEPORT を使ったストリーミング配信サーバの無停止アップデート(Hot Deploy)を実装してみたので紹介したいなと思います ことの経緯 HTTPサーバによる Hot Deploy の仕組み ストリーミング配信サーバへの応用 SO_REUSEADDR/SO_REUSEPORT を使った実装例 Hot Deploy の組み込み Hot Deploy 実装時に気をつけたこと その後 We are hiring! ことの経緯 ミラティブでは以前から何度か紹介したとおり自前の配信基盤設備を持っています。 配信基盤のミドルウェアも内製であり、機能追加やライブラリの更新などがあるたびにミドルウェアのバージョンアップ作業(メンテナンス)も自社で実施しています ストリーミング配信サーバといっても、何か特別な事はなく一般的なHTT

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ

こんにちは、バックエンドエンジニアのmakinoです。先日、LINE LIVEさんとの共催イベントにて「Mirrativを支えるバックエンド開発 ~MySQLとの向き合い方~」というテーマでLTをしました。 connpass.com speakerdeck.com 今回はLTの内容から一部抜粋して、Mirrativのバックエンド開発において遭遇したMySQLに関する問題と、その対策について紹介します。 問題 その1 データ量/QPSの増加に伴って、非効率なクエリが顕在化した サービス初期の段階ではデータ量が少なかったり、ユーザーのアクティビティが少ないために問題がなかったクエリも、サービスの成長に伴ってデータ量・QPSが増加したことによって、MySQLに負荷をかけてしまうことがありました。 具体例を以下にいくつか示します。 数千件レコードのfilesort 適切なindexが利用できればM

こんにちは、サーバエンジニアの夏（なつ）です。今回はミラティブのサーバチームで行っている障害振り返りを紹介したいと思います。 ミラティブのサーバチームではサービスに障害が発生した場合、その後、担当者を決めて障害の振り返りのたたき台を作成し、チーム内で振り返りを行って、今後の改善に活かす努力を続けています。 今回はその振り返りの目的やフォーマット・注意点についてお話したいと思います。 目的 システムを運用していれば障害はつきものです。ましてや改善を続けるならば、その代償として不確実性が障害として表面化し、放置していけば徐々にユーザの信頼を失っていくことになります。かといって、障害の防止にコストをかければかけるほど、費用対効果は見合わなくなり、障害を絶対に起こしてはならないという心理的圧力はメンバーのメンタルを擦り減らしていきます。そのため障害の振り返りでは障害の詳細や原因をチームメンバーと共

こんにちは、クライアントエンジニアのちぎら(@_naru_jpn)です。先日ミラティブの iOS アプリバージョン 9.38.0 にて「配信コメントバー」機能をリリースしました。この機能は iOS15 から利用可能になった PiP に関する技術を活用したもので、ミラティブ以外のアプリを開いている時に、端末の画面上にミラティブ固有のコンテンツを表示できる革新的な機能です。今回は、この「配信コメントバー」機能について背景や概要をご紹介したいと思います。 「配信コメントバー」機能とは 従来、iOS ではアプリがバックグラウンド状態に移行した後は、画面上に独自のコンテンツを表示するといったことは基本的にできませんでした。例えば、ミラティブ iOS アプリでは配信中のコメントを届けるために、プッシュ通知を利用しています。 iOS 15 からピクチャ・イン・ピクチャ（以下: PiP）の柔軟性が増したこ

こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 今回はミラティブのライブゲーム開発で行ったアウトゲームの設計について紹介します。 以前アウトゲーム設計に関してXでポストしたらレスポンスをいただけたのでできるだけ丁寧に解説してみました。こんな話も聞きたいよというのがあったら是非教えてください。 よくありそうなソシャゲアウトゲームの設計について今更記事化してるんだけどどれだけ需要あるんだろう。MVPの概念とかクリーンアーキテクチャライクな知識って業界的な浸透率どんなもんなんだ。— 鉄 -TETSU- (@tetsujp84) 2023年8月28日 アウトゲームについて ゲーム開発者にとっては馴染み深いと思いますが、ゲームにはインゲームと呼ばれる部分とアウトゲームと呼ばれる部分に別れます。インゲームはゲーム体験のコアでキャラクターを操作したり、アクションがあったりと

こんにちは ハタ です。 今回は Mirrativ の本番サーバの一部に試験導入している MultiPath TCP (MPTCP) について紹介させていただきたいなと思います。 MultiPath TCP といえば、iOSの Siri で利用していることなどで一時有名になりました 今回紹介するMPTCPも同じ技術を使っており、通信の安定化に向けて取り組んでいる事項の紹介になります MPTCP の概要と各OSの実装について MPTCPのイメージ MultiPath TCP (以降 MPTCP)は、複数の経路を通じて同じホストに対して通信が行えるTCP拡張です。 従来のTCP通信では、単一の通信パスしか使えなかったものが、複数の通信パスを利用できるようになります。 例えばスマートフォンでは 4G 回線と WiFi ネットワークが用意されているため、それぞれから同一のコネクション張り、どちらか

こんにちは、エンジニアのちぎら @_naru_jpn です。ミラティブでは開発プロセス改善の一環として、スクラムフレームワークを試験的にひとつの開発チームに導入し、開発を行っています。該当する開発チームでは1週間のタイムボックスでスプリントをきり、導入開始から12スプリント(3ヶ月弱)をこなしてきました。チームのスクラム開発にも慣れが見えはじめ、当初想定していた開発プロセスの改善も実感が湧くようになってきました。今回は、スクラム導入の背景や内容、今後の展望などをご紹介します。 スクラム導入前の開発体制とモチベーション スクラム導入前の開発イメージ スクラム導入前の開発の流れは上図のようです。仕様書と工数の概算をもとにしてガントチャートにスケジュールがひかれ、フェーズごとに開発を進めていきます。もちろんすべて天下り式に開発を進めている訳ではなく、デザインがある程度できた時点でエンジニアも含め

こんにちは、分析チームの坂本です。 テックブログ3回めの登場です。 ミラティブの分析チームは、もちろんBigQueryや機械学習を用いた定量的なデータ分析も行いますが、ユーザーを理解するための定性分析も行う「分析チーム」であることを掲げています。 ※最近では、データアナリストとUXリサーチャーの境界が溶けつつあるという議論があると思いますが、弊社もその流れを採用しています。 突然ですが、ユーザビリティテスト = お金と時間がかかる という認識の方もいらっしゃると思います。 ミラティブでは、ユーザビリティテストをやろう！と言ってから3日間&謝礼実費のみでユーザビリティテストが完了しました(被験者3名)。 どんなことをやったのかという内容を書きながら、ハマりどころををシェアしようと思います。 ユーザビリティテストの一般論 まずは、ユーザビリティテストってなんやねんという話を書いて行きます。とい

こんにちは、クライアントエンジニアのちぎら(@_naru_jpn)です。Swift 5.5 で async/await が導入されて久しいですが、皆さま導入はされているでしょうか。プロダクトに導入して活用できればいいですが、すぐには導入できないプロダクトも多くあると思いますし、個人でキャッチアップするにも、温度感の違いや人によってキャッチアップできる分量にも差が出てくると思います。今回は社内勉強会の一環として、 Apple が公開している Swift の並行処理についてのセッションを見る会をした話を書こうと思います。 セッションを見る会をはじめた理由 Swift の並行処理についての機能は、キャッチアップしている人とそうでない人が分かれると思っています。Swift の並行処理については多くの技術記事が書かれていますが、業務にすぐには直結しない内容について技術を吸収する為にはそれなりの気持ち

こんにちは、Unityエンジニアの菅谷です。今回はUnity as a Libraryの活用事例と開発テクニックとして、以前のLTで紹介した内容をまとめました。Mirrativでの活用事例を通してUnity as a Libraryの強みや課題を共有し、他のプロダクトでの導入の参考になれば幸いです。2021/6〜2021/7にMirrativ×Unity as a Libraryのテーマで行った3本のLTをまとめた内容となっています。 mirrativ.connpass.com meetup.unity3d.jp mirrativ.connpass.com MirrativにおけるUnity Mirrativにはエモモという配信をサポートする3Dアバターが存在します。ユーザーは衣装やアクセサリーなどのアイテムを組み合わせてエモモを着飾ることができます。MirrativはiOSはSwift、

こんにちは、バックエンド基盤チームマネージャーの夏（なつ）と申します。ミラティブの基盤チームはユーザが直接触れる機能よりかは、開発者や会社全体の生産性を向上させるためにエンジニア主導で課題を発見・解決している部署です。 今回は基盤チームが主体となって運用しているマスターデータ管理システムについて紹介したいと思います。ゲーム運営などではエクセルやスプレッドシートで管理されることがよくありますが、学習コストや安全性の観点で入力者を増やしづらい場合があります。このような問題に対応するため、ミラティブでは一部のマスターデータをGitHub APIを利用した専用の管理画面を実装することで入力作業をスケールできるようにしました。 （なお、本記事は社内向けドキュメントを兼ねています） マスターデータとは マスターデータとはユーザによって生成されるデータではなく、主に運営が用意するデータになります。詳細と

Mirrativ Androidエンジニアのmorizoooです。今回はAndroidアプリをFluxにリアーキテクチャした話をします。 背景 Mirrativは2015年春頃に開発が始まり、もうすぐリリースから6周年を迎えようとしています。以前はアーキテクチャについてのルールが決まっておらず、個々人が思うがままコードを書いており、開発しているメンバーでさえ処理の流れが追えなくなっているような状況でした。そこで、まずは既存のコードの改善を行いました。詳しくは以下の記事をご覧ください。 tech.mirrativ.stream 既存コードを改善した後に、開発の指針としてFluxアーキテクチャを選定しました。 Fluxを選定した理由 状態がどこで更新されているのか分からなくなるという一番の課題が、Flux の導入によって解消できそうだった iOSはFluxで実装していくという話が出ており知見を