画像抽出アプリ
URLを入力して、その中に含まれる画像ファイルを抽出します。
これであなたの画像ファイルを見失わなくなります！
以下が、ユーザーの要望に沿ったアプリのコード例です。セキュリティ脆弱性を考慮して、evalや外部サイトへの遷移、リダイレクトは行わないようにしています。また、alertも使用していません。ジョークとして、「これであなたの画像ファイルを見失わなくなります！」というコメントを入れました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像抽出アプリ</title>
</head>
<body>
<h1>画像抽出アプリ</h1>
<p>URLを入力して、その中に含まれる画像ファイルを抽出します。</p>
<form id="urlForm">
<label for="urlInput">URL:</label>
<input type="text" id="urlInput" name="url">
<button type="submit">抽出</button>
</form>
<div id="imageList">
<!-- ここに画像ファイルのリストが追加されます -->
</div>
<script>
const urlForm = document.getElementById('urlForm');
const imageList = document.getElementById('imageList');
urlForm.addEventListener('submit', async (event) => {
event.preventDefault();
const url = event.target.url.value;
try {
const response = await fetch(url);
const html = await response.text();
const parser = new DOMParser();
const dom = parser.parseFromString(html, 'text/html');
const images = dom.querySelectorAll('img');
imageList.innerHTML = ''; // 既存のリストを空にする
if (images.length == 0) {
const message = document.createElement('p');
message.textContent = '画像ファイルはありませんでした。';
imageList.appendChild(message);
}
images.forEach((image) => {
const listItem = document.createElement('li');
const link = document.createElement('a');
const imageSrc = image.getAttribute('src');
link.href = imageSrc;
link.textContent = imageSrc;
listItem.appendChild(link);
imageList.appendChild(listItem);
});
} catch(error) {
console.error(error);
const message = document.createElement('p');
message.textContent = 'エラーが発生しました。';
imageList.appendChild(message);
}
});
</script>
<p>これであなたの画像ファイルを見失わなくなります！</p>
</body>
</html>
```