サービス

ジャンル

職種：エンジニア

職種：ビジネス職

職種：デザイナー

職種：バックオフィス

職種：その他職種

技術

<h2>はじめに</h2>

<hr />
<p>DMM プラットフォーム開発本部 Naviグループのtaketadaです。<br />
本記事では、Naviグループとその担当機能である共通ナビゲーション(共通ナビ)について、以下の項目でお話しさせていただきます。</p>

<ul>
	<li>共通ナビとは？</li>
	<li>共通ナビの役割とは？</li>
	<li>Naviグループとは？</li>
	<li>共通ナビが抱える課題とその解消への取り組み</li>
</ul>

<h2>共通ナビとは？</h2>

<hr />
<p>共通ナビとは、DMM全体でヘッダー、フッター領域に共通的に組み込まれるナビゲーションプロダクトを指します。<br />
プロダクト自体の歴史は古く、これまでDMM内の複数のグループが運用に携わってきました。</p>

<p>&nbsp;</p>

<p><img alt="" height="32" src="https://image.dmm-corp.com/1qqqhzozwxrbqniw8zii6kd7mqf4" width="800" /></p>

<p>&nbsp;</p>

<p>共通ナビはサーバーレスなWeb APIの形で提供され、リクエストに応じてブラウザ側にHTMLをレスポンスし、それを各事業部（サービス）が読み込むことで表示することができます。<br />
各事業部側ではAPIのリクエストパラメータを変更することによって表示項目を変更することができます。</p>

<p><img alt="" height="228" src="https://image.dmm-corp.com/47jvw801x53khvfds4h8b0xvs24h" width="800" /></p>

<h2>共通ナビの役割とは？</h2>

<hr />
<p>共通ナビには以下のような役割があります。</p>

<h3>DMM全体のナビゲーションシステム</h3>

<p>共通ナビはDMMのほとんどのフロントエンドアプリケーションに共通で組み込まれているため、DMMの各サービス間のナビゲーション・送客と回遊を促す役割があります。</p>

<h3>DMMの複数サービスで統一されたインターフェースの提供</h3>

<p>共通ナビは単体でDMMの売上に直接貢献するプロダクトではありませんが、組み込まれた複数サービスにおいて、統一されたインターフェースを提供できるため、DMMサービス全体の使いやすさに貢献できる側面があります。</p>

<h3>独自の成長戦略を求められる</h3>

<p>共通ナビは、単体で動作するWebアプリケーションではなく、Webアプリケーション内に組み込まれるマイクロフロントエンドのプロダクトです。<br />
そのため、通常のWebアプリケーションとは異なった考慮事項があります。<br />
一般的なWebアプリケーションのベストプラクティスをそのまま導入するのではなく、自分たちで成長戦略を考える必要があります。</p>

<p>&nbsp;</p>

<h2>Naviグループとは？</h2>

<hr />
<p>2023/07に発足した、DMM内では比較的新しいグループとなります。<br />
共通ナビの保守・運用を他の部署から引き継ぎ、担当しています。<br />
チーム編成は、2024/04現在、マネージャ1名を含む5名のエンジニアで構成されています。</p>

<p>構成メンバーは新規にジョインしたメンバーが大半で、それぞれの経験を活かし職務にあたっています。<br />
共通ナビとその関連アプリケーションの開発・運用全領域に携わるため、メンバーにはWebアプリケーションエンジニアとして広い職能が求められます。</p>

<h2>共通ナビが抱える課題</h2>

<hr />
<p>Naviグループが共通ナビを保守・運用していく中で、グループ内でいくつかの課題があることがわかりました。<br />
その中で取り組んだ課題と、解消への取り組みのー部をここで紹介します。</p>

<ul>
	<li>リリースによる表示崩れの発生</li>
	<li>リリースの頻度が少なく変更のリードタイムが長い</li>
	<li>事業目標や目指す指標が明確でない</li>
</ul>

<h2>リリースによる表示崩れの発生</h2>

<p>Naviグループによる運用開始時、機能リリースに際して表示崩れが頻発することがあり、障害検知の遅れとともにその修正対応に追われる形となっていました。<br />
この原因の1つとして、別の部署からアプリケーションを引き継いだため十分な知見がなく、コード変更の影響範囲がわからなかったという側面がありました。</p>

<h3>解消への取り組み</h3>

<h4>Four Keysによる開発生産性の可視化</h4>

<p>まず現状を把握するため、リリースによる変更障害率やサービス復元時間を含めた、グループの開発パフォーマンスを可視化することからはじめ、その指標としてFour Keysを採用することとしました。</p>

<p>&nbsp;</p>

<table>
	<colgroup>
		<col />
		<col />
	</colgroup>
	<tbody>
		<tr>
			<th scope="col">指標</th>
			<th scope="col">説明</th>
		</tr>
		<tr>
			<td><strong>デプロイの頻度</strong></td>
			<td>組織による正常な本番環境へのリリースの頻度</td>
		</tr>
		<tr>
			<td><strong>変更のリードタイム</strong></td>
			<td>commit から本番環境稼働までの所要時間</td>
		</tr>
		<tr>
			<td><strong>変更障害率</strong>&nbsp;</td>
			<td>デプロイが原因で本番環境で障害が発生する割合（%）</td>
		</tr>
		<tr>
			<td><strong>サービス復元時間</strong></td>
			<td>組織が本番環境での障害から回復するのにかかる時間</td>
		</tr>
	</tbody>
</table>

<p>引用元：<a href="https://cloud.google.com/blog/ja/products/gcp/using-the-four-keys-to-measure-your-devops-performance"> エリート DevOps チームであることを Four Keys プロジェクトで確認する</a></p>

<p>&nbsp;</p>

<p>計測した各指標の値を振り返り、都度改善するための打ち手を考えることを開発のワークフロー自体に組み込みました。</p>

<h4>VRT(Visual Regression Testing)の導入</h4>

<p>人の手による確認ではどうしても漏れが発生するため、<a href="https://playwright.dev/">Playwright</a>と<a href="https://github.com/reg-viz/reg-suit">reg-suit</a>によるVRTを導入しました。<br />
これにより、各環境のリリース前に故障に気付けるような仕組みを作りました。</p>

<p><img alt="" height="488" src="https://image.dmm-corp.com/j4t5hypw6u76iwqcqtrxd2h108c3" width="800" /></p>

<h2>変更のリードタイムが長くリリースの頻度が少ない</h2>

<p>Four Keysを運用していく中で、変更のリードタイムの長さとリリースの頻度の少なさが課題となっていました。<br />
当初のブランチ戦略としては、Git flowベースのブランチモデルを採用し、機能リリースは1週につき1,2回の頻度で行っていました。<br />
develop, staging, masterの各ブランチへのマージをトリガーとしてCIから各環境にデプロイするフローは、各環境へ段階的に変更を適用するため時間を要し、結果的にリリースの度に大きな変更を行う結果となっていました。</p>

<h3>解消への取り組み</h3>

<h4>GitHub flowの採用</h4>

<p>機能を小さな単位で頻繁にリリースするため、GitHub flowを採用しました。<br />
mainブランチに各機能ブランチをチェックアウト、マージすることでCIから各環境へデプロイするシンプルなフローによって、1日に何度も機能リリースができるようになりました。</p>

<h2>事業目標や目指す指標が明確でない</h2>

<p>Naviグループは比較的新しい組織のため、グループとして何を成すべきかの事業目標・指針が定まっていませんでした。そのため、取り組むべき案件の優先度設定が難しく、発生する依頼や課題に対して発生した順に取り組んでしまう形となっていました。</p>

<h3>解消への取り組み</h3>

<h4>KGI、CSF、KPIの策定</h4>

<p>Naviグループが提供できる価値・利益を洗い出し、事業目標としてKGIを設定して、そこに至るためのCSFとKPIの値をグループ内で決定しました。<br />
これにより、自分達のやるべきことを自分達で判断する際の指標を数値ベースで考えることができるようになりました。</p>

<p>&nbsp;<img alt="" height="491" src="https://image.dmm-corp.com/4alw4wkebv2weirpsa77broh1iax" width="800" /></p>

<h4>Performance Budgetの策定</h4>

<p>共通ナビはDMM全体に共通的に組み込まれるという特性上、そのWeb Performance指標の悪化はそのまま各事業部に影響します。<br />
そのため、Naviグループでは共通ナビに対して、独自にPerformance Budgetを策定し、その値を今後の開発戦略上で参照する形としました。</p>

<h2>まとめ</h2>

<hr />
<p>本記事では、共通ナビとNaviグループの取り組みについて、駆け足になりましたが、紹介させていただきました。</p>

<p>今後Naviグループでは以下のような内容に取り組んでいく予定です。</p>

<ul>
	<li>共通ナビのリプレイス</li>
	<li>事業部側の導入コスト削減、複数の組み込み選択肢の提供</li>
	<li>DMM全体で共通に組み込まれている特性を活かした施策提案</li>
</ul>

<p>また、現在Naviグループでは一緒に働いてくれるメンバーを募集中です。<br />
以下からご応募ください。</p>


プラットフォーム

開発プロセス

プラットフォーム開発本部

DMMプラットフォーム 共通ナビゲーションが担う役割と課題

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMM Factory

ぷらさぷ ～＋SURPRISE～

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMM FX

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM 地方創生

DMM.make 3Dプリント

DMM.make PRODUCTS

Seamoon Protcol by DMM Crypto

DMMバヌーシー

DMM EV ON

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Waitinglist

Algoage

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

通販

レンタル

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

ハードウェア・プロダクト

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

VR体験

Web3

生成AI

研究開発

アプリ

ブロックチェーン

横断開発

社会インフラ

アミューズメント

ダイバーシティ

同人

Webエンジニア

フロントエンドエンジニア

バックエンドエンジニア

サーバーサイドエンジニア

モバイルエンジニア

SRE・インフラエンジニア

情報システム

データ・AI・機械学習エンジニア

エンジニアリングマネージャー

テックリード

プロジェクトマネージャー・ディレクター

プロダクトマネージャー

事業開発・経営企画

営業

マーケティング・プロモーション

企画・プロデュース

ゲーム企画・プロデュース

コンテンツ制作・編集

カスタマーサポート・運営

データ分析・ストラテジー

UI・UXデザイナー

Webデザイナー

2Dデザイナー・イラストレーター

デザインマネージャー

デザインリード

DMMプラットフォーム共通ナビゲーションが担う役割と課題

シェア

関連する求人

関連する記事

DMMプラットフォーム 共通ナビゲーションが担う役割と課題

シェア

関連する求人

関連する記事

DMMプラットフォーム共通ナビゲーションが担う役割と課題