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を使うとこのダイアログは消されますので、表示が確認できないかもしれないです。

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

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

内容

1 スプレッドシートからファイル読み込みダイアログ
2 参考にしたサイトのリンク
3 こちらの記事もどうぞ

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

/*
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が自動で消える
}

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>

<!DOCTYPE html>

<head>

<title>ファイル読み込み01</title>

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>

</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 でファイルを保存してみる

こちらの記事もどうぞ

Javascript、GASとも構造体はないけど、クラスかオブジェクトを使えば Javascript、GASとも構造体はないけど、クラスかオブジェクトを使えば構造体っぽくできるよ […]
DOS バッチ　コマンドファイル読み込みから複数コピーでディレクトリもつくる DOS バッチ　コマンド […]
VB.net　初級プログラム　１回　テキストファイル読み込み　プログラム開発 VB.net　初級プログラム　１回　テキストファイル読み込み　プログラム開発環境 Win […]
開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP 開発言語別簡易文法チート表、VB.NETとC#のチート表他Javascript、PHP チートと […]
JAVASCRIPT 構造体もどきと自分のファイル名（URL)を取得 […]
2018年次回作成アプリ学習言語ネタ jquery ajax,まずはjqueryを勉強中 2018年次回作成アプリ学習言語ネタ jquery […]