サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="はじめに">はじめに</h2>

<p>こんにちは、合同会社dmm4all.topのオンラインサロン事業部所属の田上です。22年新卒で、今年の8月からオンラインサロン事業部でプロダクト開発を担当しています。</p>

<p>今回は初めてオンラインサロン事業部の記事を書いていきます。<br />
本記事では、8月に配属されてから現在までにやってきたことや学んだことなどを、素直な感想とともに書いていきたいと思っています。<br />
この記事でオンライサロン事業部の内部の雰囲気やサービスについて知っていただけると幸いです。オンラインサロン事業部へ興味のある方はぜひ読んでみてください！</p>

<h2 id="オンラインサロン事業部とは">オンラインサロン事業部とは</h2>

<p>オンラインサロン事業部では、オンラインサロン（オンライン上で運営される会費制のクローズドなコミュニティ）のプラットフォームを開発・運営しています。</p>

<figure title="オンラインサロン事業部について"><img alt="" height="549" src="https://image.dmm-corp.com/ym0pkv6r1yk25vsqdghls9utregi" width="1200" />
<figcaption>オンラインサロン事業部について</figcaption>
</figure>

<p>&nbsp;</p>

<p>2022年12月時点のオンラインサロン事業部の所属人数は約40人で、役割・業務ごとに4つのグループで構成されています。 私が所属している開発グループはさらに3チームに分かれ、各チーム3〜9人の体制になっています。</p>

<p>&nbsp;</p>

<figure title="オンラインサロン事業部体制図"><img alt="" height="549" src="https://image.dmm-corp.com/wfypoxb7zt7e5tcrix758quoiyrh" width="1200" />
<figcaption>オンラインサロン事業部体制図</figcaption>
</figure>

<h2 id="新卒オンラインサロン事業部に入る">新卒、オンラインサロン事業部に入る</h2>

<p>4月から始まった新卒研修が終わり、私はオンラインサロン事業部に所属することになりました。エンジニアとしてまずやらないといけないこと。それは環境構築とサービスの理解です。</p>

<p>オンラインサロン事業部では、配属前から初日に何をやるか、誰がサポートしてくれるのかをしっかり伝えてくれています。<br />
そのおかげで配属初日は不安なく、スムーズにオンボーディングタスクに取り組むことができました。また、事業部で取り組んでいるリモート施策（Discord常駐でオフィス同様すぐ声がかけられる環境作り）のおかげもありDiscordで会話しながら進められたので、詰まった時は都度質問できました。</p>

<p>オンラインサロン事業部が行っているリモート施策についてはこちらの記事を読んでみてください！</p>

<p><a href="https://inside.dmm4all.top/entry/2022/08/23/salon-remotework">https://inside.dmm.com/entry/2022/08/23/salon-remotework</a></p>

<p>Webアプリケーション環境構築では、Dockerを用いてオンラインサロン入会ページとサロンオーナー・運営スタッフが使用する専用管理ツール、そしてオンラインサロン専用コミュニティを構築しました。iOSアプリ環境構築では、コミュニティアプリとライブ配信アプリを構築しました。</p>

<p>環境構築で詰まり、資料に載っている膨大な情報に圧倒されながらも、必死に頭に詰め込んだ初日でした。</p>

<p>オンラインサロン事業部のオンボーディングについてもっと知りたい方は、こちらの記事を是非読んでみてください！</p>

<p><a href="https://inside.dmm4all.top/entry/2022/08/25/salon-onboarding">https://inside.dmm.com/entry/2022/08/25/salon-onboarding</a></p>

<h3 id="配属から現在までの活動スケジュール">配属から現在までの活動スケジュール</h3>

<p>ここからは、時系列ごとに取り組んだ内容を述べていきます。</p>

<figure title="活動スケジュール"><img alt="" height="821" src="https://image.dmm-corp.com/lqrjypy1pawrzvsrlmhphak17i5z" width="1200" />
<figcaption>活動スケジュール</figcaption>
</figure>

<h2 id="8月オンラインサロンを知り開発へ">8月、オンラインサロンを知り開発へ</h2>

<p>これから業務に臨む上で、まずはそもそもオンラインサロンとは何なのか、DMMオンラインサロン事業部のオンラインサロンとはどのようなサービスなのかを理解する必要があります。</p>

<h3 id="オンラインサロンとは">オンラインサロンとは？</h3>

<p>オンライン上で運営される、会費制のクローズドなコミュニティです。<br />
登録すれば誰でも参加できるオープンなSNSとは異なり、同じ目的を持って対価を支払った熱量の高い人だけが参加する傾向にあります。</p>

<h3 id="DMMオンラインサロンとは">DMMオンラインサロンとは？</h3>

<p>すべては説明しきれないので、ここではDMMオンラインサロンの一部をご紹介します。<br />
DMMオンラインサロンでは、オンラインサロン専用の独自コミュニティと管理・入会画面を提供しています。3,000サロン以上の開設実績から培ったノウハウと、サロンオーナーやサロン会員の意見を取り入れながら、日々使いやすさを向上させています。</p>

<p>コミュニティツールはDMM専用コミュニティ、またはFacebookを使用します。 サロンオーナーは、管理画面から会員の管理やメルマガ配信、データ分析、入会アンケート、コンテンツ販売などが可能です。</p>

<figure title="ツール説明"><img alt="" height="479" src="https://image.dmm-corp.com/bmbwdetnbrxq4n9n08n04smh9u3s" width="946" />
<figcaption>ツール説明</figcaption>
</figure>

<h3 id="使われている用語を理解する">使われている用語を理解する</h3>

<p>次に、DMMオンラインサロンには、どんな役割（サロンオーナー, スタッフ, サロン会員, etc.）があり、どんな機能（ライブラリ, 無料期間, サロネン, etc.）があるのかを知っておく必要があります。<br />
コミュニケーションを取る際、共通認識を持って認識齟齬を防ぐために用語を知っておくことはとても重要です。それぞれ昔から運用されており、歴史を知ることで蓄積された用語を理解していきました。</p>

<p>まだDMMオンラインサロンの全てを理解できている自信はありませんが、これからも学んでいきます。</p>

<h3 id="継続的に運用する大切さを知る">継続的に運用する大切さを知る</h3>

<p>オンボーディング資料を読んでいると、オンラインサロン事業部は丁寧だなと思うことがあります。それは、資料がしっかりメンテナンスされていることです。<br />
ユーザーの読解の負荷を軽減するためのライティングガイドラインや私達が利用するスクラム開発ガイドライン、開発フロー資料などの2年前に作成された資料でさえ、更新日が最近でした。どのように運用されているのだろうかと疑問に感じていました。</p>

<p>そのとき思っていた疑問は、今では納得できています。オンラインサロン事業部では何か新しいことを始める時、どのように運用していくのかを大事にしています。継続的に更新し続けるサイクルの確立、気づいたらすぐに共有し改善する。そのおかげで、新しく入った私にもスムーズに情報を得ることができました。 実際に、資料整理を行う時間を週に一度取り、そこで整理を行いました。</p>

<p>少し話がそれましたが、初めの一週間位はみっちりサービス理解に時間を当てることができ、事業部の文化も知っていきました。</p>

<p>そしてここから、Webサービス開発に携わっていきます。</p>

<h2 id="9月Webアプリケーション開発に携わる">9月、Webアプリケーション開発に携わる</h2>

<h3 id="UXの向上は小さなことの積み重ね">UXの向上は小さなことの積み重ね</h3>

<p>まず、<a href="https://lounge.dmm4all.top/" target="_blank">オンラインサロン入会ページ</a>の開発に携わりました。<br />
初めは軽い文言修正からでした。ユーザーが誤解してしまうような表記があってはいけません。プロダクトオーナーや運営スタッフと話し合いながら最適な文言を選びます。 そのような話し合いに入る時は、ユーザー目線に立ちできるだけ客観視しなければいけないので、そういった意味では新参者の私は素直な意見を出せました。<br />
一つの文言を修正するのでもしっかり議論する姿勢は、個人開発ばかりをしていた自分にとって新鮮でした。</p>

<p>続いて携わったのは、サロンオーナーや運営スタッフが使う管理ツールです。主にサロンの開設や管理などができます。<br />
オンラインサロンを開設する際は、募集人数やカテゴリー、料金などの多くのサロン情報を入力する必要があります。その際に、オンラインサロンを開設管理したい方々に誤解を生むようなUXがあってはいけません。<br />
プロダクトオーナーと頻繁に相談し、不要な操作ができないようにバリデーションの追加やUIの整理などを行いました。自分が使う想定で考え、「これは使いにくいな」」と思うことがあれば、相談し改善していきました。<br />
それにより、UXも上がり、不要なリクエストを送らせないことで処理の単純化を進めることもできたと考えています。</p>

<p>特に苦労した点は、オンラインサロンの申請フローに関わる改善タスクです。「サロンオーナー」「運営スタッフ」などの役割と「作成中」「修正待ち」「公開待ち」といったステータスに応じて、デッドロックすることなくやり取りをする必要があり、ロジカルに考えながら実装をしました。影響範囲が大きかったので、他に影響している箇所はないか調査し、テストを細かく実施しました。</p>

<p>実際に利用される運営スタッフから、感謝のリアクションを得られた時はすごくやりがいを感じました。</p>

<h2 id="10月--現在iOSアプリ開発してます">10月 ~ 現在、iOSアプリ開発してます</h2>

<p>いきなりですが、10月からはiOSアプリの開発をしています！<br />
DMMオンラインサロンでは、オンラインサロン入会者が利用するコミュニティアプリとライブ配信アプリがあります。</p>

<figure title="iOSアプリ"><img alt="" height="589" src="https://image.dmm-corp.com/swj5sjc0pi9pcwy5451e5laqn45w" width="1200" />
<figcaption>iOSアプリ</figcaption>
</figure>

<p>元々、私は学生時代にWeb開発を主にやっており、iOSアプリ開発の経験はないのですが、技術研修で興味を持ち、オンラインサロン事業部ではiOSアプリ開発を頑張りたいと思っていました。</p>

<h3 id="iOSアプリ開発楽しい">iOSアプリ開発楽しい</h3>

<p>まず取り組んだことは、環境構築の改善です。<br />
既存の環境構築では複数のシェルスクリプトを順番に実行しながら環境を構築していきます。環境構築をスムーズに進められるように、既存の環境構築手順を読みながらMakefileに落とし込み、コマンドを一回叩くだけで構築できるようにしました。（目的に合わせて処理を個別に叩くこともできます）<br />
アプリの環境を作るためにどのようなビルドが行われており、ツールが使われているかを理解できたので、初めに取り組んで良かったです。その他、ライブラリ管理をcarthageからSPMに移行する作業なども行いました。</p>

<p>Bitrise（モバイルアプリ用CI/CD）のワークフロー改善も行っていきます。最近では、iOS16に対応するようにビルドステップを修正、使用するスタックをM1ベースに変更するなどを行いました。<br />
一緒に働いているエンジニアの皆さんに感謝される時は最高に気分がいいです。</p>

<p>開発環境のベースをある程度理解したら、いよいよアプリ開発を行っていきます！<br />
基本的にはリファクタリングや新規機能の追加、不具合対応を行っています。</p>

<p>リファクタリングでは、既存のコードを見直し、不必要なコードを切り出していきます。主に、React Nativeが一部使われている箇所があるので、それをSwiftへ移行する作業や状態管理の見直しなどをしました。Swift移行については現在も進行中です！<br />
React NativeからSwift移行について詳しく知りたい方はこちらをどうぞ。</p>

<p><a href="https://speakerdeck.com/roana0229/dmmonrainsaronapurifalsereactnative-nil-swifthua-hefalsedao-falseri" target="_blank">https://speakerdeck.com/roana0229/dmmonrainsaronapurifalsereactnative-nil-swifthua-hefalsedao-falseri</a></p>

<p><a href="https://speakerdeck.com/hayatan/reactnative-falseahuriwo-swift-nizhi-kihuan-etemasu" target="_blank">https://speakerdeck.com/hayatan/reactnative-falseahuriwo-swift-nizhi-kihuan-etemasu</a></p>

<p>新規機能は、大きなものや小さなものがありますが、ユーザーが使いやすくなるよう機能を追加していきます。最近だと下書き保存機能がリリースされました！</p>

<p><a href="https://note.com/dmm_onlinesalon/n/n44c54865df27" target="_blank">https://note.com/dmm_onlinesalon/n/n44c54865df27</a></p>

<p>ユーザーが使いやすいUIも考える必要があります。開発者やデザイナー、プロダクトオーナーと相談しながら、最適なUXを提供できるように考えています。ちなみに事業部内で<a href="https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/" target="_blank">Human Interface Guidelines</a>を読む勉強会も実施しています！<br />
自分はiOSアプリ開発が未経験ということもあり、なんとなく使いづらいと思う箇所を見つけても、どう改善すればよいかわからない事が多いです。なので、他社のアプリを見たり、Appleの公式ドキュメントなどを読んで学んでいく日々です。（知れば知るほど深くて大変です。）</p>

<h3 id="不具合の影響は最小限に抑える">不具合の影響は最小限に抑える</h3>

<p>私が一番伝えたいことは、ユーザーからの問い合わせや不具合の対応についてです。オンラインサロンでは毎日、ユーザーからの不具合・問い合わせ報告を確認し、緊急を要するものは最優先で対応する動きが確立されています。<br />
どう改善すべきか、どのように伝えるべきか、全体で相談しながら最適な行動を取られている姿を見ながら、自身もすごく刺激を受けると同時に力の無さを実感しました....。<br />
自身も不慣れながらも周りのサポートを受けながらできる限り早く原因を突き止め、修正を行えるよう努力していきます。</p>

<h2 id="最後に">まとめ</h2>

<p>ユーザーに楽しくオンラインサロンを使っていただけるように、オンラインサロン事業部では使いやすいプロダクト開発に取り組んでいます。<br />
そんなユーザー第一で開発できる環境で日々成長をしていきたいと思っています。 これからもサービスとオンラインサロン事業部をより知っていただけるように努力していきます！</p>

<p>最後まで読んでいただきありがとうございました！&nbsp;</p>

<p>DMMオンラインサロンでは開発チームのメンバーを募集しています。少しでもご興味を持たれた方、まずはカジュアル面談で気軽にお話ししてみませんか？</p>

<div data-oembed-url="https://speakerdeck.com/onlinesalon/for-software-engineers">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="//if-cdn.com/3KHBOZi" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
</div>

<p><a href="https://speakerdeck.com/onlinesalon/for-software-engineers" target="_blank">speakerdeck.com</a></p>


オンラインサロン事業部新卒活動記録

シェア

一緒に働く仲間を募集しています！

関連する求人

関連する記事

関連するサービス

オンラインサロン事業部 新卒活動記録

シェア

一緒に働く仲間を募集しています！

関連する求人

関連する記事

関連するサービス

オンラインサロン事業部新卒活動記録