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ファイルを選択して読み込むと
htmlにも読み込んだ内容が表示されて、スプレッドシートに表示されます。
メニューにはスクリプトに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 でファイルを保存してみる
- ローカルファイルを読み込む – GoogleAppsScript屋さん