自分用のブックマーク整理メモです。
コードを書いている時間より、「画像をちょっと小さくしたい」「このJSONが読めない」「cron式これで合ってる？」みたいな本題じゃない作業に時間を溶かしている日が普通にあります。
で、そのたびに便利ツールをブックマークするので、ブックマークバーがこんな感じなっていました。
[圧縮] [圧縮2] [json整形] [cron] [色] [色2] [uuid] [これ何だっけ] ...
フォルダに入れた時点で二度と開かないやつです。
先日いい加減に整理して、結果として日常的に開くのが1個+αまで減ったので、その記録を残しておきます。
条件は以下でした。
- 登録不要（めんどくさいので）
- インストール不要（めんどくさいので）
- 無料（お金ないので）
先に結論
- 汎用の細かいやつは MU Tools にまとめた
- そのうえで、置き換えなかった専用ツールもあります（後述）
- 最終的にはブックマークすら開かなくなった
以下、シーン別に「何をどっちでやっているか」をまとめておきます。
1. 画像まわりでモタつく
画像、重すぎデカすぎWebPがいい
1枚をじっくり追い込むときは Squoosh（後述の残したやつの1つ）
一方で、複数まとめて雑に軽くしたいという方が実際は多いです。そういうときは 画像圧縮 に放り込んで落とすだけ。JPGは品質指定、PNGはロスレス最適化です。
WebP変換 も同じ並びにあるのでここで完結。
faviconって結局いくつ用意すればいいんだっけ
毎回ググっている自覚がありました。ファビコン生成 は画像1枚から favicon.ico / Apple Touch / PWA用アイコンを全部出して、さらに site.webmanifest と設置用HTMLまで吐いてくれます。
もうサイズ表を覚える必要はありません。
スクショの個人情報系
SlackやIssueにスクショを貼るときメアドや社名を隠す作業。
画像モザイク は隠したい範囲をドラッグするだけ。モザイク・ぼかし・塗りつぶしから選べます。画像を外部に送信しないと明記されているので、社内スクショでも心理的ハードルが低いです。
まぁあと、ベタで塗るよりモザイクの方が趣きがあっていいですね😊
iPhoneで撮った写真問題
HEICです。
HEIC変換 でJPG/PNGに。GPS（位置情報）だけ削除するオプションがあって、どこかにアップする前に踏みがちな地雷も回避。
2. 図とスクショ
図を描くやつは置き換えていません。Excalidraw と Mermaid Live Editor、コード画像は Carbon。ここは専用ツールが強すぎるので、素直に残しました。
一方で、その周辺の変換作業はまとめられました。
- 動画GIF変換 … 画面収録したMP4をPR用GIFに。開始/終了・fps・幅を指定できるので、GitHubに貼るなら幅800px・10fpsくらいまで落とすとサイズが現実的
- 動画圧縮 … で、事足りるならそれでもよし
- 動画フレーム抽出 … 動画から1コマだけ欲しいとき
3. テキストとデータ整形
APIレスポンスが1行で返ってくる
JSON整形・検証 に貼るだけ。整形と構文チェックが同時に走るので、「どこかにカンマが余っている」を目視で探す作業から解放されます。
CSVとJSONを行き来したいときは CSV ⇄ JSON変換。型推論とJSONL入出力に対応していて、Excel互換（文字化けしにくい）CSVでも出せます。
文字化けした
縺ｻ縺� とか �ӂ� とか。日本語で開発している限り一生付き合うやつ。
文字化け復元 は貼り付けると元の文字コードを推測して直してくれます。UTF-8 / Shift_JIS / EUC-JP / Latin-1 対応。
わざと文字化けを生成するモードも付いていて、「この条件で化けるのか」を再現できます。調査のときにこれが効きます。
そのほか
-
ケース変換 …
user_profile_id→userProfileId。全形式を同時表示するので、欲しいのをコピーするだけ - ダミーテキスト生成 … Lorem Ipsumだけでなく、日本語でもダミーテキストほしいとき
4. 開発中の細かいやつ
cron式
Cron式作成・解析 … タイムゾーンを指定して次回実行日時が一覧表示されるので、「JSTで動かすとどうなる？」をその場で確認できます。ここを勘違いしたまま本番に出すと味わい深いことになります。
JWTの中身
jwt.io が有名ですが、社内トークンを貼るのがちょっと怖いという気持ちもわかります。
JWTデコーダー はブラウザ内処理で外部送信なし。exp などが読みやすい日時に変換されて、期限切れかどうかが一目でわかります。HS256系の署名検証にも対応。
そのほか
- UUID 生成 … v4に加えて時系列ソート可能な v7 とULIDに対応。最大100件まとめて。
-
UNIXタイムスタンプ変換 … 10桁/13桁の両対応。ログに
1757000000が出てきたとき用。 - ハッシュ値生成 … MD5/SHA-1/SHA-256/SHA-512を同時に。チェックサム照合にも。
- 正規表現テスター … パターンをURLで共有できるので「これで合ってます？」をSlackに投げるのが楽。ただし本気の解読は regex101 のほうがいいかも（これも残したやつ）
5. デザイン・配色
文字色コントラスト
アクセシビリティ対応でコントラスト比を求められる場面が増えました。コントラストチェッカー はWCAG 2.1/2.2のAA・AAA判定に加えて、落ちたときに合格する色を提案してくれます。色覚特性シミュレーションもあり。
「NGです」とだけ言われても困るので、代案が出るのはありがたいです。
box-shadowの値設定
CSSシャドウ生成 と CSSグラデーション生成。スライダーで触ってCSS変数／Tailwind／SCSS形式で出力できます。共有URLが作れるので、デザイナーさんに「これでどうですか」を投げやすいです。
6. 公開前後のチェック
- OGPチェッカー … XとFacebookでのカード表示をそのままプレビュー。デプロイ後の「あれ、画像出てない」を事前に潰せます。
- 構造化データチェッカー … JSON-LD / Microdataを抽出して、必須・推奨プロパティの不足を日本語で指摘。
- リンクチェッカー … ページ内リンクを全部叩いて404を検出。内部/外部・アンカーテキスト・リダイレクトが一覧で出てCSVでも落とせます。
- robots.txtチェッカー … 指定URLがクロール対象かを判定根拠つきで表示。Googlebotだけでなく GPTBotなどAIクローラーの許可状況も見られるのが今どきです。
ブラウザの対応状況は言うまでもなく Can I use で。
7. 結局、ブックマークすら開かなくなった
ここまで書いておいて何ですが、ブックマークを減らした話のオチは1個も開かなくなったです。
MU Tools — ツールランチャー というChrome拡張を入れたためです。
やることは単純で、
-
Ctrl（Mac はCmd）+Shift+Uでポップアップが開く - そこから名前やタグで検索、カテゴリで絞り込み → ワンクリックで新しいタブに開く
-
アドレスバーに
muと打ってキーワードを続けると、サイトを開かずに直接ツールへ飛べる
個人的には最後のアドレスバー（omnibox）経由が効きました。mu json でJSON整形、mu cron でCron式。ツールを探しに行くという動作が消えて、コマンドを打つのと同じ感覚になります。
お気に入り登録と「最近開いたツール」タブがあるので、実際は数回使うと自分の頻出3〜4個が上に並ぶようになります。設定はブラウザ同期されるので、会社PCと自宅PCで揃うのも地味に良い。
なお日本語を含む多言語対応です。英語UIのツールを人に勧めるとそこで止まることがあるので、これは意外と効きます。
置き換えなかったもの
正直に書いておくと、全部が1個にまとまったわけではありません。以下は専用ツールのほうが明確に上なので残しました。
| ツール | 残した理由 |
|---|---|
| Squoosh | 左右比較しながら圧縮率を追い込める。1枚を本気で詰めるとき用 |
| regex101 | マッチの解説機能。他人が書いた正規表現を解読するときに |
| Excalidraw | 手書き風の図 |
「1個で全部やる」を目指すと結局どこかで無理が出るので、汎用の細かいやつを1個に寄せて、勝負どころは専用ツールを残すのがちょうどいいです。
まとめ
- ブックマークバーの便利ツールを整理したら、汎用の細かいやつは MU Tools 1個に寄せられた
-
Chrome拡張のランチャーを入れたら、そのブックマークも開かなくなった（
Cmd+Shift+Uかアドレスバーのmu） - 専門的なツールは残した
ツールを増やすより、思い出すコストを減らすほうが効きます。ブックマークフォルダが「ツール」で埋まっている人は、一回全部消してみると案外困りません。
最後に白状しておきます
ここまで散々おすすめしてきた MU Tools、これ、自分で作ったやつです。
……すみません。最初に言うと「宣伝記事か」で閉じられるのが目に見えていたので、最後にしました。しかし、この時点で閉じられる可能性はあります。
言い訳をさせてもらうと、自分のブックマークバーが散らかりすぎて嫌になったのが先で、「毎回ググって知らないサイトにファイルを上げるの、そろそろどうなんだ」と。だったら自分でつくってしまえっていう。
なので、記事中の使いどころは実際に困った例となっています。
そして「置き換えなかったもの」。作者がサイトを紹介する記事で書くのはどうなんだという気もしますが、無理に自作で埋めると中途半端になるので、素直に残すものは残しています。
というわけで、ポジショントーク込みで読んでください。そのうえで何かご意見があれば、やさしいコメントで教えてもらえると助かります🙇
おわり。