document.createElementで作成したbuttonにspinnerを付ける

Question

JavaScriptのdocument.createElement('BUTTON')で作ったボタンを押すと、spinnerが回るということを実現したいです。もともとのJavaScriptのコードは以下です。

var upload = document.createElement('BUTTON');
upload.href="#";
upload.innerHTML = "録音をアップロード";
upload.style.fontFamily = "'M PLUS Rounded 1c', sans-serif";
upload.className = "btn btn-primary btn-lg";

upload.addEventListener("click", function(event){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
          document.write(xhr.responseText);
      }
  }
    var fd=new FormData();
    fd.append("audio_data",blob, filename);
    xhr.open("POST","/",true);
    xhr.send(fd);
})

このコードに何かを付け加えて、spinnerが回るようにします。
ネットを検索したところ、spin.js(http://spin.js.org/)がよさそうだということが分かりました。
以下のようなコードを自分のコードに埋め込むことまではわかったのですが、どのようにすればよいかの検討がつかないのです。方向性だけでも何かアドバイスを頂けませんでしょうか。よろしくお願いいたします。

import {Spinner} from 'spin.js';

var opts = {
  lines: 13, // The number of lines to draw
  length: 38, // The length of each line
  width: 17, // The line thickness
  radius: 45, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#ffffff', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: '0 0 1px transparent', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};

var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

Comments

[Lhankor_Mhy]

Node.js を使っているのですか？

[kzkszk]

言葉足らずで申し訳ありません。
Google Cloud Platform AppEngine Python上でデプロイしております。
ウェブフレームワークはFlaskをつかっております。

[Lhankor_Mhy]

ということは、このスクリプトはブラウザ上で動作しているんですよね？
webpack などは使っていないのですよね？

[kzkszk]

はい、そうです。ブラウザ上です。
webpackは使っていません。

Answer 1

公式のページにある通り、script要素を使ってみてはいかがでしょうか？

However, in modern browsers it is also possible to directly load the module via a script tag:

<script type="module" src="node_modules/spin.js/spin.js"></script>
spin.js

Comments

[kzkszk]

ご回答ありがとうございます。`<script type="module" src="node_modules/spin.js/spin.js"></script>`をapp.js（自分のJavaScriptのファイル）に入れればspin.jsを使えるようになるということですよね。質問で書いたようにapp.jsでは、`var upload = document.createElement('BUTTON');`でボタンを作って、`upload.addEventListener("click", function(event){var xhr=new XMLHttpRequest();`でボタンを押したらファイルをサーバにアップロードします。このボタンを押したときに、spinnerを回したいのですが、何かヒントがありましたら、教えてください。お願いいたします。

[Lhankor_Mhy]

> `<script type="module" src="node_modules/spin.js/spin.js"></script>`をapp.js（自分のJavaScriptのファイル）に入れればspin.jsを使える

違います。
とりあえず、HTMLの勉強をしてみては？
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script

[Lhankor_Mhy]

ググってみたところ、CDNがあるようでした。
バージョンはだいぶ古いですが、こちらでやってみるのもいいのかもしれません。
https://cdnjs.com/libraries/spin.js/

[Lhankor_Mhy]

ソースコードダウンロードして試してみましたが、
export { Spinner };
をコメントアウトすれば、モジュールではない形で使えそうでした。（ただし、名前空間は使用されます）
簡単に動作確認済みですので、お試しになってはいかがですか？

[kzkszk]

ご連絡が遅れて申し訳ありません。アドバイスをありがとうございます。自分が全然分かっていないということが分かりました。試してみます。ベストアンサーにするのちょっとお待ちください。

[kzkszk]

spin.jsをダウンロードしてhtmlと合わせて使うところまではネットの情報で何とかなりました。しかし、
XMLHttpRequestにどのように書いていくのかはわからずじまいでした。無念です。ご協力ありがとうございました。
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var res = this.responseText;

setTimeout(function(){
document.getElementById("demo").innerHTML = res;
}, 2000);
} else {
document.getElementById("demo").innerHTML = 'Loading...';
}
};

[Lhankor_Mhy]

sendのタイミングでspinnerを回せばいいかと思いますよ。

[kzkszk]

返信が遅れてしまいすみません。ご回答ありがとうございます。以下のことを推測しています。①<script type="module" src="node_modules/spin.js/spin.js"></script>はhtmlファイルに書く。
②var fd=new FormData();
fd.append("audio_data",blob, filename);
xhr.open("POST","/",true);
xhr.send(fd);
この後ろに
var spinner = new Spinner().spin();
target.appendChild(spinner.el);
と書く。
ただし、spinner.elをhtmlファイルの中に書かないといけないんですよね？

以上をやってみます。

[Lhankor_Mhy]

2点ほど、ご助言をさせていただきます。

・XMLHttpRequestよりも、こちらを使った方が楽です→https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
・まずは、ミニマムなものを試作してみてはいかがでしょうか。たとえば、読み込み開始時に画像を表示して、読み込みが終わったら画像を消す、というコードを書けなければ、spin.jsを組み込むこともできないのではないかと思います。

[kzkszk]

アドバイスありがとうございます。fetchAPIを使って、ミニマムなものから挑戦します。何をやらなきゃいけないかがわかって助かります。ありがとうございます。

[kzkszk]

fetchAPIを使って日本の休日をコンソールに表示します。ミニマムから始めます。これが動くことは確認しました。
<!DOCTYPE html>
<html>
<body>
<button id="fetchbutton">fetch button</button>
<script>
var fetchButton = document.getElementById("fetchbutton");
fetchButton.addEventListener("click", function(){
fetch("https://holidays-jp.github.io/api/v1/date.json")
.then(response =>{
console.log(response);
});
});
</script>
</body>
</html>

[kzkszk]

次にボタンを押すと画像が出現するhtmlファイルを作りました。これも動きます。
```
<!DOCTYPE HTML>
<html>
<body id = "body">
<button id="clickhere">click here</button>
<script>
var clickHere = document.getElementById("clickhere");
clickHere.addEventListener("click", function(){
var img = document.createElement('img');
img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
document.getElementById('body').appendChild(img);
});
</script>
</body>
</html>
```

[kzkszk]

上記の二つをいかに組み合わせるかで困っています。fetchAPI spinner と検索してみたのですが、ヒットしたウェブサイトは複雑すぎてどうすることもできませんでした。検索キーワードだけでも手がかりいただければ幸いです。よろしくお願いいたします。

[Lhankor_Mhy]

ここは参考になるのではないでしょうか。
https://www.prj-alpha.biz/entry/2018/05/07/234631

なお、fetch() 関数は promise を返します。ご参考までに。

[kzkszk]

アドバイスありがとうございます。以下のコードで、読み込み開始時に画像を表示して、読み込みが終わったら画像を消すことができるようになりました。次はスピナーに挑戦します。

<!DOCTYPE html>
<html>
<body id = "body">
<button id="fetchbutton">fetch button</button>
<script>
var fetchButton = document.getElementById("fetchbutton");
fetchButton.addEventListener("click", function(){
var img = document.createElement('img');
img.id = "image";
img.src = 'https://media.geeksforgeeks.org/wp-content/uploads/20190529122828/bs21.png';
document.getElementById('body').appendChild(img);

fetch("https://holidays-jp.github.io/api/v1/date.json")
.then(response =>{
console.log(response);
var element = document.getElementById("image");
element.parentNode.removeChild(element);
});
});
</script>
</body>
</html>

[Lhankor_Mhy]

お見事です。

[kzkszk]

的確なアドバイスをくださったおかげで、ここまでたどり着きました。ありがとうございます。JavaScriptってうまくできているなーとしみじみ思います。次はスピナーに挑戦します。

[kzkszk]

画像のかわりにスピナーを回すことができるようになりました。次は自分のプロジェクトでスピナーを回します。たくさん助言をくださって本当にありがとうございました。
<!DOCTYPE html>
<html>
<body id = "body">
<button id="fetchbutton">fetch button</button>
<div id='spin-area'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
<script>
var fetchButton = document.getElementById("fetchbutton");
fetchButton.addEventListener("click", function(){
var spinner = new Spinner().spin();
target = document.getElementById('spin-area');
target.appendChild(spinner.el);

fetch("https://holidays-jp.github.io/api/v1/date.json")
.then(response =>{
var element = document.getElementById("spin-area");
element.parentNode.removeChild(element);
console.log(response);
});
});
</script>
</body>
</html>

[Lhankor_Mhy]

ご解決されて何よりです。