gas with clasp でシンプルなウェブアプリをデプロイする

超参考文献 (圧倒的感謝) : https://qiita.com/jiroshin/items/dcc398285c652554e66a

clasp create は引数を受け付けなくなってた

clasp open も多分 clasp open-script に変わってそう

あと↑の clasp open-script を実行して開かれるブラウザのデフォルトのgoogleアカウントで作ってないとうまく開けない (400番エラー)

第二参考文献 https://qiita.com/knaito27/items/1eaff790a9028d2ced78

なんか一生URLからアプリ開けなかったからブラウザのデフォルトユーザーをGASプロジェクトのオーナーアカウントと揃えたら開けた

なんかシークレットブラウザでもいい感じに開けるようになった、なんでだろう 🤔
とりあえず設定画面で「次のユーザーとして実行」を「ウェブアプリケーションにアクセスしているユーザー」にしておくのが良さそうに思った

大感謝参考文献 : https://qiita.com/ume3003/items/cd9d05dff014952a73f8

なんとなくの手順

0. npm i -g @google/clasp でclaspをインストール、 clasp login でログインしておく
   • このとき、可能ならブラウザのGoogleデフォルトアカウントでログインするのが良さそう
1. 適当な作業ディレクトリでnpm init -yしてnpmを初期化
2. npm i -D @google/clasp と npm i -S @types/google-apps-script する
3. clasp createでGASプロジェクトを作成する
4. .clasp.jsonのrootDirを自由に変更する（srcとする前提で話を進めます）。rootDirを変更したらappsscript.jsonはそのディレクトリの中に移動しておく。scriptExtensionsはTypeScriptで書くなら[".ts"]にする
5. appsscript.jsonにWebアプリ用の記述を追加する（"webapp"まわり）。↓のコードブロックを参照（timezoneも変更してる）。
6. srcディレクトリにindex.htmlとserver.tsを作成する。HTMLの方はよしなに。server.tsはHTMLをレンダリングして返す処理が必要なので↓のコードブロックの内容で。
7. clasp pushでpushする。上書き確認されたら y で。
8. clasp deploy -d webapp する。
9. clasp open-web-app で説明に webapp とあるものを選択するとブラウザでデプロイされたウェブアプリが開ける。 :tada:

• clasp open-scriptでブラウザでGASプロジェクトを開いて、設定からappsscript.jsonの表示をonにしておくと良さそう。
  • これをやっておくと、公開範囲を変更したときの appsscript.json の変更内容を確認できて嬉しそう。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "webapp": {
    "executeAs": "USER_ACCESSING",
    "access": "ANYONE"
  }
}

function doGet() {
  const htmlOutput = HtmlService.createHtmlOutputFromFile("index")
    .setTitle("Sugoi Web App") // HTMLのタイトルは表示されないのでここで設定する
    .addMetaTag("viewport", "width=device-width, initial-scale=1"); // これも、HTMLに書いた内容は反映されないのでここで設定する
  return htmlOutput;
}

これであとはビルド結果とかを気合でhtml1ファイルにバンドルしてデプロイすれば完璧になれるってワケ。 :smirk: