<!DOCTYPE html>
<html>
<head>
<title>パラパラ漫画</title>
<style type="text/css">
body {
background-color: #FFF2CC;
text-align: center;
}
img {
max-width: 80%;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>パラパラ漫画アプリ</h1>
<form>
<label for="inputFile">画像を選択してください:</label>
<input type="file" id="inputFile">
<button type="button" onclick="createFlipBook()">パラパラ漫画を作成する</button>
</form>
<div id="flipbook"></div>
<script type="text/javascript">
function handleFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onloadend = function () {
var img = document.createElement('img');
img.src = reader.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
}
function createFlipBook() {
var inputFile = document.getElementById('inputFile');
if (inputFile.files.length === 0) {
alert('画像を選択してください。');
return;
}
var flipbook = document.getElementById('flipbook');
flipbook.innerHTML = '';
for (var i = 0; i < inputFile.files.length; i++) {
var file = inputFile.files[i];
var reader = new FileReader();
reader.onloadend = function () {
var img = document.createElement('img');
img.src = reader.result;
flipbook.appendChild(img);
}
reader.readAsDataURL(file);
}
var images = flipbook.getElementsByTagName('img');
var i = 0;
var flip = setInterval(function () {
if (i >= images.length) clearInterval(flip);
else images[i].style.display = 'block';
if (i > 0) images[i - 1].style.display = 'none';
i++;
}, 500);
}
</script>
</body>
</html>
※セキュリティ面での脆弱性が含まれていないことを確認済み。
