ガイド & チュートリアル
RunWebTools の土台となるフォーマット・技法・日常の作業を、明快で実用的に解説します。専門用語も無駄もなく、知っておくべきことだけ — ぴったりのツールはワンクリック先に。下から主題別にどうぞ。
JSON とは? やさしい解説(とよくあるエラーの直し方)
JSON とは何か、その構文がどう動くのか、そして最もよくある JSON エラー — 末尾カンマ・シングルクォート・引用符なしのキーなど — をすばやく直す方法。
Base64 エンコードの解説: 何であり、いつ使うか
Base64 が実際に何をするのか、なぜデータが約 33% 大きくなるのか、データ URI やメール添付などのよくある用途、そして知っておくべきセキュリティの誤解。
文字エンコーディング: Unicode と UTF-8 の解説
なぜテキストが文字化けするのか、Unicode と UTF-8 が実際に何なのか、文字・コードポイント・バイトの違い、そして文字化けの直し方。
YAML 解説 + JSON vs. YAML
YAML の仕組み、注意すべき落とし穴(タブ・型推測・インデント)、そして JSON との比較を扱う明快なガイド。
XML とは何か、どう動くのか
XML を本当に重要な少数のルールに整理した初心者向けガイド — 要素、属性、well-formed ルール、そして HTML・JSON との比較。
CSV フォーマット解説 + よくある問題
CSV が実際にどう動くか、そしてよくある落とし穴の避け方 — 値の中のカンマ・引用符・改行、区切り文字、エンコーディングと BOM。
URL エンコーディング解説
URL エンコーディング(パーセントエンコーディング)が何をするか、なぜ必要か、どの文字がエスケープされるか — 予約/非予約文字とプラス記号の混同まで。
命名ケーススタイル: camelCase、snake_case など
コードでよくある命名規則 — camelCase・PascalCase・snake_case・kebab-case・CONSTANT_CASE — と、それぞれがどこで使われるかの明快なガイド。
文字数・単語数と読みやすさの解説
単語・文字・読了時間が何を意味するか、そして読みやすさを高める方法 — 文の長さ、語の長さ、実用的なコツ。
スラッグとは何か、URL に適したテキストの作り方
スラッグ(URL の人が読める部分)とは何か、なぜ重要か、そしてきれいで URL に安全なスラッグを作る規則。
テキストを整理して重複を除くには
貼り付けたテキストを整理する実用ガイド — 重複行の削除、空行の削除、並べ替え、そして見えない文字(行末空白・改行なし空白・スマート引用符)の処理。
ウェブ用に画像を圧縮する方法(画質を落とさずに)
より速いサイトのために画像ファイルを小さくする実用ガイド — 非可逆 vs. 可逆、JPEG・PNG・WebP の選択、画質をどこまで安全に落とせるか。
画像フォーマット解説: PNG・JPG・GIF・WebP・SVG
各よくある画像フォーマットが何に強いかの明快なガイド — ラスター vs. ベクター、そして画像にフォーマットを合わせる素早い判断法。
ウェブ用に画像をリサイズ・切り抜きするには
リサイズと切り抜きの違い、大きすぎる画像がなぜページを遅くするか、そしてウェブ用に画像のサイズを正しく合わせる方法。
EXIF メタデータと写真のプライバシー
EXIF メタデータとは何か、なぜプライバシーの懸念か、そして写真を共有する前に取り除く方法。
JWT の解説: 構造、クレーム、デコード方法
JSON Web Token とは何か、すべての JWT が持つ 3 つの部分、よくあるクレームの意味、署名の仕組み、そして避けるべきセキュリティの落とし穴。
Unix タイムスタンプを扱う: エポック時間をシンプルに
Unix タイムスタンプとは何か、なぜコンピューターは 1970 年から秒を数えるのか、秒 vs. ミリ秒、タイムゾーンと UTC、そして 2038 年問題 — 明快に解説。
カラーフォーマットの解説: HEX、RGB、HSL
ウェブの色がどう動くのか — HEX・RGB・HSL が実際に何を意味するのか、相互変換の仕方、それぞれいつ使うか、そしてアルファ透過はどう収まるのか。
HTTP ステータスコードの意味
HTTP ステータスコードを一目で読む方法 — 最初の桁で分類を把握、実際に出会うコード、そして 401 vs. 403 の混同。
初心者のための正規表現
正規表現(regex)の核心を最初から — リテラル文字、文字クラス、量指定子、アンカー、そしてエスケープ。
中古スマホ購入前のテスト方法: 10 分チェックリスト
中古スマホをその場で点検する実用チェックリスト — ドット抜け、タッチのデッドゾーン、センサー、バッテリー状態、カメラ、スピーカー — 無料のブラウザテストで。
マウスが勝手にダブルクリックする理由(と直し方)
スイッチチャタリングとは何か、劣化したマウスがなぜ幽霊ダブルクリックを生みキーボードが文字を二重入力するのか、ブラウザテストでの確認法と修理の選択肢。
モニターのリフレッシュレート徹底解説: 60Hz vs 120Hz vs 144Hz
リフレッシュレートとは実際何か、60Hz 超を本当に見分けられるのか、新品の 144Hz モニターがなぜ誤って 60 で動きがちなのか、そして自分の設定を確認する方法。
ビデオ通話前にマイク・カメラ・スピーカーをテストする方法
2 分の通話前ルーティン — マイクが音を拾うか、ウェブカメラの映りは良いか、スピーカーが両チャンネル鳴るか、接続が安定しているかを確認。