JAVAScriptとHTMLでWebアプリを作ってみた

2024年3月24日 2024年5月7日近江公人

近江公人

昨日、Webサーバーのデータベースをいじっていたら、誤ってレコードを消してしまった！！
ただいまサイトをリペア中です。
2022/8/6から今年の２月までの記事が吹っ飛んでしまいました。
これを機に全面的にリニューアルしようかと考えていますが、最新の状態に戻るまで過去のFBを確認しながら、簡易的に修復中です。
以下は、リペア中のコンテンツです・・・

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

使い方：画面の案内のとおり変換したいファイルをダイアログから選択し、下段の入力ウィンドウで表示されているMP4ファイル名から指定文字を削除し、ネーム編集後にOKボタンで
ダウンロードすると、リネームされて保存できます。

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
  <title>new_008_index</title>
</head>
<body>
<h2>MP4ファイル名から指定文字を削除し、ネーム編集後にOKボタンで<br>ダウンロードします</h2>
<input type="file" id="fileInput" accept=".mp4" class="file-input">
<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　　　by あさまいCTS</p>
</div>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const fileName = file.name;
  const folderPath = event.target.value.replace(/\\/g, "/"); // ファイルが含まれているフォルダのフルパスを取得
  const folderName = folderPath.split("/").slice(-1)[0]; // フォルダ名を取得
  const userName = folderPath.split("/")[2]; // ユーザー名を取得
  const selectedFolderPath = folderPath.replace(`/${userName}/`, `/${userName}/OneDrive/`); // OneDriveのパスに変更
  const modifiedFileName = removeCharacters(fileName);
  const newFileNameInput = document.getElementById('newFileName');
  newFileNameInput.value = modifiedFileName; // 新しいファイル名のinputboxに変更後のファイル名を表示

  document.getElementById('selectedFolder').innerText = "選択したフォルダ:  C:￥Users￥lenov￥OneDrive￥動画￥RealPlayer Downloads￥ "; // 選択したフォルダのフルパスを表示

  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];
  const folderPath = document.getElementById('fileInput').value.replace(/\\/g, "/"); // ファイルが含まれているフォルダのフルパスを取得
  const folderName = folderPath.split("/").slice(-1)[0]; // フォルダ名を取得
  const userName = folderPath.split("/")[2]; // ユーザー名を取得
  const selectedFolderPath = folderPath.replace(`/${userName}/`, `/${userName}/OneDrive/`); // OneDriveのパスに変更

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

    const a = document.createElement('a');
    a.href = URL.createObjectURL(newFile);
    a.download = newFileName;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
  } else {
    alert('新しいファイル名を入力してください');
  }
});

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

<!DOCTYPE html>

<html>

<head>

<title>new_008_index</title>

</head>

<body>

<h2>MP4ファイル名から指定文字を削除し、ネーム編集後にOKボタンで<br>ダウンロードします</h2>

<p>Ver.2024.03.24　　　by あさまいCTS</p>

</div>

document.getElementById('fileInput').addEventListener('change', function(event) {

const file = event.target.files[0];

const fileName = file.name;

const folderPath = event.target.value.replace(/\\/g, "/"); // ファイルが含まれているフォルダのフルパスを取得

const folderName = folderPath.split("/").slice(-1)[0]; // フォルダ名を取得

const userName = folderPath.split("/")[2]; // ユーザー名を取得

const selectedFolderPath = folderPath.replace(`/${userName}/`, `/${userName}/OneDrive/`); // OneDriveのパスに変更

const modifiedFileName = removeCharacters(fileName);

const newFileNameInput = document.getElementById('newFileName');

newFileNameInput.value = modifiedFileName; // 新しいファイル名のinputboxに変更後のファイル名を表示

document.getElementById('selectedFolder').innerText = "選択したフォルダ: C:￥Users￥lenov￥OneDrive￥動画￥RealPlayer Downloads￥ "; // 選択したフォルダのフルパスを表示

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];

const folderPath = document.getElementById('fileInput').value.replace(/\\/g, "/"); // ファイルが含まれているフォルダのフルパスを取得

const folderName = folderPath.split("/").slice(-1)[0]; // フォルダ名を取得

const userName = folderPath.split("/")[2]; // ユーザー名を取得

const selectedFolderPath = folderPath.replace(`/${userName}/`, `/${userName}/OneDrive/`); // OneDriveのパスに変更

if (newFileName.trim() !== '') {

const blob = fileInput.slice(0, fileInput.size, fileInput.type);

const newFile = new File([blob], newFileName, { type: fileInput.type });

const a = document.createElement('a');

a.href = URL.createObjectURL(newFile);

a.download = newFileName;

a.style.display = 'none';

document.body.appendChild(a);

a.click();

URL.revokeObjectURL(a.href);

document.body.removeChild(a);

} else {

alert('新しいファイル名を入力してください');

}

});

function removeCharacters(fileName) {

// 削除する文字の正規表現パターン

const pattern = /[【「『♪』」】（）\s]/g;

return fileName.replace(pattern, ''); // 指定した文字を削除してファイル名を返す

}

</script>

</body>

</html>

Style.cssファイルに下記のCSSのコードを記述します。

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; /* マウスカーソルをポインタに変更します (オプション) */
}

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; /* マウスカーソルをポインタに変更します (オプション) */

}

投稿者プロフィール

近江公人asamai-cts Owner

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

JAVAScriptとHTMLでWebアプリを作ってみた

投稿者プロフィール

最新の投稿

Google AppSheetで写真管理２

スタートしたGW