Softonic

URLパーサー

ステップ 1 / 2
次へ

Webhookが誤作動したり、トラッキングリンクが誤ったパラメータを運んだりしたとき、いちばん速いのはURLを分解して各部分を読むことです。任意のURLを貼り付けると、このパーサーがそれを構成要素に分解します。スキーム、ユーザー名とパスワード、ホスト、ポート、パス、クエリ文字列、フラグメントに分け、さらにクエリをキーと値のペアの表に展開します。当社のサーバー上でPHP標準のURLパーサーを使って動作するため、PHPのバックエンドが同じリンクをどう読むかがそのまま分かります。

URLを解析する方法

  1. 1

    URLを貼り付け

    絶対URLでも相対URLでも、任意のURLを入力します。クリックするものはなく、入力しながら解析されます。

  2. 2

    各部分を読む

    見つかったスキーム、ホスト、ポート、ユーザー、パスワード、パス、クエリ、フラグメントが表に入ります。空の部分はダッシュで表示されます。

  3. 3

    クエリを展開する

    各`key=value`のペアがそれぞれの行に表示され、パーセントエンコーディングと`+`は実際の文字にデコードされます。

  4. 4

    パラメータをコピー

    コピーボタンで、すべてのクエリパラメータを一度に`key=value`形式の行として取得でき、APIクライアントに貼り付ける準備が整います。

URLの構造

https://user:pass@api.example.com:8443/v1/users?page=2&sort=name#profileというURLを例にとります。パーサーはこれを次のように分解します。

部分 値
scheme https
user user
pass pass
host api.example.com
port 8443
path /v1/users
query page=2&sort=name
fragment profile

続いて、クエリ文字列は専用の表に展開されます。page = 2、sort = name です。

クエリ文字列の読み取り方

  • 値はパーセントエンコーディングからデコードされ、+は空白になります。そのためq=hello%20worldとq=hello+worldはどちらもhello worldと読まれます。
  • ペアは最初の=で分割されるため、token=a=b=cはa=b=cを値として保持します。
  • 重複したキーは最後の値だけを保持します。?id=1&id=2はid = 2を返します。すべての値を保持したい場合は配列構文id[]=1&id[]=2を使うと、リストとして表示されます。
  • filter[status]=openのような角かっこ付きのキーは入れ子構造になり、JSONとして表示されます。

ポート、パス、フラグメント

  • ポートは書かれたとおりに表示されます。何も追加も削除もされないため、:443は443と表示され、ポートのないURLではその行が空になります。
  • 末尾のスラッシュはパスを変えます。https://a.comのパスは空で、https://a.com/のパスは/です。
  • フラグメント（#の後）はブラウザだけが使う値で、アンカーへのスクロールやクライアントサイドのルーターの制御に使われます。サーバーには決して届かないため、バックエンドが読む必要のあるものはクエリ文字列に入れてください。
  • ホストは入力されたとおりに返されます。このパーサーは国際化（非ASCII）ドメインをPunycodeに変換したり、その逆を行ったりしません。

よくある質問

はい。/v1/users?ref=navのような相対リンクにはスキームもホストもないため、それらの行は空のままで、パスとクエリは入力されます。完全に拒否されるのは、http://a.com:portのように数字でないポートを持つ、形式が誤ったURLだけです。

最後の値だけが保持されるため、?id=1&id=2はid = 2を返します。これはPHPのバックエンドが読み取るのとまったく同じです。すべての値が必要な場合は配列構文id[]=1&id[]=2を使うと、リストとして表示されます。

パーサーはポートを書かれたとおりに表示します。既定のポートを削除したり、欠けているポートを補ったりすることは決してないため、ポートのないURLは空の行を表示し、https://a.com:443は443を表示します。

このツールはブラウザだけでなくサーバー上で動作するため、URLは解析のために当社のサーバーへ送信されます。URLそのものは保存しません。パーサーが使われたという匿名の回数のみを記録します。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます