Geeks Who Drink Fukuoka - 202508

Transcript

1. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 苦がありゃ楽に すればいいじゃない Wednesday, August 27th, 2025 at 6:00 PM JST Geeks Who Drink in Fukuoka ~わたしの『好き』と『これまで』~ 株式会社ヌーラボ 田村 亮弥
2. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 7月にヌーラボへ入社 🐣 前職はフロントエンド領域のエンジニアリングマネージャー。 フロントエンドまわりの仕様、ベストプラクティス、ライブラリの変遷を 追いかけるのが楽しい。 最近は CSS コンテナクエリー に慣れようと必死。 2 田村 亮弥 株式会社ヌーラボ (Nulab Inc.) サービス開発部 lollipop.onl ↗
3. Copyright Nulab Inc. All Rights Reserved. わたしの『好き』💘 目の前の「苦」を 技術で「楽」にすること 3
4. Copyright Nulab Inc. All Rights Reserved. 『これまで』のはじまり 🥰 Backlog への 一括課題登録 この体験と仕組みが、わたしの原点 4 手作業の「苦」が、自動化の「楽」に変わった Google スプレッドシートを使って、Backlogに課題を一括登録しよう – Backlog ヘルプセンター ↗
5. Copyright Nulab Inc. All Rights Reserved. 🥇 自分が見たい・使いたいものを手に入れる 🐾 自分好みにカスタマイズ 🥈 便利を共有する 🐾 他の人にも使ってもらう 🥉 もっと手軽にする 🐾 仕組みとして取り入れたり、組織的に活用したりできるようにする 5 『これまで』の歩み 🐈‍⬛ UserScript / UserCSS / ブックマークレット ドキュメント / ブログ記事 / ブラウザ拡張機能 Google Apps Script / Slack Workflows
6. Copyright Nulab Inc. All Rights Reserved. フロントエンドの『好き』が そのまま活かせる 6 「楽」にするための武器 🪃
7. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 7 ここから紹介する事例は、すべて HTML / CSS / JavaScript といったフロントエンドの知識で実現できます
8. Copyright Nulab Inc. All Rights Reserved. - 毎日使う画面の小さな「苦」を、自分好みにカスタマイズ - 画面を壊さずにスマートなコードで機能を追加するパズル感も「楽しい」 8 『好き』の活用 💭：UserScript / UserCSS 😩 大量のセレクトボックスの選択が面倒くさい... 😋 セレクトボックスをラジオボタンに置き換えて効率的に選択 Case: Google Forms 😩 リンク先のタイトルをコピーして Markdown にするのが手間... 😋 タイトルとURLから Markdown のリンクをコピーするブックマークレット Case: ブログ記事 😩 Pull Request に CI ジョブの結果がコメントされて見づらい... 😋 最新の CI ジョブからのコメント以外を非表示にするチェックボックスを追加 Case: Backlog Git 表示しているページのタイトルをコピーするブックマークレット ↗
9. Copyright Nulab Inc. All Rights Reserved. - 自分の作った「楽」を他の人にも使ってもらう「楽しさ」 9 『好き』の活用 💭：ブラウザ拡張機能 😩 サイトに設置されている SNS シェアボタンが X 向けしかない... 😋 X のシェアURLから Bluesky にリダイレクトさせる Case: X2B Chrome Web Store ↗ 😩 Backlog でも GitHub のようにいろいろなファイルアイコンを使いたい... 😋 ファイルアイコンライブラリのアイコンを Backlog Git で表示させる Case: File Icons for Backlog Git Chrome Web Store ↗ 😩 Backlog 向けに自作している UserScript を普及させたい... 😋 ほかの人にも自分が作った UserScript を使ってもらえる Case: Backlog Power-Ups Chrome Web Store ↗
10. Copyright Nulab Inc. All Rights Reserved. 10
11. Copyright Nulab Inc. All Rights Reserved. - 申請や周知といった決まり事を強制するときの「苦」 - ミスが減ったりコミュニケーションコストが下がって「楽」 11 『好き』の活用 💭：Slack Workflow 😩 プロジェクト内の質問で毎回前提を確認してて非効率的... 😋 フォームで期限や必要な情報を提示してスムーズにやりとり Case: 案件に関する問い合わせ 😩 アラートを複数人で対応してしまって効率が悪い... 😋 対応を始めたメンバーがボタンを押せるようにした Case: アラート対応 😩 リリース時の周知が複数チャンネルに渡って大変... 😋 ワークフローを起動したら必要なチャンネルに自動的に通知 Case: リリース通知
12. Copyright Nulab Inc. All Rights Reserved. - 運用・ルールに関する「苦」を、仕組みとして「楽」にできる - Google Workspaces の情報をソースに「楽」ができる幅が広い 12 『好き』の活用 💭：Google Apps Script 😩 招待されたカレンダーの予定が何がなにやらわからない... 😋 含まれるキーワードで面談や定例などの色を自動的に設定 Case: Google Calendar 😩 スプレッドシートで管理されている文言データの取り込みが大変... 😋 文言データを JSON としてコピーするダイアログを実装 Case: Google Sheets 😩 会議室の MTG ルームの空き状況がわかりづらい... 😋 空き状況を一覧化する Web アプリを実装 Case: Google Calendar / Web Apps
13. Copyright Nulab Inc. All Rights Reserved. Ads: ビルド不要！ Google Apps Script のウェブアプリを Vue.js と Tailwind CSS で実装しよう #ヌーラボブログリレー2025夏 ↗ 🔍 Zenn (zenn.dev) で「ヌーラボ」と検索！ 13
14. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 14 身の回りの「苦」は『好き』を見つけるチャンス それはそれとして、 フロントエンドの知識はめっちゃ便利