【実践GAS4】HTML連携〜導入編〜

概要

最近は、次の案件まで暇なので、４ヶ月以上、iOSを中心に遊んでるんだけど、

てな感じで、久しぶりにスキが付いたのと、ちょっと時間ができたので、記事をひとつ

WEBをこれまであまりしなかった理由

まあ、実はPC の資格とかプログラミングの勉強を始めた10年以上前に、実はHTMLやCSS、Javascriptは当時のものでひと通り触って、学習はしてたんだけど。

WEBってサーバーがないと、実際に公開した時の状態がわからなかったりするけど、昔は有料のレンタルサーバーしか見当たらなくて敷居が高ったし。
それ以外にもやりたいプログラミング言語があったからそちらを優先してた💦

GAS(google apps script)だと、

元々が、無料のクラウドサーバーな上に、HTMLが実は書ける

2022/9/30までGASの仕事をしてた時も、他の人はそもそも、
このHTMLて表示されることは知っていても、
これを何に使えるのかまでは、興味なしな人が多かった💦

GAS関連の本を3冊くらい（市販の本がそもそも少ない）回してたんだけど、その中で唯一HTMLの連携について触れてた本は、

できる 仕事がはかどるGoogle Apps Script自動処理 全部入り。 (できる全部入り。)

だけだったんだよね〜〜〜〜しかも最終章でやっとこ触れたて感じ。

ただし、この本は、

あくまでもスプレッドシート上のGASの扱いに特化してる本だから、スプレッドシートしたことない人がやるのはちょっと敷居が高いかなあ。
と思うので、

オススメは、

【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル

のサイトにある

Google Apps Scriptで最も簡単なWebページを作成して公開する

かなと。

実際、導入部分で一番簡単なWEBサイトを作ってみると、、、

スタンドアロンスクリプトを選択

ファイル名を実践GASへ変更

＋マークをクリックして、HTMLクリック

無題のファイルが追加されるので

無題を任意の名前に変更（今回はポータル）
HTMLの基本タグが書かれているファイルが開く
無題のままでもOKだけどね、、、

適当に本文を入力して

Ctrl＋Sを同時押しで保存後、コード.gsファイルをクリック

コードを書き換えて〜〜〜

function doGet() {
  return HtmlService.createHtmlOutputFromFile("ポータル");
}

デプロイボタンをクリックして新しいデプロイ

設定マークをクリックして、ウェブアプリをクリック

デプロイの詳細設定で、アクセスできるユーザーを今回は全員にして、デプロイをクリック

デプロイIDやURLが出てくるので、完了をクリック

デプロイ管理をクリックして

新しいタブで、URLを開くと

こんな感じで、今作ったHTMLが公開された

作成されたURL

タイトル未設定

多分、他の人もリンクできるはず
（社内環境で特定のユーザーの範囲でしかやったことないけど、全員にしてるから多分大丈夫かな💦）

メリット

VSCodeなんかで作ったWEB作品を一般に公開したい時に、
無料で公開できる

こんなにあっさり簡単にできるから、公開しながら成果を確認したい時とかは使ってみてね。

まとめ

ただし、CSSとかは結構特殊な使い方になるかもしれないので、
「連載目次：GASユーザーのための初めてのHTML・CSS講座」
の記事はひととおり操作しながら１度、回してみて、
使えると思ったら使うくらいがいいかも。

作業効率が落ちたら意味がないし、拡張機能的に、VSCodeの方がいいって人も多いだろうからね〜〜〜〜！

数ヶ月、離れてるからだいぶ忘れてるなあ

とか言いつつ、

こんな感じで、今までやったGASのコードは全てひとつのファイルにまとめてるから、必要があればすぐに思い出すんだけどね