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

DMM.comのインターンで管理画面書いてきた

どうも、管理画面芸人の鵜重です。インターンやバイト、研究（趣味）でなぜか管理画面を書くことが多かったので、今回のインターンからこう名乗るようにしました。
今回のインターンは２週間か〜、と思っていたら、祝日を２日も含んでいることがわかり実働８日間の記録です。それではどうぞ。

なぜDMM.comに行こうと思ったのか

メンターの方とイベントで話したのがきっかけでした。ちょうど、就活していくにあたって、フロント、バック、インフラ、プロダクトデザイン、ハード、ソフト等やってみたいことがたくさんあって決められらないと迷っていたところに「DMMはなんでもやっている」とお話しいただいたので、なんでもできそうな会社に行ってみようと思って応募しました。

コース選択は、ちょうど学校のeLearningシステムが使いにくいので作ってみようと思ってたところで、動画配信系ミドルウェアの知識など欲しいなということから「どきッ！？国内最大級動画配信サービスの根幹、動画配信基盤をいじくりまわすサマーインターン☆」に応募しました。

インターンプログラム詳細：https://dmm-corp.com/pdf/pages/entry/internship_2018_summer.pdf

業務内容

配属部署は動画配信事業部の配信基盤スクラムチームでした。基本的にメンターさんからオーダーを頂戴して、必要な情報を集めながら実装していきます。

オーダー

動画配信基盤用の「追加実装がしやすく、尚且イケてるUIなAdmin画面」というふわっとしたオーダーをメンターさんから頂戴しました。

詳細を詰めてみるとだいたいこんな感じのオーダーでした。

管理画面用にDBやアプリサーバを用意したくない
将来、権限管理をする
カッコイイUI
キャッシュ周りは開発者以外も利用する
他のAPIの管理画面も統合したい

技術選定・設計

技術選定にあたって、「イイ感じに、つくりやすく、付け足しやすい」という点を重視しました。また、アプリケーションサーバーの構築を不要とするために、静的生成は必須としました。

その結果、以下のようになりました。

Vuetify.js　ー　イイ感じの見た目
Nuxt.js　ー　作りやすいフレームワーク
OpenAPI　ー　APIが追加されてもルーチンワークで変更できる

さらに、Nuxtで静的生成してみたところ、各ページごとにディレクトリが生成されていることがわかったので、このディレクトリに.htaccessで制限をかければアクセス制限を実装できるだろうという目論見も持っていました。

設計面はVuexのアクションでAPIを叩いてストアに格納し、ゲッターでモデルに変換し、ページにマップするという感じです。

実装

今回お世話になった配信基盤チームの管理APIまわりは金沢事業所の方が作成されているので、執務エリアで常に接続しているテレビ会議システムで都度仕様や画面構成などを相談しながら実装を行いました。

１日目	ドキュメント読み込み、開発環境構築
２日目	APIスキーマ作成
３日目	VuexでAPIを叩くところを作成
４日目	API①、②のページ作成
５日目	API③のページ作成
６日目	リファクタリング
７日目	発表会、ドキュメント整備
８日目	ダッシュボード実装

実装していくうえで、心理的不安を減らすためにいろいろと考えてみました。例えば…

ちゃんとローディング表示を出す
APIの操作のステータスを通知する
画面をロックしない

とかですが、特に画面をロックしないところが大変でした。なんせ、本番APIにもなるとレコードが１万件を超えたりするもので、そうなると普段あまり意識してなかったAPIの結果からモデルを生成するところで時間を大幅に食い、画面をロックしていたわけです。モデルの生成も非同期にすることで解決しましたが、ここは普段個人で開発している時にはあまり出くわさない点でした。

管理画面はかなりイイ感じのデザインでイイ感じのUXになりました。

f:id:dmmlabotech:20181206145450p:plain