Googl Apps Scriptを使ってファイル読み込みからスプレッドシートに表示

Googl Apps Scriptを使ってファイル読み込みからスプレッドシートに表示

FileOpen.htmlを使用します。
スプレッドシートのメニューにおいて、追加したメニューのファイル読み込みを選択して
ローカルPCのCSVを選択して読み込むとスプレッドシートに表示されます。

GASの文字コード変換（file.getBlob().getDataAsString(“Shift_JIS”)）は、機種依存文字を正しく変換できないみたいでSJISのCSVを開くと一部の機種依存文字が文字化けします。もともとUTF8だけだったようですが徐々に他の文字コードにも対応するようになっているので、次のバージョンアップで改善されるかもしれないですね。

なので手間と知識がある人ならテキストエディタを使用してSJISをUTF-8に変換してからスプレッドシートに読み込ませたほうが安心です。

でも使う人みんながテキストエディタで文字コード変換の知識があるわけではないので、
なにか方法はないかと試したところJSで読み込ませたらどうかと調べるといまのところ
JSで読み込ませたら機種依存文字でも文字化けしませんでした。
特にコード変換とかをして機種依存文字を表示させたわけでもなく、JS側で読み込んだテキストデータをGASへ渡しただけです。
今後他の文字コードを扱うときは変換スクリプトを記載する必要があります。
今のところ、GASのSJIS変換はだめだったのでJSのファイル読み込みをGASへ渡しています。

以下のコードは全部GASにて登録します。
htmlとありますが、サーバ、グーグルドライブに配置するのではなくて、GASのスクリプトエディタで登録します。


FileOpen.gsのメソッドonOpen()を登録したので、スプレッドシートを開くと自動でメニューが登録されます。
メニューから実行するとmyFunctionが実行されて、FileOpen.htmlが呼ばれてダイアログみたいに表示されます。
そして、CSVファイルを選択して読み込むと
ｈｔｍｌにも読み込んだ内容が表示されて、スプレッドシートに表示されます。

メニューにはスクリプトにonOpenを使用します。スプレッドシートを開いて数秒後にメニューが表示されます。

ダイアログっぽく見えますが、htmlです。

ファイルを選択したあと、開くボタンをクリックします。CSVはカンマ区切りでSJISを使用しました。なおBrowser.msgBoxを使うとこのダイアログは消されますので、表示が確認できないかもしれないです。

スプレッドシートにも文字が表示されます。

以下のコードはネットから拝借したものを含みます。ネット検索がした数が多すぎてトライ・アンド・エラーが多くてどのサイトから拝借したかわからなくなりました。参考にしたサイトのリンクは最後の方に記載しました

スプレッドシートからファイル読み込みダイアログ

/*
FileOpen_sc.gsとします。（同名だと保存できないかも）
FileOpen.htmlを使用します。
SJISのCSVを用意します。そして環境依存文字を入れておきます。德
FileOpen.htmlのJSにSJISを判断するスクリプトを入れてください。（これから）2019/03/08
*/
/**
 * ファイルを開いたときのイベントハンドラ
 */
function onOpen() {
  var ui = SpreadsheetApp.getUi();           // Uiクラスを取得する
  var menu = ui.createMenu('追加したメニュー');  // Uiクラスからメニューを作成する
  menu.addItem('ファイル読み込み', 'myFunction');   // メニューにアイテムを追加する
  menu.addToUi();                            // メニューをUiクラスに追加する
}
function myFunction() {
  var html = HtmlService.createHtmlOutputFromFile("FileOpen");//FileOpen.htmlをスプレッドシートのダイアログとして開く。このhtmlはスクリプトエディターで登録したもの
  SpreadsheetApp.getUi().showModalDialog(html, 'FileOpen');//FileOpen.htmlを開いたときの名称
}

//書き込む対象のSpread Sheetを定義
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sh = ss.getActiveSheet();

function readTextGASFileOpen(data){//FileOpen.html内のJSに指定して呼び出す。
  
  var csv = Utilities.parseCsv(data);
  //セルA1からCSVの内容を書き込んでいく
  sh.getRange(1,1,csv.length,csv[0].length).setValues(csv);
  //return; 
  // 処理終了のメッセージボックスを出力
  Browser.msgBox("ローカルファイルを読み込みました");//この表示でhtmlが自動で消える
}

GAS側で使うHTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ファイル読み込み01</title>
  <script type="text/javascript">
    function OnButtonClick() {
      var fileRef = document.getElementById('File1');
      var outFrame = document.getElementById('output');

      if (1 <= fileRef.files.length) {
        var reader = new FileReader();
        reader.onload = function (theFile) {
          var outhtml = theFile.target.result;
          //ここで文字コードを判定する処理を入れる（Encoding.jsを使用すれば良い）
          //Encoding.jsとかnkfとかあれば
          google.script.run.readTextGASFileOpen(outhtml);//スプレッドシートに書き込み
          
          outhtml = outhtml.replace(/\r\n/g, '<br/>');//ダイアログの処理なので重要性は低い
          outFrame.innerHTML = outhtml; // reader.result;
        }
        reader.readAsText(fileRef.files[0], "shift-jis");//これがないと変換結果がでないという不思議
        //google.script.run.readTextGASFileOpen(fileRef.files[0]);//ここだと動かない
      }
     
    }
  </script>

</head>
<body>
  <input id="File1" type="file" /><input id="Button1" type="button" value="開く" onclick="OnButtonClick();"/>
  <div id="output"></div>
</body>
</html>

参考にしたサイトのリンク

初心者でも簡単！Google Apps Scriptでドキュメントを取得して表示する方法
ローカルファイルを読み込む – GoogleAppsScript屋さん
google apps scriptでspreadsheetにローカルCSVファイルをインポート(SJIS対応＆高速版) – Qiita
importCsv/importCsv.gs at master · prog-mitsu/importCsv · GitHub
A Software Engineer Blog: Google Apps Scriptでのファイル入出力
GASでExcelファイルをSpreadsheetに変換する (再) – Qiita
Google Apps ScriptでShift_JIS変換したcsvをメール添付送信 – Qiita
テキストファイルをJavaScriptで読み込む方法とは【メンターが回答】 | TechAcademyマガジン
テキストファイルを読み込む－JavaScript入門（HTML5編）
JavaScriptでファイル処理! JSONやCSVなどのファイルを読み込もう | 侍エンジニア塾ブログ（Samurai Blog） – プログラミング入門者向けサイト

JavaScriptでShift_JISのcsvを読み込む（文字化け対策） – GUNMA GIS GEEK
JS_コード変換例、
GASで任意のスプレットシートの値を読み込む – クジラ机ブログ
Google Apps Script でファイルを保存してみる

こちらの記事もどうぞ