はじめに
Ruby on Rails 7 + React で 個人開発した Web サービス、「KPI ツリーメーカー」をこのたびリリースしました。
KPI ツリー図の作成・数値シミュレーションをサクッと行うことができるサービスです。
Google アカウントがあれば無料ですぐに使えるので、ぜひお気軽に触ってみてもらえたら嬉しいです。
- サービス URL : https://kpi-tree.com/
- リポジトリ URL : https://github.com/peno022/kpi-tree-generator
簡単な自己紹介
新卒でシステム開発会社に入り、プロジェクトマネージャーを経て、現在はモバイルアプリや Web サービスのプロダクトマネージャーとして働いています。
仕事ではマネジメントが主になっていて自分で開発・実装する機会が少ないので、エンジニアリング経験をもっと積みたいなあと思い、FjordBootCamp という Rails の学習コミュニティに1年半ほど参加しています。
KPI ツリーメーカーの紹介
KPI ツリーメーカーとは
KPI ツリー図の作成・数値シミュレーションをサクッと行うことができる、無料の Web サービスです。
下記のような KPI ツリーを、ポチポチッとすぐに作ることができます。
- 目標設定等で数値シミュレーションが必要なとき
- 事業やキャンペーンの企画案をたくさん出して、それぞれの KPI を簡単に整理したいとき
など、手軽に KPI ツリーがほしい場面で便利です。
使い方
Google アカウントでサインアップする
ツリーを新規作成する
ツリー要素の追加や編集を行う
作成したツリー画像はダウンロードできます
作ろうと思った背景
サービス開発の理解を深めるために、個人でイチから実装したものを作りたい。でも何を作ろうか……🤔 となったときに、
あんまり壮大にならない「ちょっとしたツール系」のサービスがいいなあ、と考えました。
そこから、
に思い当たり、簡単に KPI ツリーを作成できて、数値をいじれて、画像化できるサービスがあれば嬉しいな！ ということで、KPI ツリーメーカーを作ることに決めました。
※ ボツになった案もいくつかあり、例えばそのうちの1つは「コンビニ新商品ウォッチャー」です。
コンビニスイーツ大好きマンの自分としては、各社コンビニチェーンをひとまとめにして、しかも商品カテゴリを絞って新商品をチェックできたら嬉しいな〜と考えたんですが、各コンビニの公式サイトを勝手にスクレイピングするのはマズそう……というわけでボツに。
利用技術
言語
- Ruby 3.1
- TypeScript 4.9
- Ruby on Rails 7.0
- React 18.2
- Tailwind CSS
- daisyUI
その他主なライブラリ
データベース
- PostgreSQL 15.3
テスト
- RSpec
- Jest
CI/CD
- GitHub Actions
開発はコンテナ (Docker Compose) 上で行い、リリースは Fly.io でビルドおよびデプロイしています。
取り組んでの感想
描画が大変
KPI ツリーの描画を自力で実装するのは大変そうだったので、React の描画系のライブラリを探しました。
その中から、
- ツリー形式のノードの描画ができる
- 継続的にメンテナンスされていそう
なものをピックアップし、試しにツリーを作成してみて一番イメージに近い描画ができた react-d3-tree を選びました。
props で各種オプション値を指定するだけで要素の間隔や方向をいい感じに設定できたり、ズームイン/ズームアウトも最初からできたりと、機能が充実していました。
指定の型でデータを渡すだけで、下記のような描画ができます。
ここから、ノードのサイズや色を変えたり、クリック時のアクションをつけたり、プロパティに応じてアイコンを表示するようにしたりとカスタマイズしていきました。
react-d3-tree はデフォルト機能が充実している一方で、ライブラリ側が用意している基本オプションから逸れたカスタマイズをしようと思うと、React も D3 も使うのが初めての私はなかなか苦戦しました。。
ツリーを表現するためのデータ変換と検索にひと苦労
例えば、下記のような親子関係のツリーを描画したいとします。
DB で下記のようにフラットな形で保存している状態から、
Node テーブル:
| id | parent_id |
|---|---|
| 1 | |
| 2 | 1 |
| 3 | 1 |
| 4 | 2 |
| 5 | 3 |
| 6 | 3 |
| 7 | 3 |
| 8 | 7 |
| 9 | 7 |
下記のような入れ子構造に変換して react-d3-tree に渡すことで、ツリー図を描画できます。
{ id: 1, children: [ { id: 2, children: [{id: 4}] }, { id: 3, children: [ {id: 5}, {id: 6}, { id: 7, children: [ {id: 8}, {id: 9} ] } ] } ] }
この変換には、 list-to-tree というライブラリを使いました。
また、ツリー図に対するユーザー操作が発生した場合は、この入れ子構造のデータに対して検索処理をしていきます。
例えば、ユーザーがツリー図のノードをクリックしたら、クリックしたノードとその兄弟ノードの色を変えるという機能があります。
その時、裏側では「クリックされた描画要素に対応するノードオブジェクトの id を取得し、その兄弟ノードを検索して isSelected プロパティを true にする」といったことをしています。これを自分で実装するには思いの外面倒で、tree-model というライブラリを利用することで楽に実装ができました。
リリースまで到達できてよかった
2、3ヶ月でリリースできるといいかな〜なんて当初は思っていたものの、結果的にはなんだかんだ半年ほどかかりました。
自身のモチベーションのみが原動力となる個人開発においては、結局のところ「諦めずにリリースまで到達すること」が一番大変なことなんじゃないかなと思います。
自分がぶつかったつらみと、その乗り越え方は以下のような感じでした。
- 疲れてたり、予定が入ったり、ついダラダラしたりで作業が進まなくてつらい。
- 生活リズムに作業時間を組み込む💪
- 平日1時間・休日4時間というノルマを決めました。
- 朝型の生活に切り替えた上で、平日出勤前の1時間・休日午前中4時間、は基本マストで作業する時間としていました。
- 生活リズムに作業時間を組み込む💪
- 仕事の繁忙期や、家族のライフイベントなどが重なり、作業時間の確保がどう頑張っても無理でつらい。
- 潔くあきらめて、開発のことはいったん忘れる💪
- エラーにハマったりして、時間をかけているのに開発進捗が出なくてつらい。
- 結果的に開発の進捗は全くなくても、机に向かっただけで今日は OK・進捗だった、と自分の気持ちを上げていく💪
半年かかったとはいえ、働きながらでもサービス1つリリースできるんだ、という成功体験になったなあと感じています。
机に向かう時間が生活リズムに組み込まれたのも、良い効果となりました。
リリースまで、と言いましたが、サービスはこれからも継続・改善していく所存です。
その他もろもろ
- GitHub Projects のカンバンが便利だった
- タスクは基本的に Issue 化し、GitHub Projects の Board Layout のビューでカンバン管理
- 「Issue をクローズしたら DONE のセクションに移動する」のようなワークフローも組めて楽でした
- GitHub で issue を作成したら自動で project に追加する方法 - ぺのめも
- CSS の苦手意識がだいぶなくなった
- 実現したいデザインを模索しながら複数のパターンを試す過程を通して、ある程度サクッとページにデザインを当てられるようになれた
- テストコードを書くのが大好きになった
- 利用ライブラリのバージョンを安心して上げられたり、ある修正が予期せぬところに影響していることに気付けたり、テストがある安心感が本当に良い
おわりに
「KPI ツリーメーカー」は、皆さまの KPI ツリーの作成・更新のちょっとした手間を削減できるサービスにできたと思っています。
お気軽に使ってみていただけますと嬉しいです！
