GoogleAppsScript屋さん

GoogleAppsScript のサンプルコードなどを載せていきます

ローカルファイルを読み込む

Googleスプレッドシートサーバー上に存在するため、ローカルファイルを処理するには一工夫する必要があります。

そこで、ローカルファイルをスプレッドシートに読み込むサンプルコードを紹介してみようと思います。

サンプルコード

GoogleAppsScript の コード.gs と、GoogleAppsScript から呼び出す HTMLファイルの dialog.html 、そしてアップロードするローカルファイル upload.txt を用意します。

コード.gs

function main() {
  var html = HtmlService.createHtmlOutputFromFile("dialog");
  SpreadsheetApp.getUi().showModalDialog(html, 'ローカルファイル読込');
}

function writeSheet(formObject) {
 
  // フォームで指定したテキストファイルを読み込む
  var fileBlob = formObject.myFile;
  
  // テキストとして取得(Windowsの場合、文字コードに Shift_JIS を指定)
  var text = fileBlob.getDataAsString("sjis");  
  
  // 改行コードで分割し配列に格納する
  var textLines = text.split(/[\s]+/);
  
  // 書き込むシートを取得
  var sheet = SpreadsheetApp.getActiveSheet();

  // テキストファイルをシートに展開する
  for (var i = 0; i < textLines.length; i++) {
    sheet.getRange(i + 1, 1).setValue(textLines[i]);
  }
  
  // 処理終了のメッセージボックスを出力
  Browser.msgBox("ローカルファイルを読み込みました");
}

dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // すべてのフォームをイベントリスナーに登録する
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);
      
      // フォームのサブミットで呼ばれる処理
      function readFile(formObject) {
        // GASで定義した関数を呼び出す
        google.script.run.writeSheet(formObject);
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="readFile(this)" enctype="multipart/form-data">
      <input name="myFile" type="file" /><br>
      <button type="submit">読込</button>
    </form>
  </body>
</html>

upload.txt

一行目
二行目
三行目

実行の流れ

当サンプルコードを実行した時の流れです。

  1. スクリプトエディタより main() を実行すると、スプレッドシート上にローカルファイルのアップロード用ダイアログが表示される f:id:rokuni62:20170829152213p:plain

  2. 「ファイルを選択する」よりアップロードするローカルファイルを指定する f:id:rokuni62:20170829152221p:plain

  3. 「読込」ボタンを押して処理開始 f:id:rokuni62:20170829152232p:plain

  4. 読込みが終了すると「ローカルファイルを読み込みました」とポップアップが表示される f:id:rokuni62:20170829152237p:plain

  5. ローカルファイルの値がスプレッドシートに書き込まれている f:id:rokuni62:20170829152241p:plain

解説

前述したように Googleスプレッドシートサーバー上に存在しているため、ローカルファイルを直接処理することができません。処理するためには仲介役が必要になります。ここではダイアログが仲介役となります。

プログラムの流れ

  1. GAS側の function main() を実行し dialog.html をもとにしたダイアログを表示する
  2. アップロードするローカルファイルを指定したあと、ダイアログの「読込」ボタンを押すことで <form>onsubmit に指定した readFile(this) が実行される。ここで this には form の情報が設定される
  3. function readFile(formObject)google.script.run.writeSheet(formObject) を呼び出し、form の情報を HTMLからGASへ受け渡す
  4. GASの function writeSheet(formObject) では var fileBlob = formObject.myFileによりローカルファイル情報を Blob 型で受け取る
  5. Blob 型をテキストとして処理するため var text = fileBlob.getDataAsString("sjis") とする。なお Windows 環境のテキストファイルであるため文字コードShift_JIS を指定している
  6. テキストデータの改行コードを処理するため var textLines = text.split(/[\s]+/) とし、テキストデータの各行を配列に分割する
  7. これでテキストデータを配列に格納できたため、あとはスプレッドシートに設定して終了となる

補足

  • preventFormSubmit() について

dialog.htmlpreventFormSubmit() は上記説明で登場しませんでしたが、これは <form> を使用する際に必要となるもので、これを記述することでボタン押下時のイベントが正しく起動するようになっています。ですので必ず記述するようにしてください。

参考記事