はじめに
はじめまして！24卒新入社員(小林、崎下、簀河原、髙橋、本間、前田、大泉、齊藤)です！
私たちは新卒開発研修にて1on1管理アプリ「サシログ」を開発しました！
開発にあたって、24卒は開発チーム(小林、崎下、簀河原、髙橋、本間、前田)とインフラチーム(大泉、齊藤)に分かれて作業しました。
今回の技術ブログでは、開発チームの髙橋とインフラチームの大泉が1on1管理アプリ「サシログ」についてご紹介していきます。
開発研修について
マイクロアドの新卒エンジニアは、例年、各々のチーム配属前に数か月間の開発研修があり、今年度は5月から6月末まで実施されました。
開発研修では新卒エンジニアたちが1つとなって、お題のプロダクトを作成します。
キックオフミーティングで要望を聞き、具体的な仕様書を起こすところからリリースまで行います。
サーバ準備やFirewall(FW)設定などのインフラ部分については、事前に要件が渡されており、インフラチームが構築しました。
1on1管理アプリの開発の背景
マイクロアドの社員は定期的に上長や先輩社員との1on1を行い、内容を別のアプリケーションで管理していました。
しかし、さまざまな理由によりそのアプリケーションの使用をやめることになりました。
そのため代替のアプリケーションが必要になり、今回の開発研修で作成することになりました。
開発チームでの開発の流れ
開発研修は次のような流れで進みました。 なお、インフラチームとは完全に分かれてアプリ側の開発を以下の流れで行いました。(インフラ部分については後述します。)
- キックオフミーティング
- 仕様書及びテストケースの作成
- 基本設計
- 実装
- テスト
- リリース
まず始めに、開発の背景・要望及びスケジュール等を共有するためのキックオフミーティングがあり、 そこで新卒エンジニアたちは初めて自分たちが作るプロダクトの概要を知りました。
次に新卒内で仕様書及びテストケースを作成しました。
キックオフミーティングで聞いた内容をアプリの各画面ごとに仕様書としてまとめ、またその仕様を満たしていることを確認できるテストケースを作成しました！
新卒エンジニア達はこういった経験が少なかったので、先輩社員に何度も細かい確認をしながら進めていました。
設計まで終わればいよいよ実装です!
実装はフロントチームとバックエンドチームとに分かれて行いました。
チーム開発が初めて、アプリ開発も初めてといったメンバーがいる中で特に大きく詰まることがなく、順調に進みました。
実装後のテストも特に問題は起きず、リリースまで辿り着きました。
基本設計
基本設計として画面設計・画面遷移図・ER図の3つを作成しました。
いずれにおいても叩き台を作ってから新卒内あるいは先輩社員方と話し合いつつブラッシュアップしていきました。
画面設計
仕様書及びテストケースを基に必要なUIを並べるところから始めました。何度も議論を重ねて下記の図のようになりました。
その後開発を進めていく過程で様々な変更もあり、最終的には下記のような画面でリリースしました。
画面遷移図
1on1管理アプリではユーザーごと、シートの項目ごとの権限の問題がやや複雑で、作業中には書いている途中の内容でエラーページに飛ばされると消えてしまうといった問題もありました。
そこで各条件に対してどのようにページを遷移させるかの整理を下記の画面遷移図で行いました。
ER図
作成の流れとしては要件を満たす第3正規形のER図をやや削る形で実装しやすい形に修正しました。
修正の具体的な内容としてはサロゲートキー及びENUM型の使用、ややカラムが少ないテーブルは他のテーブルに入れてしまうといった対応です。
主要技術
使用した言語、フレームワーク及びデータベースは下記の図の通りです。
いずれも社内での知見が多く、過去のプロダクトを参考にしたり、先輩方に相談をする上で利点が多いため採用しました。
フロントエンドのアプリケーションについてはatomic designに近い設計方針で作成し、バックエンドのアプリケーションについては3層構造で作成しました。
サシログの機能の概要
1on1管理アプリのメインの機能は1on1の内容を記入するシートの管理です。
シートに書くことができる項目は、1on1の内容、メモ及びフィードバックです。
1on1を受ける側と実施する側で編集、閲覧できる項目が異なります。
例えば、メモは受ける側と実施する側でそれぞれありますが、自分のメモしか見ることができないようになっています。
また、シートを作成する際にテンプレートの管理権限があるユーザーのみが操作することができる機能もあります。
各1on1を実施するごとにテンプレートからシートを作成し、記入をして上長からフィードバックをもらうというのが一連の流れになります。
そして、過去のシートも保存されているので、一覧画面から絞り込みや文字列検索をすることができます。
こだわりの機能
リッチテキストエディタ
Tiptapというライブラリを使用して作成しました。太字や箇条書き、リンクなどリッチテキストエディタとしての一通りの機能が使用できるようになっており、Markdown記法での入力も可能です。また入力欄上部のメニューはライブラリにある機能では足りなかったため自作しました。 Tiptapを使用したプロダクトが社内にはなかったので、今回のサシログが今後Tiptapを使用する際の参考実装になりそうです。
定期保存、定期更新
シートの入力・閲覧ページでは複数のユーザーが同時に編集する可能性もあります。
他のユーザーが編集していることに気づかず上書きしてしまったり、違う情報を見ながら1on1を進めてしまったりするのを防ぐ必要があります。
そのため、シートの画面を開いている間、定期的にAPIを叩いて差分の確認と変更内容を保存し、相手側で差分があった場合は更新するように実装しました。
Jenkins
JenkinsはリポジトリにPRをマージした際に自動でbuildを行います。developブランチにマージした際は開発環境用のDockerイメージでbuildします。masterブランチにマージした際は本番環境用のDockerイメージでbuildします。またbuildを行う際にスタイルチェックと自動テストとを実行します。
ユニットテスト
バックエンドでは3層のうちアプリケーション層及びデータ層の全てのクラス及び関数にユニットテストを実装しました。
ライブラリはJUnitを使用しました。コマンド1つで全てのAPIのメインロジックをテストすることができます。
開発研修後は社内の別の部署に管理が移ります。そこで保守運用をしていく中でデグレの確認や品質の維持に貢献してくれます。またJenkinsでの自動実行の実装も予定されています。
ここまでが開発チームで取り組んだ開発内容です。 アプリをデプロイするためのインフラ部分については、下記で説明します！
インフラチームの構築の流れ
1on1管理アプリを開発するにあたって、サーバ構築の部分をインフラチームが担当しました。
インフラチームは、開発チームから事前に提示された要件に従ってサーバを構築しました。
構築するサーバの要件(開発側の要望)
- DBを参照できるようにすること
- Dockerを利用できること
- 外部からアクセスできること
その他、サーバのFQDNやサービス名・ホスト名を付ける依頼が開発チームからきました。
インフラチームでは下記の図に沿って、環境構築しました。
今回、上記の要件を取り入れるためにインフラチームでは Google Cloud、Ansible、CloudDNS(CDNetworks)を利用してサーバを構築しました。
Google Cloudを利用したサーバ構築
まず始めに、Google CloudのVMインスタンスを利用してサーバを構築しました。
Google Cloudで行ったインスタンス設定のログを残すため、コード管理ツールとしてTerraformを利用しました。
Google Cloudのインスタンス設定では、大きく分けて4つの設定をしました。
インスタンス自体の設定
インスタンスの設定は下記の通りです。- マシンタイプ：e2-standard-2 (vCPU:2, Memory:8GB)
- OS：Ubuntu-2204-jammy-v20240614
- ストレージ：40GB SSD
FW (Firewall) 設定
FW設定では、Ingress(外部からインスタンス)とEgress(インスタンスから外部)のルールを定義します。
接続先ポートとIPアドレスをホワイトリスト方式で許可しています。
Google Cloudでは、Egressのデフォルトは許可ですが、今回はルールを設定してデフォルト遮断に変更しております。
これにより、外部のサーバを明示的に許可し、開発側の「DBを参照できるようにする」要件を満たしました。外部IPアドレスの設定
インスタンスにstatic addressを設定しました。
これにより、外部IPアドレスの予約(静的IP)をして、シャットダウンしてもIPアドレスに影響が出ないようにします。共有VPCを利用したサブネットの設定
すでにオンプレミス環境と接続された共有VPCがあるため、その共有VPCにサブネットを新規に作成してインスタンスで利用するよう定義しました。
サシログはマイクロアドの社員情報を参照するので、VPN経由で社内ネットワークのDBに接続できるよう設定します。
Ansibleを利用した設定の適用
Ansibleでは、Google Cloud上に構築したインスタンスに対して5つの設定をしました。
- 共通設定
監視用メトリクスを収集するためcorednsに登録する設定、カーネルパラメータの設定、アプリケーション実行用ユーザの作成、サシログサーバの時刻設定などを行います。 - Dockerインストール
開発側からのDocker利用依頼に対応するため、グループ変数のymlファイルでは、pythonのSDKとDockerのインストールを記述します。 - Nginxインストール
サシログでNginxを利用できるように指定します。サシログは社内システムでアクセスは頻繁にないので、デイリーでログローテーションをし、1年分のログを残す設定を入れます。 - TLS通信の設定
セッションのキャッシュをクライアント側で暗号化して保持する設定をします。 - SSL証明書の格納
通信に利用するSSL証明書を格納する設定をします。
上記をプレイブックとして用意し、サシログサーバに適用しました。
DNS設定
DNSには、CDNetworks社のCloudDNSを使用しました。
CloudDNSでの作業としては、サシログサーバのAレコードの追加とSOAレコードの更新をし、digコマンドでレコードが正常に更新されていることを確認してからプロダクション環境に反映しました。
苦労した点
ログイン
ログイン機能の実装にはSpring Securityを使用しました。去年の開発研修の実装を参考に実装を進めたはずが意図通り動かず、非常に苦戦しました。
今後のアプリ開発において少しでも楽になるよう、詰まったところとそれについての対応をドキュメントにして残す予定です。
権限判定
上述した通り、1on1の内容がプライバシーに配慮する必要があるもので、サシログでは権限の問題が少し複雑です。
したがって、ほとんどのAPIでこのリクエストに対してログインユーザーが権限を持っているかどうかの判定が必要でした。
こちらの権限の有無についても複数の条件判定が必要だったので、権限判定の実装だけで大幅な実装量の増加とロジックの複雑化が起きていました。
工夫らしい工夫は特にありませんでしたが、権限判定のロジックをうまく切り出すなどはしていたのである程度の工数を抑えることはできていました！
Google Cloudを利用したサーバ構築
様々なエラーの対処に苦戦しました。エラーを解消するにあたって、改めてドキュメントを読むことの大切さを学びました！
リリース後も開発側の要望に合わせて、構築したサーバの設定をカスタマイズしていく必要がありそうです。
Ansibleを利用した設定の適用
プレイブック実行時にDockerなどをインストールできないエラーが出て苦戦しました。 GCEインスタンスからデータセンター(オンプレ環境)へのEgressの通信でDockerイメージへのアクセスを許可するFWルールの設定が必要でした。
終わってから気が付いたこと
マネジメントコスト
研修終了後の先輩のコメントで「開発チームは6人で、それなりにマネジメントコストがかかってくる人数のはずではあったが、うまくコミュニケーションをとってタスクを回していた。」というコメントがありました。
誰かがリーダーをやっていたわけでもなかったのですが、確かにうまくコミュニケーションは取れていたので、コミュニケーションエラーのようなこともほとんど起きませんでした。
同期だけで開発したということもあり、まだぼんやりとした段階の疑問でも頻繁に議論をしていたような気がします。
またお互いが今何のタスクをしているのか、その内容は何かを把握することに努めていました。
もちろんレアケースではありなかなか難しいですが、コミュニケーションをとることの重要性を実感することができました！
実装で詰まらなかった
仕様書やテストの作成といった、要件定義、基本設計といった上流工程の作業は事前の想定通り、時間が掛かりました。
新卒はみんな自走力が高く、先輩への相談をする際も問題点及び原因の明確化や仮説を立てるといったようなことが事前に行われていたので技術的に詰まって先輩方を巻き込んで大惨事…といったことが起きませんでした。
事前に見積もられていたスケジュールから大幅に前倒しながら進めていました！
おわりに
一言でまとめてしまうとかなりうまくいった楽しい開発研修でした！
また、楽しいながらも学びの多い開発研修でもありました。
特に技術的な面というよりも効率的なタスクの進め方やコミュニケーションの大切さといった、タスクを進める上で役にたつ汎用的な能力が少し身につきました。
そして、こういう感じでタスクを進めたから効率良かった、この件に関しては早めにコミュニケーションをとっておいたからうまく進められた、といった成功体験を積むことができたのも大きかったです。
研修を無事に完了させることができたのは、先輩方の手厚いサポートも大きかったです。本当にありがとうございました。
研修終了後、新卒はそれぞれのユニットに配属となり、そのユニットでの業務を進めていくようになります。
研修で学んだことを活かして各ユニットで活躍できるように新卒一同頑張っていきます！
24卒新卒研修の記事は他にもあるので、是非ご一読ください。
新卒エンジニア絶賛採用中
マイクロアドでは技術への探究心があり、最新の技術・動向について積極的に学び活かす意欲を持った仲間を募集しています！また新卒採用では、インフラエンジニア、サーバサイド、機械学習エンジニアの職種で募集しています！ 気になった方は以下からご応募ください！
