javascriptでつくるmd5ハッシュ作成サイト





成果物


成果物

環境


  • nodejs 12.16.1


package.json


package.json
{
  "scripts": {
    "start": "parcel src/index.html --out-dir public",
    "build": "parcel build ./src/index.html --public-url ./ -d dist --no-source-maps"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4"
  }
}


src/index.html


src/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>md5</title>

    <!-- bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <style>
      body {
        margin: 0;
        background: #f7f7f7;
      }

      /* bootstrapの謎の右の余白を消す */
      #wrap {
        overflow: hidden;
      }

      main {
        max-width: 750px;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <br />
      <main>
        <div class="input-group">
          <input
            type="text"
            id="input0"
            class="form-control"
            aria-label=""
            aria-describedby="basic-addon1"
            placeholder="文字列"
          />
          <div class="input-group-append">
            <button id="button0" class="btn btn-primary" type="button">
              作成
            </button>
          </div>
        </div>

        <br />

        <div class="input-group">
          <input
            type="text"
            id="input1"
            class="form-control"
            aria-label=""
            aria-describedby="basic-addon1"
            readonly
          />

          <div class="input-group-append">
            <button id="button1" class="btn btn-success" type="button">
              コピー
            </button>
          </div>
        </div>
      </main>
    </div>

    <!-- bootstrap用 -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

    <script src="index.js"></script>
  </body>
</html>


src/index.js


src/index.js
const crypto = require('crypto');

document.getElementById('button0').onclick = () => {
  document.getElementById('input1').value = crypto
    .createHash('md5')
    .update(document.getElementById('input0').value)
    .digest('hex');
};

document.getElementById('button1').onclick = () => {
  // 文字をすべて選択
  document.getElementById('input1').select();
  // コピー
  document.execCommand('copy');
};

document
  .getElementById('input0')
  .addEventListener('keypress', function onEvent(event) {
    if (event.key === 'Enter') {
      document.getElementById('button0').click();
    }
  });


コマンド


bash
$ npm i
$ npm start


ホームへ