パラパラ漫画の自動作成ツールを作成していましたが、諦めたことをご報告いたします。
〇HTMLで入力欄やチェックボックスを作成、自動作成ツールを試みる。
自動作成ツールの最終的なHTMLになります。
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="form">
<p></p>
<label>画像の枚数:</label>
<input type="text" id="box1">
<p></p>
<label>パラパラ漫画の表紙のパス:</label>
<input type="text" id="box2">
<p></p>
<label>パラパラ漫画の画像のパス:</label>
<input type="text" id="box3">
<p></p>
<button id="make">パラパラ漫画のHTML作成</button>
<div id = "add"></div>
</div>
</div>
<script>
document.getElementById("make").onclick = function(){
const textbox1 = document.getElementById("box1").value;
const textbox2 = document.getElementById("box2").value;
const textbox3 = document.getElementById("box3").value;
let ht1 = textbox1;
let ht2 = textbox2;
let ht3 = textbox3;
var x = document.getElementById("add");
//x.innerHTML = ht1+ht2+ht3;
x.innerHTML = "<!DOCTYPE html><html><head><style></style></head><body><div class="img-frame"><img id="imagePlace" src=""
+ht2
+""></div><p ></p><div class="dslider"><div id="slider"></div></div> <p></p><div class="bu"><button id="moveOn">▶</button><button id="Return">◀</button><button id="autoPlay">再生</button><button id="zoom">＋</button><button id="zoomout">－</button></div><p></p><script type="text/javascript">var index = 1;const image = ""
+ht3
+""let img = document.getElementById("imagePlace");var maximg = "
+ht1
+";document.getElementById("moveOn").onclick = function(){index++;$( "#slider" ).slider( "value", index );if(index>maximg){ index=1$( "#slider" ).slider( "value", index );}img.src = image + index + ".png";}document.getElementById("Return").onclick = function(){index--;$( "#slider" ).slider( "value", index );if(index<1){ index=maximg;$( "#slider" ).slider( "value", index );}img.src = image + index + ".png";}document.getElementById("autoPlay").onclick = function(){switch(document.getElementById("autoPlay").innerHTML){case "再生" :document.getElementById("autoPlay").innerHTML = "停止";intervalID = setInterval(function(){index++;$( "#slider" ).slider( "value", index );if(index>maximg){index=1 $( "#slider" ).slider( "value", index );};img.src = image + index + ".png";},1000)break;case "停止":clearInterval(intervalID);document.getElementById("autoPlay").innerHTML = "再生";break; };}document.getElementById("imagePlace").addEventListener("wheel",wheelpa,{passive:false});function wheelpa(event){event.preventDefault();if (event.wheelDelta == -120){console.log("手前")index++;$( "#slider" ).slider( "value", index );if(index>maximg){index=1$( "#slider" ).slider( "value", index );}img.src = image + index + ".png";}if (event.wheelDelta == 120){console.log("おく")index--;$( "#slider" ).slider( "value", index );if(index<1){index=maximg$( "#slider" ).slider( "value", index );}img.src = image + index + ".png";}}$(function() {let img = document.getElementById("imagePlace");$('#slider').slider({min: 1,max: maximg,step: 1,value: 1,slide: function(event, ui) {index = ui.value;img.src = image + index + ".png";}});});$( function() {let img = document.getElementById("imagePlace");$( "#imagePlace" ).draggable();} );var x = 1 ;document.getElementById("zoom").onclick = function(){console.log('afdaf')x = x + 0.2;document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";}document.getElementById("zoomout").onclick = function(){x = x - 0.2;if(x>1.1){console.log("111")document.getElementById("imagePlace").style.transform = "scale(" + x + "," + x + ")";}}</script></body></html>";}
</script>
</body>
</html>実行結果
はじめに「画像枚数」や「画像のパス」などを入力します。
「」ボタンを押すと、先ほど入力した値を取得し、パラパラ漫画のHTMLを成します。
作成したHTMLをメモ帳などに貼り付けます。
HTML形式で保存して、ブラウザーで開きます。
うまく動かないと思います。
パラパラ漫画の自動作成の過程で、「パラパラ漫画のHTML作成」ボタンを押すとHTMLを正常に出力されるために改行がないようにしています。
パラパラ漫画の自動作成の過程で、「パラパラ漫画のHTML作成」ボタンを押すとHTMLを正常に出力されるために改行がないようにしています。
そうすると、出力されたHTMLやJavaScriptが改行されていないため、ブラウザーがうまく読み込むことができないと考えます。
パラパラ漫画の自動作成ツールは諦めることにしました。
その代わりに次回はパラパラ漫画のプログラミングコードを解説します。
また、パラパラ漫画を利用する場合にどこを触ればいいかも解説したいと思っています。