DMM.comの、一番深くておもしろいトコロ。

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

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

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

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

 

なぜ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まわりは金沢事業所の方が作成されているので、執務エリアで常に接続しているテレビ会議システムで都度仕様や画面構成などを相談しながら実装を行いました。

 

1日目

ドキュメント読み込み、開発環境構築

2日目

APIスキーマ作成

3日目

VuexでAPIを叩くところを作成

4日目

API①、②のページ作成

5日目

API③のページ作成

6日目

リファクタリング

7日目

発表会、ドキュメント整備

8日目

ダッシュボード実装

 

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

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

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

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

 

f:id:dmmlabotech:20181206145450p:plain

ダッシュボード

 

f:id:dmmlabotech:20181206145552p:plain

負荷分散ステータス

 

 

f:id:dmmlabotech:20181206145652p:plain

サーバーステータス

 

働いて思ったこととまとめ

10:00出社良い。学校に行くよりもゆったりとした朝を迎えられました。でも、8日間で実装するのは辛かったです。

動画配信基盤、20年もやってるといろいろ辛い部分もあるみたいですが、刷新を進めているところでかなりイケている印象を受けました。DMM.comのミソになっている部分にきちんと手をいれられている環境はステキだなと思います。

のびのびと働けて良かったです。仕様のすり合わせなども気軽に話せるチームで居心地良かったです。でも、真面目に働きすぎてしまって、もっと「いろいろやってる」環境を活かせば良かったと思ってます。テレビ用アプリ系とか。

あとは、目標にしていた動画配信周りのアーキテクチャや使っているミドルウェアなどは管理APIの仕様を把握する過程で全体的につかむことができて満足でした。

また、インターン修了の盾とインターン評価書がいただけて思い出に残ったのと、自分に対する客観的な評価をいただけたことで成長や自信に繋がったのが嬉しかったです。ぜひ、来年就活の後輩にも体験してほしいと思いました。

 

f:id:dmmlabotech:20181206150757j:plain

DMM.comいいところでした。2週間ありがとうございました!

(管理画面書きすぎて、しばらく普通のWeb書いててもなんとなく管理画面チックになったのは内緒のお話)

 

 

recruit.dmm-corp.com