社員名簿サービスの紹介と開発未経験マネージャー(40)の奮闘記

こちらは GMO Pepabo Managers Advent Calendar 2019 の16日目の記事です。

昨日は hideaki terai さんの「私流スライド作成5原則」でした。

こんにちは。minne でマネージャーをしている@keokenです。

私は2013年に新卒3期生エンジニア職としてペパボに入社しました。

配属以来、ずっと minne のWebアプリケーション開発に携わり、2019年1月からは minne のマネージャーとして主にプロダクト周りをみています。

今回はペパボの有志で作っている社員名簿サービスのご紹介と、最近開発メンバーとして加わった開発未経験マネージャーの奮闘記をお届けします。

社員名簿サービス『aboutP+』について

2018年のペパボお産合宿@acha(広報・イラスト担当), @tecchan(デザイナー) とともに「ペパボパートナー同士がもっとみんなと仲良くなるためのサービスを作りたい!」という思いから社員名簿サービス『aboutP+』を作りました。

Ruby on Rails で出来ていて、所属や経歴などのプロフィール情報や好きなもの・ハマっていることなどの趣味趣向を入力することができます。その他にも自分の特性を表したり、コミュニケーションを促進するためのコミュニティ機能があります(mixi のコミュニティ機能から着想)。

また、社内のパートナーだけが簡単に登録・アクセスできるように Slack の OAuth認証を利用しています。

ユーザ一覧ページ
多種多様なコミュニティがあります

開発未経験マネージャーの奮闘記

ここからがメインテーマです。

2019年11月某日、私のエンジニア時代の上長であり、現在は先輩マネージャーである @pplog さんから「Webサービス開発を経験したいので aboutP+ のコントリビューターになりたい!」とお話があり、開発メンバーに加わることになりました。

この時点の @pplog さんは数年前に Rails 4 時代の Rails Tutorial を1週、SQLの読み書きが少しできるといった具合です。ただ、持ち前の学習欲でGASの勉強をして業務の効率化をバシバシされているので特に心配はありませんでした。

こうして、私がコーチになり @pplog さんのエンジニア生活がスタートするのでした。

Twitterアカウント @hogemoge の @pplog さん

他己紹介機能を作るぞ

aboutP+ には自分を紹介する機能としてプロフィール入力、コミュニティ機能があります。

ただ、自己紹介が苦手な方もいるかと思うので、普段から一緒に仕事をしている周りのパートナーがその方を紹介できるような他己紹介機能を作ることにしました(mixi の「マイミクからの紹介」機能から着想)。

様々な検討を重ね、他のパートナーの特性を表すようなタグ付けとタグに対して複数人が +1 できる「キャラクタータグ」機能を作ることになりました。

目標は「12月末のペパボの年末総会&社員旅行までに完成させ、パートナーのみんなに使ってもらう」ことです。

開発フェーズは大きく分けて以下の3つです。

  • 1. 要件定義とテーブル設計をする
  • 2. CharacterTag を表示・登録・削除できるようにする
  • 3. CharacterTagVote を登録・削除できるようにする

1. 要件定義とテーブル設計をする

まずは要件をメンバーみんなで話し合って固めながら、テーブル設計をします。

考えたテーブルは character_tags, character_tag_votes の2つ。

あれこれ話し合いながら書いた @pplogさんのメモがつまった思い出のホワイトボード

疲れてプレスリリース画像の構成を考え始める@pplogさんとイラスト担当の@acha

2. CharacterTag を表示・登録・削除できるようにする

次にユーザが他のユーザにキャラクタータグ付けられるようにしていきます。

いきなりコード書いていくのは難易度が高いので、私がナビゲータ、@pplogさんがドライバとしてペアプロでコードを書いていきます。

また、完成までの道のりがイメージができるように事前に開発項目を洗い出し、項目の単位でPRを作成するようにします。主な開発項目は以下の通りです。

  • craete_table, add_index 等の migration ファイル作成
  • ルーティング設定
  • association 定義等のModel 作成
  • 入力フォームの View と Controller 作成
  • 作成されたキャラタグをプロフィール詳細に表示
  • action, Model に対しての制約や validation 追加

※ 本来はテストコードが必要ですが、私がテスト環境を整えられていないので今回はスキップ :bow:

migration ファイル作成のPRが開発ブランチにマージされ喜ぶ @pplog さん

休日も取り組んで試行錯誤している @pplog さん

キャラクタータグが表示されるようになって喜ぶ @pplog さん

3. CharacterTagVote を登録・削除できるようにする

続いて、キャラクタータグに対して「その通り」「いいね!」の意味を込めて+1 = vote をできるようにしていきます。

2.で一連の開発を経験したので今度からは @pplog さんが一人で進めて、わからなくなったら私がサポートする形で開発をしていきます。

主な開発項目は以下の通りです。

  • craete_table, add_index 等の migration ファイル作成
  • ルーティング設定
  • association 定義等のModel 作成
  • 入力フォームの View, Controller 作成
  • action, Model に対しての制約や validation 追加
  • プロフィール詳細に表示されているキャラタグの横に vote ユーザのアイコン表示

@pplog さんの復習メモ。 字がとても綺麗でまとめるのがお上手。

キャラクタータグに vote したユーザの名前が表示されるようになった時の様子

だいぶ出来上がってきました。

このあとはデザイナーの@tecchanと合流して見た目を整えたり、JavaScriptでタグ作成や vote できるようにしていきます。

おわりに

今回は社員名簿『aboutP+』の紹介と開発未経験マネージャーの奮闘記をお届けしました。

ここまで開発を経験してみた感想を@pplogさんに聞いてみました。

開発経験のない私ですが、根気よく開発に付き合ってくれるコーチはじめ、aboutP+チームのみんなと部活みたいなノリで日々楽しく取り組んでいます。はやくみんなに使ってほしいので、残りもがんばります! (40歳・会社員)

結構詰め込んで開発を進めているので大変だったかなーと思っていましたが、元気いっぱいで安心しました!(笑)