社内Tinder風Webアプリ「Maybee」を会社忘年会のイベント用に作った話

この記事はeureka Engineering Advent Calendar 2017 10日目の記事です。
9日目は山下さんさんのGolangのプロファイリングツール「pprofのWeb UI」がめちゃくちゃ便利なので使い方を紹介するでした。

はじめに

こんにちは！エンジニアの二川（@futabooo）です。
普段はAndroid開発がメインのネイティブエンジニアです。
しかし今日は、昨年の会社忘年会で作ったWebアプリケーションの「Maybee」について書いていこうと思います。

Maybeeとは

Maybeeを一言で説明すると社内のメンバーに対象をしぼったTinderです。
もう少し具体的に説明すると、カードUIで連続して表示される男女の写真を左右スワイプして、LIKEかNOPEを選択します。
男女がお互いにLIKEにスワイプした場合にマッチング成立となり、それぞれに通知が飛び、アプリ内でメッセージができるようになるのがTinderです。
これと同じことを社内のメンバーだけでできるようにしたアプリがMaybeeです。


実際に動かしている画面はこちらのような感じです。

Maybeeを作ろうと思った理由

Maybeeを作るきっかけは忘年会の幹事になったことでした。
有志で集められた幹事メンバーで行った催し物の打ち合わせの中で、恋愛に関わる何かが出来ると盛り上がりそうだと言う話から、アプリ作ってしまおう！！というノリと勢いだけでアプリ開発が決まりました。

Maybeeの構成

忘年会までの期間が限られておりスピードが必要だったためMaybeeはWebアプリとして開発しました。
サーバーサイドはRuby on Railsでフロントエンドは業務でも馴染みのあったAngularJSとTypeScriptを使いました。
Ruby on Railsでもテンプレートを使ってフロントの実装が可能ではありますが、APIとしてのRailsとViewとしてのAngularが良い！という謎のこだわりでこの構成にしました。サーバーは用意する手間を省くためにherokuを使って動かしていました。


開発にあたって、社内の人だけが使えるようにする必要があったので、今回は事前に従業員向けにアカウントを作っておいてパスワードを変更してもらオペレーションにしました。
また、セキュアな通信の実現にはlynndylanhurley/devise_token_authとlynndylanhurley/ng-token-authを使いました。


機能の要であるスワイプUIについてはgajus/angular-swingを使っています。
スワイプ中断したときにバウンドする処理がデフォでついていて、実装時に何も考えずによかったのはすごく助かりました。


画面全体のUIについてはangular/materialを使ってmaterialデザインにしました。
Androidエンジニアなのでmaterialデザインにしたかったのです。
ログイン画面がこんな感じです。エンジニアが考えたデザインです。

Maybeeを作ってみて思ったこと

Railsでの開発はgemが豊富で枯れてるものも多く、サクッと作りたい場合の選択肢としてはかなり良いなと思いました。
また開発にあたっては忘年会幹事メンバーとのコンセプト決めや開発ムービー作成などをして、まるでスタートアップのように濃い期間を過ごしていました。
そして限られた期間の中で価値を最大化するためにどうするのがいいのか？というところも学べた気がしています。

おわりに

社内Tinder風アプリ「Maybee」を作った話をまとめてみました。
開発中はモチベーションが高まりすぎて、エウレカのサービスである「Pairs」や「Couples」で使っているlvドメインを取得して、maybee.lvを使う準備までしていたのですが国レベルのドメインのために購入完了するまでの手続きが完了せずに、ドメイン取得ができたのは年があけてからとなってしまいましたorz

明日は香取さんです！