「文字数を数えたいだけなのに、広告だらけのサイトを開いてスクロールする」
「客先から預かった画像を、よく知らない海外の圧縮サイトにアップロードするのは正直気が引ける」
Web制作の仕事をしていると、こういう”数秒で終わるはずの作業”のたびに小さなストレスが積み重なっていきませんか?
私はWordPressを中心に15年、150件以上のサイト制作に携わってきましたが、この「ちょっとした変換・計算・整形」のためにツールサイトを探し回る時間が、積もり積もるとバカにならないとずっと感じていました。
それなら自分で作ってしまおう、ということで、制作の現場で本当に使うツールを中心に38個、自分で開発して公開しました。この記事では、その全ツールを実際の使用場面と一緒に紹介します。
すべて無料・登録不要で、バドツール(ツール一覧)からいつでも使えます。
目次
世の中に便利ツールサイトはたくさんあります。それでも自作した理由は3つあります。
1つ目は、広告が多すぎて使いにくいこと。 ツール本体より広告の面積が大きく、どこに入力すればいいのか一瞬迷うサイト、ありますよね。広告自体は否定しませんが(本サイトにも掲載しています)、ツールの使いやすさを壊さない配置にこだわりました。
2つ目は、データがサーバーに送信されるのが不安なこと。 特に画像圧縮やテキスト整形で、クライアントから預かった素材や原稿を外部サーバーにアップロードするのは、守秘義務の観点でずっと引っかかっていました。そこでバドツールは、原則すべての処理をブラウザ内のJavaScriptだけで完結させています。入力したテキストも画像も、サーバーには一切送信されません。
3つ目は、スマホで使いにくいツールが多いこと。 移動中や客先でサッと使えるよう、全ツールをスマホ最適化しています。
まずは私と同じ制作者の方に一番刺さるはずの、開発系ツールから。
JSON整形・検証
APIのレスポンスが1行に潰れていて読めない時、貼り付けるだけでインデント付きに整形します。構文エラーの内容も表示されるので、「設定ファイルが読み込めない原因はどこだ」というデバッグにも。逆に圧縮(minify)もできます。
URLエンコード・デコード
アクセスログやGETパラメータの%E3%81%82...を日本語に戻して確認したい時に。encodeURIComponentとencodeURIの切り替えに対応しているので、「URL全体」と「パラメータの値だけ」を使い分けられます。
Base64エンコード・デコード
Basic認証まわりの確認や、データURIの中身を見たい時に。日本語(UTF-8)に完全対応しているので、他ツールでありがちな文字化けが起きません。
ハッシュ生成
MD5・SHA-1・SHA-256・SHA-512を一括計算します。ダウンロードファイルのチェックサム照合や、テストデータの作成に。
HTMLエスケープ
ブログにソースコードを掲載する時の<→<変換。逆変換(アンエスケープ)もできるので、エスケープ済みログの解読にも使えます。
htpasswdファイル生成
Basic認証用の.htpasswdの中身を生成します。Apache標準のMD5(APR1)方式に対応し、複数ユーザーもOK。この手のツールは入力したパスワードをサーバーに送るものが多いのですが、本ツールはハッシュ化までブラウザ内で完結するので、本番用のパスワードでも安心して使えます。
htaccessファイル生成
HTTPSリダイレクト、wwwの統一、301リダイレクト、Basic認証、IP制限、キャッシュ、Gzip圧縮など10種類の設定を、スイッチをONにして入力するだけで生成。「htaccessの書き方を毎回検索して、記述ミスで500エラー」から解放されます。
CSSグラデーションジェネレーター
バー上のツマミをドラッグする直感操作で、linear-gradient / radial-gradientのコードを生成。最大6色、各色の位置(%)と透明度、カラーコードの直接入力に対応しているので、実案件レベルのグラデーションがそのまま作れます。
CSS三角形ジェネレーター
吹き出しのしっぽや矢印に使う、borderで作る三角形のCSSを自動生成。8方向対応で、正三角形の自動計算もできます。「borderの三角形、どっちを透明にするんだっけ」と毎回検索する生活が終わります。
CSS Gridジェネレーター
列・行ごとのサイズ指定(fr/px/auto)に対応し、セルをドラッグで連結するとgrid-areaのコードまで出力します。ヘッダー・サイドバー・メインのようなページレイアウトの設計が直感的にできます。
メタタグ生成
サイト公開前の定番作業、OGP・Twitterカードのメタタグ一式をフォーム入力から自動生成します。titleとdescriptionの文字数ガイド付きなので、SEOの基本を押さえたタグがもれなく揃います。
カラーコード変換
HEX・RGB・HSLを相互変換。デザインカンプのRGB値をCSS用のHEXに直したり、HSLに変換して「同じ色相で少し明るいバリエーション」を作る時に便利です。
原稿の流し込みやライティング業務で使う群です。
文字数カウンター
文字数・行数に加えてUTF-8/Shift-JISのバイト数まで出るのがポイント。システムの文字数制限やmeta descriptionの調整に。
差分チェックツール
修正前後の原稿やコードを比較して、変更点を赤・緑でハイライト。行単位と文字単位を切り替えられるので、誤字修正の見落とし確認にも使えます。
原稿用紙換算
「400字詰め原稿用紙で何枚分か」を自動計算。ライター案件の分量確認に。
Pタグ・BRタグ生成
クライアントから届いたテキスト原稿を、改行ルールを選んでHTMLに一括変換。原稿流し込みの時間がかなり短縮できます。
ダミーテキストジェネレーター
指定文字数ぴったりのダミーテキストを生成。夏目漱石やLorem Ipsumも選べます。モックアップの文字量チェックに。
全角半角変換
英数字・カタカナ・スペース・記号を個別に選んで全角⇔半角を統一。濁音・半濁音の半角カナにも正確に対応させました。名簿データの整形に。
大文字小文字変換
英字の大文字・小文字・Title Caseへの変換。英語見出しの表記統一に。
ひらがなカタカナ変換
フリガナ欄のデータを一括で「ふりがな⇔フリガナ」変換できます。
改行削除・空白削除
PDFからコピーした原稿の変な位置の改行を一括除去。全角スペースにも対応しています。翻訳ツールに入れる前の整形にも。
事務作業や書類作成で意外と出番が多い群です。
QRコード作成
URL・テキスト・電話番号・メール・Wi-Fiの5種類に対応。名刺やチラシの制作案件で「QRコードも載せたい」と言われた時、その場で作ってPNGでダウンロードできます。
パスワード生成
BASIC認証やテストアカウントのパスワード発行に。文字種・記号の種類まで細かく指定でき、複数個の一括生成もできます。前述のhtpasswd生成ツールとセットで使うと、Basic認証の設定が全部ブラウザで完結します。
画像リサイズ・圧縮
このツールこそ「ブラウザ完結」の真価です。クライアントから預かった画像を外部にアップロードすることなく、手元のブラウザ内だけでリサイズ・圧縮してダウンロードできます。
IPアドレス確認
サーバーのIP制限を設定する時、「自分のIPアドレスなんだっけ」を一発確認。htaccess生成ツールのIP制限設定と組み合わせてどうぞ。
ローマ字変換
ヘボン式・パスポート式(長音省略)を切り替えられます。「しんぶん→shimbun」のような撥音のm化にも対応した、地味に真面目な作りです。
正直に言うと、この2つは「毎日使う制作ツール」ではありません。ただ、「名前や生年月日を入力するツールこそ、データを送信しない設計が活きるのでは?」という考えから作ったものです。話のネタにどうぞ。
姓名判断
名前の画数から五格(天格・人格・地格・外格・総格)を診断します。約3,000字の画数データを内蔵し、画数の手動修正にも対応。入力した名前はブラウザの外に一切出ません。この安心感は、名前を扱うツールでは特に大事だと思っています。
誕生日占い(数秘術)
生年月日から数秘術の運命数を計算します。計算過程まで表示する「理屈が見える占い」なのがエンジニアっぽいところ。マスターナンバー(11・22・33)にも対応しています。
38個すべて、無料・登録不要・ブラウザ完結です。
一覧ページをブックマークしておけば、「あの作業どうやるんだっけ」という時にすぐ辿り着けます。
今後もツールは追加していく予定です。「こんなツールが欲しい」という要望があれば、こちらから気軽に教えてください。制作の現場で本当に使えるものから順に作っていきます。