CAconfirm

• オリジナルはこちら
  • 簡単にしか説明しないので必要であればオリジナルの方を見てもらえれば。

概要

Googleフォームに回答したか否かをスプレッドシートで可視化できるようにしたもの。個人情報は載せず、名前と丸罰で印をつけます。
予め、名簿リスト(名前やIDもしくは学籍番号)を別のスプレッドシートで用意しておく必要があります。
フォームを送信した地点で、シートが自動更新されるようにしています。

簡略コマンド

• npmがインストールされているかのチェック。

npm run check

• claspと依存モジュールのインストール。

npm run install

• プロジェクトの作成。

clasp create --type standalone --rootDir ./dist --title "<作成するプロジェクト名>"

• ビルド＆デプロイ

npm run deploy

• プロジェクトの実行画面を開く。

npm run open

• (必要な人向け):テスト実行。

npm run test

以上でエラーが出た場合は以下の詳細をご覧ください。

---

アーキテクチャ

使用している技術等

• 言語
  • TypeScript(GAS)
• ツール
  • webpack
  • clasp

前準備

• Node.jsのインストール
  • npmコマンド
  • clasp
• (任意の)ブラウザ
• Googleアンケートとそのスプレッドシート
• スプレッドシート(氏名一覧を載せた名簿)
• スプレッドシート(公開用のシート)

準備

scriptIDの確認の仕方

GASのスクリプトページの、「ファイル」 > 「プロジェクトのプロパティ」のプロパティ欄にスクリプトIDが記載されていると思います。

node_moduleのインストール

node -v
npm -v

上記のコマンドをターミナルに入力する。

バージョンが出力されない人向け

• nodebrewで入れる方法
• ホームページから持ってくる。LTSを選択しよう。
  その上で以下へ。

バージョンが出力された人向け

以下のコマンドを実行。

npm i @google/clasp -g  # グローバルにclasp環境を整える。
npm i #ローカルに必要なNodeModuleをインストール。(-gというグローバルにインストールするオプションはclasp以外、使わないように。)

Googleアカウントの設定

Webエディタにアップロードするためにユーザ認証が必要なので、 clasp loginを実行し、webページでログインを行う。

GASのAPI設定

このページより、以下の通りにonにする。このとき、使用するアカウントでログインしていることを確認する。

プロジェクトの作成

clasp create --type standalone --rootDir ./dist --title "<プロジェクト名>"

オプションについてはこちらを参照。
オプションは付与しない又は順不同で構わないが、--rootDirオプションだけは必ずつけること。
実行時以下のエラーが出た場合は、その設定を出来ていないためです。.clasp.jsonのscriptIDの下に"rootDir": "./dist"と記述しましょう。

ビルド方法

npm run build
clasp push

上記のように実行すると、ビルド・ts→jsにトランスパイルされた後、webpack(1つのファイルに纏められ)され、クラウドにソースコードが転送される。
上記２行を以下の1行でかける。

npm run deploy

プログラムのテストを行う場合

npm run test

clasp openでクラウドに上げたソースコードをブラウザで確認できる。

プロパティの設定

ブラウザに遷移したら次のことを行う。 このプロジェクトでは以下の４つのプロパティを使用する。

• GF_URL
  • Googleフォーム
• SS_FOR_EVERYONE_URL
  • 公開用スプレッドシート
• SS_MENBERS_URL
  • メンバーの情報を載せたスプレッドシート
• EVENT_TITLE
  • 任意の行事

上記のプロパティを設定するために「ファイル」> 「プロジェクトのプロパティ」 > 「スクリプトのプロパティ」を選択し、「行を追加」でプロパティを設定する。
ex) GF_URL : https://google.sample

実行方法

実行できるが、プロジェクトを作成して初めて実行する場合は承認が必要である。

許可するとGoogleアカウントを選択する画面に遷移するので、clasp loginのときにログインした時のアカウントを選択する。

次に詳細を押し、「安全でないページ」へ遷移する。
また許可を求められるので「許可」を選択。
ようやく元の画面に戻るので、⌘Rで実行する。

claspについて

GoogleがGASをローカルで開発できるように作成したライブラリです。
今回はそのライブラリのテンプレートを作成したgas-clasp-starterというものを活用しています。
参考記事: https://qiita.com/howdy39/items/0e799a9bfc1d3bccf6e5