僕が今まで制作してきた生産性向上の為の自作ツールを紹介していく記事です。
ライセンスを付与して配布しているツールもあれば、そうではないツールも含まれていますが、コードは全て公開しています。
皆様の生産性向上の参考になれば幸いです。
Google Chrome拡張機能
yt-audio-mask
YouTube の動画プレイヤー部分を黒いマスクで隠して、音声だけを再生する Chrome 拡張機能です。
開発作業・勉強など、画面を見ずに音だけ流したいとき用のツールです。
⚠ 個人利用のみ を想定しています。
Chrome ウェブストア等での配布や、不特定多数への再配布は行いません。
Babel-Crusher
notranslateを除去してGoogle翻訳をどのサイトでも利用できるようにするChrome拡張機能 サイト運営者の意図を無視するお行儀のいい行為ではないので配布はしていません 個人利用のみです
レベニューキャットを利用している時に、Google翻訳がうまく機能しない事に気が付いて急遽作成したツールです。
サイトの意図しない挙動を引き起こしがちなので人にお勧めするほどの物ではない感じですね
flightdeck-for-web
Shift×2 でランチャー表示 選択テキストを {{q}} に差し込み 1〜数文字キーで新規タブに遷移
簡単に言えば、Shift×2 でランチャー表示して選択したテキストを事前に登録してあるキーをタイプすると 選択したテキストで検索した結果のページに遷移するという拡張機能です。
具体例を挙げるとwikipediaを読んでいる時に気になった洋楽を見つけたとします。 その洋楽をテキスト選択してランチャー起動 + y をタイプすると、その洋楽を検索したページのYoutubeが自動で開くという物です。
キーとURLはオプションで追加登録もできます。
Githubリリースで配布してるので利用したい人は自己責任で使用してみて下さい
感想を聞かせてもらえると嬉しいです。
Electron製デスクトップアプリ
WBS-King-of-Todo
時間軸ごとにtodoを分類して管理できるデスクトップアプリです。完成自体はしてるのですが、公開作業がめんどくさくて放置してます。次に紹介しているDevKitBaseの亜種みたいなソフトです。ビジュアライゼーションが得意です。
DevKitBase
DevKitBase は、Gatsby と Electron を統合して構築された、クロスプラットフォーム対応のデスクトップアプリケーションです。
Web技術の柔軟性とElectronのローカル常駐性を兼ね備え、開発者の生産性を高める多機能な支援環境を提供します。
🧭 ナビゲーション & 管理系
| 機能名 | 説明 |
|---|---|
| ホーム | アプリ全体のトップ画面。各機能への入口となります。 |
| 設定 | ローカルストレージの初期化やバックアップ、データ復元などを実行できます。 |
| 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出力可能。 |
| i18nJson | JSON翻訳ファイルの編集・整形・構文エラー検出機能付き。 |
| PlantUML | UML記述用PlantUMLの入力→図式変換支援。 |
| DBデザイナー | GUIでテーブル名・カラム名を登録し、ER設計の支援が可能。 |
🧪 開発補助ツール
| 機能名 | 説明 |
|---|---|
| JavaScriptライセンスチェッカー |
package.jsonを解析してライブラリのライセンス情報を表示。 |
| WebHopper | よく使うURLをテンプレート登録して起動 |
| テキスト変換 | 改行テキスト → Markdown・HTMLリスト・SQL句などに一括変換。 |
| グリッドコピーボード | 複数行テキストをグリッド形式で編集・コピー可能。 |
| ダイスロール | 6候補から1つをランダム抽選。 |
💰 管理・分析支援
| 機能名 | 説明 |
|---|---|
| 開発家計簿 | プロジェクトごとに費用・収益・日付を記録。 |
もっと詳しい紹介記事
モバイルモック
HTMLとTailwindcssで作成したモバイルアプリUIのモックです スクロール機能とハンバーガメニュー機能とタブメニュー機能、初回起動のスライド機能などがHTML上で実装されています。実際に動かして触れるモックとなっております。 LLMでデザインを作成するのを効率化させるときに食わせる用
html-mock-mobile-ui-jp
Gatsby スターター
gatsby-starter-tricycle
Gatsby-starter-tricycle は、GatsbyJS フレームワークを使用して作成された Web サイトおよび Web アプリケーションを構築するためのスターター テンプレートです。
MDX の Frontmatter を GraphQL で取得し、gatsby-node.js を使って動的にページを生成してタグページやカテゴリーページを構築しているので、かなり高度なことをしていると自負しています。
TailwindCSS採用
gatsby-desktop-kit-template
WBS-King-of-TodoやDevKitBaseはこの技術スタックを利用して制作しています。だれでも利用できるように最小構成を切り出してスターター化したもの このスターターを利用すればwebとデスクトップアプリを素早く構築できます。
関連記事