こんにちは、iOSエンジニアのいっちー(@0IcchI)です。 ミラティブでは、iOS 18のリリースに備えて、アプリ上に新しい不具合が発生していないかの調査とその対応を進めてきました。 その過程でAnimated WebPの再生に起因する致命的な不具合に出会ったので問題とその対応について紹介します。 背景 ミラティブではアプリ内で画像を表示する際にSDWebImageを使用しており、Animated WebPの再生にも用いています。 SDWebImageはAnimated WebPの再生に2種類のコーダーを提供しています。 SDImageAWebPCoder iOS標準のImageIOフレームワークに含まれるコーダー SDImageWebPCoder SDWebImage独自のコーダー SDWebImageWebPCoderのREADMEではそれぞれの違いについて以下のように記述されてい

こんにちは、バックエンドのリードエンジニア兼バックエンド基盤チームのマネージャーの夏（なつ）と申します。バックエンド基盤チームは、バックエンドエンジニアの生産性向上やコスト削減を目的に、エンジニア主導で課題を発見・解決している部署です。 今回は基盤チームが行った、Google CloudのIdentity-Aware Proxy（IAP）を利用したローカル環境での開発体験の向上について紹介したいと思います。この改善により、ローカル環境（Mac）上でも開発環境のデータを参照しながら開発が行えるようになり、開発体験が大幅に向上しました。 背景 基盤チームでは定期的にバックエンドチームのメンバーに対して「開発者体験に関するアンケート」を実施しています。基盤チームにとっての直接のユーザはバックエンドメンバーであるため、生の声を聞くことで、現在解決しようとしている問題や開発リソースの配分、優先順位が

こんにちは フロントエンドエンジニアの どじねこ です。 今回は Storybook 8.3 から追加された Vitest 統合機能を活用して、フロントエンドアプリの自動テストを強化した事例をご紹介します。 Storybook とは storybook.js.org Storybook は OSS として開発される UI コンポーネントワークショップです。 具体的には、フロントエンドアプリケーションの UI コンポーネントを開発する際の作業環境、ドキュメンテーションツール、テスティングフレームワークとして活用できる開発環境が提供されます。 React や Vue、Angular、Svelte、Web Component など幅広い環境に対応しており、うまく活用するとフロントエンドアプリケーションの開発をより柔軟に行えるようになります。 Storybook と Vitest の統合機能とは

こんにちは！iOSエンジニアのmuneです。 今回は、2024年8月22日(木)〜8月24日(土)に開催されました iOSDC Japan 2024 について、セッション内容を振り返る勉強会を社内で開催いたしましたので、その様子をご紹介します！ ミラティブはiOSDC Japan 2024をスポンサーとして協賛しております。 tech.mirrativ.stream 勉強会の前に：会場でのエピソード 今年のiOSDCからはスポンサーブースを楽しく回れるようスタンプ形式のビンゴの取り組みが行われていました。 弊社メンバーもスタンプを押してもらいながら気軽にスポンサーブースに立ち寄れるのでとても良い取り組みだと感じたようです！ いつか弊社でもブースを出してみたいと話していました。 また弊社インターンのメンバーは初めての現地参加だったそうで、 「実際にiOS界隈で有名な方と直接話すことができたり

Androidエンジニアの北川と藤原です。9月11日〜13日に開催された DroidKaigi 2024 に参加してきました！ 3日間濃密な時間を過ごしてきましたので、その内容をレポートします。 ミラティブは 2022 年から DroidKaigi に協賛しており、今年で3年目を迎えます。 tech.mirrativ.stream Workshop Day 1日目は、JetBrainsのSebastian Aignerさんによるワークショップ「From 0 to 100 with Kotlin and Compose Multiplatform」が開催されました。 github.com こちらは、Kotlin を活用したマルチプラットフォーム開発について、実際に手を動かしながら学ぶワークショップです。 前半は Kotlin Multiplatform、後半は Compose Multipl

こんにちは！フロントエンドエンジニアの どじねこ です。 今回は少し前となりますが 2024年5月に社内で開催したLT会についてご紹介したいと思います。 よろしければ先日公開されました「iOS・Android 合同のLT大会を開催しました！」も合わせてご覧ください tech.mirrativ.stream ⛳️ LT会を開催した背景 ミラティブには多数のエンジニアが在籍しており、配信やライブゲームを楽しんでいただけるよう日々活動しています。メンバーの技術分野はバックエンド、フロントエンド、Unity、インフラなど多岐にわたり、それぞれの専門性を活かして課題解決に取り組んでいます。 Webフロントエンドではモバイルと異なりチームではなく、強く興味を持ったメンバーで構成されるギルドが主体となって定期的に勉強会や知見の共有会を行っています。今回はそうした勉強会の延長として、社内外に向けて発信する

こんにちは、ミラティブ菅谷です。MirrativのWebGL製ライブゲームにて、アセットのロード方法をインスペクタでの直接参照からAddressable Asset System（以下Addressable）に変更したことで、クラッシュ率が大幅に改善し、クラッシュせずにプレイが終了した「正常プレイ率」は98%まで改善しました。本記事では、その具体的な手順と効果について紹介します。 課題背景 MirrativのライブゲームはWebGLで動いていますが、特にモバイルのWebGLではパフォーマンスに気をつける必要があります。今回改善を行ったプロジェクトではもともとAddressableを使用していませんでした。プロジェクトの初期リリース時点では大きな問題もなく運用できていましたが、アセットやリソースを追加していくにつれてクラッシュが多く見られるようになりました。ただし、WebGLではクラッシュし

はじめまして、Azuma（@azuma_alvin）です。現在大学院の1年生で、2024年2月から4ヶ月間ミラティブのインフラチームにインターンとして参加しました。普段はインフラやMLOpsといった領域に興味があり、最近はVim環境の整備がマイブームです。 本記事では、ログ基盤をFluentdからFluent Bitへ部分移行した経緯とその2種類の監視ツールの実装についてお話しします。 記事の最後に、インターンから見たインフラチームの特徴と私が4ヶ月間で学んだことを紹介しています。興味がある方は末尾までスクロールしてぜひご覧ください。 1. 背景と目的 2. ミラティブのログ基盤について 3. ログ欠損の原因調査 Fluentdのバッファリングの仕組み fsnotifyを用いたバッファリングの観察 負荷試験 日付時刻フォーマットとワイルドカードによるログ欠損 ログ保存とサーバータイムスタン

はじめに お久しぶりです、iOSチームにインターンとして参加させて頂いておりますMと申します。 MirrativのiOSアプリでは、これまでSwift製のCLIツールをBuildToolsという名前のSwift Packageを作成してこれにまとめて管理していました。 しかしこの度、ある課題や利便性の観点からyonaskolb/Mintでの管理に移行しました。 今回はMintへの移行に至るまでの背景や経緯、および移行に際して起こったいくつかの課題をどのように解決したかについて書いていこうと思います。 目次 はじめに 目次 Mintへの移行に至る背景 CLIツールの利用 SPMによる管理における課題 依存関係の不整合 依存解決の時間 Mintへの移行 Mintへの移行時に発生した課題とその解決 バージョンの自動更新 バージョン更新のためのコマンドを実装 1. Mintfileのパスを取得 2

memcached proxyのハッシュアルゴリズム比較 はじめまして！hibikiです(@add_bakkers) 現在大学3年生で、最近はネットワークに興味があり勉強中です。2023年8月からインフラチームにインターンとして参加しました。 本記事ではmemcached proxyのハッシュアルゴリズム比較の結果を紹介します。 memcached proxyのハッシュアルゴリズム比較 1. 背景と目的 ミラティブでのmemcachedの利用 課題: クライアントサイドでサーバ決定をしている memcached proxyの検討 2. memcached proxyに求められるアルゴリズム キーの分散 移動率の抑制 パフォーマンス ハッシュアルゴリズムの比較 3. 今回行うベンチマークの概要 計測対象とシナリオ 分散と移動率のベンチ 処理性能のベンチ 4. ベンチマークの結果と比較 移動率

こんにちは ハタ です。 Mirrativ では 2020年頃から サーバサイドの技術をPerlからGoへのシステム移行 を行っており、2024年現在でもサグラダファミリアのように移行作業は継続しています PerlとGoという2つの環境を同時に運用していますが、 基本的には 新機能は Go で実装 し、 Perlでは積極的に新規実装を行わない というスタイルで進めていました しかし、既存の機能の一部に手を加えたいとなった場合、まだまだ Perl の実装に手を加えることが一定あり、Perl から Go の機能を呼び出したいというニーズが出てきました （配信やギフトといったビジネスの根幹を支えるレガシーな実装においては顕著） そこで PerlXS を利用することで Perl から Go を直接呼び出せるようにできないかと考え検証を進めることにしました Goの -buildmode=c-shar

こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。 ライブゲームが動作する仕組み 例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向

こんにちは ハタ です。 最近Mirrativ上に構築した配信の文字起こしシステムを紹介したいなと思います 音声からの文字起こしは、各社SaaSでAPI提供されているものがあると思いますが、今回紹介するものはセルフホスト型(自前のGPUマシンを使う)になります 構築していく上で色々試行錯誤したのでそれが紹介できればなと思っています どんなものを作ったか 前提知識: 配信基盤 前提知識: Unix Domain Socket Live Recorder Archiver DS Filter VAD Filter NAC / Compress Transcriber NAC / Decompress Speach To Text コンテナイメージ まとめ We are hiring! どんなものを作ったか 今回作ったものは Mirrativで配信されるすべての音声を対象に文字起こしを行う シス

はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス

こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.

こんにちは、ミラティブ菅谷です。ミラティブではUnityチームで定期的に勉強会を行っています。今回はその取り組みの一つとして行ったGodot勉強会について紹介します。Unityエンジニアから見たGodotの特徴や触ってみての感想を記載しました。 背景：Unityライセンス体系の変更 2023年9月、Unityはライセンス体系の変更を発表しました。この変更は、多くのUnityユーザーに影響を与え、さまざまなゲームエンジンに関する議論を促しました。ミラティブのUnityチームもこの動きに注目し、ゲームエンジンの多様化に関する議論を行いました。最終的にライセンス体系は再変更されたため、ミラティブでもUnityからの移行は見送りとなりましたが、この話題をきっかけに他のゲームエンジンへの理解を深めることでUnityの長所と短所をより明確に把握することが必要であるとの結論に至りました。 Godot選択

みなさまこんにちは、ちぎら @naru_jpn とよこて @n0mimono です。noteの方に対談を掲載していますが、テックブログのほうでも記事を書いてみようと思います。社内外の多くの方に読んでいただければ幸いです。 note.com prtimes.jp CTOを交代しました！ 今のCTOより こんにちは、ミラティブ3代目CTOの千吉良（ちぎら）です。プレスリリースにあるように2024年1月よりCTOに就任しました、よろしくお願いいたします。 夏さん、横手さんと組織の中でCTOの移り変わりを眺めていて自分がその立場になるとは夢にも思わず生活をしていた訳ですが、せっかく挑戦する機会をいただいたのでお話を受けさせていただくことにしました。 私は2018年の8月からミラティブに副業ではじめて関わり、そのまま同年12月にミラティブに入社しました。 note.com インタビューにも書いたと思

インフラストリーミングチームの近藤（@udzura）です。 今日は、ミラティブ社内向けツールの話をします。ミラティブではVPNの仕組みをクラウドをフル活用して自前で構築し、1年ほど運用しています。運用中にいろいろ課題はありつつ、現在かなり安定して動作してます。 今回の記事は、そのVPNの仕組みを紹介します。 既存VPNの課題 災害時に稼働できないリスクを避けたい どこに誰がアクセスできるか楽に管理したい 新しいVPNをハッカソンで開発した話 新VPNの設計思想 災害時でも稼働できる どこに誰がアクセスできるか管理できる 攻撃時の影響を限定する 12時間でインスタンスを停止する クラウドネイティブなVPNである アーキテクチャと技術の説明 WireGuard Google Cloud VPCの各機能 Cloud Functions + Pub/Sub + Slack App API Slac

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

こんにちは、iOSエンジニアのいっちー(icchi (@0IcchI) / X)です。 MirrativのiOSアプリでは4年ほど前にレスポンスパラメータとレスポンスクラスのマッピングにDecodableを採用したAPIクライアントを作成し運用してきました。 新規の実装ではDecodable対応のAPIクライアントを採用していましたが、旧式APIクライアントを用いた膨大な量の実装はそのままにしていたので、今年から気持ちを高めてAPIクライアントの移行作業を開始しました。 気持ちを高めたものの、レスポンスクラスのデコード処理をSwiftyJSONからDecodableへ移行する際に、「レスポンスクラスの継承関係/依存関係の複雑さ」や「マッピングの際の型変換」によって悩まされることが多々ありました。 そんな悩みを乗り越えて、レスポンスクラスをDecodableへ移行する際に気をつけてよかったこ