HTMLとJavaで作ったアプリ

YouTubeでダウンロードした動画ファイルの名称変更を楽にするアプリをHTMLとJavaで作ったので紹介します。使い方は下記の画像に進めれば簡単に変更できます。
Java内である程度の記号類や全角や半角のスペースもあらかじめ削除するようにコード化してありますが、Javaのコードに追記することで、カスタマイズは可能です。
下記にコードを示しますので、興味があったらご利用ください。

HTMLは下記のとおりです

<!DOCTYPE html>
<html>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <head>
    <title>2024.03.24_new_009_index</title>
  </head>
  <body>
    <h2>
      MP4ファイル名から指定文字を削除し、ネーム編集後にOKボタンで<br />ダウンロードします
    </h2>
    <input type="file" id="fileInput" accept=".mp4" class="file-input" />
    <label for="folderInput">保存先フォルダ：</label>
    <input
      type="text"
      id="folderInput"
      placeholder="保存先フォルダを選択してください"
    />
    <button id="selectFolderButton">フォルダ選択</button>
    <p id="selectedFolder"></p>
    <p id="originalFileName"></p>
    <p id="modifiedFileName"></p>
    <input type="text" id="newFileName" placeholder="新しいファイル名を入力" />
    <button id="okButton">OK</button>
    <!-- 新しいファイル名でダウンロードするボタン -->
    <p></p>
    <div class="center1">
      <p>Ver.2024.03.24.0602　　　by あさまいCTS</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script>
      document
        .getElementById("fileInput")
        .addEventListener("change", function (event) {
          const file = event.target.files[0];
          const fileName = file.name;
          const modifiedFileName = removeCharacters(fileName);
          const newFileNameInput = document.getElementById("newFileName");
          newFileNameInput.value = modifiedFileName; // 新しいファイル名のinputboxに変更後のファイル名を表示
          document.getElementById("originalFileName").innerText =
            "変更前のファイル名: " + fileName; // 変更前のファイル名を表示
          document.getElementById("modifiedFileName").innerText =
            "変更後のファイル名: " + modifiedFileName; // 変更後のファイル名を表示
        });

      document
        .getElementById("okButton")
        .addEventListener("click", function () {
          const newFileNameInput = document.getElementById("newFileName");
          const newFileName = newFileNameInput.value;
          const fileInput = document.getElementById("fileInput").files[0];

          if (newFileName.trim() !== "") {
            const blob = fileInput.slice(0, fileInput.size, fileInput.type);
            const newFile = new File([blob], newFileName, {
              type: fileInput.type,
            });

            saveAs(newFile, newFileName);
          } else {
            alert("新しいファイル名を入力してください");
          }
        });

      document
        .getElementById("selectFolderButton")
        .addEventListener("click", function () {
          const folderInput = document.getElementById("folderInput");
          folderInput.click();
        });

      document
        .getElementById("folderInput")
        .addEventListener("change", function (event) {
          const selectedFolder = event.target.value;
          document.getElementById("selectedFolder").innerText =
            "選択したフォルダ: " + selectedFolder;
        });

      function removeCharacters(fileName) {
        // 削除する文字の正規表現パターン
        const pattern = /[【「『♪』」】（）\s]/g;
        return fileName.replace(pattern, ""); // 指定した文字を削除してファイル名を返す
      }
    </script>
  </body>
</html>

スタイルシートは下記のとおりです。

body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 20px;
}

h2 {
  color: #333;
  font-size : 24pt ;/* サイズを拡大 */
}

p {
  margin-bottom: 10px;
}

.center1 {
  background-color: #cccccc;
  padding: 5px;
  text-align: center;
  font-size : 14pt ;/* サイズを拡大 */
}

input[type="file"] {
  margin-bottom: 20px;
}

#okButton {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 13px 40px;
  font-size : 14pt ;/* サイズを拡大 */
  cursor: pointer;
}

#okButton:hover {
  background-color: #0056b3;
}

#selectedFolder, #originalFileName, #modifiedFileName {
  font-style: italic;
}

#downloadLink {
  color: #007bff;
  text-decoration: none;
}

#downloadLink:hover {
  text-decoration: underline;
}

/* 追加のスタイル *************************/
#newFileName {
  width: 800px; /* 幅を拡大 */
  height: 40px; /* 高さを拡大 */
  font-size : 14pt ;/* サイズを拡大 */
}

/* 各項目の左のアキを100pxとする */
#selectedFolder, #originalFileName, #modifiedFileName {
  margin-left: 100px;
  font-size : 14pt ;/* サイズを拡大 */
}

/* input[type="file"]のスタイル修正 */
input[type="file"] {
  margin-bottom: 20px;
  display: block; /* ブロック要素として表示 */
  height: 60px; /* 高さを40pxに設定 */
  padding: 15px 30px; /* ボタンのサイズを調整 */
}

#fileInput {
  background-color: rgb(144, 238, 144); /* 薄い緑色に設定 */
  font-size: 25px; /* ボタン内のテキストサイズを大きくします */
  padding: 30px 30px 15px 30px; /* 内側の余白を増やしてボタンを大きくします */
  border: 1px solid #8726d2; /* ボタンの境界線を指定します (オプション) */
  border-radius: 5px; /* ボタンの角を丸くします (オプション) */
  cursor: pointer; /* マウスカーソルをポインタに変更します (オプション) */
}

Follow me!

@asamai_cts

投稿者プロフィール

近江公人asamai-cts Owner

あさまいCTSの代表オヤジです（2021年現在＝60歳）
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会　実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年１月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成　その他何でも屋みたいなものです・・・