Bootstrapでファイルアップロード進捗を見せる！プログレスバーとスピナー活用法

1. ファイルアップロードの進捗とは？

1. ファイルアップロードの進捗とは？

ファイルアップロードの進捗とは、ユーザーがアップロードしているファイルがサーバーにどれくらい送信されたかを示すものです。初心者の方には、これは動画の再生バーのようなものと考えるとわかりやすいです。バーが右に進むほど、アップロードが進んでいるということです。

2. Bootstrapのプログレスバーとスピナーの基本

2. Bootstrapのプログレスバーとスピナーの基本

Bootstrapでは、プログレスバーを作るために

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

3. XHRでファイルのアップロード進捗を取得する方法

3. XHRでファイルのアップロード進捗を取得する方法

XHR（XMLHttpRequest）を使うと、ファイルのアップロード中にどれくらい送信されたかを取得できます。これは通信の進捗イベント「progress」を監視することで可能です。進捗バーの幅をこの値に応じて変更することで、リアルタイムで進捗を表示できます。

<input type="file" id="fileInput">
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>

<script>
const fileInput = document.getElementById('fileInput');
const progressBar = document.querySelector('.progress-bar');

fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            progressBar.style.width = percent + '%';
        }
    });
    xhr.open('POST', '/upload');
    const formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);
});
</script>

4. Fetch APIとプログレスバーの連携

4. Fetch APIとプログレスバーの連携

Fetch APIはXHRよりも新しい方法ですが、直接進捗イベントを取得できません。しかしReadableStreamを使うことで、送信中の進捗を取得できます。Fetchを使ったモダンな方法で、進捗バーを動かす例を紹介します。

<input type="file" id="fileInput2">
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>

<script>
const input2 = document.getElementById('fileInput2');
const progressBar2 = document.querySelector('.progress-bar');

input2.addEventListener('change', async () => {
    const file = input2.files[0];
    const chunkSize = 1024 * 100;
    let uploaded = 0;

    while(uploaded < file.size) {
        const chunk = file.slice(uploaded, uploaded + chunkSize);
        const formData = new FormData();
        formData.append('file', chunk);
        await fetch('/upload-chunk', { method: 'POST', body: formData });
        uploaded += chunk.size;
        const percent = (uploaded / file.size) * 100;
        progressBar2.style.width = percent + '%';
    }
});
</script>

5. アップロード中のスピナー表示でユーザーに安心感を

5. アップロード中のスピナー表示でユーザーに安心感を

ファイルサイズが大きい場合、アップロードには時間がかかります。その間、ユーザーが何も表示されないと不安になります。スピナーを表示することで「処理中です」という視覚的な安心感を与えられます。

<div id="spinner" class="spinner-border text-success" role="status" style="display:none;">
    <span class="visually-hidden">Loading...</span>
</div>

<script>
const spinner = document.getElementById('spinner');
fileInput.addEventListener('change', () => {
    spinner.style.display = 'inline-block';
    // アップロード処理が終わったら
    // spinner.style.display = 'none';
});
</script>

6. プレースホルダーでアップロード前のレイアウトを維持

6. プレースホルダーでアップロード前のレイアウトを維持

Bootstrapのプレースホルダーは、コンテンツがまだ読み込まれていないときの見た目を整えるための機能です。ファイルアップロード中も、進捗バーやスピナーが出る領域をプレースホルダーで確保すると、ページのレイアウトが変わらずに見やすくなります。

<div class="placeholder-glow">
    <span class="placeholder col-12"></span>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>

7. 進捗バーとスピナーを組み合わせた実用例

7. 進捗バーとスピナーを組み合わせた実用例

実際のアップロード画面では、プログレスバーとスピナーを一緒に使うとユーザーがより理解しやすくなります。バーは進行状況を示し、スピナーは処理中であることを強調します。Bootstrapではこれらを簡単に組み合わせられます。

<input type="file" id="fileInput3">
<div id="spinner3" class="spinner-border text-primary" role="status" style="display:none;">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width:0%"></div>
</div>

<script>
const input3 = document.getElementById('fileInput3');
const spinner3 = document.getElementById('spinner3');
const progressBar3 = document.querySelector('.progress-bar');

input3.addEventListener('change', () => {
    spinner3.style.display = 'inline-block';
    const file = input3.files[0];
    const xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', e => {
        if (e.lengthComputable) {
            progressBar3.style.width = (e.loaded / e.total * 100) + '%';
        }
    });
    xhr.onload = () => { spinner3.style.display = 'none'; };
    const formData = new FormData();
    formData.append('file', file);
    xhr.open('POST', '/upload');
    xhr.send(formData);
});
</script>

8. 初心者でもわかる進捗表示のポイントまとめ

8. 初心者でもわかる進捗表示のポイントまとめ

初心者がファイルアップロード進捗を作る場合は、まずはBootstrapのプログレスバーとスピナーを理解しましょう。次にXHRで進捗を取得し、進捗バーの幅を変える練習をします。Fetch APIはもう少し進んだステップですが、同じ考え方で進捗を表示できます。プレースホルダーでページレイアウトを整えることも大切です。

このように、進捗バー、スピナー、プレースホルダーを組み合わせることで、ユーザーにわかりやすく、安全にアップロード中であることを伝えることができます。これにより、初心者でも簡単に見た目の良いアップロード画面を作成できます。

まとめ

まとめ

今回はBootstrapを使ったファイルアップロード進捗表示について、初心者の方でも理解しやすいように解説しました。まず、ファイルアップロードの進捗とはユーザーが送信しているデータがどれだけサーバーに届いたかを示す指標であり、動画再生のバーと同じように考えるとわかりやすいことがわかりました。次に、Bootstrapのプログレスバーやスピナーを使うことで、アップロード中に視覚的な進捗表示や処理中の安心感をユーザーに提供できることを学びました。具体的には