ID:67105さん

# プロジェクト概要 ライブ配信サービスのミクチャのWEB版(以降ミクチャ本体とする)から、ゲーム配信およびVtuber配信のみをピックアップして表示するゲームポータルサイトを0から立ち上げ。リリースは2022年12月でまだ出来たばかりである。 ## 開発体制について ### 全体 直接開発に携わったメンバーはPM1人、デザイナー1人、フロントエンド1人、バックエンド1人の計4人である。要件定義および、画面設計まではPMが担当し、その後デザイナーがデザインを当てたあと、エンジニアがそれ以降の工程を担当。 ### 私の担当領域 実際に担当した領域はフロントエンド部分である。また、それに付随してamplifyなどのインフラも担当。 また、フロントエンド領域における言語及びライブラリ選定などの基本設計からコンポーネント設計などの詳細設計及びコーディングまで全て行う。 ## 使用技術について バックエンドにGo言語、フロントエンドはTypeScriptを採用しフレームワークはnext.js、管理画面にはreact.jsを使用。繋ぎ込みにはGraphqlを使用してスキーマベースで開発。 Next.jsのホスティングにはAmplifyを使用し部分的にssr化。 # 取り組んだ課題 ## 立ち上げに至った経緯 元はミクチャ本体にゲーム配信ページがあったが、会社の方針としてe-sports事業に力を入れ始めたこともあり、より注力できるようにするためポータルサイトとして切り出し。また、新たにカジュアルに参加出来るゲーム大会を主催する計画があり、それ用にCMS機能付きのゲーム特化サイトが欲しかったという経緯もあり。 ## 技術的に工夫した点 ### SSRの採用理由 ミクチャはTwitterなどの別サービスで共有されることが多くOGPの対応は必須となっていた。この対応をするにはReactのみでは不可能なためnextjsを採用しssr化する必要があった。 ### SSRの弊害 SSRするにあたって問題点があった。ページ遷移によるサーバーのやり取りが発生しないためSSRで情報を取得している間、デフォルトのプログレスバーが表示されずユーザーからはフリーズしているように見えた為対策が必要だった。この対策にプログレスバーを表示してくれるライブラリを採用し、ユーザー体験の向上を行った。 ### ダークモードの対応 ゲーム配信ポータルということもありダークモードを採用することになった。この実装方法はいくつかあると思うが、今回採用したのはcsspropertiesである。ライトモードとダークモードそれぞれの切り替えをreduxで管理し、プロパティ名を変数で呼び出せるようにして保守運用しやすくした。 # 取り組みの結果 現状まだ走り出したばかりであり特に結果は得られていない。

# プロジェクト概要 ライブ配信ミクチャにおけるガチファン機能の新規作成 ## 規模感 全体としてはAndroid、iOS、Web、サーバーそれぞれ、およそ2人ずつが担当。 ## 私の担当領域 新規実装時はweb版のフロントエンド、保守運用はwebのサーバーも担当。 # 取り組んだ課題 ## 技術負債を抱えながらの開発 現状web版は独自のAPIを生やしていてアプリ向けのAPIを使えない現状がある。それにより、アプリ向けAPIのサーバー側の実装が完了した後、実装されたAPIを元にweb版のサーバー側の実装を行う必要がある。これによりアプリ、サーバー各々の実装コストよりwebの実装コストがかかることになる。しかし、リリース日はアプリと同じ日なのでスピード感を持った実装と開発方法が必要であった。 これらの解決は、サーバー側の実装をしているブランチを開発途中ではあるがwebの実装ブランチに混ぜつつ開発をした # 取り組みの成果 上記課題を抱えていたが、アプリと同時のタイミングで無事リリーすることが出来た。しかし、この開発手法を今後も続けていくのはコストがかかりすぎると判断し、今現在アプリ用APIを叩けるようにする実装をwebチーム及びサーバーチームと行っているところである。

# プロジェクト詳細 ライブ配信サービスミクチャのweb版の保守運用 ## 規模感 Webの保守運用に関しては現在エンジニア3名で行っている。 ## 使用技術 現在GoTemplateからReactへの以降を行っている。 APIの作成及び初期描画用の最低限の情報を乗せたtemplateをGo言語、それ以降の描画をReactで行っている。 # 課題 現在web版とアプリ版は使用しているAPIが異なる。これは認証方法の違いによるものでこれにより開発が複雑になったり無駄なコストが発生している。 今この負債を解消するためにWebからアプリ用のapiを叩けるように修正している途中である。 # 取り組みの成果 現在アプリ用のapiを叩けるようにしている最中でまだ叩けない。この実装が完了した際はアプリで実装するよりもwebの実装の方がスピード感がある開発ができるようになる想定である。