全方位開発者への道 Team Yugun

タイトル 全方位開発者への道 by Team Yugun

はじめに

こんにちは！Yugunチームです。この記事は、株式会社Voicyの開発チームの1つであるYugunチームの紹介です。 株式会社Voicyは、音声プラットフォームVoicyのアプリやWebのサービスを提供しているスタートアップです。 その中でもYugunチームは、いろんなプロダクトやプラットフォームを触っているので、フルスタックエンジニアや幅の広い開発をしたい方はぜひ読んでみてください！

今回は4人のエンジニアでこの記事を執筆しました。

Team Yugun

Yugunは2023年12月現在6人で活動しており、内訳は以下の通りです。

  • Pdm 1人
  • デザイナー 1人
  • エンジニア 4人(フルスタック: 2人、フロントエンド: 2人)

Voicyのプロダクトチームは全部で6つあり、その中でも1番守備範囲が広いチームとなっています。

Voicyのプロダクト

Voicyのプロダクトは細かいものも合計すると全部で10くらいあります。今回はその中でもYugunチームで開発できる機能の幅の広さが伝わるように、主要なプロダクトや機能を紹介していきます。

Voicyのプロダクトは大きく分けて3つあります。

  • 再生アプリ、再生WebのVoicy.jp
    • リスナーさんが音声を再生できるプロダクト
  • Voicy Studio アプリ版、Web版
    • 選ばれたパーソナリティさんが音声を収録したり、管理したりできるプロダクト
  • 社内管理
    • 社員が使用する管理用のプロダクト

再生、Voicy.jp

まず、Voicyの音声再生アプリで開発した機能から紹介します。

ガンマ波サウンドBGMの追加

リリースも出させてもらいましたが、Voicyで使用できるBGMに「ガンマ波サウンド」の追加を行いました。「ガンマ波サウンド」とは40Hzの特殊な波長の音で、脳を活性化し認知症をケアできる可能性がある音と言われています。

対応したプロダクトとしては、iOSアプリ、Androidアプリ、Webサイト、そして社内で使用している管理画面のフロント&バックエンドで、Yugunチームらしくプロダクトを跨いだ機能開発となりました。とはいえ既存の項目に追加する作業なので技術的に難しいことなかったのですが、各プロダクトで不整合が出ないように考慮しながら開発を行う必要があり、何よりプログラム言語がそれぞれ異なるため頭を切り替えながら作業するのが大変でした笑

Voicyは音声のサービスですが、声に限らず様々な形で音を楽しんでもらえるように今後も機能開発を行っていきたいと考えています。 執筆: ゆうじ

Web生放送

以前はアプリからしか生放送を聞くことができなかったのですが、Webでも聞けるように実装しました。諸事情でアプリを使用できない方やブラウザから生放送を聴取したいユーザーさんに生放送を届けることができるようになりました。引き続き、生放送の体験を向上させていきたいです。 執筆: きーくん

放送画面のレイアウト変更

今年の10月に、主にスマートフォン版Webの放送画面の体験を新しくしました。 スマートフォン版Webの放送画面にアクセスしてくるユーザさんは、新規ユーザさんやSNSからの遷移である場合が多いです。 今回は新規のユーザさんに焦点を当てています。新規ユーザさんにVoicyのアプリをインストールしてもらうためには、お気に入りのパーソナリティさんを見つけてもらうことが重要だと判断しています。なので、さまざまなパーソナリティさんに出会う体験を作るために、関連する放送の一覧を新たに追加しました。 その上で、今まで大きく表示の領域を取っていたチャプターやコメントの一覧を省略表示しています。これは、できればファーストビューに関連する放送を入れて、目立たせたいために行いました。省略した領域をタップすることで画像のようにボトムシートで展開表示できるようにしています。

その結果、分析をしたところ、平均再生放送数が増えて多くの放送を聞いてもらえるようになりました。 正直、既存ユーザさんにとっては、チャプターやコメントが見づらくなったりしてしまう面もあるかもしれないのですが、これからもよりよい体験に変えていく予定なので、改善に付き合ってもらえると嬉しいです。

放送画面にボトムシートを追加

執筆: Cちゃん

スポンサーチャプターにURLを表示

Yugunでは様々な開発環境(web iOS Android)を跨いで一度に開発するようなタスクが多いですがその中の一つとしてスポンサーチャプターURL表示という実装をしました。

内容はチャプター部分にスポンサーや添付記事のURLを表示するというものです。

実装自体はシンプルですが全ての媒体で実装し、リリースできるようにしないといけない。またリリースのタイミングも調整しないといけないので大変でした。

スポンサーチャプターにURLを表示

実装の結果スポンサーリンククリック率が大幅にUP(140%増) スポンサーやパーソナリティさんにとってとても良い施策になりました。 チャプター放送: https://voicy.jp/channel/941/646449 執筆: うおくん

差し入れ

Voicyではイベント毎に差し入れイベントを行っていますが、実は全てYugunが担当しています。

差し入れ母の日
差し入れハロウィン

アイコンを差し替え実装をしリスナーさんから差し入れをしていただいています。 差し入れの売り上げも毎イベントで上がるのですごくやりがいのある実装です。 ちなみに一番人気はバレンタインデーとクリスマスのイベントです。 執筆: うおくん

Voicy Studio

次に、Voicyの音声収録機能のプロダクトVoicy Studioで開発した機能を紹介します。

チャンネルカバー画像の設定

Voicyには放送を再生するドメインだけではなく、パーソナリティさんのためのチャンネル管理をする画面(Voicy Studio)もweb iOS Androidそれぞれ存在します。 Yugunでは再生部分もVoicy Studio部分も関係なく全てを跨いで実装をしていくのですがその中でVoicy Studioでのチャンネルカバー画像をアプリの仕様に揃えるような実装をしました。 基本はそれぞれのドメインでそれぞれのエンジニアが担当をもち、実装を進めていくのでその際にエンジニア間での考慮漏れなどあった場合にアプリとwebで仕様が違う。ということは多々あります。そんな時は全て実装できるYugunがアプリとwebの機能を揃えたり、逆にアプリとwebを全て一度に新しい機能を追加するといったことを行っています。

チャンネルカバー画像の設定
執筆: うおくん

Voicy 声の社内報

こちらはVoicyではあまり表には出てこないBtoBのサービスです。 組織の社内のコミュニケーションを解決するサービスで、各企業さんが1パーソナリティとして社内に閉じた環境で社員さん向けに放送を行うことができます。 ＨＲアワード2023の組織変革・開発部門で最優秀を受賞したサービスでとても誇らしいです。

再生アプリから自分に紐付けられた社内報チャンネルの放送を聞くことができます。 HRアワードを受賞したこともあり、今後も力を入れてよりよいサービスにしていきます。 執筆: Cちゃん

社内管理

Voicyでは、社員だけがアクセスできるサービスの社内管理というプロダクトも存在します。ユーザさんの情報やアプリ上の表示を手動で設定するものの管理などを行うプロダクトです。 社内管理の細かい機能の説明は割愛します。

執筆: Cちゃん

LINEログイン

Voicyに新しいログイン方法として、LINEログインを導入しました。Voicyのアカウントは全てのプロダクトで共通のものを使用しているため、1つのアカウントで複数のプロダクトにログインできます。Yugunチームでは、パーソナリティさん用のVoicy Studio Web版とvoicy.jpのWebサービスの2つの実装を行いました。

LINEログイン

LINEログインの導入により、SNSログインしてくださるユーザーさんの総数が増えました。便利なログイン方法が利用できることで、ユーザーさんにより良い体験を提供できることに貢献できたと思っており嬉しいです。これからもより良い体験を届けられるようにしていきます。 執筆: きーくん

OGP

Voicyでは、voicy.jpのリンクをSNSでシェアする時にリンクの内容が分かりやすいように、リッチな画像を出せるようにしています。この記事でも取り上げている、「年末まとめ」企画やパーソナリティさんが放送公開、予約、生放送などをした時のシェアに特に使っていただいており、嬉しいです。ありがとうございます。

放送画像のOGP

生放送のOGP

また、生放送に他のユーザーさんやパーソナリティさんが参加すると、その方が画像に反映されるようにしています。これからもこうした画像で分かりやすく、見やすくなるように改善していきたいと思っています！ 執筆: きーくん

年末まとめ

Voicyでは毎年年末になると「年末まとめ」という、1年間にどれだけ多くの時間をVoicyと過ごしてもらえたかというデータを送らせていただいており、ユーザーの皆さんが年末から年明けにかけて、その内容をシェアするツイートをしてくれています。

パーソナリティーの方々へ向けては、リスナー向けとは違う内容の「年末まとめ」をお送りしています。

このようにユーザの方から直接反応をいただけるのはtoCサービスをやっている醍醐味でとても嬉しいことですし、Voicyの存在意義を感じる瞬間でもあります。

そしてこの「年末まとめ」の企画は、なぜか開発に着手するのがギリギリになるというのが毎年の恒例になってしまっているのですが、今年こそは余裕を持って開発したいと思っていますので、ぜひ楽しみにお待ちください！ 執筆: ゆうじ

非機能系

Yugunチームでは機能開発だけではなく負債解消にも力を入れており、今回はフロントのAngular開発で行っている試作のうち3つを紹介します。

テストコードカバレッジの向上 以前はひたすら開発を進めるばかりでテストコードがあまりかけていなかったことが課題としてありました。そこできちんとテストコードも書いていけるようにするため、ある時点以降新たに作成するファイルについては、基本的にはカバレッジを100%となるようにテストコードを書くようにしました。

とはいえ、すべてのファイルについてカバレッジを100%にするのは難しいので、まずはTypeScriptのコードのみを対象としています。またテストコードにかける時間を取るのが難しいこともあるので、その際はリリース後に後追いでの作成もOKとするなど、臨機応変に対応できるようにしています。

これにより、テストコードの量が増え、バグの発見も早くなりました。既存のコードについてはまだ十分にテストできてるとは言えないので、そこは引き続き改善していきたいと考えています。

カバレッジ100%

Angularのバージョンアップデート Angular自体は年に2回新しいバージョンがリリースされますが、Voicyでは年に1回は新しいバージョンへのアップデートを行っています。

大体3〜4月に作業することが多いです。Angularが毎年5月と11月に新しいバージョンがリリースされるのですが、リリース後すぐに適用するのはリスクもあるため、11月リリースを数ヶ月様子を見てから採用する形になっています。

先月のAngular17のリリースでは公式サイトもアップデートされて見やすくなり、HTMLでは新しくControl flowも使えるようになるので、アップデートするのが今から楽しみです。（とはいえControl flowはまだDeveloper previewなので使用には注意が必要ですが）

毎朝エラーログを確認 Voicyではほとんどのシステムでログの監視にはDatadogを使用しています。フロント開発でももちろん使用しており、毎日の朝会ではタスクの確認に加えて問題のあるログが出ていないかもチェックして、緊急度が高いものはすぐに対応し、急がないのもについてはタスクを作成して優先順位に沿って修正を行っていきます。

執筆: ゆうじ

おわりに

今回はVoicyの開発チームの1つであるYugunチームが開発してきた機能の紹介をしました。 最後まで読んでくださりありがとうございます！ 今後とも、Voicyをよろしくお願いします！

採用強化中！

Voicyでは一緒に働く仲間を大募集しています！ もちろんYugunチームでは特に、いろいろな開発をしたいエンジニアを大募集しています！ Voicy採用サイトのリンクを貼っておきますので、興味がある方はぜひ見てみてください。

recruit.voicy.jp

また、voi-chordというチャンネルでエンジニアの情報発信を行っています。毎週放送更新中なのでぜひ覗いてみてください。

この記事はVoicy Advent Calendar 2023 15日目の記事です。

qiita.com