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

初めまして。9月から10月にかけて、インターンとしてミラティブのバックエンド基盤に関わっていた、logicaと申します。 今回は、期間中に扱っていたある1つのタスクにフォーカスしながら、インターンを振り返りたいと思います。 割り当てられたタスク 背景 すぐに終わる想定だった 検証用環境で問題発生！ 管理画面へのログインができない タスクの続行 原因究明 403エラー CSRFトークン セッションの非永続性 対処 そもそもCSRFトークンは永続化するべきか セッション用Clientのみ、一定確率で値を返さなくする対応を止める 今回のタスクを振り返って 終わりに 割り当てられたタスク 比較的簡単な1つ目のタスクを終え会社の雰囲気にも慣れてきた頃、出された次のタスクは「開発環境のみ一定確率でmemcachedの値を返さないようにする」というものでした。 背景 Mirrativのバックエンドは設計

こんにちは、バックエンドエンジニアの藤井脩紀です。 今回の記事では日付計算に潜む罠についてお話しさせていただきます。 なお今回はGoでの事例をご紹介しますが、原理的には他の言語やライブラリでも同様の事象が発生する可能性があります点にご注意ください。 time.Time.AddDateの注意点 突然ですがここでクイズです。 来月が何月か知りたいので以下のようなコードを書きました。 このコードを実行したのは10月だとします。 結果は何になるでしょう？ // AddDateの引数は順に年、月、日でそれらの値を加算したtime.Timeを返してくれます fmt.Printf("%d月\n", time.Now().AddDate(0, 1, 0).Month()) 「え、11月でしょ？」と思う方もいらっしゃるかもしれませんが正確には異なります。 焦らさずに書きますが答えは「11月か12月のどちらか

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

こんにちは、ミラティブのインフラを担当している清水です。 ミラティブではクラウドに Google Cloud を利用しているのですが、稀にインスタンスの性能劣化が発生し動かしているアプリケーションの応答時間が長くなることがあります。 非同期な処理の場合は一時的にタスクキューの時間あたりの処理数が減るものの、遅延を許容できる機能であれば時間経過で回復するのでシステムを継続稼働できます。 一方で、web サーバのように同期処理の場合はリクエストを時間内に返すことができずに timeout したりだとか、worker が埋まって新たにリクエストが返せなくなったりと、正常にリクエストを返すことができずにユーザのクライアントにエラーが返ってしまします。 そこで、今回はクラウドが不調になったときに web サーバへ流れるリクエストの流量を動的に制御し、一時的にリクエスト数を減らしてユーザのクライアント

こんにちは。Androidエンジニアの北川と久賀です。去年に続き、今年も参加させていただきました！今年は2人とも3日間フルで参加し、本記事ではそこで経験したこと、学んだことを紹介いたします。 DroidKaigi2023について 2023.droidkaigi.jp 去年の記事はこちら tech.mirrativ.stream 気になったセッション 北川編 最も印象的だったセッションは、「Kotlinハイパフォーマンスプログラミング」でした。普段の開発ではあまり意識しない、プログラムの記述方法によって生じるパフォーマンス差異について考える良い機会になりました。出力用インスタンスの使い回しによる効率化をはじめ、Kotlinで頻繁に使用するmapやfilterのようなコレクション操作に隠れた計算コスト、そしてクイックソートがバブルソートよりも低速になりうることなど、JavaにDecompile

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

こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 ミラティブのライブゲームはUnityで開発し、MirrativアプリのWebGLで動いています。 ライブゲームを支える仕組みと実際のライブゲーム開発で使用した技術については過去の記事で紹介しています。 tech.mirrativ.stream tech.mirrativ.stream UnityはWebGL向けにもビルドでき、モバイルのWebGLであってもUnity製プロダクトが動くようになっています。一方で、Unityは正式にはモバイルWebGL対応をサポートしておらず、ネイティブのモバイル開発と比べると開発の難易度は高いです。その難易度の高さは具体的にどこにあったのか、実際にモバイルWebGL向けのゲームを開発した経験を元に知見を共有します。 パフォーマンス編 モバイルWebGLの開発は常にパフォーマンスの意

皆さんこんにちは。Unityエンジニアのおはぎです。 ミラティブでは先日「あてっこ！ぷにまるず」（以下ぷにまるず）というライブゲームをリリースしました。 使っている技術については以下の記事に概要が書かれています。 tech.mirrativ.stream 本稿ではその中からVisualScriptingについて詳細を記述していきます。 VisualScripting VisualScriptingはUnity公式が提供しているノードベースのノーコードツールです。 Unity2018からBoltとしてAssetStoreで有料販売されていましたが、 Unity社が買い取りUnity2021からはVisualScriptingとして統合されています。 unity.com ぷにまるずで使われているVisualScripting ぷにまるずのインゲームでは以下のものがVisualScripting

バックエンドエンジニアの makino です。本日は、先日リリースしたライブゲーム「あてっこ！ぷにまるず」のバックエンド技術について紹介します。 ライブゲーム「あてっこ！ぷにまるず」について ライブゲームとは、Mirrativアプリ上で遊べるゲームであり、配信中のゲームに視聴者が介入できることが特徴です。 「あてっこ！ぷにまるず」では、配信中に視聴者を招待して一緒にGvGバトルを楽しむことができます。 開発スタッフがプレイした動画をご紹介📺✨ バウンド数に注目👀⁉ こんなに連鎖できたら気持ちよさそう…🐰💕 動画を参考にレッツ❗チャレンジ💁 SNSスタッフは2回バウンドできました🙌 まだまだ道のりは険しい…🏔 pic.twitter.com/YdZMRKxbgv— 【公式】あてっこ！ぷにまるず (@punimals_jp) 2023年7月18日 Mirrativのライブゲームは

Unityエンジニアのいも(@adarapata)です。 みなさんはUnityでWebGLプラットフォーム開発していますか？ ミラティブでは先日「あてっこ！ぷにまるず」というライブゲームをリリースしました。 これはモバイルブラウザで動くWebGLです。 PCブラウザ想定のWebGLは多くありますが、モバイルブラウザを想定したゲームはあまり多くはありません。 いざ開発しようとしてもそもそも動くのか？このライブラリは対応しているのか？要求水準は満たせるのか？といったさまざまな課題が待ち受けているでしょう。 本エントリーでは、あてっこ！ぷにまるず(以下ぷにまるず)を実際にリリースするにあたって利用したライブラリの簡単な紹介や、ちょっと気をつけるポイントなどを紹介していきます。 個別の技術スタックに関する話は別途エントリを書いていくので、ここでは全体のサマリーと簡単な選定理由などに留めておきます。

こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。Unityチームの一員として、私たちが週に1時間を費やして行っている輪読会について紹介したいと思います。輪読会では、チーム内で読む本を都度決め、それを読み進めていきます。これまでにはパフォーマンスチューニングの本やUniRx/UniTaskの本を読みました。また、後半にはUniRx/UniTaskの本で学んだことを元にクイズを作成しましたので是非挑戦してみてください。 具体的な流れ チーム内で読む本を決め、全員が本（現物 or 電子書籍）を用意します。輪読会では、前回の続きから読み始め、15分程度経ったら区切って次の人に交代します。ある程度のまとまりを読んだら、それぞれの意見や重要そうな点、気付きなどを議論します。1回の勉強会は1時間で、できるだけメンバー全員に参加してもらっています。 ポイント・メリット 輪読会に

こんにちは ハタ です。 このたび Go Conference 2023 Online にて Go/Cgoで映像・音声のリアルタイム処理をやるまでの道のり というタイトルで発表しました 久しぶりの大きなカンファレンスでの登壇だったのでとても緊張しましたが、10周年を迎えた機会に登壇できて光栄です gocon.jp 今回発表した資料はこちらになります、当日のアーカイブは近々公開されると思いますのでお待ち下さい speakerdeck.com (2023/06/28追記) アーカイブ公開されたようです！ もし当日ご覧になれなかった方はこちらからご視聴ください! zenn.dev さて、今回登壇するにあたり資料を用意していたのですが、発表時間の関係で削除してしまった内容がいくつかあるため、ここで紹介させてください go <-> cgo のオーバーヘッドを何とかしたい トランポリンコードの世界 c

こんにちは。ミラティブUnityエンジニアの菅谷です。今回はUnityのサービスであるUnity AnalyticsとUnity Cloud Diagnosticsについて紹介します。2つのサービスはゲーム開発者がゲームのパフォーマンスを追跡し、ユーザーエクスペリエンスを改善するための強力なツールです。ミラティブではUnity Cloud Diagnosticsはこれまでも使っていましたが、最近のプロダクトではUnity Analyticsも活用し始めています。 Unity Analytics Unity Analyticsは、ゲーム内のイベントやKPI（Key Performance Indicator）を取得するツールです。日々のイベントやKPIを可視化し、ゲームのパフォーマンスを詳細に追跡することが可能になります。さらに、使い方によってはエラー数の検知やエラー発生時のトレースなどにも

こんにちはミラティブ2年目突入の福山です。 今回は、ユーザーが追加でインストール可能な拡張版の読み上げ音声がiOS 16で多くのメモリを消費するということがわかったので、ライブ配信用のアプリ拡張内で対策を行いました。 メモリ使用量50MB制限 MirrativのiOSアプリは、AVSpeechSynthesizerを使用してライブ配信時のコメントを読み上げる機能を提供しています。この機能は配信用のアプリ拡張であるBroadcast Upload Extension内で動作し、そのメモリ制限は50MBとなっています。もしもこの制限を少しでも超えると、アプリはクラッシュし、ライブ配信は終了してしまいます。したがって、メモリ使用量が増加する可能性のある要素に対しては無視するわけにはいきません。 画像1. Broadcast Upload Extensionのメモリ使用量 拡張版の音声を使用すると

こんにちは、エンジニアのちぎらです。先日 開発組織にはじめてのスクラムを導入する という記事を公開しました。先日の記事にも課題として記述した通り、組織の一つのチームにスクラムを導入した後は、他のチームにどのようにスクラムを展開していくか、全社的な開発体制をどうやって変えていくかということを考えていく必要があります。 ミラティブでは、その後の半年弱の期間で3つの開発チーム全てにスクラムを導入しました。さらに、LeSS Huge を参考にした開発体制を敷くことで、チーム横断の開発施策の把握や、全社的な開発施策の透明化を推進しています。 スクラムを他チームに展開する 先日の記事を書いた時点では、ひとつの開発チームにスクラムを導入したのみでした。いずれかのチームでスクラムの導入経験があれば、他のチームへのスクラムの展開は比較的簡単です。一方でチームへのスクラム導入のタイミングは重要で、メンバーの混

初めまして！クライアントエンジニアのいっちー(@ichi1101)です。 今年の4月からインターンとして入社し、iOSチームの一員としてMirrativの開発業務を行ってきました。 普通に学生エンジニアをしていた自分にとって、ミラティブでの開発は新鮮なことばかり。高水準なチーム開発に慣れていくのに苦労しましたが、学びも多くとても成長できたと実感しています。 本記事では、私が休学を決めてからインターン生活中の現在までのお話を紹介していきたいと思います。 目次 目次 インターンに参加するまで 休学を決めた 覚悟が必要だった ミラティブの存在を知った 偶然の力で面接にこぎつけた いきなりCTOと面接して入社 入社後から今まで こんなにでかいコードは生まれて初めて見た 初給料日までは白米を食べた わかりあう願いに溢れていた CocoaPodsのソースコードを読むことになった 広告SDKの改修で障害

こんにちは、ストリーミングチームの松本です。 今回はミラティブの配信の画質を向上させるために行った対応の概要をご紹介したいと思います。 目次 目次 スマホゲームの配信の画質を改善したい 映像のエンコードの負荷が大きくなってしまう 映像のエンコード時のビットレートを高くする必要がある ミラティブでの配信画質改善への取り組み 映像ビットレートの向上 アップロード速度の調査 アップロード速度のでない配信ユーザーへの救済措置 映像ビットレートの動的な調整 配信サーバーの台数・コスト見積もり・増設 配信サーバー増設に関連する対応 サービスイン・サービスアウトの自動化 段階的なリリース まとめ We are hiring! スマホゲームの配信の画質を改善したい 配信の画質を改善したい場合には、画質が悪いとはどういうことかについて考える必要があります。 多くの場合画質が悪い一番の大きな理由は「配信される

こんにちは、ミラティブUnityエンジニアの菅谷です。 先日、ミラティブには新たなUnityエンジニアが加わったためUnityチームでオフィスに集まり、わかりあい会をしてみました。 ミラティブはリモートで業務を行っており、来年もリモート体制を続けることを宣言しています。 note.com 一方、リモートでの業務を続けていると同じ場所に集まり、直接顔を合わせることも重要だと考えるようになりました。 また、ミラティブには「わかりあう願いをつなごう」というミッションや、「わかりあおうとし続ける」という行動指針があり、わかりあうことを日頃から大事にしています。 Unityチームでもチームメンバーのわかりあい促進のため、新メンバーのジョインのタイミングで全員出社して2021年の振り返りや今後について話し合いました。 YWTでの振り返り はじめに、YWT（やったこと、わかったこと、次にやること）のフレ

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