2024-06-04

スプレッドシートをGASで扱う方法をなるべく丁寧に解説する①

スプレッドシートの開き方
取得したスプレッドシートの使い方と変数について
シートの処理の仕方
シートを順次処理する方法と配列について
セル範囲の取得の仕方
猫

スプレッドシートの開き方

GASからスプレッドシートを開く方法は大きく分けて2通りある。
①スプレッドシートのIDを指定して直接開く方法
②GASに紐付くスプレッドシートを開く方法
の2通りだ。どちらの方法もSpreadSheetAppという専用のライブラリを利用し、その後の使い方が変わるわけではないが、②のGASに紐付くスプレッドシートを開く場合はGAS自体をスプレッドシートから作っておく必要がある。スプレッドシートに紐付くGASの使い方は過去記事を参照してほしい。 neko-gas.hatenablog.com 一方の①スプレッドシートのIDを指定して直接開く方法は、例えば複数のスプレッドシートを利用する場合には使わざるを得ないが、スプレッドシートのIDが勝手に振られるものの上に桁数が多くて非常にわかりづらい。他の人が読んだ時に一目でどのスプレッドシートを参照しているか分かりづらく、例えばスプレッドシートを削除して作り直した場合はIDが変わってしまうので、メンテナンスが必要になるのも欠点だ。
そのため、やや変則的だがここではGASに紐付くスプレッドシートと同じフォルダにある別のスプレッドシートを、ファイル名を指定して開く方法も紹介しよう。ちなみに、getActiveSpreadsheet()というメソッドもあるがgetActive()と全く同じものだ。ややこしい。

スプレッドシートのIDを指定して直接開く方法

SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxx");

GASに紐付くスプレッドシートを開く方法

SpreadsheetApp.getActive();

GASに紐付くスプレッドシートと同じフォルダにある別のスプレッドシートを、ファイル名を指定して開く方法

const activeFile = DriveApp.getFileById(SpreadsheetApp.getActive().getId()); const folder = activeFile.getParents().next(); const files = folder.getFilesByName("別のスプレッドシート"); let otherSpreadSheet; if (files.hasNext()) { otherSpreadSheet = SpreadsheetApp.openById(files.next().getId()); }

取得したスプレッドシートの使い方と変数について

なるべく丁寧に解説する、というタイトルにしたので取得したスプレッドシートをどう使うかについても解説しておく。上で紹介した方法を利用すると、Spreadsheetオブジェクトというものが取得できる。これは取得したスプレッドシートの情報そのものや、シートを簡単に取得するメソッドなどがまとまっているものだ。
メソッドを呼び出した段階でSpreadsheetオブジェクトが取得できているため、そのままさらにシートの取得をしてもいいし、一度変数に格納してからシートの取得をしてもいい。あんまり変数を作りすぎても登場人物が多すぎる物語のように読みづらくなるが、変数があると再利用できて便利な面もあるので、どの段階で変数化するかはコードを書く人のセンス（好み）が出るところだ。下の図で実行しているシートの取得は全く同じ結果になる。

SpreadSheetApp.getActive()で取得したスプレッドシートは変数に格納しても同じように使える

シートの処理の仕方

スプレッドシートが開けたら、次はスプレッドシート上のシートを指定する方法について見ていこう。シートを指定する方法は大きく4通りある。
①シート名を指定して直接開く方法
②現在開かれているシートを取得する方法
③スプレッドシート上のシートを順次開く方法
1番利用されるのはシート名を指定して直接開く方法だ。これはとても分かりやすい。一方、現在開かれているシートを取得する方法はどのシートが開かれているかに左右されてしまうため若干分かりづらい。シートが1つしかない場合や、シート上のボタンを押すことで実行されるGASなどのシートが必ず特定できる場合以外は使用を避けた方がいいだろう。ちなみに、SpreadsheetApp.getActiveSheet()とするとGASに紐付くスプレッドシートのActiveなシートがいきなり取得できるのだが、SpreadsheetApp.getActive()、SpreadsheetApp.getActiveSpreadsheet()と記述が似ていてとてもややこしい。
最後のスプレッドシート上のシートを順次開く方法は実用的だ。シート数が特定できないけど全部処理する場合や、「2024年XX月」というシートを全て処理する、というような場合に多用することになるだろう。①と②の方法ではSheetオブジェクトというものが取れるが、③は複数取得できるメソッドのため、例え1シートしかなくても配列という複数のオブジェクトがまとまった形式で取得される点には注意が必要だ。

シート名を指定して直接開く方法

SpreadsheetApp.getActive().getSheetByName("著名な猫");

現在開かれているシートを取得する方法

SpreadsheetApp.getActive().getActiveSheet();

スプレッドシート上のシートを順次開く方法

SpreadsheetApp.getActive().getSheets();

シートを順次処理する方法と配列について

配列の処理の仕方について、配列には配列を操作するメソッドが用意されているため、それを用いて簡単に説明する。アロー関数という書き方を用いているが、JavaScriptは同じ処理でも複数の書き方ができる。その他の書き方については、過去の記事で紹介しているため参考にしてもらいたい。 neko-gas.hatenablog.com 下の図の例では、取得した全てのシートに対してgetName()でシート名を取得し、ログ出力している。

取得した全てのシートに対してgetName()でシート名を取得し、ログ出力

SpreadsheetApp.getActive().getSheets().forEach(sheet=>{ console.log(sheet.getName()) })

セル範囲の取得の仕方

シートが取得できたら次は値の取得だ、といきたくなるが、GASでは値を取得する前にどのセルの値を取得するか、セル範囲を取得する必要がある。セル範囲の取得方法は大きく3種類ある。
①値の入っている全ての範囲を取得する方法
②行数と列数を指定して取得する方法
③セル名を指定して取得する方法
単一の表が入っているようなシートの場合、①で全ての範囲を取得しておけば問題ない。行が増えても列が増えても全て取得してくれるので、とても分かりやすく便利だ。複数の表が混在していたり、そもそも表形式でないような場合には②の方法をお勧めする。汎用性と自由度が高く、行数が増えても対応する方法が取れる。③の方法でも可能だが、列の指定方法がABCになっていて自由度が利かないため、特定の1セルを取得する場合でもない限りあまりお勧めはしない。

値の入っている全ての範囲を取得する方法

SpreadsheetApp.getActive().getSheetByName("著名な猫").getDataRange();

行数と列数を指定して取得する方法

SpreadsheetApp.getActive().getSheetByName("著名な猫").getRange(2, 1, 3, 4);

getRange関数の最初の引数2つでセルを指定し、後の引数で行数、列数を指定する

セル名を指定して取得する方法

SpreadsheetApp.getActive().getSheetByName("著名な猫").getRange("A2:D4");

【ふるさと納税】ペットフードいなばちゅーるこだわりセット 80本焼きかつお 10本セットキャットフードかつおカツオ鰹猫ねこおやつペット用品ペット静岡県静岡　【静岡市】

価格: 18000 円
楽天で詳細を見る

猫

ねこグレーご予約受付中かごバッグレディースねこ猫【Minetpanie ミネットパニエ｜HAYNI ヘイニ】巾着 PUレザーモチーフバンカンネコねこグッズトートバッグレディース大人軽い軽量トートおしゃれかわいいナチュラル

価格: 11900 円
楽天で詳細を見る

2024-05-25

GASでメール一斉送信を自動化する（送り先ごとに本文を編集して添付ファイルまでつけちゃう）

活用編：やり方の備忘録

スプレッドシートでメールテンプレートを作る
スプレッドシートで送信先の一覧を作る
メールにして送信するGASを作成する
CCと添付ファイルをオプションとして追加する
猫
全体サンプル

スプレッドシートでメールテンプレートを作る

まずはメール本文を編集して使いまわせるようにスプレッドシートで作ってみる。デザインのないシンプルなものにするが、送り先ごとに名前や項目は変えたいので、後で作る一覧から持って来れるようにする。可変の項目の表し方はなんでもいいが、今回は{{}}で括った項目名を置換するようにしよう。タイトルも同じスプレッドシートで管理できると便利なので、1行目をタイトルにすることにする。

スプレッドシートで送信先の一覧を作る

メール本文ができたら宛先をリスト化する。ccで自分に送ったりできるようにし、添付ファイルも付けられたら便利だ。スプレッドシートにファイルをそのまま貼り付けるわけにはいかないので、スプレッドシートと同じGoogleドライブに格納されたファイルのタイトルを記載しておく。メール文の項目名も一覧に載せたら完成だ。

メールにして送信するGASを作成する

GASでは変数名に日本語を使えるので、今回はコメントがわりに変数名を設定してみたが読みづらいだろうか。
送信先一覧シートのデータを送信先として順次処理していくが、スプレッドシートから取得したままの二次元配列では使いづらいのでJSON形式の配列に整形する。整形は行ごとに行うが、プロパティを作成する場合は項目名ごとに処理したいので、脇に避けておいた先頭行ごとに処理し、列番号で値を取ってきて格納していく。
メール文は2列目にしか必要な情報がないので2列目のみを取得する。メール文の行ごとに、項目名を順次置換していくが、Object.keys(送信先情報)で項目名を取得するのは冗長な感じがしたので送信先一覧の先頭行ごとに置換する形とした。もっと長いコードになるとバグの元になるのでObject.keysで項目名をとる方が賢明かもしれない。
メール文は配列形式になっているため結合する必要があるが、改行コードで結合することを忘れないようにしたい。メールの送信処理そのものはライブラリがあるので簡単だ。引数に送信先アドレス、タイトル、本文を指定するだけで送信できる。それ以外の項目はオプションになる。

 function myFunction() {
   const 送信先一覧の生データ = SpreadsheetApp.getActive().getSheetByName("送信先一覧").getDataRange().getValues();
   const 送信先一覧の先頭行 = 送信先一覧の生データ.shift();
   const 送信先一覧情報 = 送信先一覧の生データ.map(各行=>
     送信先一覧の先頭行.reduce( (送信先情報,列情報,列番号)=>(送信先情報[列情報]=各行[列番号],送信先情報),{})
   );
   const メール文の1列目 = SpreadsheetApp.getActive().getSheetByName("メール文").getDataRange().getValues().map(row=>row[1]);
   送信先一覧情報.forEach(送信先情報=>{
     const 置換したメール文 = メール文の1列目.map(各行=>
       送信先一覧の先頭行.reduce( (結果,項目名)=>結果.replaceAll("{{"+項目名+"}}",送信先情報[項目名]),各行)
     );
     const タイトル = 置換したメール文.shift();
     const メール本文 = 置換したメール文.join("\n");
     MailApp.sendEmail(送信先情報.to, タイトル, メール本文);
   });
 }

CCと添付ファイルをオプションとして追加する

ccや添付ファイルはオプションとしてJSON形式で指定できる。他にも送信名や返信先、bccもオプションで指定できるのでカスタマイズが必要な場合は公式ドキュメントを参照してほしい。ccも添付ファイルもオプションなので、送信先一覧シートから列が削除されている場合でもエラーにならないように存在チェックをしておく。添付ファイルはファイル名を指定する形にしたので、スプレッドシートのフォルダを指定して同じ階層に格納されているファイルを対象にする形とした。添付ファイルが多くなる場合には専用の子フォルダを作り、その中を検索しにいく改修が必要となる。添付ファイルはBlobで指定する必要がある。参照可能なスプレッドシートやGoogleドキュメントであれば、添付ファイルとするより本文にURLを載せる方が軽くていいだろう。

{ cc:アドレス, attachments:blob }の形式でオプションを作る

 const 送信オプション={};
 if (送信先情報.cc) {
   送信オプション.cc=送信先情報.cc;
 }
 if (送信先情報.添付ファイル) {
   const スプレッドシートの置いてあるフォルダ=DriveApp.getFileById(SpreadsheetApp.getActive().getId()).getParents().next();
   const 添付ファイル=スプレッドシートの置いてあるフォルダ.getFilesByName(送信先情報.添付ファイル);
   if (添付ファイル.hasNext()) {
     送信オプション.attachments=添付ファイル.next().getBlob();
   }
 }
 MailApp.sendEmail(送信先情報.to, タイトル, メール本文, 送信オプション);

猫

【SNSで話題！楽天1位】フードボウル食べやすい傾斜高さがあるおしゃれ陶器猫犬食器餌入れペット猫用食器猫の食器吐き戻しご飯皿猫皿餌皿ご飯台餌台食器台フードボールフードスタンドオシャレかわいい斜めエサ入れ水セラミック小型犬犬用食器

価格: 1680 円
楽天で詳細を見る

全体サンプル

コード.gs

【30％オフ★5/25 0:00-48時間限定】【公式】 mofuwa 瞬間消臭スプレー犬猫ペット消臭除菌剤トイレおしっこうんち猫砂糞尿アンモニア舐めても安心無添加無香料日本製 500mlボトルもふわモフワ

価格: 2420 円
楽天で詳細を見る

2024-05-20

VueJSで3桁カンマ付き入力項目を作る

活用編：やり方の備忘録

See the Pen 3桁カンマ付き入力項目 on CodePen.

入力が終わったらカンマをつけ、入力中はカンマを消す
入力される値に気を使いながら値を書き戻す
初期状態でもカンマがつくようにする
猫
全体サンプル

入力が終わったらカンマをつけ、入力中はカンマを消す

入力中かどうかは、input項目にフォーカスが当たっているかどうかで判断をする。フォーカスを当てた時、フォーカスを外した時にそれぞれ呼び出せるイベントがあるので、イベントの中で入力項目の見た目を変更する。カンマをつけてしまうと文字列になってしまうので、バインドする変数はダミーの文字列にしておく。
カンマは正規表現での置換でつける。3つ並びの数値を取り出してカンマをつけたものに置換する、という内容だ。

入力される値に気を使いながら値を書き戻す

@inputで入力した時のイベントを定義できる。e.target.valueで入力値を取得できるので、何か文字が入力されるたびに数値の変数に入力値を書き戻している。この際、全角数値は半角に変換し、数値以外の入力は無視するようにしている。最後にダミー項目に値を設定しているが、一度数値にしてから文字列に変換しているのは、先頭に0が入った場合を考慮している。
数値以外が入ってきた時にダミー項目をそのままにしているが、フォーカスを外した時に数値項目からダミー項目の値が設定されるため、その時に見た目は補正される。

e.target.valueで取得した入力値を、全角や数値以外の考慮をしつつ設定する

初期状態でもカンマがつくようにする

このままでは一度テキストを選択してフォーカスを外すとカンマがつくが、初期表示ではカンマが付かないままになってしまう。そこで、最初の一回だけ呼び出される処理の中でフォーカスを外す処理を加える。mountedメソッドはアプリのマウント時に呼ばれるため、ここに書くのが適しているだろう。blur()だけ実施しても@blurイベントは発火しないため、blur()の前にfocus()を呼び出しておく必要がある。

猫

ペット想いの除菌脱臭機サンスター QAIS-air- 04A1J クワイスエアーゼロフォーエーワンジェイ 04A1J-OW

価格: 32800 円
楽天で詳細を見る

全体サンプル

実は今回のコードには汎用性がない。金額の項目が複数あった場合、メソッドの使い回しはできるだろうが、ダミーの値をどうするかなど冗長になりそうな点が多い。別記事で紹介しているcomponent化を使うのが1番いいのだが、説明の重複が嫌だったので今回はこのままで公開する事とした。component化したコードについては、そのうち別で公開しようと思う。 neko-gas.hatenablog.com

無題.html

<html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?> </head> <script> function onload() { Vue.createApp({ data:()=>({ decimalProp: 1000, dummyDecimal: "" }), mounted() { this.$refs.decimalInput.focus(); this.$refs.decimalInput.blur(); }, methods: { formatDecimal(e) { this.dummyDecimal = String(this.decimalProp).replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); }, reverceDecimal(e) { if (e.target.value) { this.dummyDecimal = String(e.target.value).replace(/,/g,""); } }, inputDecimal(e) { newVal = e.target.value.replace(/[０-９]/g, m=>'０１２３４５６７８９'.indexOf(m)); if (!newVal) { newVal="0"; } if (isNaN(newVal)) { return; } this.dummyDecimal=String(parseInt(newVal)); this.decimalProp=parseInt(newVal); } } }).mount("#app"); } </script> <body onload="onload()"> <div id="app"> <input ref="decimalInput" v-model="dummyDecimal" @input="inputDecimal" @blur="formatDecimal" @focus="reverceDecimal" inputmode="number" /> <div>実際の値：{{decimalProp}}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21"></script> </body> </html>

css.html

コード.gs

function doGet(e) { return HtmlService.createTemplateFromFile("無題").evaluate(); }

先着2名2,000円オフ！猫ケージ 3段 2段スライドドア多頭飼い幅広96cm 天然木キャスター猫砂飛び防止フェンス ieneko デザイナーズ猫ケージ

価格: 39800 円
楽天で詳細を見る

2024-05-11

PC、タブレットからGASを使ってGoogleドライブに署名を保存する

活用編：やり方の備忘録

See the Pen 署名 on CodePen.

署名するエリア（キャンバス）を準備する
クリアボタン、保存ボタンを作る
タブレット、スマホに対応させる
画面の縦横変更、サイズ変更に対応させる
Googleドライブに署名を保存する
猫
全体サンプル

署名するエリア（キャンバス）を準備する

署名欄にはcanvasタグを使用する。画像を表示したり図形を描画したりいろいろな使い方ができるタグだが、そのうちの線を引く機能を活用してマウスがクリックされている間だけ線が引かれるようにする。試してみるとなめらかな線が引かれるが、実際はマウスが動くたびに細かい直線を積み重ねている。canvasタグを使う前の下準備として、Vueのマウント時にキャンバスや線の設定がいる。背景の塗りつぶしはなくても動くように見えるが、画像の保存時に真っ黒い画像が保存されてしまうため注意が必要だ。

画面の設定、線の設定をし、canvasのマウスイベントに線を引くロジックを紐付け

Vue.createApp({
  data: ()=>({
    canvas: null,
    ctx: null
 }),
  mounted(){
    this.canvas = this.$refs.sign;
    this.canvas.width = window.innerWidth-30;
    this.canvas.height = (this.canvas.width / 4);
    this.ctx = this.canvas.getContext("2d");
    this.ctx.lineCap = "round";
    this.ctx.lineWidth = (this.canvas.width / 300);
    this.ctx.strokeStyle = "#555";
    this.ctx.fillStyle = '#fff';
    this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
  },
  methods: {
    mousedown(e) {
      e.preventDefault();
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    mouseMove(e) {
      if(e.buttons === 1 || e.witch === 1){
        this.ctx.lineTo(e.offsetX, e.offsetY);
        this.ctx.stroke();
      }
    },
    mouseUp(e) {
      this.ctx.lineTo(e.offsetX - 1, e.offsetY - 1);
      this.ctx.stroke();
    }
  }
})
.mount("#main");

 <canvas id="sign" ref="sign"
 @mousedown="mouseDown"
 @mousemove="mouseMove"
 @mouseup="mouseUp">
 </canvas>

css側

#sign { background-color: white; border: 1px solid; margin: 10px; }

クリアボタン、保存ボタンを作る

クリア処理としては背景を白く塗りつぶすだけだ。保存ボタンはBooleanのisWriteSignを用意して、署名の状況に応じて活性制御を行う。mouseMoveメソッドでtrueにする処理を追加し、クリア処理でfalaseにする。また、この段階では保存ボタンの処理はクリアと同じにしてある。

クリアボタンでキャンバスを白く塗りつつ、isWriteSignで保存ボタンの活性状態を制御する

    mouseMove(e) {
      if(e.buttons === 1 || e.witch === 1){
        this.isWriteSign=true;
        this.ctx.lineTo(e.offsetX, e.offsetY);
        this.ctx.stroke();
      }
    },
    clearSign() {
      this.ctx.fillStyle = '#fff';
      this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
      this.isWriteSign=false;
    },

  <button id="clearSignButton" @click="clearSign">クリア</button>
  <button id="reserveButton" @click="clearSign" :disabled="!isWriteSign">保存</button>

    button {
      font-size: 1.2rem;
      border-radius: 1.2rem;
      padding: 0 0.5rem;
      width: 6rem;
    }
    #clearSignButton {
      border: solid 5px darkgray;
    }
    #reserveButton {
      background-color: mediumspringgreen;
      border: 0.3rem solid mediumseagreen;
    }
    #reserveButton:disabled {
      background-color: darkgray;
      border: 0.3rem solid gray;
    }

タブレット、スマホに対応させる

マウスイベントのみを定義しているため、タブレットやスマホで開いた場合何も描かれない。そのためタッチイベントにも処理を紐づけていくが、タッチイベントの場合、位置情報の取得方法がマウスと異なるため、別メソッドを定義する必要がある。しかもタッチイベント時の位置情報は画面全体から見た絶対的な位置になるため、キャンバスの開始点を考慮する必要があり少々複雑になる。

タッチイベントでは絶対的な位置になるため、キャンバスの開始点を考慮する必要がある

touchStart(e) {
  e.preventDefault();
  this.ctx.beginPath();
  this.ctx.moveTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top);
},
touchMove(e) {
  this.isWriteSign=false;
  this.ctx.lineTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top);
  this.ctx.stroke();<br/>
},
touchEnd(e) {
  this.ctx.lineTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left - 1, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top - 1);
  this.ctx.stroke();
}

 <canvas id="sign" ref="sign"
  @mousedown="mouseDown"
  @mousemove="mouseMove"
  @mouseup="mouseUp"
  @touchstart="touchStart"
  @touchmove="touchMove"
  @touchend="touchEnd">
 </canvas>

画面の縦横変更、サイズ変更に対応させる

画面のサイズ変更に対応するために、windowのresizeイベントにキャンバスのサイズ変更を登録する必要がある。ただし、単純にサイズだけを変更してしまうと描き途中の署名が消えてしまうため、署名状態を保持してコピーする必要がある。

 mounted(){
   window.addEventListener('resize', this.resizeSignArea);
 },
 methods: {
   resizeSignArea() {
     const tempCanvas = document.createElement('canvas');
     tempCanvas.width = this.canvas.width;
     tempCanvas.height = this.canvas.height;
     const tempCtx = tempCanvas.getContext('2d');
     tempCtx.drawImage(this.canvas, 0, 0, this.canvas.width, this.canvas.height);
     this.canvas.width = window.innerWidth-30;
     this.canvas.height = (this.canvas.width / 4);
     this.ctx.lineWidth = (this.canvas.width / 300);
     this.ctx.drawImage(tempCanvas, 0, 0, this.canvas.width, this.canvas.height);
   },
 }

Googleドライブに署名を保存する

methodsに保存処理を追加し、キャンバスをjpegとして取得、gasサーバへの受け渡しまでを実装する。gasサーバではこれをファイルにするのだが、キャンバスから取得できるデータ形式はbase64形式なので一度byteデータへの変換を挟む必要がある。そのままで呼び出せるUtilitiesに変換処理があるが、ヘッダ情報が入ったままでは変換ができないため、sliceでこれを削除した上で変換する。Googleドライブへの保存する際は保存先のIDを埋め込む形式をとっているため、xxx...は実際のフォルダIDに差し替える必要がある。htmlからVueJS上の保存処理の呼び出しは、すでに作ってある保存ボタンの@clickを差し替えるだけだ。

キャンバスをjpegデータを作成し、gas側（.gsファイル）でGoogleドライブに保存する

 <button id="reserveButton" @click="reserve" :disabled="!isWriteSign">保存</button>

 reserve() {
     let sign = this.canvas.toDataURL("image/jpeg");
     google.script.run
        .withFailureHandler(error=>alert(error))
        .withSuccessHandler(results=>console.log(results))
        .reserve(sign);
 }

 function reserve(base64=undefined) {
   if (base64) {
     const decoded =
         Utilities.base64Decode(base64.slice("data:image/jpeg;base64,".length));
     const signBlob = Utilities.newBlob(decoded, "image/jpeg", "署名_"+Date.now());
     const folder = DriveApp.getFileById("xxxxxxxxxxxxxxxxxxx");
     folder.createFile(signBlob);
   }
 }

猫

【2,000円OFF 楽天1位あす楽】＼ケース＆フィルムレビュー特典／タブレット 10インチ Wi-Fi 大型動画鑑賞に最適タブレットpc 32GB 64B 128GB Bluetooth イヤホン 10.1インチ可愛い姿勢子供オンラインフィルム wi-fiモデルタブレット Android 12 10.1～13インチ

価格: 12800 円
楽天で詳細を見る

全体サンプル

最後に全体サンプルだが、これまでのソースだと保存処理中であることが分かりづらかったり保存フォルダの取得がベタ書きになっていたりするため、４箇所手を加えている。①サーバ処理中に背景をグレーアウトさせるように追加。②名前の入力欄を設け、保存するファイル名に使用。③スプレッドシートと同じフォルダ階層に署名画像を保存するように変更。④スプレッドシートに署名履歴を残すように変更。
保存フォルダの取得処理とスプレッドシートに履歴を残す処理はfunctionを切り分けたため、必要に応じてfunctionの中身を変更すると良いだろう。また、スプレッドシートが紐づいているGASで動くものになっているため、スプレッドシートからファイルを作成して欲しい。スプレッドシートからファイルを作成する手順は過去の記事で紹介している。 neko-gas.hatenablog.com ただ、これでもまだ実用的とは言い難い。通常署名画像だけ保存することはなく、契約書や同意書などの確認対象書類と合わせて保存するものだからだ。署名画像を確認対象と一緒に保存する方法については、ここで触れると長くなりすぎるため、ゆくゆく紹介しようと思う。

無題.html

<html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?> </head> <script> function onload() { Vue.createApp({ data: ()=>({ name:"", isWriteSign:false, canvas: null, ctx: null, isLoading: true }), mounted(){ // 読み込まれる際の定義 // refによってdiv内の要素を指定する this.canvas = this.$refs.sign; this.canvas.width = window.innerWidth-30; this.canvas.height = (this.canvas.width / 4); this.ctx = this.canvas.getContext("2d"); this.ctx.lineCap = "round"; this.ctx.lineWidth = (this.canvas.width / 300); this.ctx.strokeStyle = "#555"; this.ctx.fillStyle = '#fff'; this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height); window.addEventListener('resize', this.resizeSignArea); this.isLoading=false; }, methods: { resizeSignArea() { const tempCanvas = document.createElement('canvas'); tempCanvas.width = this.canvas.width; tempCanvas.height = this.canvas.height; const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(this.canvas, 0, 0, this.canvas.width, this.canvas.height); this.canvas.width = window.innerWidth-30; this.canvas.height = (this.canvas.width / 4); this.ctx.lineWidth = (this.canvas.width / 300); this.ctx.drawImage(tempCanvas, 0, 0, this.canvas.width, this.canvas.height); }, mouseDown(e) { e.preventDefault(); this.ctx.beginPath(); this.ctx.moveTo(e.offsetX, e.offsetY); }, mouseMove(e) { if(e.buttons === 1 || e.witch === 1){ this.isWriteSign=true; this.ctx.lineTo(e.offsetX, e.offsetY); this.ctx.stroke();<br/> } }, mouseUp(e) { this.ctx.lineTo(e.offsetX - 1, e.offsetY - 1); this.ctx.stroke(); }, touchStart(e) { e.preventDefault(); this.ctx.beginPath(); this.ctx.moveTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top); }, touchMove(e) { this.isWriteSign=true; this.ctx.lineTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top); this.ctx.stroke();<br/> }, touchEnd(e) { this.ctx.lineTo(e.changedTouches[0].clientX - this.canvas.getBoundingClientRect().left - 1, e.changedTouches[0].clientY - this.canvas.getBoundingClientRect().top - 1); this.ctx.stroke(); }, clearSign() { this.ctx.fillStyle = '#fff'; this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height); this.isWriteSign=false; }, reserve() { this.isLoading=true; let sign = this.canvas.toDataURL("image/jpeg"); google.script.run .withFailureHandler(error=>{ alert(error); this.isLoading=false; }) .withSuccessHandler(results=>this.isLoading=false) .reserveToContract(this.name, sign); } } }) .mount("#main"); } </script> <body id="main" onload="onload()"> <div id="loading" v-show="isLoading"> 処理中 </div> なまえ：<input v-model="name" /> <canvas id="sign" ref="sign" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas> <div> <button id="clearSignButton" @click="clearSign">クリア</button> <button id="reserveButton" @click="reserve" :disabled="!isWriteSign">保存</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script> </html>

css.html

コード.gs

【あす楽対応】【平日12時までに注文翌日到着】犬猫毛取りブラシブラシ長毛スリッカーブラシ抜け毛ブラシワンプッシュペットブラシ猫ブラシ猫ブラッシングペット用ブラシネコブラシ除毛換毛期対策【g032】送料無料

価格: 1896 円
楽天で詳細を見る

2024-05-05

GASとVueJSの準備をしよう

学習編：書き方の備忘録

直接GASファイルを作成する
スプレッドシートに紐づくGASを作成する
フォームからGASを作成する
GASでVueJSを利用する
猫

直接GASファイルを作成する

GASはEXCELで言うところのVBA（EXCELマクロ）のような物だが、スプレッドシートのない単独のスクリプトファイルとしても作成できる。単独で作成すると、Googleドライブ上に青いアイコンのスクリプトファイルが作成される。やり方はとても簡単なのでgifで紹介する。

スプレッドシートに紐づくGASを作成する

拡張機能メニューからAppScriptを選択して作成する。ドキュメントやスライドでも同じ手順で作成できる。このメニューからGASを作成するとGoogleドライブ上にはスクリプトファイルは配置されない。保存したものを再び編集したい場合は、マクロと同じようにスプレッドシートから開く必要がある。スプレッドシートと紐付けるメリットとしては、スクリプト上からIDを指定しなくてもSpreadSheetAppライブラリのgetActive()を呼び出せば紐づくスプレッドシートを取得できるようになる点がある。

スプレッドシートと紐づけるとgetActive()でスプレッドシートを取得できて便利

SpreadsheetApp.getActive().getSheetByName("シート１");</p> <p>// シートが1つのみの場合はこれでもいい（アクティブなシートを開ける） SpreadsheetApp.getActiveSheet();</p> <p>// スプレッドシートと紐づいていない場合はこうやって開かないといけない SpreadsheetApp.openById("abc1234567");

フォームからGASを作成する

フォームからGASを作成する場合は若干手順が異なり、3点リーダーのメニューからスクリプトエディタを選択する。フォームとGASを紐づけておくと、回答を受け付けるたびにGASで処理をする、と言うようなことができて便利。

GASでVueJSを利用する

CDNというウェブコンテンツ配信サービスを利用する。サービスを利用するといっても何かに登録する必要はなく、VueJSライブラリへのリンクをHTMLに貼り付けるイメージで利用できるのでとっても簡単。邪魔にならないようにhtml終了タグの手前にでも貼るといい。

htmlタグ内にscriptタグでリンクを貼るだけで使える

エレコム｜ELECOM ノートパソコン対応 [〜13.3インチ] ハンドル付きカジュアルインナーバッグ縦型グレー BM-IBHCV13GY[BMIBHCV13GY]

価格: 2979 円
楽天で詳細を見る

猫

2024-05-05

郵便番号から住所を検索する（複数の住所がヒットする郵便番号対応）

活用編：やり方の備忘録

See the Pen 郵便番号検索 on CodePen.

郵便番号検索
複数候補から選択できるようにする
見た目を調整する
猫
全体サンプル

郵便番号検索

日本郵便がzipcloudという郵便番号検索APIを公開しているため、検索自体は郵便番号をパラメータにセットしてfetchで呼び出すだけで実現できる。fetchにつきもののasync,await構文については、他の記事で簡単に触れているためそちらを見てみてほしい。 neko-gas.hatenablog.com

(async ()=>{
    let param = new URLSearchParams({"zipcode": "102-0082"});
    let results = (await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param)
        .then(res=>res.json(),e=>console.log(e)))
        .results;
    console.log(results[0].address1+results[0].address2+results[0].address3);
})();

複数候補から選択できるようにする

郵便番号にひもづく住所が一つなら問題ないが、中には複数の住所がヒットする郵便番号もある。例えば、「029-4205」という郵便番号を検索すると2024年4月の執筆時点で20の住所がヒットする。こういう場合に対応できるよう、VueJSで住所の選択ポップアップを作ってみる。ポップアップの使い方については過去の記事を参考にしてほしい。VueJSでは候補を格納する配列としてcantidates、ポップアップの表示制御をするBooleanとしてshowCandidates、結果の住所を格納する文字列としてaddressを定義している。 neko-gas.hatenablog.com

(async ()=>{
    let param = new URLSearchParams({"zipcode": "029-4205"});
    let results = (await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param)
        .then(res=>res.json(),e=>console.log(e)))
        .results;
    if (!results || results.length < 1) return;
    this.candidates=results.map(result=>result.address1+result.address2+result.address3);
    this.showCandidates=true;
})();

  <div id="background" v-show="showCandidates">
    <div id="dialog">
      <div id="candidatesArea">
        <label class="checkLabel" v-for="candidate in candidates">
          {{ candidate }}
          <input type="radio" name="candidate" class="hidden" :value="candidate" v-model="address" />
        </label>
      </div>
      <button id="okButton" @click="showCandidates=false">OK</button>
    </div>
  </div>
  <input id="zipcode" v-model="zipcode" />
  <button id="searchButton" @click="search">検索</button>
  <div>{{ address }}</div>

見た目を調整する

今回は検索ボックスもおしゃれにしてるし、候補を選択する部分も若干工夫している。cssでどう実現しているか解説しておく。

 #zipcode, #searchButton {
   line-height: 1.4;
   border: 1px solid gray;
 }
 #zipcode {
   border-radius: 0.5rem 0 0 0.5rem;
 }
 #searchButton {
   border-radius: 0 0.5rem 0.5rem 0;
   background-color: gray;
   color: white;
 }
 #background {
   width: 100vw;
   height: 100vh;
   background-color: #000c;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
 }
 #dialog {
   background-color: white;
   border-radius: 10px;
   padding: 10px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 #candidatesArea {
   max-height: calc(90vh - 2rem);
   overflow-y: scroll;
 }
 #okButton {
   border-radius: 1rem;
   background-color: blue;
   color: white;
   width: 100%;
 }
 .hidden {
   display: none;
 }
 .checkLabel {
   width: 100%;
   display: block;
   border-block-end: 1px solid darkgray;
 }
 .checkLabel:has(input:checked) {
   background-color: lightskyblue;
 }

猫

わたじいは窓から外を眺めるのが大好きで、尻尾だけでもその可愛さは十二分に伝わってくる。向かいの家の住所でも眺めているのだろうか。いや、そんなはずはない。外を眺めているようで実はこの日は雨戸が閉まっており、何も見えていないはずなのだから。。。

【猫砂2袋プレゼント中!!】 [自動猫トイレ CATLINK SCOOPER PRO-X 本体] 猫ねこネコ自動ネコトイレ自動トイレ猫トイレ大きめ自動フルカバーシニアキャットリンクスマホスマートフォンおすすめおしゃれアプリ

価格: 59900 円
楽天で詳細を見る

全体サンプル

コード.gs

function doGet(e) { return HtmlService.createTemplateFromFile("無題").evaluate(); }

無題.html

<html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?> </head> <script> function onload() { Vue.createApp({ data: ()=>( { zipcode:"", // 郵便番号 address:"", // 住所 showCandidates: false, // 住所選択ダイアログの表示フラグ candidates: []　// 住所候補 } ), methods: { search() { (async ()=>{ let param = new URLSearchParams({"zipcode": this.zipcode}); let results=(await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param) .then(res=>res.json(),e=>console.log(e))) .results; if (!results || results.length < 1) return; this.candidates=results.map(result=>result.address1+result.address2+result.address3); if (this.candidates.length > 1) { this.showCandidates=true; } else { this.address=this.candidates[0]; } })(); } } }) .mount("#main"); } </script> <body onload="onload()"> <div id="main"> <div id="background" v-show="showCandidates"> <div id="dialog"> <div id="candidatesArea"> <label class="checkLabel" v-for="candidate in candidates"> {{ candidate }} <input type="radio" name="candidate" class="hidden" :value="candidate" v-model="address" /> </label> </div> <button id="okButton" @click="showCandidates=false">OK</button> </div> </div> <div><input id="zipcode" v-model="zipcode" /> <button id="searchButton" @click="search">検索</button></div> <div>{{ address }}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script> </body> </html>

css.html

【3個セット】ペーパーフレッシュ18L PFC-18L 紙砂ネコ砂猫砂ねこ砂紙かみパルプ溶ける固まるトイレに流せる流せる再生パルプにゃんこネコ猫ねこ cat アイリスオーヤマ【iris_dl】【iris_dl06】

価格: 5060 円
楽天で詳細を見る

猫砂アースペットしっかり消臭するひのきの猫砂森林からの贈りもの(7L*6袋セット)【ハッピーペット】

価格: 3060 円
楽天で詳細を見る

☆ OMOTENSHIセレクション受賞商品日本メーカー安心保証☆ 送料無料【 SUMIKA 突っ張り型木製キャットタワーハイエンドモデル】つっぱりスリム耐久性キャットウォーク大型猫省スペース猫タワーおしゃれ多頭飼い組換え自由自在

価格: 16922 円
楽天で詳細を見る

2024-05-03

GASでVueJSのcomponentを使う

学習編：書き方の備忘録

See the Pen ポップアップを開くComponent on CodePen.

前置き
componentを作成する
componentを呼び出し側で登録する
slotを使ってポップアップの中身を設定できるようにする
猫
全体サンプル

前置き

VueJSにはcomponentという非常に便利な機能があり、これを使うと機能を部品として切り出し再利用が可能になる上、ファイルを分けられるので可読性も上がる。componentを使う際は.vueファイルに定義したcomponentをexportし、使う側でimportするのが一般的であり、VueJSの書き方を調べるとこの書き方は非常によく目にする。しかしだ、GASの標準エディタはJavaScriptを記述する.gsファイルと.htmlファイル、それと例外的に.jsonファイルを作成することがしかできない。.vueファイルは作成できず、どんなに便利なcomponentを発見しても同じ書き方で実現することはできないのだ。ここではGASの標準エディタでcomponentの利用を可能にするまでの軌跡を、その奮闘の過程を、ドキュメンタリーに見ていただこう。いや嘘だ。長くなるので結果だけお伝えしたい。

componentを作成する

以前作ったポップアップをcomponentを使った書き方に変更する。"templateタグでcomponent化したいHTMLを構築し、defineComponentでidを指定してcomponentを定義する。定義したcomponentはpopup変数に格納する。以前の記事は以下を参照。 neko-gas.hatenablog.com

componentを呼び出し側で登録する

通常はimportしたcomponentを登録するが、importができないので代わりに変数に格納したcomponentを登録する。呼び出し側はたったこれだけで済んでしまう。

タグ名とdefineComponentの結果を格納した変数を指定してcomponentを登録する

slotを使ってポップアップの中身を設定できるようにする

componentを使ってお手軽に呼び出せるようになったが、今のままでは「はい」を押しても「いいえ」を押しても閉じるだけの無意味なポップアップを表示するだけの使い道のないcomponentになってしまう。slotを使ってポップアップの中身は呼び出し元で自由に定義できるようにしよう。

猫

＼縦型も新登場！／折りたためる洗濯カゴランドリーバスケットメッシュ自立大容量スリムランドリーボックスランドリー折りたたみバスケットランドリーバッグ洗濯かご洗濯籠洗濯物入れ脱衣カゴ洗濯かご折りたたみ洗濯カゴ折りたたみ

価格: 1000 円
楽天で詳細を見る

全体サンプル

componentを記述したファイルは.vueファイルのように、cssも含めて一つのhtmlファイルにまとめることができる。ただしimport文での変数名変更ができないため、変数名の同じcomponentは利用できない点、後から読んで変数がどこから来ているか分かりづらい点、呼び出し元のhtml内でスクリプトレットを用いたhtmlの呼び出しが必要になる点などを注意してほしい。

コード.gs

function doGet(e) { return HtmlService.createTemplateFromFile("無題").evaluate(); }

無題.html

<html> <head> <base target="_top"> <style> #buttonArea { display: grid; grid-template-columns: 1fr 1fr; } button { border-radius: 1rem; border: none; } #yes { background-color: aquamarine; } #no { background-color: coral; } </style> </head> <script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script> <script> function onload() { Vue.createApp({ data:()=>({showPopup:true}) }) .component("popUp", popup) .mount("#main"); } </script> <body onload="onload()"> <?!= HtmlService.createHtmlOutputFromFile("ポップアップcomponent").getContent(); ?> <div id="main"> <pop-up :is-show="showPopup"> <div>本当によろしいですか？</div> <div id="buttonArea"> <button id="no" @click="showPopup=false">いいえ</button> <button id="yes" @click="showPopup=false">はい</button> </div> </pop-up> <button @click="showPopup=true">ポップアップを開く</button> </div> </body> </html>

ポップアップcomponent.html

<template type="text/x-template" id="popup-template"> <div class="popup" v-show="isShow"> <div> <slot /> </div> </div> </template> <script> const popup = Vue.defineComponent({ template: '#popup-template', props:{ isShow: Boolean } // is-showとして呼び出し時に渡す変数 }); </script> <style> .popup { background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; } .popup > * { background-color: white; padding: 10px; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>

無添加とりけずりふわふわ花(20g*10コセット)【ペッツルート無添加(Mutenka)】

価格: 2992 円
楽天で詳細を見る