niconico 改善インターンを終えて

ドワンゴ 技術コミュニケーション室の小枝です。

2018年度のエンジニア向けインターンシップは、niconico改善インターン、研究開発インターン、ドワンゴ.LT for Studentの3つのテーマで開催しました。

本記事ではniconico改善インターンにて学生さんに取り組んでいただいたことを簡単にご紹介いたします。

ドワンゴエンジニアインターンシップ2018

第1クールメンバー 第2クールメンバー

インターンシップ概要

2018年は、niconicoにおいて意見交換会や改善報告会を大切にした年であったことから、インターンシップのテーマも、既存のniconicoサービスの改善をテーマにし募集し、就業型のインターンとして実施しました。期間、メンバーは次の通りです。

  • 第1クール(8月中旬~):yoshimuraさん、sh4869さん、ndmxjpさん、pakutomaさんの4名
  • 第2クール(9月上旬~):Mizuneさん、nwtgckさんの2名

インターンシップの成果

実験放送に追っかけ再生機能を実装

yoshimuraさん

yoshimuraさんには実験放送チームのWebフロントエンジニアとして、実験放送プレーヤー上での追っかけ再生(タイムシフトの倍速再生)にチャレンジしていただきました。

再生速度

追っかけ再生機能を求めるユーザーは多かったものの、配信サーバーチームとの連携が必要な上、技術的にも難しい課題でした。

まずはvideoタグの再生速度のパラメータ playbackRate の値を2倍に、そしてバックエンドの配信システムに動画ファイルをリクエストする速度を2倍にしていただきました。 これでひとまずChromeでは動きました、……しかしそう簡単には問屋が卸しません。
他のサポート対象ブラウザで動かない、再生中に動画の生合成が取れなくなる、コメントが正常に流れないなど、テストすればするだけ新しい問題が見つかってしまいました。

この時点で残り期間が1週間と数日でした。インターン期間中になんとかひと段落はつけたく、試行錯誤の末に再生速度を2倍のみに絞るなど”選択と集中”を行い、問題の単純化を計りました。 対応範囲を限定したことにより解決すべき問題は絞られ、無事インターン最終日には実験放送上で試験運用(仮リリース)することができました。(10月4日に本番リリース済み

追っかけ再生UI

Akasic Engineを利用したコメント描画の試作

sh4869さん(GitHub

sh4869さんもyoshimuraさんと同じく実験放送チームのWebフロントエンジニアとして、Akasic Engineを使用した、コメント描画の試作にチャレンジしていただきました。

Akashic Engine は、ニコキャスや実験放送に使われているHTML5インタラクティブコンテンツフレームワークです。

コメント機能はniconicoの生命線であるが故に、複雑な仕様や細かい調整技法がたくさん詰まっています。 またコメントの描画ロジックは衝突判定や速度管理、動的な表示件数の制御など、ある種のゲーム開発に似た思考、技術が必要になるという、正しい挙動を理解するだけでも一苦労という極めて難しい課題でしたが、初週にはプロトタイプ版を作成いただき、最終週にはプロダクション版の実装と性能検証まで進めることができました。

性能検証
コメントフォント生成時の性能検証

性能検証段階では動作環境やコメントの多さや種類、CPU使用率やメモリ使用率など、様々な観点の比較が必要でした。 そもそも3週間前にはプロトタイプすら存在していなかった課題なので、チームにとっては十分すぎる助けになりました。

コメント描画比較(左: 旧 / 右: 新)

新サービスリリース前のラストスパート

ndmxjpさん(GitHub)

ndmxjpさんはiOS版nicocasアプリのリリースを目前に控えたnicocas iOSチームに配属されました。 リリース直前のため新しい機能追加タスクなどは少なく、品質検証やテスト追加などの品質向上系のタスクが多くなります。ndmxjpさんには、レコメンド機能や連続再生周りのテストの拡充を担当いただきました。

レコメンド機能周りのテスト
レコメンド機能

テストと聞くと地味で退屈な作業と思う方は多いかもしれませんが、テストはどのプロダクトでも必要になる重要な工程です。またテストの書き方を知っているか否かで、設計やコードの品質も大きく変わってきます。 テストを書くには、まずコードがTestableに(テストしやすく)設計されていることが重要です。簡単な例としてはDIパターンやFactory Methodパターンなどを使うことにより、モック(テスト用のダミーインスタンス)を注入可能な設計にすることができます。
今回はTestableに書かれている部分とそうでない部分の両方があったため、Testableな設計の大切さを実務を通して体験していただきました。

またテストを書く際に重要なこととして、テストの可視性があります。 機能が複雑なほど、そしてテストのカバレッジ(網羅性)が高いほど、テストの量は膨大になります。膨大なテストを書くと網羅性を担保しにくくなり、担保している仕様も解りづらくなります。 今回担当していただいた機能も十分に複雑だったため、テストコードを読めば仕様がわかるような、読んで理解できるテストを心がけていただきました。

ちょうどインターン期間中にリリースが行われました。 リリース直後にユーザーさんからの嬉しいコメントをいただけるなど、Web企業ならではの貴重な瞬間に立ち会って頂くことができました。

ユーザーからの声

niconico Androidアプリ総合トップ画面のリニューアル

pakutomaさん (GitHub/Twitter)

pakutomaさんにはniconico Androidアプリチームでの開発を担当いただきました。 Androidアプリチームでは、niconico Androidアプリ 総合トップ画面の大規模なリニューアルを計画していましたので、pakutomaさんにもリニューアルに向けたいくつかのタスクにチャレンジしていただきました。

“本日のおすすめ”へのデザイン適用

表示する要素が多く複雑なデザインで、出てくる疑問点などをデザイナーさんに確認しながら開発を進めていただきました。また動作仕様も複雑で、用意していたデザインと動作の整合性が取れなくなることもあり、ディレクターの方とも何度も調整を重ねながらの開発にも取り組んでいただきました。

本日のおすすめ枠 レイアウト画面
本日のおすすめ枠 レイアウト画面

Pull to refreshの実装

いわゆる「画面を引っ張って更新」を行う機能です。実装自体は単純でしたが、他機能のエラー処理や初回読み込み時との整合性が取れないといったことやまたマージした際に、同時に追加されていたヘッダー関連の変更との不整合が起こるといったことも発生しました。
今回のインターンでは1人での開発ではなく、実際のチームにジョインしての開発であったので、チームの社員も一緒になって修正する等、チームならではの開発推進を体験いただきました。

pull to refresh ビフォーアフター
Pull to Refresh ビフォーアフター

最終日の成果発表では、「デイリーミーティングやGitのマージ作業などでチーム開発を体感できた」「Slackが浸透しておりチーム内の連携がスムーズだった」「チーム作業のスピード感が体感できた」「某アニメのような雰囲気の環境だった」「自分が普段使っているアプリの開発に携われて嬉しかった」といった感想を発表いただき、1か月間で良い就業経験をしていただけたのではないかと思います。

niconico iOSアプリ総合トップ画面のリニューアル

Mizuneさん(GitHub)

Mizuneさんにはniconico iOSアプリチームでiOSアプリの開発に挑戦していただきました。 iOSアプリチームもAndroidチームと同じく、総合トップ画面のリニューアルを計画しており、pakutomaさんと同じくiOS版の本日のおすすめ枠のリニューアルのタスクを担当いただきました。

本日のおすすめ枠レイアウト
本日のおすすめ枠 レイアウトデザイン

諸事情により第2週目からインターン開始となる逆境に加え、Mizuneさんの技術領域的にはiOSよりもAndroid方面の方が強く、iOSの開発経験は薄いなかでiOSの開発に取り組んでいただきましたが、スマートフォンエンジニアとしての嗅覚と持ち前の吸収力によって、最終日には試験環境で動く状態まで作り上げていただきました。
最終日の成果報告会では、「充実したドキュメントやテスト、手厚いレビュー体制などの後押しを受けて、学習しながら着実に開発を進められた」「日々自分が使っているアプリの開発に携われた」「ドワンゴという会社を中に入って知ることができた」などが良い体験になったと発表していただきました。

本日のおすすめ枠完成形
本日のおすすめ枠 完成形

nicocasギフト機能の改良

nwtgckさん(GitHub

nwtgckさんはニコニ広告チームに配属されました。 ニコニ広告チームはニコニ広告の開発/運用を始め、nicocasのギフト機能の開発担当チームとなっています。 今回nwtgckさんには、ギフト機能に在庫管理、自動入荷の機能を追加するという課題にチャレンジしていただきました。

従来のギフト機能は購入数制限がなかったことから、安価なギフトが大量購入されて画面が見えなくなる、使われる品目に偏りがある際には単調でつまらなくなる、という問題を抱えていました。 この問題を解決するために、各ギフトに在庫と自動入荷の概念を導入することになりました。

ギフト購入/入荷ロジック
ギフト購入/入荷ロジック

しかしいざ設計してみると、在庫管理では再入荷と購入のタイミングで不整合が発生する可能性があり、自動入荷では各放送でギフト単位にスケジューラを動かすとシステムに負荷がかかるという懸念がありました。 試行錯誤を重ね、在庫はRedis上で売上数として管理、自動入荷は時間経過による売上数データの失効を利用する形で設計し直したことで、前述の問題を解決することができました。

ギフト売り切れ状態
ギフト売り切れ状態

ユーザーさんのポイントを扱うデリケートな機能であり、かつ並列処理的な思考やパフォーマンスの考慮が必要という難しい課題でしたが、無事にインターン期間内に開発は終わり、ちょうど最終日の成果発表会の直前に機能リリースが完了しました。

まとめ

今回は改善という、今年のniconicoが掲げる大きなテーマを取り入れて、就業型のインターンを実施する運びになりました。 インターン後の感想として、自分が欲しかった機能を自分で作ることができて嬉しかったという声も多かったです。 新規サービス開発のような華々しさはないかもしれませんが、ユーザーさんのためを思って開発し、ユーザーさんからダイレクトに反応が返ってくる喜びを体験していただけたのではないでしょうか。

nicocafe