「GoogleAppsScript」の記事 - Crieit

【JS】Google Apps Scriptのコードをviteでバンドルする

2024-04-16T23:38:37+09:00

こんにちは、しきゆらです。
今回は、Google Apps Script(GAS)をViteでビルドしてclaspでプッシュする環境を作っていきます。
・・・久々のプログラム関連の記事な気がする。

個人的に、GASのコードをローカルで書き、JSのバンドラー？ビルダー？を使ってビルドしてclaspでアップロードする、というのがGASを書く上でのお作法だと思っています。

claspに関しては、こちらをご覧ください。

GitHub - google/clasp: 🔗 Command Line Apps Script Projects https://github.com/google/clasp

ビルドツールも様々あります。
Webpackやparcel、esbuildなどいろいろあるうえに、時代によって流行り廃りが速いのであまり追い切れてません。
ビルドツールについてはいかがいろいろまとまっててよさそう。

JavaScriptビルドツールの整理各ツールの機能と依存関係
 Native ESM 時代のフロントエンドビルドツールの動向

また、過去のツールの流行り廃りは以下あたりが参考になるかと。

State of JavaScript

ということで、いろいろあるわけですが
今回は、tauriでちょっと使って動作が速かったviteを使ってGASをビルドする環境を作ってみようと思います。

Vite | 次世代フロントエンドツール

Tauriを触ったときの記事はこの辺をご覧ください。

【Rust】Tauriで簡易的なアプリを作ってみる

今回、調べてみるとviteを使ってGASを書く記事はHTMLを作ってWebアプリとしての環境構築ばかりでした。
欲しいのはJSやTSをビルドするだけの環境です。
色々調べているとviteの裏側にあるRollupのプラグインでGAS向けのものがあったのでこれを使ってみます。

環境構築

適当なフォルダで以下のツールをインストール。
ここではyarn(v4.1.1)を使ってインストールしていますが、他のツールを使っている場合も同じような感じかと思うので読み替えていただければと。

yarn add clasp vite rollup-plugin-google-apps-script

それぞれのリポジトリをいかにおいておきます。

GitHub - google/clasp: 🔗 Command Line Apps Script Projects

GitHub - vitejs/vite: Next generation frontend tooling. It's fast!

GitHub - mato533/rollup-plugin-gas: Rollup plugin for Google Apps Script. This plugin supports local development of applications that run on Google Apps Script.

vite/rollupの設定

viteは設定ファイルが必要です。
しかし、必要なものは以下に参考としてあるので、これをもとにちょっと手直しします。

GitHub - mato533/rollup-plugin-gas: Rollup plugin for Google Apps Script. This plugin supports local development of applications that run on Google Apps Script.

// vite.config.js
import { defineConfig } from "vite";
import rollupPluginGas from "rollup-plugin-google-apps-script";
import path from "path";

export default defineConfig({
  plugins: [rollupPluginGas()],
  build: {
    rollupOptions: {
      input: "src/main.js",
      output: {
        dir: "dist",
        entryFileNames: "main.js",
      },
    },
    minify: false, // trueにすると関数名が消えるのでfalse必須
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

ここではsrc/main.jsというファイルを作り、これをdist/main.jsへビルドする形を作っていきます。

Google Apps Scriptへプッシュする

まずは、claspからログインしましょう。
以下のコマンドを実行すると、ブラウザが立ち上がるので、画面に従ってGoogleアカウントへログインしましょう。

clasp login

ログイン後、以下のコマンドでApps Scriptを作成します。なお、すでに作成済みの場合は場合はcloneでもよいです。

> clasp create
? Create which script? standalon
reated new standalone script: 
Warning: files in subfolder are not accounted for unless you set a '/path/to/project/.claspignore' file.
Cloned 1 file.
└─ /path/to/project/appsscript.json

clasp createを実行するとどんなスクリプトか聞かれるので、今回はstandaloneを指定してます。

完了すると、URLが表示されます。
これを開くと、作成されたApps Scriptへアクセスできます。
また、clasp openでも開けます。

そして、appsscript.json、.clasp.jsonの2ファイルが生成されます。
.clasp.jsonファイルを開き、rootDirをvite.config.jsで設定したdistフォルダを指定します。

// .clasp.json { "scriptId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "rootDir":"/path/to/project/dist" }

そして、appsscript.jsonファイルをdistフォルダへコピーします。

では、clasp pushでコードをApps Scriptへアップロードします。

clasp push

Apps Scriptを開くと、以下のようにコードが反映されているはずです。
では、関数名を指定して実行ボタンを押して動作確認しましょう。

greetを実行すると以下のように表示されるはずです。

はい、これにてviteでGASを書くための環境ができました。

まとめ

今回はローカルでGASを書くためviteでビルドする環境を作ってみました。
viteは裏側がrollupであり、プラグインもrollupのものが使えるようなので、プラグインを見てから判断してもよいかもしれません。

プラグイン | Vite https://ja.vitejs.dev/plugins/

今回は、ここまで。

おわり

Googleスプレッドシートでスクレイピング

2020-08-09T13:31:47+09:00

スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。

やりたいこと

献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。
たとえば宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。

これ以外の県も、各県の献血センターに掲載されている
こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。

ないなら作れの精神で、とりあえずWebページ上にあるデータを毎日取得して蓄積してみることにした。あとでグラフとか需要の波が見られたら面白そうじゃない？

でもそのためにサーバとか管理するのもなあ。もうちょっと気軽にやれる方法はないの？

GoogleAppsScript

Googleスプレッドシートには、GoogleAppsScript(gas)というスクリプト機能があって、JavaScriptでスプレッドシートのセルの値を読み書きしたり、ボタンを押すとメソッドを実行するようにしたりすることが出来る。
UrlFetchAppというライブラリがあってWebページをダウンロードすることも出来る。あと時刻を設定して指定した関数を起動したりする機能もある。ということは、タイマーで定期的にWebページを取得させることが出来る。サーバレスでスクレイピングができるとかなり嬉しい。

ただDomパーサーがないので、取ってきたHTMLは正規表現で切り出さないといけない。サーバの管理すらしたくない駄目人間にそれはちょっと厳しい。

ImportXML

スプレッドシートには、importXMLというメソッドがある。
これを使うと、URLとXPathを書くだけでそのページの該当箇所を取ってきてセルに入れてくれるすごいメソッド。

ただこれ簡単メソッドだけに色々問題があって、
・厳密にXMLとして解釈しようとするので、乱暴なHTMLのページは取得できないことが多い
・JSの解釈もしてくれないぽい
・XPath書くの面倒w
・取得タイミングが制御できない

最後のがわりと致命的で、キャッシュ制御がブラックボックスなので、ページが更新されても内容が更新されなかったり、予想されないタイミングでキャッシュが破棄されて内容が更新されていたりする。

現時点の内容がわかれば十分な用途には便利なんだけど、毎日データを取ってくるような用途にはちょっと使いにくい。

cheeriogs

cheerioは、jQueryぽい文法でHTMLをパースすることが出来るnode.jsライブラリ。ブラウザじゃなくてもjQueryぽくHTMLを解析できるので、スクレイピングのときに便利。
残念ながらgasにはサイズ制限があるので、npm install cheerio みたいに気軽に使うことは出来ないんだけど、代わりにつかえるgas library でcheerioを使えるようにしてくれた cheeriogs という神がいるので、これを使うとスプレッドシートのスクリプト内でもHTMLをパースして内容を取ってくることが出来る。これですべての材料は揃った。

実装

スプレッドシートのメニューからスクリプトエディタを立ち上げる。

リソース- ライブラリでライブラリ画面を開いて、cheeriogs に書いてあるIDを入力してcheerioライブラリをインポート。

あとは、こんな感じで書けばページの内容を取得できる。

const content = UrlFetchApp.fetch(url).getContentText();
const $ = Cheerio.load(content);
const title = $("title").first().text();
ret["title"] = title;
ret["description"] = $("meta[name='description']").first().attr("content");
ret["pref"] = title.replace("赤十字血液センター｜日本赤十字社","")
ret["demand_date"] = $(".center-main-today-timedate").first().text();
ret["demands"] = [];
$(".center-main-today-types-state").each((index, element) => {
   ret["demands"][index] = $(element).text();
})
:

まんまjQueryでしょ？

このあと、スプレッドシートに載っている前回の結果を右にずらして左端に今回の結果を追加したりする処理があるんだけど、そこはたんなるgasのスプレッドシート操作なので省略。

まとめ

cheeriogs をつかうことで、献血の需給状況をスクレイピングすることが出来るようになった。タイマーで毎日起動するようにしたので、現在は放置しておいても毎日夜中にその日の情報をとってきてくれるようになっている。

単なるスプレッドシートなので、条件付き書式(セルの色塗り)とかはスクリプトと無関係に出来てしまうのも便利。

gasはrubyでいうirbみたいな即時実行ツールがないし、デバッガも貧弱なので、そんなに開発体験が良いわけではない。
でも無料で使えるし、タイマーとか便利だし、なによりスプレッドシートという強力なアウトプット窓口を使えるので、サービスの管理画面なんかはこれで作るのもありだなあ、と思った。

あとはこれをtwitter botにすれば良いんだけど、例の感染症騒ぎで献血が逼迫した結果、今はどのエリアもみんな「成分献血：非常に困っています」しか出なくなってしまっている。この状況だと、献血を知っている人は献血したら次回の予約をして行く感じになっていて、Twitterで状況を知らせてくれると嬉しいとかいう感じじゃない。
今必要なのは、献血についてあんま知らない人が「えーそんな足りないの？」ということで献血にチャレンジしてくれることなので、この記事を見た人、ぜひご協力をお願いします。献血は不要不急じゃなくて必要なタスクです！

GASでいいねしたツイートをいいねの数とリツイートの数と一緒に記録するやつ

2019-10-07T09:13:01+09:00

特定のユーザーのいいねしたツイート一覧を、ツイートに付いたいいねの数とリツイートの数も一緒に記録したくなって作りました。トリガー機能を使うと、定期的にいいねが記録されるようになります。

GASで自分のツイートを取得してスプレッドシートに記録するやつ

この記事も合わせて読むとわかりやすいかもしれません。

このように記録されます。



function getFav(){
  var service  = twitter.getService();
  var json = service.fetch("https://api.twitter.com/1.1/favorites/list.json?screen_name=いいねを取得したいアカウントのscreen name&count=100");
  var array = JSON.parse(json);

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('いいねを記録したいシートの名前');
  var lastRow = sheet.getLastRow() +1;
  var lastId = sheet.getRange("F2").getValue();

  for(var i = 0; i <= array.length -1; i++) {

    var int = parseInt(i);

    if(i === 0){
      var recId = array[int]["id"];
      sheet.getRange("G2").setValue(recId);
    }

     var id = array[int]["id"];

     if(id > lastId){
       var time = array[int]["created_at"];
       var userId = array[int]["user"]["id_str"];
       var json = service.fetch("https://api.twitter.com/1.1/users/show.json?user_id="+userId+"&include_entities=false");
       var array2 = JSON.parse(json);
       var screenName = array2["screen_name"];
       var text = array[int]["text"];
       var favorite_count = array[int]["favorite_count"];
       var retweet_count = array[int]["retweet_count"];


       sheet.getRange(lastRow,1).setValue(time);
       sheet.getRange(lastRow,2).setValue(screenName);
       sheet.getRange(lastRow,3).setValue(text);
       sheet.getRange(lastRow,4).setValue(favorite_count);
       sheet.getRange(lastRow,5).setValue(retweet_count);
       sheet.getRange(lastRow,6).setValue(id);
     }
    lastRow = lastRow + 1;
    }

いいねを１００件取得して、idが以前記録したツイートより大きければ記録する…といった感じです。
何かあったら気軽にコメントください。

GASで自分のツイートを取得してスプレッドシートに記録するやつ

2019-10-07T09:10:43+09:00

急にツイ消ししたくなった場合に備えて、自分のツイートをグーグルスプレッドシートに記録しておくことにしました。

GASでTwitterの投稿とタイムライン取得
こちらの記事を参考にして書いてみました。

画像のように記録されます。


 var twitter = TwitterWebService.getInstance(
 '**********',       // 作成したアプリケーションのConsumer Key
 '**********'  // 作成したアプリケーションのConsumer Secret
);

// 認証を行う（必須）
function authorize() {
  twitter.authorize();
}

// 認証をリセット
function reset() {
  twitter.reset();
}

// 認証後のコールバック（必須）
function authCallback(request) {
  return twitter.authCallback(request);
}

function getMyTweets() {
  var service  = twitter.getService();
  var json = service.fetch("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ツイートを取得したいユーザーのid&count=30");
  var array = JSON.parse(json);

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('ツイートを保存したいシートの名前');
  var lastRow = sheet.getLastRow() +1;
  var lastId = sheet.getRange("D2").getValue();

  for(var i = 0; i <= array.length -1; i++) {

    var int = parseInt(i);

    if(i === 0){
      var recId = array[int]["id"];
      sheet.getRange("D2").setValue(recId);
    }

     var id = array[int]["id"];

     if(id > lastId){
       var time = array[int]["created_at"];
       var text = array[int]["text"];

       sheet.getRange(lastRow,1).setValue(time);
       sheet.getRange(lastRow,2).setValue(text);
       sheet.getRange(lastRow,3).setValue(id); 
     }
    lastRow = lastRow + 1;
    }
  }

自分のツイートを最新のやつから30件まで取得して、idが以前取得したツイートより大きければスプレッドシートに書き込む……という感じです。

ここ違うよ〜とかもっと良い書き方あるよ〜って場合は気軽にコメントください。