Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法

parse

photo credit: Ano Lobb. @healthyrx Pomegranate palm via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。

前回の記事はこちら。

GASのダイアログでアップロードしたファイルをBlobオブジェクトとしてサーバー側に渡す方法
みなさん、こんにちは! タカハシ(@ntakahashi0505)です。 Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。 前回の記事はこちら。 ダイアログのフォー...

ダイアログでアップロードしたファイルをサーバー側に渡すことができました。

今回は、GASでCSVファイルをスプレッドシートに展開する方法です。

では、行ってみましょう!

スポンサーリンク

前回のおさらい

では、前回のおさらいからです。

ダイアログを作成するためのHTMLファイル「dialog.html」は以下のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <input name="myFile" type="file">
      <button onclick="google.script.run.logTest(this.parentNode);">アップロード</button> 
    </form>
  </body>
</html>

(前回はテキストボックスのinput要素もありましたが、もう必要ないので削除してます。)

そして、サーバー側の「コード.gs」はこちらです。

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, "CSVアップロード");
}

function logTest(form){
  var blob = form.myFile;
  Logger.log('%sをアップロードしました', blob.getName());
}

showDialog関数を実行すると以下のようなダイアログが表示されます。

GASで作成するファイルアップローダーダイアログ

「ファイルを選択」から「onigiri.csv」をアップロードして、「アップロード」ボタンをクリックすると、サーバー側のlogTest関数にフォーム要素が渡されます。

ログを確認すると、以下のようにフォーム要素から取り出したファイルのファイル名が表示されていることを確認できます。

GASのダイアログで渡したデータの型を調べる

今回は、この渡したCSVファイルをスプレッドシートに展開していきますよ。

CSVファイルをスプレッドシートに展開する

CSVファイルをスプレッドシートに展開するにはどうしたら良いでしょうか?

手順としては以下となります。

  1. BlobオブジェクトからCSV文字列を取り出す
  2. CSV文字列を解析して二次元配列化する
  3. 二次元配列をスプレッドシートに展開する

BlobオブジェクトからCSV文字列を取り出す

CSVファイルはBlobオブジェクトとして変数blobに格納されています。

CSVファイルは、テキストファイルですから、文字列として取り出すことができます。

Blobオブジェクトから文字列を取り出すのが、getDataAsStringメソッドです。

Blobオブジェクト.getDataAsString()

以下のようにすることで、CSVファイルからテキストを取り出して、変数csvTextに格納することができます。

var blob = form.myFile;
var csvText = blob.getDataAsString();

CSVテキストを二次元配列に変換する

CSVテキストはただの文字列ですから、スプレッドシートに貼り付けると、ひとつのセルに入ってしまいそうです。

二次元配列だったら、そのままsetValuesメソッドでスプレッドシートに展開できるのですが…

そんなときに便利なのが、UtilitiesサービスのparseCsvメソッドです。

parseCsvメソッドは、引数として与えたCSVテキストを解析して、二次元配列に変換するメソッドです。

Utilities.parseCsv(CSVテキスト)

以下のようにすれば、CSVテキストcsvTextが、二次元配列に変換されてvaluesに格納されます。

var values = Utilities.parseCsv(csvText)

CSVファイルの展開を動作確認する

こうして出来上がったのが、以下のuploadCsv関数です。

function uploadCsv(form) {  
  var blob = form.myFile;
  var csvText = blob.getDataAsString();    
  var values = Utilities.parseCsv(csvText);
  SpreadsheetApp.getActiveSheet().getRange(1, 1, values.length, values[0].length).setValues(values);
}

ボタンクリックとgoogle.script.runで呼び出される関数を上記uploadCsv関数に変更して、CSVファイルの展開を動作確認しましょう。

ダイアログに「onigiri.csv」をアップロードして、「アップロード」をクリックすると以下のようにスプレッドシートに展開されます。

GASでCSVファイルをスプレッドシートに展開

きちんと展開されていますね!

ただ、ダイアログが表示されっぱなしなので、少し邪魔ではありますが…

まとめ

以上、GASでCSVファイルをスプレッドシートに展開する方法をお伝えしました。

難しそう…と思いきや、parseCsvメソッドのおかげで案外サクっと実装できましたね。

次回は、アップロードが完了したらダイアログを消すように変更していきます。

GASのダイアログをファイルをアップロードが成功したら閉じる方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASのダイアログをファイルをアップロードが成功したら閉じる方法です。

どうぞお楽しみに!

連載目次:GASのダイアログでcsvファイルアップローダーを作ろう

Google Apps Scriptでダイアログを作成する方法はいくつかありますが、HTMLサービスとUiサービスを組み合わせると自由で多機能なダイアログが作れます。このシリーズではそんなダイアログの作り方を易しく紹介していきます。
  1. Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識
  2. GASで最も簡単なHTMLサービスによるダイアログを作成する方法
  3. GASのダイアログで作成するファイルアップローダーの部品を配置する方法
  4. GASのダイアログでボタンをクリックしてアラート表示を動作させる方法
  5. GASのダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.run
  6. GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法
  7. GASのダイアログでアップロードしたファイルをBlobオブジェクトとしてサーバー側に渡す方法
  8. Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法
  9. GASのダイアログをファイルをアップロードが成功したら閉じる方法
  10. GASのダイアログでファイルアップロードが失敗したらアラートを表示する方法
タイトルとURLをコピーしました