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

# URLのエンコード・デコードするツールを作ってみた
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">URLのアクセスログを集計するときに、アクセスログにはURLエンコードされた形で出力されていたためぱっと見よくわからなかった。そのためURLのエンコード・デコードする簡易的なツールを作ってみたので備忘録的に記載します。</a></blockquote>
---
__《目次》__
[ツールの動作環境](#ツールの動作環境)
[ツールの概要](#ツールの概要)
[ソース](#ソース)
[ソース解説](#ソース解説)

---

# ツールの動作環境

* <font color="Green">__OSはWindows10__</font>
	* バージョン：1903(OSビルド18362.1016)

* <font color="Green">__使用ブラウザは以下の3種類で実施__</font>
	* 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ビット)

# ツールの概要

<font color="Green">__画面イメージ__</font>
![htm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701538/ff04de75-4b29-6eb5-a65c-f1558e405f30.png)

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


# ソース

```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>
```

# ソース解説

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

2. <font color="Green">__JavaScript部分__</font>

	2.1 <font color="Green">__変換開始処理：conversion(8～35行目)__</font>

	『変換開始』ボタンをクリック時に呼び出される変換を実行する処理
		* 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 <font color="Green">__表示：onLoad(37～41行目)__</font>

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