サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2>DMM.comのインターンで管理画面書いてきた</h2>

<img alt="" height="100" src="https://image.dmm-corp.com/zx7sfh7hr0erufwpy8sed0r95uz5" width="100" />

どうも、管理画面芸人の鵜重です。インターンやバイト、研究（趣味）でなぜか管理画面を書くことが多かったので、今回のインターンからこう名乗るようにしました。 
今回のインターンは２週間か〜、と思っていたら、祝日を２日も含んでいることがわかり実働８日間の記録です。それではどうぞ。

&nbsp;

<h2>なぜDMM.comに行こうと思ったのか</h2>

メンターの方とイベントで話したのがきっかけでした。ちょうど、就活していくにあたって、フロント、バック、インフラ、プロダクトデザイン、ハード、ソフト等やってみたいことがたくさんあって決められらないと迷っていたところに「DMMはなんでもやっている」とお話しいただいたので、なんでもできそうな会社に行ってみようと思って応募しました。

コース選択は、ちょうど学校のeLearningシステムが使いにくいので作ってみようと思ってたところで、動画配信系ミドルウェアの知識など欲しいなということから「どきッ！？国内最大級動画配信サービスの根幹、動画配信基盤をいじくりまわすサマーインターン☆」に応募しました。

インターンプログラム詳細：<a href="https://dmm-corp.com/pdf/pages/entry/internship_2018_summer.pdf" target="_blank">https://dmm-corp.com/pdf/pages/entry/internship_2018_summer.pdf</a>

<h2> 
業務内容</h2>

配属部署は動画配信事業部の配信基盤スクラムチームでした。基本的にメンターさんからオーダーを頂戴して、必要な情報を集めながら実装していきます。

<h3>オーダー</h3>

動画配信基盤用の「追加実装がしやすく、尚且イケてるUIなAdmin画面」というふわっとしたオーダーをメンターさんから頂戴しました。

詳細を詰めてみるとだいたいこんな感じのオーダーでした。

<ul>
	<li>管理画面用にDBやアプリサーバを用意したくない</li>
	<li>将来、権限管理をする</li>
	<li>カッコイイUI</li>
	<li>キャッシュ周りは開発者以外も利用する</li>
	<li>他のAPIの管理画面も統合したい</li>
</ul>

<h3>技術選定・設計</h3>

技術選定にあたって、「イイ感じに、つくりやすく、付け足しやすい」という点を重視しました。また、アプリケーションサーバーの構築を不要とするために、静的生成は必須としました。

その結果、以下のようになりました。

<ul>
	<li>Vuetify.js　ー　イイ感じの見た目</li>
	<li>Nuxt.js　ー　作りやすいフレームワーク</li>
	<li>OpenAPI　ー　APIが追加されてもルーチンワークで変更できる</li>
</ul>

&nbsp;

さらに、Nuxtで静的生成してみたところ、各ページごとにディレクトリが生成されていることがわかったので、このディレクトリに.htaccessで制限をかければアクセス制限を実装できるだろうという目論見も持っていました。

設計面はVuexのアクションでAPIを叩いてストアに格納し、ゲッターでモデルに変換し、ページにマップするという感じです。

<h3>実装</h3>

今回お世話になった配信基盤チームの管理APIまわりは金沢事業所の方が作成されているので、執務エリアで常に接続しているテレビ会議システムで都度仕様や画面構成などを相談しながら実装を行いました。

&nbsp;

<table>
	<tbody>
		<tr>
			<td>
			１日目
			</td>
			<td>
			ドキュメント読み込み、開発環境構築
			</td>
		</tr>
		<tr>
			<td>
			２日目
			</td>
			<td>
			APIスキーマ作成
			</td>
		</tr>
		<tr>
			<td>
			３日目
			</td>
			<td>
			VuexでAPIを叩くところを作成
			</td>
		</tr>
		<tr>
			<td>
			４日目
			</td>
			<td>
			API①、②のページ作成
			</td>
		</tr>
		<tr>
			<td>
			５日目
			</td>
			<td>
			API③のページ作成
			</td>
		</tr>
		<tr>
			<td>
			６日目
			</td>
			<td>
			リファクタリング
			</td>
		</tr>
		<tr>
			<td>
			７日目
			</td>
			<td>
			発表会、ドキュメント整備
			</td>
		</tr>
		<tr>
			<td>
			８日目
			</td>
			<td>
			ダッシュボード実装
			</td>
		</tr>
	</tbody>
</table>

&nbsp;

実装していくうえで、心理的不安を減らすためにいろいろと考えてみました。例えば&hellip;

<ul>
	<li>ちゃんとローディング表示を出す</li>
	<li>APIの操作のステータスを通知する</li>
	<li>画面をロックしない</li>
</ul>

とかですが、特に画面をロックしないところが大変でした。なんせ、本番APIにもなるとレコードが１万件を超えたりするもので、そうなると普段あまり意識してなかったAPIの結果からモデルを生成するところで時間を大幅に食い、画面をロックしていたわけです。モデルの生成も非同期にすることで解決しましたが、ここは普段個人で開発している時にはあまり出くわさない点でした。

管理画面はかなりイイ感じのデザインでイイ感じのUXになりました。

<img alt="f:id:dmmlabotech:20181206145450p:plain" height="375" src="https://image.dmm-corp.com/bgxqsfqboduau5e5ws2t4e3nzt21" width="1000" />

ダッシュボード

&nbsp;

&nbsp;

<img alt="f:id:dmmlabotech:20181206145552p:plain" height="574" src="https://image.dmm-corp.com/0316er71tvfkavtisgzyejbg5uad" width="1000" />

負荷分散ステータス

<figure title="負荷分散ステータス">
&nbsp;

&nbsp;
</figure>

<img alt="f:id:dmmlabotech:20181206145652p:plain" height="618" src="https://image.dmm-corp.com/mv7ts50btyt806jebiqwe1pmupnk" width="1000" /> 
&nbsp;サーバーステータス

<figure title="サーバーステータス">
<figcaption>&nbsp;</figcaption>
</figure>

&nbsp;

<h2>働いて思ったこととまとめ</h2>

10:00出社良い。学校に行くよりもゆったりとした朝を迎えられました。でも、８日間で実装するのは辛かったです。

動画配信基盤、20年もやってるといろいろ辛い部分もあるみたいですが、刷新を進めているところでかなりイケている印象を受けました。DMM.comのミソになっている部分にきちんと手をいれられている環境はステキだなと思います。

のびのびと働けて良かったです。仕様のすり合わせなども気軽に話せるチームで居心地良かったです。でも、真面目に働きすぎてしまって、もっと「いろいろやってる」環境を活かせば良かったと思ってます。テレビ用アプリ系とか。

あとは、目標にしていた動画配信周りのアーキテクチャや使っているミドルウェアなどは管理APIの仕様を把握する過程で全体的につかむことができて満足でした。

また、インターン修了の盾とインターン評価書がいただけて思い出に残ったのと、自分に対する客観的な評価をいただけたことで成長や自信に繋がったのが嬉しかったです。ぜひ、来年就活の後輩にも体験してほしいと思いました。

<img alt="f:id:dmmlabotech:20181206150757j:plain" height="576" src="https://image.dmm-corp.com/56kaodx29o5tx9ayiyxc0yt7l7x8" width="1000" />

DMM.comいいところでした。２週間ありがとうございました！

（管理画面書きすぎて、しばらく普通のWeb書いててもなんとなく管理画面チックになったのは内緒のお話）

&nbsp;

<cite><a href="https://dmm-corp.com/recruit/" target="_blank">DMM Group｜採用</a></cite>

インターン

動画配信基盤用のAdmin画面作成インターン

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

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMM Factory

DMM FILMS

ぷらさぷ ～＋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

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

社会インフラ

アミューズメント

ダイバーシティ

同人

サーバサイド

バックエンド

フロントエンド

ネットワーク

セキュリティ

ITインフラ

配信基盤

ペイメント

Android

データベース

ビッグデータ

データ分析

機械学習（ML）

MLOps

VR開発

フルスタック

プロトタイピング

グラフィックデザイン

イラスト作成

3DCG

モーショングラフィック

動画配信基盤用のAdmin画面作成インターン

シェア

関連する記事