以前、Pythonでハッシュ値を計算するGUIアプリを作ったことがありました。
jsstudy.hatenablog.com
ブラウザーが使える環境なら、PythonでGUIアプリを作るよりも、JavaScriptでWebアプリを作る方が簡単です。
参考情報
qiita.com
note.onichannn.net
labs.cybozu.co.jp
www.ipentec.com
以上の情報を参考にして、ハッシュ値を計算するWebアプリを作ってみましょう。
(1) 以下のページから、「md5.js」というJavaScriptファイルをダウンロードします。
https://labs.cybozu.co.jp/blog/mitsunari/2007/07/md5js_1.html
↓
https://labs.cybozu.co.jp/blog/mitsunari/2007/07/24/js/md5.js
(2) md5.jsがあるフォルダー内に「md5_js.html」というファイルを作ります。
(3) そのファイルに以下の内容を書きます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MD5 by JS</title>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
function onButtonClick() {
const str_input = document.forms.id_form_input.id_textBox.value;
const target = document.getElementById("str_input");
target.innerText = str_input;
const target_md5 = document.getElementById("str_md5");
target_md5.innerText = CybozuLabs.MD5.calc(str_input);
const target_md5_utf16 = document.getElementById("str_md5_utf16");
target_md5_utf16.innerText = CybozuLabs.MD5.calc(str_input, CybozuLabs.MD5.BY_UTF16);
}
</script>
</head>
<body>
<h1>JavaScriptでmd5ハッシュ値の計算</h1>
<form name="form_input" id="id_form_input" action="">
<input type="text" name="textBox" id="id_textBox" value="" size="50" />
<input type="button" value="GET MD5" onclick="onButtonClick();" />
</form>
<hr />
<h2>元の文字列</h2>
<div id="str_input"></div>
<hr />
<h2>ASCII文字のmd5ハッシュ値</h2>
<div id="str_md5"></div>
<hr />
<h2>マルチバイト文字（漢字など）のmd5ハッシュ値</h2>
<div id="str_md5_utf16"></div>
<hr />
<h3>参考</h3>
<p><a href="https://labs.cybozu.co.jp/blog/mitsunari/2007/07/md5js_1.html" target="_blank">md5.js (mitsunari@cybozu labs)</a></p>
</body>
</html>
(4) ブラウザーで「md5_js.html」を開きます。今回はChromeで動作テストしました。
(5) 試しに「abc」と入力して「GET MD5」ボタンをクリックして、ASCII文字のmd5ハッシュ値が「900150983cd24fb0d6963f7d28e17f72」となっていればOKです。
（こんなかんじの実行結果になりました。）
漢字などのマルチバイト文字は、
CybozuLabs.MD5.calc(str_input, CybozuLabs.MD5.BY_UTF16);
という具合に「CybozuLabs.MD5.BY_UTF16」というオプションを設定した方で取得しています。
（詳細は、 https://labs.cybozu.co.jp/blog/mitsunari/2007/07/md5js_1.html をご参照ください。）
今回は、md5方式のハッシュ値を計算するライブラリーを利用しました。
他の計算方式を採用する場合は、また別のライブラリー等を探して使えばいいと思います。
以上、JavaScriptでハッシュ値を計算する方法でした。
