【JavaScript】ファイルサイズを自動取得して表示する

2024年07月16日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は地味に役立つWEBサイト運用に役立つTipsを紹介します！

普段WEBサイトにユーザーにダンロードしてもらうためのpdfやExcelをアップロードすることがあると思います。
その際、ファイルサイズを記載していますか？
pdfとかになると相当な容量になり、スマホユーザーの負担になってしまいかねません。
なので、ダウンロードファイルのサイズを記載することはユーザビリティの向上につながるでしょう。

ですが、面倒くさいですよね。
運用上、記載し忘れもありそうですし。

そこでこのコードが役立ちます！！

実装例

2024.07
excel
PDF
2024.06
excel
PDF
2024.05
excel
PDF
2024.04
excel
PDF
2024.03
excel
PDF
2024.02
excel
PDF

HTML例

<ul class="archive-list">
  <li class="archive-item">
    <div>2024.07</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202407.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202407.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
  <li class="archive-item">
    <div>2024.06</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202406.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202406.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
  <li class="archive-item">
    <div>2024.05</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202405.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202405.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
  <li class="archive-item">
    <div>2024.04</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202404.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202404.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
  <li class="archive-item">
    <div>2024.03</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202403.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202403.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
  <li class="archive-item">
    <div>2024.02</div>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202402.xlsx" target="_blank" rel="noopener">excel <span class="file_size" data-filepath=""></span></a>
    <a class="js-fileSize" data-filepath="" href="/cp/wp/wp-content/themes/jomo_wp/assets/202402.pdf" target="_blank" rel="noopener">PDF <span class="file_size" data-filepath=""></span></a>
  </li>
</ul>

CSS例

.archive-list{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}
.archive-item{
  width: calc(100% / 3);
  margin: 0 0 10px;
}
.archive-item a{
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}
.archive-item a:nth-of-type(1){
  background-color: #008014;
}
.archive-item a:nth-of-type(2){
  background-color: #DF0201;
}

JavaScript例

document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".js-fileSize").forEach(function(element) {
  var fileLink = element.getAttribute('href');
  element.setAttribute('data-filepath', fileLink);
  processFileSize(element);
});
function processFileSize(element) {
  var placeholder = "-";
  var filePath = element.getAttribute('data-filepath');
  if (!filePath) {
    element.querySelector(".file_size").textContent = placeholder;
    return;
  }
  var fileExtension = filePath.split('.').pop().toLowerCase();
  if (fileExtension !== "pdf" && fileExtension !== "xlsx") {
    element.querySelector(".file_size").textContent = placeholder;
    return;
  }
  var xhr = new XMLHttpRequest();
  xhr.open("HEAD", filePath, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var fileSize = xhr.getResponseHeader("Content-Length");
        element.querySelector(".file_size").textContent = formatFileSize(fileSize);
      } else {
        element.querySelector(".file_size").textContent = placeholder;
      }
    }
  };
  xhr.send();
}
function formatFileSize(size) {
  size = parseInt(size, 10);
  if (size < 1024) {
    return size + "B";
  }
  size = roundToDecimal(size / 1024);
  if (size < 1024) {
    return size + "KB";
  }
  size = roundToDecimal(size / 1024);
  if (size < 1024) {
    return size + "MB";
  }
  return roundToDecimal(size / 1024) + "GB";
}

function roundToDecimal(number) {
  return Math.ceil(number * 10) / 10;
}
});