新卒研修の５日間で雑談専用のビデオチャットツールを作った話

カヤックアドベントカレンダーの15日目を担当します、今年の４月からフロントエンドエンジニアとしてカヤックに入社したbobです！

www.kayac.com

昨日は、原宿系エンジニアこと hsm_hx による めざせ！ゆめかわ原宿系エンジニア：入門編 でした！！新卒同期なのですが、まだ５さいなのでちょっとおじさんには何を言っているかわからなかったです笑

---

今年はコロナで本当に大変でしたね汗

新卒の私たちは、新人研修がほぼフルリモートでスタートということもあり、例年とはイレギュラーな研修内容となりました！

そんな中で同期とフルリモートで作成したビデオチャットツールのお話を書かせていただきます！

👇👇👇👇👇 つくったビデオチャットツールはこちらです 👇👇👇👇👇

雑談足りてますか？
リモートワークでも効率的に雑談できる「雑談専用のコミュニケーションツール」つくっちゃいました！

これは、面白法人カヤック社員がつくりたいものをつくって発表する月例社内イベント「つくっていいとも!」で紹介されたデモ映像。
2020年新入社員が5日くらいでつくりました👀 pic.twitter.com/y3XMzBusdz

— 面白法人カヤック (@kayac_inc) June 4, 2020

👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆

---

目次

---

2020年のカヤックの新卒研修

コロナで世の中が大変になっていた４月、カヤックでも感染のリスクを考慮し大部分はリモートで研修が行われました👀

エンジニアの研修は、オフラインを想定して考えられたカリキュラムも一部含まれていたため、大きな変更がありました。

そのため終盤は 「５年後も仕事で使いたくなるようなツールを作成する」 というハッカソン的な内容になりました。

しかもチームでの作成が基本ということで、まだ実際にしっかりとしたコミュニケーションをとったことがない同期と作成するなど、今考えるとだいぶハードルの高いことをしています笑

つくるものを決めるまで

上のtwitterの動画をチェックしていただければおおよその概要が伝わるかと思いますが、作成したビデオチャットの使い方は下のような感じです👇

つくったアプリの説明

あっ、お伝えし忘れていましたが、今回作成したアプリ名は「combomb」と言います💣

こんな感じで、サクッと雑談するためのビデオチャットツールを作りました！

今回の記事では、どうやってアイデアが出てきたのか、技術的にどのような仕組みだったのかについて書いていきます。

アイデア決定

まずはアイデア出し。どんなものが良さそうかなということで、とにかくいろいろなアイデアを出してみました！🙌

いろいろなアイデアがある中で「リモートワークによるコミュニケーション不足」という部分に着目しました。

研修などである程度コミュニケーションは取れるけれども、ちょっとした雑談レベルでのコミュニケーションはないよね 🤔 というところから、気軽にコミュニケーションを取るためのアプリを作ろうとなりました。

リーンスタートアップ的なやつ

完成系をみてしまうと「最初からビデオチャットをつくりだした」ように見えてしまいますが、実際にはその前に「ビデオチャットかSlack内でのチャットベース」のどちらにするべきかという命題が実はありました。

実際にどっちも作ってみて「さぁどっちがいいか！」なんて試してたら時間が足りません😇

そこで俗にいうリーンスタートアップという手法を参考に、ビデオチャットかテキストチャットのどっちがいいか試してみました。

ja.wikipedia.org

リーンスタートアップとは、起業マネジメント理論の一つで平たく言えば「実際にユーザーが使って価値があるものか無駄なく調べる」という方法です。

実際にはGoogle Meetを使って５分雑談とテキストベースで５分雑談をやってみるという方法で実験してみました。やってみた結果、「コミュニケーションは非同期でサクサク進まないとかなりしんどい」ということがわかりました！！

この時のコツは、手をいきなり動かすのではなく、代替できるものでサクッと作ろうとしているものが効果的かをチェックしてみることです👀

これをしたおかげで、どんなUXで何を作ろうかという部分であまり迷いがなくなりました🙌

チームのコミュニケーション

ということでつくるものが決まりました！

今回は、同期の一人が一緒に参加してくれて二人での開発になりました！

しかし、実際にオフラインでは会ったことがないという状況、、、

どのようにコミュニケーションを取るか、どのように進捗を管理するのかについても今回の課題の中で問われていたと思います👀

僕たちは「１日の始まりと終わりに１０分は話す」ということと「進捗はGoogle Sheetsで管理する」という風にしました。

Spread Sheetによるタスク管理表

タスク管理表はこんな感じです👆

GitHubとかではなく、spread sheetを採用した理由は、二人ともあまり触ったことのない技術を使うため、どんなリスクや見えていなかった実装に臨機応変に対応するためです！

TrelloやGitHubのissueだと、新しくタスクを追加する重さがあるので、もっとカジュアルに使えるスプレッドシートを使用しましたがこれはかなり良い判断だったと思います🙌

技術的な話

ここからやっと技術的な話に入ります！！だいぶ前にやったのでかなり記憶はあやふやですが頑張ります😇

• ビデオチャット部分の技術

今回の実装を行うにあたって一番の肝になるのはもちろんどうやってビデオチャットを成立させるか。

自分で１からこの仕組み作ってたら 😇 なので、今回はNTT Communications様が提供している「SkyWay」を使用しました。今年はP2Pに関する技術が大盛り上がりでしたね！！

webrtc.ecl.ntt.com

SkyWayのビデオチャット部分の複雑な実装はほとんどなくなり、集中したい作業に時間をさけました！！

• フロント側の実装

生のJSを書くのはかなりしんどかったので、普段使い慣れているVueを使用しました！フロントは私bobが担当です！

ちなみに、SPA構成にしてFirebase Hostingを使用したかったので、Nuxtではなくvue-cliを今回は使用しました。Nuxtでもいけるとは思いますが、フレームワーク自体には今回はそんなに拘っていません🙇‍♂️

SkyWayの実装自体もフロント側でハンドリングできるので、かなり楽でした！！

• サーバー側の実装

チャットルームのIDや何人がそのルームに入ろうとしているか監視する必要があるので、サーバー側の仕組みが必要です！（一部屋の上限が４人だったりなど）

サーバー側の実装は同期にお願いしました🙌

環境構築の手間などを省きたかったので、今回はFirebaseのReal Time DatabaseとCloud Functionsを使用しています。いやほんとにFirebase便利ですね🔥

---

以上の３つの要素を組み合わせて、実装しました！そのシステム図は下のようになります！

これより細かい話は長すぎるので省略します🙏 （書くの疲れた）

まとめ

振り返るとめっちゃ長文になってしまいましたが、以上が雑談専用ビデオチャットツールを作った経緯とその実装方法でした！

実際に使ってみると、５分という程よい長さと最後に徐々に消えていくという体験が好評でした😋

明日は @nakayama-daisuke さんによるシンタックスハイライトを自作するお話です！！自分でシンタックスハイライトを作ろうという発想がなかったのでとても楽しみです👀

それでは良い年末を！！

めざせ！ゆめかわ原宿系エンジニア：入門編

(。ì _ í。) < この記事は 𝕂𝔸𝕐𝔸ℂ 𝔸𝕕𝕧𝕖𝕟𝕥 ℂ𝕒𝕝𝕖𝕟𝕕𝕒𝕣 𝟚𝟘𝟚𝟘 14日目の記事です

---

こんにちは！技術部20新卒の hsm_hx です。社内ではがはくちゃん(5さい)と呼ばれています。

まちのコインチームでサーバとフロント反復横跳びエンジニアとしてゆるふわ鎌倉ライフを満喫させていただいております。

さて，突然ですがおそらくこの記事を読んでいる方の8割ぐらいはエンジニアの方ではないか(全く根拠のない推論)と思うのですが，みなさんはこのような会話をしたことがあるでしょうか？

女の子「仕事は何やってるの？」

おれ「IT系の会社でエンジニアを……」

女の子「あぁ〜（笑）たしかになんかわかる〜エンジニアっぽい（笑）」

もしかして：　オタク

正直わたしは学生時代何度「エンジニアっぽい（笑）」「高専生？あ〜，納得（笑）」と言われたかわかりません。

(※わたしは心底精神が曲がっているのでこれを皮肉と受け取りがちですが，一概にこれらの表現を悪く言っているつもりではありませんしオタクっぽいエンジニアはそれはそれでかっこいいと思います。みんなもシュタインズ・ゲートで学んだよな)

さて，「エンジニアっぽい」と言わせないために一番手っ取り早い方法は「エンジニアっぽい」から一番遠い見た目になることです。

みなさんは「エンジニアっぽい」から一番遠い見た目，と言われてどんな見た目を想像したでしょうか？

まあ色々な意見があると思いますが(菅田将暉，とか，杉咲花，とか)，わたしの出した答えはこれです。

量産型オタク女子

量産型オタクとは，

「量産型女子」「量産型オタク」とはライブ会場やオタクの聖地などでよく見かける典型的なガーリー系服装をした女の子のオタクを指します。*1

ジャニーズを始めとする男性アイドルや歌い手，VTuber，また女性向けゲームのイベントなどに行くとたくさんいます。大抵みんなEvelynやAnk Rouge，Secret Honeyの洋服を着て，Maison de FLEURのリボントートバッグを持っています。インスタにサンリオピューロランドで撮った自撮りを載せています。

よくイメージが掴めんぞ，という方はこの辺を眺めていただくと良いと思います。

こんな人たち見て「エンジニアリング，してそう！」とはわたしはまあ少なくとも初見では思わないと思います。

ザ・スマホネイティブ。キーボード配列？なにそれ？プリクラ？snowでよくない？笑

長々と前置きをしましたが，要するにわたしが言いたいのは我々に足りないのは「量産型女子」要素だということです。

エンジニアである我々が普段一番肌身離さず使っているものを量産型風にすれば，「エンジニアっぽい（笑）」は卒業できるのです。

『エンジニアである我々が普段一番肌身離さず使っているもの』とは何でしょうか？量産型女子になりたいと言えば大抵の人がまずINGNIやDear My Loveの洋服を勧めてくるでしょう。

しかし本当に変えるべきは衣服でしょうか？

世は大リモート時代！画面共有に映り込むTweetDeckのタブ！そして無骨なコンソール！

我々が変えるべきはそう，開発環境なのです。

↓ということで，こちらが完成した量産型開発環境になります↓

量産型Slack

量産型TweetDeck

量産型コンソール

こんなに可愛い開発環境なら竹下通りのカフェでタピオカ啜りながらJKが使っていてもサンリオピューロランドでJDの自撮りに写り込んでいても違和感ゼロ！エンジニアらしさ皆無！もう「エンジニアっぽい」なんて言わせない！

申し訳程度に解説をしておくと，色彩センスが壊滅的なわたしは1からカラースキームを作るなんてことした瞬間に何もかも崩壊するのがわかりきっていたのでSlackの Sweet Treat というテーマを元にしています。

TweetDeckは BetterTweetDeck のカスタムCSS，コンソールは iTerm2 × zsh × powerlevel9k です。

iTerm2のカラースキームもいじっちゃってるので .zshrc を載せて「これを使えばあなたも2秒で原宿のJKに！」というわけには行かないですが(本当は完成させて配布とかまでしたかった，零式攻略に忙しくてちょっと間に合わなかった)(最悪)，

POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX=''
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX='(•̀ᴗ•́ ) \uF460\uF460\uF460  '
POWERLEVEL9K_LEFT_SEGMENT_SEPARATOR="\uE0B4"
POWERLEVEL9K_RIGHT_SEGMENT_SEPARATOR="\uE0B6"

こんな感じにしてます。かわいいは作れる！

本当はGitHubのカスタムCSS書いたりMacBookに手作り量産型カバーを付けたりしてサンリオピューロランドで自撮りしたかったんですが時間がなくて断念しました。悲しい。

さて，長くなりましたがこれでわたしもゆめかわ原宿系エンジニアです。もうエンジニアを名乗るのも怖くない。

大急ぎで書いた記事ですがネタ枠狙った結果まあまあ他に無さそうな内容の記事になったのでよかったかな。楽しんでいただけていれば嬉しいです。

ちなみにどうでもいいですがわたしは別に量産型ファッションは大して好きじゃないです(着ないだけで，可愛いとは思うけど)。

もうクリスマスまでのアドベントカレンダーも半分を切りましたが今年のクリスマスは世間に逆に張り一人で大量の焼きししゃもでも食べようかなと思っています！メリークリスマス！

ちなみに明日は同じく20卒技術部のbobさんが新卒研修について書いてくれる予定だそうです:eyes:

おたのしみに( ⁎ᵕᴗᵕ⁎ )

*1:量産型オタクとは？意味や服装・おすすめブランドを徹底解説 - Lafary