Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
社内の開発便利ツールを作った話 / サブカル業界Developers 勉強会Vol.6
Search
cateiru
March 01, 2024
0
470
社内の開発便利ツールを作った話 / サブカル業界Developers 勉強会Vol.6
cateiru
March 01, 2024
Tweet
Share
More Decks by cateiru
See All by cateiru
QUICについて調べた
cateiru
0
92
RepoSync
cateiru
0
31
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Documentation Writing (for coders)
carmenintech
66
4.5k
Making the Leap to Tech Lead
cromwellryan
133
9k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Optimizing for Happiness
mojombo
376
70k
We Have a Design System, Now What?
morganepeng
51
7.3k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Transcript
社内の開発便利ツールを 作った話 id:cateiru サブカル業界Developers 勉強会Vol.6 1
自己紹介 • @cateiru(かている) • 渡邊 悠人 • 株式会社はてな Webアプリケー ションエンジニア
• マンガメディア開発チームで GigaViewerを作っています • 2023年4月に新卒入社したので、 まだギリギリ”新卒1年目”です 2
自己紹介 • @cateiru(かている) • 渡邊 悠人 • 株式会社はてな Webアプリケー ションエンジニア
• マンガメディア開発チームで GigaViewerを作っています • 2023年4月に新卒入社したので、 まだギリギリ”新卒1年目”です 3
4 GigaViewerとは
GigaViewerとは • はてなが作っている漫画ビューアー • 16社、22サービスに導入されています • 詳しくは: https://hatena.co.jp/solutions/gigaviewer 5
GigaViewerとは 6 引用元: https://hatena.co.jp/solutions/gigaviewer
GigaViewerの実装 • マルチテナント構成 • 1つのGitリポジトリですべてのサービスを管 理 • 基本的にはPerlで、部分的にNext.jsも採用 7
GigaViewerには環境がた くさんある! 8
GigaViewerの環境 1/3 • 本番環境 • ステージング環境 ◦ 本番環境とほぼ同じ環境 ◦ 作品の入稿チェックなどにも使用
• 開発環境 ◦ 開発ブランチにマージされるとデプロイされる ◦ DBは専用のものにつながっている 9
GigaViewerの環境 2/3 • 本番DB開発環境 ◦ 開発ブランチにマージするとデプロイされる ◦ DBは本番の読み取り専用に接続される • ローカル環境
◦ localhostの環境 10
GigaViewerの環境 3/3 • ブランチごとの環境 ◦ 世間的には Deploy preview とか Preview
deployments とか言われている環境 ◦ ブランチごとに立てられる ◦ 設定することで本番の読み取り専用DBにも接続で きる 11
サービスごとにそれぞれ URLが存在する! 12
【再掲】GigaViewerとは 13 引用元: https://hatena.co.jp/solutions/gigaviewer
GigaViewerのサービスのURL • 22個のサービスごとにURLがある • 開発環境も同じでサービスごとに開発環境のURLが ある 14
GigaViewerのサービスのURL • 22個のサービスごとにURLがある • 開発環境も同じでサービスごとに開発環境のURLが ある → 22サービス × 5環境
= 110個のURLが存在! 15
GigaViewerのサービスのURL • さらに、ブランチごとの環境はブランチの数だけ存 在しているので実質無限に存在! • URLやホスト名の命名ルールなどは社内ドキュメン トに書いてあるが、毎回大量のページから探す必要 がある 16
開発時に辛い点 • 新しくチームに入ってきたメンバーが混乱しがち • エンジニア以外が混乱しがち 17
開発時に辛い点 • 新しくチームに入ってきたメンバーが混乱しがち • エンジニア以外が混乱しがち • エンジニアも混乱しがち 〇〇のサービスの動作確認をしたいけど、 △△の環境の〇〇のサービスのURLは 何だっけ……?
18
19 そこで
各URLをまとめたWebページを作った • 環境ごとのサービスの URL一覧を表示 • サービスごとの環境 URL一覧も表示可能 20
各URLをまとめたWebページを作った • 元々は個人的に使うため に作った • しかし、便利すぎたので 便利ツールとして社内で 公開することに 21
技術構成 • React + ViteのSPA構成 • UIは ChakraUI • 各環境のURLはソース内にハードコーディング
• ブランチごとの開発環境のみブランチ名をクエリパ ラメータに渡すことでURL一覧を生成できるように • GitHub Pagesでホスト 22
社内ツールはGitHub Pages • GitHub Enterprise Cloudを使っている場合、プラ イベートでPagesを公開することができる • 公開範囲はリポジトリの公開範囲と同じなので Internalとすると社内のメンバーのみにアクセス制限
を設けることができる 23
社内ツールはGitHub Pages • Settings -> Pages -> GitHub Pages visibility
から簡単に設 定可能 24
25 その他ちょっと便利な機能
できるだけURLで共有できるように • チェックボックスの状態 などは共有することが多 いためクエリパラメータ で状態を保存 26
• キーボードだけで操作し たい時があるので実装 • CSSinJS系のUIコン ポーネントを使っていた ため独自実装 コマンドパレット 27
ブランチごとの環境も対応 28 • ブランチごとの環境もブ ランチ名を設定するだけ で表示できる • また、このページから環 境をデプロイできるよう に
ブランチごとの環境のビルド 29 • とあるビルドツールではGETでジョブを投入するこ とができる • 「指定したブランチをデプロイ」にチェックを入れ ると新しいタブでこれが開く→ビルドされる • これにより、バックエンド無しで実装が可能に!
効率化されたのか 30 • 目的の環境にアクセスするまでの時間が体感1/4ほど に! ◦ 19秒→5秒に!(計測しました n=1) • 新しくチームに入ったメンバーへの説明にも使われ
ています!
効率化されたのか 31 • 目的の環境にアクセスするまでの時間が体感1/4ほど に! ◦ 19秒→5秒に!(計測しました n=1) • 新しくチームに入ったメンバーへの説明にも使われ
ています! https://github.com/7474/NantoNBai?tab=readme-ov-file
実際にアンケートもしてみた 32
嬉しかったこと 33 • チームのエンジニア、デザイナーの皆さんにも愛用 していただけてる! • チームメンバーからPRが飛んできて改善
34 これからも開発しやすくするための 改善を続けていきます!
35 ご清聴 ありがとうございました