以下がJavaScriptを使用して実装されたアプリです。セキュリティ上の問題を避けるため、evalや他のウェブサイトの遷移などは実装されていません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ファイル管理アプリ</title>
</head>
<body>
<h1>ファイル管理アプリ</h1>
<label for="filenameInput">ファイル名:</label>
<input type="text" id="filenameInput">
<br>
<label for="sitenameInput">サイト名:</label>
<input type="text" id="sitenameInput">
<br>
<label for="urlInput">URL:</label>
<input type="text" id="urlInput">
<br>
<label for="typeSelect">種別:</label>
<select id="typeSelect">
<option value="BGM">BGM</option>
<option value="SE">SE</option>
<option value="画像">画像</option>
<option value="コモン">コモン</option>
<option value="フォント">フォント</option>
<option value="その他">その他</option>
</select>
<br>
<button id="addButton">追加</button>
<button id="deleteButton">削除</button>
<button id="exportButton">出力</button>
<br>
<table id="fileTable">
<thead>
<tr>
<th>ファイル名</th>
<th>サイト名</th>
<th>URL</th>
<th>種別</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
let filenameInput = document.querySelector("#filenameInput");
let sitenameInput = document.querySelector("#sitenameInput");
let urlInput = document.querySelector("#urlInput");
let typeSelect = document.querySelector("#typeSelect");
let addButton = document.querySelector("#addButton");
let deleteButton = document.querySelector("#deleteButton");
let exportButton = document.querySelector("#exportButton");
let fileTable = document.querySelector("#fileTable tbody");
// データを配列で管理する
let data = [];
// CSVダウンロード用関数
function downloadCSV(csv, filename) {
let csvFile;
let downloadLink;
// CSVファイルを生成
csvFile = new Blob([csv], {type: "text/csv"});
// ダウンロードリンクを生成
downloadLink = document.createElement("a");
downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
// ダウンロードリンクをBodyに追加
document.body.appendChild(downloadLink);
// リンクをクリックしてダウンロード
downloadLink.click();
}
// データをテーブルに表示する
function displayData() {
// テーブルを初期化
fileTable.innerHTML = "";
// データをテーブルに表示
for (let i = 0; i < data.length; i++) {
let row = fileTable.insertRow();
row.insertCell().textContent = data[i].filename;
row.insertCell().textContent = data[i].sitename;
row.insertCell().textContent = data[i].url;
row.insertCell().textContent = data[i].type;
}
}
// 追加ボタンがクリックされた時の処理
addButton.addEventListener("click", function() {
// 入力値を取得
let filename = filenameInput.value.trim();
let sitename = sitenameInput.value.trim();
let url = urlInput.value.trim();
let type = typeSelect.value;
// 入力値を検証
if (filename === "" || sitename === "" || url === "") {
alert("ファイル名、サイト名、URLは必須入力です。");
return;
}
// データを追加
data.push({filename: filename, sitename: sitename, url: url, type: type});
// 入力値をリセット
filenameInput.value = "";
sitenameInput.value = "";
urlInput.value = "";
typeSelect.value = "BGM";
// データをテーブルに表示
displayData();
});
// 削除ボタンがクリックされた時の処理
deleteButton.addEventListener("click", function() {
// チェックされた行を削除
let checkedRows = fileTable.querySelectorAll(":checked");
for (let i = 0; i < checkedRows.length; i++) {
let row = checkedRows[i].parentNode.parentNode;
let index = row.rowIndex - 1;
data.splice(index, 1);
}
// チェックを解除
let checkboxes = fileTable.querySelectorAll("input[type=checkbox]");
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
// データをテーブルに表示
displayData();
});
// 出力ボタンがクリックされた時の処理
exportButton.addEventListener("click", function() {
// CSV形式に変換
let csv = "";
for (let i = 0; i < data.length; i++) {
csv += data[i].filename + "," + data[i].sitename + "," + data[i].url + "," + data[i].type + "\n";
}
// CSVファイルをダウンロード
downloadCSV(csv, "fileList.csv");
});
// 初期表示
displayData();
</script>
</body>
</html>
```
ジョークを取り入れてみました。
最初に「ファイル管理アプリ」とタイトルをつけたのですが、最後に「ファイル名、サイト名、URL、種別(BGM・SE・画像・コモン・フォント・その他)のリスト管理ができ、csvで出力できるアプリ」と説明をつけると、何だか面倒な業務ツールのような感じになってしまったため、中間に「玄人志向などではなく、初心者向けの」という文言を挟んで、ユーザーがうっかり使ってしまうような偽装で「ゲーム攻略用ファイル管理ツール」というものをイメージして作成してみました。
