社内の開発便利ツールを作った話 / サブカル業界Developers 勉強会Vol.6

Transcript

1. 社内の開発便利ツールを 作った話 id:cateiru サブカル業界Developers 勉強会Vol.6 1
2. 自己紹介 • @cateiru（かている） • 渡邊 悠人 • 株式会社はてな Webアプリケー ションエンジニア • マンガメディア開発チームで GigaViewerを作っています • 2023年4月に新卒入社したので、 まだギリギリ”新卒1年目”です 2
3. 自己紹介 • @cateiru（かている） • 渡邊 悠人 • 株式会社はてな Webアプリケー ションエンジニア • マンガメディア開発チームで GigaViewerを作っています • 2023年4月に新卒入社したので、 まだギリギリ”新卒1年目”です 3
4. 4 GigaViewerとは
5. GigaViewerとは • はてなが作っている漫画ビューアー • 16社、22サービスに導入されています • 詳しくは: https://hatena.co.jp/solutions/gigaviewer 5
6. GigaViewerとは 6 引用元: https://hatena.co.jp/solutions/gigaviewer
7. GigaViewerの実装 • マルチテナント構成 • 1つのGitリポジトリですべてのサービスを管 理 • 基本的にはPerlで、部分的にNext.jsも採用 7
8. GigaViewerには環境がた くさんある！ 8
9. GigaViewerの環境 1/3 • 本番環境 • ステージング環境 ◦ 本番環境とほぼ同じ環境 ◦ 作品の入稿チェックなどにも使用 • 開発環境 ◦ 開発ブランチにマージされるとデプロイされる ◦ DBは専用のものにつながっている 9
10. GigaViewerの環境 2/3 • 本番DB開発環境 ◦ 開発ブランチにマージするとデプロイされる ◦ DBは本番の読み取り専用に接続される • ローカル環境 ◦ localhostの環境 10
11. GigaViewerの環境 3/3 • ブランチごとの環境 ◦ 世間的には Deploy preview とか Preview deployments とか言われている環境 ◦ ブランチごとに立てられる ◦ 設定することで本番の読み取り専用DBにも接続で きる 11
12. サービスごとにそれぞれ URLが存在する！ 12
13. 【再掲】GigaViewerとは 13 引用元: https://hatena.co.jp/solutions/gigaviewer
14. GigaViewerのサービスのURL • 22個のサービスごとにURLがある • 開発環境も同じでサービスごとに開発環境のURLが ある 14
15. GigaViewerのサービスのURL • 22個のサービスごとにURLがある • 開発環境も同じでサービスごとに開発環境のURLが ある → 22サービス × 5環境 = 110個のURLが存在！ 15
16. GigaViewerのサービスのURL • さらに、ブランチごとの環境はブランチの数だけ存 在しているので実質無限に存在！ • URLやホスト名の命名ルールなどは社内ドキュメン トに書いてあるが、毎回大量のページから探す必要 がある 16
17. 開発時に辛い点 • 新しくチームに入ってきたメンバーが混乱しがち • エンジニア以外が混乱しがち 17
18. 開発時に辛い点 • 新しくチームに入ってきたメンバーが混乱しがち • エンジニア以外が混乱しがち • エンジニアも混乱しがち 〇〇のサービスの動作確認をしたいけど、 △△の環境の〇〇のサービスのURLは 何だっけ……？ 18
19. 19 そこで
20. 各URLをまとめたWebページを作った • 環境ごとのサービスの URL一覧を表示 • サービスごとの環境 URL一覧も表示可能 20
21. 各URLをまとめたWebページを作った • 元々は個人的に使うため に作った • しかし、便利すぎたので 便利ツールとして社内で 公開することに 21
22. 技術構成 • React + ViteのSPA構成 • UIは ChakraUI • 各環境のURLはソース内にハードコーディング • ブランチごとの開発環境のみブランチ名をクエリパ ラメータに渡すことでURL一覧を生成できるように • GitHub Pagesでホスト 22
23. 社内ツールはGitHub Pages • GitHub Enterprise Cloudを使っている場合、プラ イベートでPagesを公開することができる • 公開範囲はリポジトリの公開範囲と同じなので Internalとすると社内のメンバーのみにアクセス制限 を設けることができる 23
24. 社内ツールはGitHub Pages • Settings -> Pages -> GitHub Pages visibility から簡単に設 定可能 24
25. 25 その他ちょっと便利な機能
26. できるだけURLで共有できるように • チェックボックスの状態 などは共有することが多 いためクエリパラメータ で状態を保存 26
27. • キーボードだけで操作し たい時があるので実装 • CSSinJS系のUIコン ポーネントを使っていた ため独自実装 コマンドパレット 27
28. ブランチごとの環境も対応 28 • ブランチごとの環境もブ ランチ名を設定するだけ で表示できる • また、このページから環 境をデプロイできるよう に
29. ブランチごとの環境のビルド 29 • とあるビルドツールではGETでジョブを投入するこ とができる • 「指定したブランチをデプロイ」にチェックを入れ ると新しいタブでこれが開く→ビルドされる • これにより、バックエンド無しで実装が可能に！
30. 効率化されたのか 30 • 目的の環境にアクセスするまでの時間が体感1/4ほど に！ ◦ 19秒→5秒に！（計測しました n=1） • 新しくチームに入ったメンバーへの説明にも使われ ています！
31. 効率化されたのか 31 • 目的の環境にアクセスするまでの時間が体感1/4ほど に！ ◦ 19秒→5秒に！（計測しました n=1） • 新しくチームに入ったメンバーへの説明にも使われ ています！ https://github.com/7474/NantoNBai?tab=readme-ov-file
32. 実際にアンケートもしてみた 32
33. 嬉しかったこと 33 • チームのエンジニア、デザイナーの皆さんにも愛用 していただけてる！ • チームメンバーからPRが飛んできて改善
34. 34 これからも開発しやすくするための 改善を続けていきます！
35. 35 ご清聴 ありがとうございました