URLのエンコード・デコードするツールを作ってみた

URLのアクセスログを集計するときに、アクセスログにはURLエンコードされた形で出力されていたためぱっと見よくわからなかった。そのためURLのエンコード・デコードする簡易的なツールを作ってみたので備忘録的に記載します。

《目次》
ツールの動作環境
 ツールの概要
 ソース
 ソース解説

ツールの動作環境

OSはWindows10
- バージョン：1903(OSビルド18362.1016)
使用ブラウザは以下の3種類で実施
- Microsoft Edge
  - バージョン：44.18362.449.0
- Microsoft Internet Explorer
  - バージョン：11.1016.18362.0
  - 更新バージョン：11.0.205(KB4571687)
- Google Chrome
  - バージョン：85.0.4183.83)(Official Build) (64ビット)

ツールの概要

画面イメージ

『変換対象URL』欄に変換したいURLを入力する。
『デコード／エンコード』のラジオボタンを選択する。
『変換開始』ボタンをクリックする。
『URL変換結果』欄にデコード／エンコードした結果が表示される。
『URL変換結果長(文字数) 』欄にデコード／エンコードした後の文字数が表示される。
『変換対象URL』の入力チェックは入力の有無のみをチェックする。
デコード／エンコード時に例外が発生した場合のチェックを実施する。(特にデコード時はURLを全て指定しないと例外が発生すつ場合がある)
とてもシンプルに作成する。

ソース

URL.htm

 1  <!DOCTYPE html>
 2  <html>
 3  <body>
 4  <TITLE>URLデコード・エンコード</TITLE>
 5  
 6  <SCRIPT LANGUAGE="JavaScript">
 7  // 変換開始処理
 8  function conversion(myform) {
 9      if (myform.input_url.value == "") {
10          alert("変換対象URLが未入力です");
11          return;
12      }
13      target = document.getElementById("output_url");
14      target2 = document.getElementById("url_ren");
15      var elements = document.getElementsByName( "type" ) ;
16      if (elements[0].checked == true) {
17          try { 
18              URL=decodeURI(myform.input_url.value);
19              target.innerHTML=URL;
20              target2.innerHTML=URL.length;
21          } catch(e) { 
22              alert("デコード失敗");
23              console.error(e); 
24          }
25      }else{
26          try { 
27              URL=encodeURI(myform.input_url.value);
28              target.innerHTML=URL;
29              target2.innerHTML=URL.length;
30          } catch(e) { 
31              alert("エンコード失敗");
32              console.error(e); 
33          }
34      }
35  }
36  // 表示
37  window.onload = onLoad;
38  function onLoad() {
39      var elements1 = document.getElementsByName( "type" ) ;
40      elements1[0].checked = true
41  }
42  </SCRIPT>
43  
44  <FORM>
45  <H1>URLデコード・エンコード</H1>
46  <P><BR><P>
47  変換対象URL：<INPUT TYPE="text" NAME="input_url" SIZE="200">
48  <P><BR><P>
49  
50  <input type="radio" name="type" value="1" checked="checked">デコード
51  <input type="radio" name="type" value="2">エンコード
52  
53  <P><INPUT TYPE="button" VALUE="変換開始" OnClick="conversion(this.form);">
54  <P><BR><P>
55  
56  URL変換結果
57  <div class="contents" id="output_url"></div>
58  <P><BR><P>
59  URL変換結果長(文字数)
60  <div class="contents" id="url_ren"></div>
61  <P><BR><P>
62  
63  </FORM>
64  </body>
65  </html>

ソース解説

部品の作成部分
- 47行目：『変換対象URL』を入力するTEXTエリアを定義(NAME="input_url")
- 51,52行目：『デコード／エンコード』のラジオボタンを定義(name="type")『デコード』側をデフォルトでチェック状態としている(checked="checked")
- 53行目：『変換開始』ボタンを定義(クリック時に『conversion』を実行する)
- 57行目：『URL変換結果』表示を定義(id="output_url")
- 58行目：『URL変換結果長(文字数)』表示を定義(id="url_ren")
JavaScript部分

2.1 変換開始処理：conversion(8～35行目)

『変換開始』ボタンをクリック時に呼び出される変換を実行する処理
* 9～12行目：『変換対象URL』の入力チェック。未入力の場合、alertを表示して終了している。
* 13～15行目：『URL変換結果』と『URL変換結果長(文字数)』と『デコード／エンコード』ラジオボタンのElementオブジェクトを取得する。
* 16行目：『デコード』ラジオボタンの状態を確認する。『true』の場合(『デコード』ラジオボタンがチェック状態)はデコード処理、それ以外の場合はエンコード処理を行う)
* 17～24行目：デコード処理
decodeURIメソッドに『変換対象URL』を指定してデコードを実施する。
デコードの結果を『URL変換結果』に出力する。
デコード後の文字数を『URL変換結果長(文字数)』に出力する。
デコード処理で例外が発生した時に備え、try ・・・ catchで囲い、catch時にalert表示と、console.errorを出力する。
* 26～33行目：エンコード処理
基本構造はデコード処理と同様。但し、encodeURIメソッドに『変換対象URL』を指定してエンコードを実施する部分だけが異なる。

2.2 表示：onLoad(37～41行目)

Edgeで表示した時に『エンコード』ラジオボタンが選択状態で再表示(F5キー押下等)を行うと何故か『デコード／エンコード』ラジオボタンがどちらも未選択状態で表示されていまったため、表示時に無条件で『デコード』ラジオボタンをチェック状態とする処理を入れた。
* 37行目：window.onloadを使用して、onLoadメソッドを実行するよう指定する。
* 39行目『デコード／エンコード』ラジオボタンのElementオブジェクトを取得する。
* 40行目：『デコード』ラジオボタンをチェック状態に設定する。