テキストファイルをスプレッドシートにアップロードする #JavaScript

Agenda

はじめに
やりたいこと
どう実現するか
実装
できた
さいごに

はじめに

O84です。
Excel(スプレッドシート)方眼紙にソースコードを貼り付ける機会、稀によくありますよね？
この記事ではアドカレ1日目で扱った内容の逆で、ファイルのアップロード処理を実装します。

やりたいこと

ダイアログからファイルを受け取る
ファイルを整形してスプレッドシートに反映する

どう実現するか

クライアント側でのファイル受付は適当にやる¹ ²
google.script.runを使ってファイルをサーバに渡す³
受け取ったファイルを任意の形式でスプレッドシートに反映する

実装

クライアント側

upload.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript">
      async function uploadFiles() {
        const uploadFilesElement = document.getElementById("uploadFiles");
        const readFiles = [];
        for (let file of uploadFilesElement.files) {
          readFiles.push(
            readFile(file).then(function(file) {
              google.script.run
                .withSuccessHandler()
                .withFailureHandler()
                .file2Sheet(file);
            })
          );
        }
        await Promise.all(readFiles);
      }

      function readFile(file) {
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onload = () => {
            resolve({
              name: file.name,
              data: reader.result
            });
          }
          reader.readAsText(file);
        });
      }
    </script>
  </head>
  <body>
    <div>
      <input type="file" id="uploadFiles" multiple>
    </div>
    <div>
      <button onclick="uploadFiles()">アップロードする</button>
    </div>
  </body>
</html>

サーバ側

main.js

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu('変換ツール');
  menu.addItem('ファイルアップロード', 'upload');
  menu.addToUi();
}

function upload() {
  const html = HtmlService.createTemplateFromFile('upload')
    .evaluate()
    .setWidth(510)
    .setHeight(400);
  SpreadsheetApp.getUi()
    .showModalDialog(html, 'ファイルをDrag&Dropしてください');
}

function file2Sheet(file) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  
  // 同じ名前のシートが無かったら新しく作る
  let targetSheet = spreadsheet.getSheetByName(file.name);
  if (targetSheet == null) {
    targetSheet = spreadsheet.insertSheet();
    targetSheet.setName(file.name);
  } else {
    targetSheet.clearContents();
  }

  // なんやかんやしてシートに反映する
  file.data.split("\n").map((row, index) => {
    const cols = row.split("  ");
    targetSheet.getRange(index + 1, 1, 1, cols.length)
      .setValues([cols]);
  });
}

できた

google.script.runを並列で実行したらどうなるんだろ～?と思って試したら普通に動いたのでそのままにしている

一度に大量のファイルを送りつけると"シート[0-9]+_conflict[0-9]+"って名前のシートが生えてくるが、勝手に解決してくれるのでヨシ！

約20KBのファイルを30件同時に投げても問題なく動作したことを確認済み

さいごに

一緒に働く仲間を募集中です！

リンクラフト株式会社では、組織拡大に伴い積極的な採用活動を行っています。
少しでも興味がある方はぜひご連絡ください。

▽会社ホームページ
https://lincraft.co.jp/

▽SNS
X (旧Twitter)
Instagram
Facebook

▽ご応募はこちらより
https://lincraft.co.jp/recruit

※カジュアル面談も受付中です。ご希望の方はHPのお問い合わせフォームよりご連絡ください。