とは
URL エンコーダー とは？
URLエンコーダーは、リダイレクトリンク、コールバックURL、またはクエリ文字列に値を付加する前に、適切な境界でエンコードを行うためのツールです。重要なのは単なるパーセントエンコードではなく、対象が「構造を維持すべきURL全体」なのか、それとも「単一の安全なコンポーネントとして扱うべき値」なのかを正しく判断することです。
この区別は、`redirect_uri`、トラッキングパラメータ、ディープリンク、署名付きURLなどを扱う際に非常に重要です。間違ったエンコードを行うと、セパレータが露出したり、ネストされたターゲットが破損したり、二重エンコードのバグを引き起こす原因となります。
の使い方
URL エンコーダー の使い方
入力フィールドに完全なURL、またはネストしたい値を貼り付けます。「URL全体（Entire URL）」を選択すると、`/` `?` `&` `=` などのセパレータを維持したままエンコードします。「単一コンポーネント（Single Component）」を選択すると、値全体が一つのエンコードされたユニットとなり、`redirect_uri` やクエリ値として安全に挿入できる形式になります。
結果を確認し、ヒントや警告パネルを見て、既にエンコード済みの値やネストされたURLを誤って二重にエンコードしていないか確認してください。
使用例
使用例
入力値:
https://app.aistacker.dev/callback?plan=pro plus&from=pricing
URL全体 出力:
https://app.aistacker.dev/callback?plan=pro%20plus&from=pricing
単一コンポーネント 出力:
https%3A%2F%2Fapp.aistacker.dev%2Fcallback%3Fplan%3Dpro%20plus%26from%3Dpricing主な使用シーン
主な使用シーン
1. OAuthやログインURLに付加する `redirect_uri` をエンコードする。
2. スペース、`&`、`=` を含むクエリパラメータの値をエンコードする。
3. コールバック先がURL全体としてエンコードされているか、コンポーネントとしてされているかを確認する。
4. 本番環境のバグを防ぐために `encodeURI` と `encodeURIComponent` の出力の違いを比較する。
よくある質問