個人開発を高速化するために、Gatsby × Electron で構成された開発支援ツール「DevKitBase」を作成しました。
この記事では、使用技術・セットアップ・実装機能の概要を紹介します。
DevKitBaseとは？
DevKitBase は、モダンなWeb技術をベースにしたデスクトップ開発支援ツールです。
| 分類 | 内容 |
|---|---|
| 開発スタック | Gatsby（React）, Electron, TypeScript |
| UI | Bootstrap 5 + React Bootstrap + Bootstrap Icons D3.js |
| 用途 | ToDo管理・タイムトラッキング・設計ドキュメントの視覚化など |
| 特徴 | ダークモード対応・ローカルストレージ保存・グラフ描画あり |
本アプリは、すべてのデータをローカルストレージに保存する構成のため、インターネット接続不要のスタンドアローンアプリとして動作します。
PluntUMLとJavaScriptライセンスチェッカーはオンラインでの動作を想定しており、オフラインでは動作しません
全データのエクスポート機能も実装したのでapp版で作ったデータをweb版にインポートするみたいな使い方もできるようになりました。ただのJSONファイルに過ぎないのでgit管理もお手の物です。
DevKitBase の目的は「個人開発者の生産性を最大化すること」です。
設計思想
僕のお気に入りのソフトにObsidianがあります。できるだけ機能が被らないように設計することで併用して使えるように設計しました。
DevKitBaseは、Obsidianのように自由な情報の書き留めやリンクによる知識の構築に強みを持つツールとは異なり、より構造的・視覚的な作業補助にフォーカスしています。PlantUMLビジュアライザやマインドマップ、曼荼羅チャート、5W1H分析、さらにはi18n JSONエディタやディレクトリ構成図作成支援 todoといった機能群は、Obsidianにはない実務特化型のツールとして開発されました。
また、Markdown形式での出力機能を可能な限りサポートすることで、DevKitBaseで作成したデータをそのままObsidianに取り込んだり、反対にObsidianでまとめたアイデアをDevKitBase側で可視化・構造化することも容易です。
この設計思想により、DevKitBaseは「知的作業のハブ」としてObsidianと相互補完的な関係を築くことができます。自由と構造、アイデアと設計、記述と可視化。両者を使い分けることで、個人開発や創作活動の可能性はさらに広がると思います。
実装済みの機能一覧（詳細）
ホーム画面
- アプリ全体のナビゲーションを提供。
ヘッダーのハンバーガーメニューを展開するとサイドドロワーのナビゲーションが展開されます。
ガントチャート
- 作業項目を時間軸で可視化。
- D3.jsによるインタラクティブなチャート表示。
- 作業計画の全体把握に最適。
ディレクトリ構成図作成支援ツール
- ツリー形式でディレクトリ構造を入力・表示。
- Markdown形式でダウンロード可能。
- 作成したディレクトリ構成図からファイル・フォルダ自動生成ZIP DL機能実装
タイムマネージャー
- 作業時間・休憩時間を切り替えて計測。
- ローカルストレージに記録し、円グラフで可視化。
- ポモドーロタイマー機能も搭載。
マークダウンメモ
- シンプルなMarkdown風エディタ。
- プレビューは非搭載
- 自動保存機能付きで編集中の内容を維持。
マインドマップ
- テキストベースのノードを親子関係で登録。
- D3.jsで階層構造を視覚的に描画。
- 保存・削除・リセット可能。
- ローカルストレージで状態保持。
i18n翻訳用JSON作成支援ツール エディタ
- 翻訳用JSONを左右に並べて編集・比較。
-
jsonc-parserによる構文解析、Prettierによる整形に対応。 - React Ace を使ったハイライト付きエディタを採用。
- 構造をコピー
- 構造を比較
- 値を抽出
- ダウンロード
- リセット機能を搭載
PlantUML ビジュアライザ
- PlantUMLスニペットを入力してPNG化。
-
@startuml～@endumlをそのまま描画可能。 - よく使うテンプレートから挿入もできる。
ダイスロール
- 6つの目から1つをランダム抽選。
- 何かに迷ったときに代わりに決断する用
問い合わせ
- Googleフォームによる問い合わせ機能
曼荼羅チャート
- JSON保存
- JSON読み込み
- リセット
5W1H
- What（何が？）
- Why（なぜ？）
- When（いつ？）
- Where（どこで？）
- Who（誰が？）
- How（どのように？）
設定
- JSONとして全てのデータを保存 手元に保存できます
- 保存したデータJSONを読み込む
- データをすべて削除機能
ToDo関連機能
すべてのToDo機能は自由に設定できる4連カラムUIで構成されています。
タイトルごとにタスクを分類・管理することで、視覚的な優先度と進行状況の把握がしやすくなっています。あとソート機能が実装されているので並び替えも自由にできます。個別にDL機能もあるのでご活用ください(MarkDown形式)
todoをカンマ区切りの文字列で複数に分割して登録する機能を実装しました ver3.1.0
通常ToDo（Basic ToDo）
- 一般的なToDoリスト機能。
- タスクの追加・完了・削除・並べ替えに対応。
時間軸ToDo（ToDo Time）
- 時間単位で分類してタスクを登録・管理。
- 日・週・月・年ごとにタスクを分類して登録できる。
SWOT分析 todo
- STRENGTH（強み）
- WEAKNESS（弱み）
- OPPORTUNITY（機会）
- THREAT（脅威）
本 todo
- 欲しい本
- 読んだ本
- 読んでる本
- 買った本などを登録する
学習 todo
- 学びたいこと
- 学んだこと
- 学んでいる事などを登録する
要件定義 ToDo
- 開発工程の「要件定義フェーズ」に特化したToDo管理。
- 機能要求やユーザーストーリーの洗い出しに最適。
基本設計 ToDo
- 設計段階でのタスク（画面設計・データ設計など）を管理。
詳細設計 ToDo
- 実装前の具体的な処理・ロジック設計用タスクを分類。
実装 ToDo
- コーディング・レビュー・修正などの実装作業ToDo。
テスト ToDo
- 単体テスト・結合テスト・不具合修正などの工程タスク。
ビルド・配布 ToDo
- アプリのビルド・署名・インストーラ作成などの作業。
運用・保守 ToDo
- リリース後のメンテナンスやアップデート、問い合わせ対応タスク。
使用技術スタック
フレームワーク & 言語
- Gatsby
- React
- TypeScript
- Electron
UI & スタイリング
- Bootstrap 5
- Bootstrap Icons
- React Bootstrap
エディタ・フォーマット
- Ace Editor
- jsonc-parser
- react-json-pretty
グラフ & ビジュアライズ
- D3.js
- PlantUML Encoder
ユーティリティ類
- Sortable.js
- Prettier
- replace-in-file
- json5
デプロイ
- Netlify
セットアップ方法
# クローンして移動
git clone https://github.com/tatsuoNakano/DevKitBase
cd devkitbase
# 依存パッケージをインストール
npm install
# Gatsby ビルド → path 修正 → Electron用 dist にコピー
npm run build
# Electron アプリのビルド（NSIS, DMG, AppImageなど）
npx electron-builder
# 開発モードで起動（Gatsby + Electron 同時起動）
npm run dev
リポジトリ
- ライセンス: MIT
Windowsデスクトップアプリ ダウンロードURL
-
現在の最新verはver3.1.0
-
フリーウェアです ご自由にお使いください Windows版のみ配布しております。インストーラーをダウンロードして解凍してインストールしてお使いください Windowsの警告が出ますが無視してください。
-
Electronはマルチプラットフォームに対応しています。一応MacBookは持っておりますので要望の声が多ければOSX版にも対応しようかなとは考えております。Linux版も同様です。
web上での公開URL
GatsbyJSで作ってるので当たり前ですが,web上で公開もできちゃいます。Netlifyにデプロイしたものがこちらです。
どこの馬の骨が作ったかもわからんソフトをインストールするのが嫌な人はweb版をご利用ください
プライバシーポリシー
DevKitBase（以下、本ソフトウェア）は、MITライセンスのもとにオープンソースソフトウェア（OSS）として配布されており、完全に無料で利用可能なフリーウェアです。
-
アナリティクス・トラッキングについて
本ソフトウェアは、Google Analytics、Mixpanel、その他のトラッキング・アナリティクスツールを一切使用しておりません。 ユーザーの操作、環境情報、個人情報を収集・送信する仕組みは組み込まれていません。 -
個人情報の取り扱い
本ソフトウェアは、インストールおよび使用にあたってユーザーの個人情報を取得することはありません。 -
サポートについて
本ソフトウェアは、個人開発者によって提供されているものであり、公式なサポート対応は行っておりません。 動作保証やバグ修正に関しても、必ずしも対応をお約束するものではありません。 -
機能追加のご要望
本ソフトウェアに対する機能追加のご要望やフィードバックがございましたら、アプリ内の「問い合わせフォーム」よりお知らせください。 可能な範囲で、今後の開発の参考とさせていただきます。 -
免責事項
本ソフトウェアの使用により生じたいかなる損害についても、開発者は一切の責任を負いません。 すべてのユーザーは自己責任において本ソフトウェアをご利用ください。
おわりに
DevKitBase は、個人開発者が一人でプロジェクト全体を効率的に進行するための支援ツールです。
Electron × Gatsby の構成に興味のある方、ToDoや設計管理を一元化したい方におすすめです。
もし興味を持っていただけたら、スターやフィードバック,コメントいただけると励みになります。
お仕事のご依頼やご支援につきましては、メールまたはアプリ内のお問い合わせ機能よりご連絡いただけますと幸いです。
追記
現在i18n用Json編集機能の強化ヘッダーに現在居る位置を表示する機能UIの微妙に統一されていないデザインを統一する修正メモ機能が保存されない不具合などを含むVer 2.1.1を配信予定です。現在作業中ですのでしばらくお待ちください(現在の最新Ver2.0.0)Ver2.1.0配信しました。- 現在開発予定の機能群は
- プライバシーポリシー
- 問い合わせ
- 設定
- 曼荼羅チャート
- 5W1H
- 本todo
- 学習todo
- SWOT分析todo
- などの機能の追加を考えています。個人開発なので時間が掛かるかもしれませんが、気長にお待ちください
更に追記
上記の機能を追加したver3.0.0をリリースしました。各種URLにも反映しております。
これでいったん開発は終了という形にさせて頂きます。
更に更に追記
ver3.1.0をリリースしました バグ修正と6機能ぐらい作りました。解説して記事書くのが面倒になってきたので内容につきましてはダウンロードして確かめてください
もうほんとにほんとにおわり。
ver3.1.0の最終機能群
| 機能名 | 説明 |
|---|---|
| ホーム | アプリ全体のトップ画面。各機能への入口となります。 |
| 設定 | ローカルストレージの初期化やバックアップ、データ復元などを実行できます。 |
| Zen-mode | Vanta.jsやパーティクル背景による癒しの集中モード。 |
📋 タスク・進捗管理
| 機能名 | 説明 |
|---|---|
| ガントチャート | D3.jsベースでプロジェクトのスケジュールを可視化。 |
| ToDo | シンプルなチェックボックス付きタスクリスト。 |
| ToDo Time | 「今日・週・月・年」など時間軸と連動したToDo管理。 |
| 要件定義 ToDo ～ 運用・保守 ToDo | 開発フェーズ別にToDoを分割管理。 |
| SWOT分析 ToDo | 強み・弱み・機会・脅威を分析し、タスク化する支援ツール。 |
| PDCAs | PDCA/OODA/STPD/DCAPの4フレームワークを縦グリッドで比較記述。 |
⌛ 時間・メモ・可視化
| 機能名 | 説明 |
|---|---|
| タイムマネージャー | 作業・休憩タイマーを記録＆可視化（円グラフ対応）。 |
| メモ | Markdown風のシンプルなメモ帳。複数タブ・ローカル保存対応。 |
| マインドマップ | D3.jsベースのテキスト中心の階層型マインドマップ。 |
| 曼荼羅チャート | 目標と8要素を整理する9マスの思考整理ツール。 |
| 5W1H | Who / What / When / Where / Why / How を分けて記述。 |
| グラフジェネレーター | 数値配列を使って棒・折れ線・円グラフを生成。 |
🌐 設計・構成・仕様管理
| 機能名 | 説明 |
|---|---|
| ディレクトリ構成図作成支援ツール | テキスト入力でディレクトリ構成図を作成。Markdown出力可能。作成したディレクトリ構成図から空のディレクトリとファイルを生成してZipでDL可 |
| i18nJson | JSON翻訳ファイルの編集・整形・構文エラー検出機能付き。 |
| PlantUML | UML記述用PlantUMLの入力→図式変換支援。 |
| DBデザイナー | GUIでテーブル名・カラム名を登録し、ER設計の支援が可能。 |
🧪 開発補助ツール
| 機能名 | 説明 |
|---|---|
| JavaScriptライセンスチェッカー |
package.jsonを解析してライブラリのライセンス情報を表示。 |
| WebHopper | よく使うURLをテンプレート登録して起動 |
| テキスト変換 | 改行テキスト → Markdown・HTMLリスト・SQL句などに一括変換。 |
| グリッドコピーボード | 複数行テキストをグリッド形式で編集・コピー可能。 |
| ダイスロール | 6候補から1つをランダム抽選。 |
宣伝
この構成をベースにより洗練した最小構成のスターターを作成しました。
名前はgatsby-desktop-kit
以下はその記事のURLです。