GAS: スプレッドシートをShift_JISに変換してダウンロードする方法2

さて、前回に引き続きスプレッドシートをshift-jisに変換してダウンロードする方法の解説です。

前回は以下の２項目を紹介してきました。２つ目の方はshift-jisに変換前のunicodeベースのまま

CSVファイルをshift-jisで作成して、Googleドライブに保存する方法

local PCのダウンロードフォルダへ保存する方法

前回の記事はこちらになります。

前回途中で終わっていたローカルフォルダへのダウンロードをする際に、shift-jisへ変換する方法の紹介を今回は行っていきます。

では、早速行ってみましょう。

ダウンロード時にshift-jisへ変換する方法
1. GAS側
  1. Blobでは渡せないのか？
2. HTML側
  1. 変換のために実施していることの言語化
  2. 利用ライブラリ紹介
まとめ

ダウンロード時にshift-jisへ変換する方法

前回と同様GAS側とHTML側の両方を見ていきます。

GAS側

GAS側で実装するのは、前回と特に変わらず、データをスプレッドシートから取得してJSON形式でhtml側に渡すことです。

function getDataJSON(){
  // outputシートからデータを取得
  let range = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("output").getDataRange();
  let values = range.getValues();

  
  const template = HtmlService.createTemplateFromFile('download_dialog');
  template.values = JSON.stringify(values)
  template.name = "ファイル名";
  SpreadsheetApp.getUi().showModalDialog(template.evaluate(), 'CSV (Shift JIS)');
}

Blobでは渡せないのか？

このあと紹介するHTML側のスクリプトを見てもらえればわかるかと思いますが、最後はblobで aタグのダウンロード実行時に処理させています。

ということは、blobで渡せば早いんじゃないのか？って考える人もいるかと思いますが、残念ながらBLOBでデータを渡すことはできません。なので、今回のようにJSONにして一旦HTML側で受け取って、parseしてshift-jisへ変更を加え、blob化させてDLする、という回りくどい方法になっています。

HTML側

今回も前回に続きHTML側がメインです。早速コードを紹介します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <a id="download" href="#" download="<?= name ?>.csv" target="_blank">ダウンロード</a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.js" integrity="sha512-YxkN22rlXL1kQXIh4Py4u7O6BrxxuR0yKcnT3myFJGdibXfoSHPFBs9ap8Xowi25YRwHv38DoLf2T6nAc5w/Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js" integrity="sha512-rqL5c2sp6KdRdB27P16dSYF9J3/WrP+UHrKuzWiN6304wz0bzv1ZE8G+zieQGSnNfg9UasgKNOQzv4yir7+Prg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
      const values = JSON.parse(<?= values ?>)

      // CSV文字列へ変換
      const csv = Papa.unparse(values)

      // encoding.jsを利用：csvの文字列をsjis_arrayへ変換
      const sjisCodeArray = Encoding.convert(csv, {
        from:'UNICODE', // from_encoding
        to:'SJIS', // to_encoding
        type:'array',
      })

      // sjis_arrayをblobへ変換
      const uint8Array = new Uint8Array(sjisCodeArray)
      const blob = new Blob([ uint8Array ], { type: 'text/csv' })

      // URLをaタグにセット
      window.URL = window.URL || window.webkitURL
      document.getElementById("download").href = window.URL.createObjectURL(blob)
    </script>

  </body>
</html>

変換のために実施していることの言語化

では、コードを言語化していきます。

step1: 必要なライブラリの宣言（cdnベース）
<ここからscript宣言内>
step2: GAS側でtemplate evaluate時に受け渡されるJSONを受け取る
step3: unparseしてCSV文字列へ変換
step4: encoding.jsを利用：csvの文字列をsjis_arrayへ変換
step5: arrayをblobへ変換
step6: aタグにblobダウンロードを設定

主にscript内（js）で実施するタスクがメインになります。step6は前回と同じなので、今回追加されているのは、step1＆step3~5となります。

利用ライブラリ紹介

以下の２つのライブラリを利用していますので、cdnで自分が使いたいものを選んで引っ張ってきてもらえればいいと思います。

papaparseのライブラリ:    https://cdnjs.com/libraries/PapaParse
encoding-japaneseのライブラリ:   https://cdnjs.com/libraries/encoding-japanese

まとめ

2回にわたって、スプレッドシートをShift_JISに変換してダウンロードする方法を紹介してきました。

shift-jis使わなくていいなら使いたくない文字コードではありますが、汎用的な機能としてUIからダウンロードする機能の作り方の紹介にもなったので、よかったかなと。

また、不定期にはなりますが、更新していきますので、よろしくお願いします。