ツール紹介
ツール紹介 HEX・RGB・HSLを変換してコントラストを確認する方法
HEX、RGB、HSLの色指定を相互変換し、UIデザインやCSS実装でコントラスト比を確認する方法を解説します。
ツール紹介 QRコードを読み取って中身を確認する方法：画像・スクリーンショットのURL確認
QRコード画像やスクリーンショットからURLやテキストを読み取り、公開前チェックや安全確認に使う方法を解説します。
ツール紹介 ミリ秒・秒・分・時間を変換する方法：タイムアウトやTTL設定の確認
ms、秒、分、時間、日を相互変換し、APIタイムアウト、キャッシュTTL、監視間隔の設定ミスを防ぐ考え方を解説します。
ツール紹介 文字数カウントとテキスト変換の使い方：HTMLエスケープや空白整理をまとめて確認
文章やコード片の文字数、行数、空白、HTMLエスケープを確認し、ドキュメントや開発作業で使いやすいテキストに整える方法を解説します。
活用事例
活用事例 SQLフォーマッターでレビュー前にクエリを読みやすくする実務フロー
長いSQLをレビュー前に整形し、JOIN、WHERE、GROUP BYの意図を確認しやすくする活用事例です。
活用事例 GitHub Actionsのneeds依存をMermaidで可視化して読む方法
GitHub Actionsの複雑なworkflow YAMLを、needs依存とジョブ順序に分けて確認する活用事例です。
活用事例 Mermaidでインフラ構成図を作るときに詰まりやすいポイント
ブラウザ上でMermaidのインフラ構成図を作るときに、ノード名、接続線、粒度をどう整理するかをまとめた活用事例です。
活用事例 SQL DDLからMermaidのER図を作ってテーブル関係を確認する方法
CREATE TABLE文からER図を生成し、外部キー、関連テーブル、設計レビューの見落としを減らす活用事例です。
開発ストーリー
開発ストーリー インフラ構成図、気づいたら誰もメンテしてない問題について
「えっ、あの間にサーバー1台挟まってなかった？」というエンジニアリング界隈のホラー体験をなくすために、Mermaidで構成図を即座に描画するツールを作りました。
開発ストーリー GitHub ActionsのYAMLが魔境と化したので、可視化ツールを作った話
「どのジョブが原因でデプロイ遅いねん！」増え続ける依存関係（needs）に人間の目が追いつかなくなり、たまらずCI/CDのフローチャート化ツールを自作しました。
開発ストーリー 駆け出しの頃の自分に教えたい。JOINで泣かないSQLビルダー開発の裏側
「LEFT JOINってどう繋ぐんだっけ…」ORM漬けの現代エンジニアが、たまに書く生SQLの構文エラーで絶望しないためのノーコードツールを作りました。
開発ストーリー 再帰で解くJSON→TypeScript型変換：ライブラリに頼らない強み
APIレスポンスから瞬時に型定義を生成。外部パーサーを使わずに再帰的なアルゴリズムで軽量・高速に実装した裏側を紹介します。
このサイトの目的
開発中に出てくる「どう実装するのか」「少しだけ確認したい」という場面に応えるため、技術解説と便利なツールをまとめています。
どんな人向けか
日々の作業効率を重視するエンジニア、技術キャッチアップをしたい開発者、素早く検証したい技術担当者に向けたサイトです。
なぜ役立つのか
記事で考え方を確認し、ツールでそのまま試せるため、学習から実務への移動がスムーズです。
安心して使える設計
各ツールは可能な限りブラウザ内で処理されます。入力内容をサーバーへ保存しない設計を重視しています。
ツール一覧
開発・DevOps
8 items
GitHub Actions 可視化
GitHub Actions の workflow YAML を図として確認できます。
SQL フォーマッター
SQLを読みやすく整形し、レビューや調査をしやすくします。
ビジュアル SQL ビルダー
SELECT、JOIN、WHERE などを画面操作で組み立てられます。
SQL から ER 図
CREATE TABLE 文から Mermaid の ER 図を生成します。
cURL コンバーター
cURL コマンドを Python、Node.js、Go、Rust などのコードに変換します。
chmod 計算機
Linux の権限を数値表記と rwx 表記で確認できます。
Cron エディタ・解析
Cron 式を読みやすい説明と次回実行予定に変換します。
インフラ構成図ビルダー
構成情報からシステム構成図やネットワーク図を作成できます。