![見出し画像](https://assets.st-note.com/production/uploads/images/95768056/rectangle_large_type_2_c63306a677dda5bcaa3c5cc945f6ac4e.png?width=800)
【実践GAS4】HTML連携〜導入編〜
概要
最近は、次の案件まで暇なので、4ヶ月以上、iOSを中心に遊んでるんだけど、
![](https://assets.st-note.com/img/1673847988885-ynQ084hFKH.png?width=800)
てな感じで、久しぶりにスキが付いたのと、ちょっと時間ができたので、記事をひとつ
WEBをこれまであまりしなかった理由
まあ、実はPC の資格とかプログラミングの勉強を始めた10年以上前に、実はHTMLやCSS、Javascriptは当時のものでひと通り触って、学習はしてたんだけど。
WEBってサーバーがないと、実際に公開した時の状態がわからなかったりするけど、昔は有料のレンタルサーバーしか見当たらなくて敷居が高ったし。
それ以外にもやりたいプログラミング言語があったからそちらを優先してた💦
GAS(google apps script)だと、
元々が、無料のクラウドサーバーな上に、HTMLが実は書ける
![](https://assets.st-note.com/img/1673848479420-1sNyOJzBFl.png?width=800)
2022/9/30までGASの仕事をしてた時も、他の人はそもそも、
このHTMLて表示されることは知っていても、
これを何に使えるのかまでは、興味なしな人が多かった💦
GAS関連の本を3冊くらい(市販の本がそもそも少ない)回してたんだけど、その中で唯一HTMLの連携について触れてた本は、
だけだったんだよね〜〜〜〜しかも最終章でやっとこ触れたて感じ。
ただし、この本は、
あくまでもスプレッドシート上のGASの扱いに特化してる本だから、スプレッドシートしたことない人がやるのはちょっと敷居が高いかなあ。
と思うので、
オススメは、
のサイトにある
かなと。
実際、導入部分で一番簡単なWEBサイトを作ってみると、、、
![](https://assets.st-note.com/img/1673848950246-ZgcmhBMdJa.png?width=800)
![](https://assets.st-note.com/img/1673850863835-r1qLpOaC8y.png?width=800)
![](https://assets.st-note.com/img/1673850908282-svR9tEClBE.png?width=800)
![](https://assets.st-note.com/img/1673850968513-Oof2CBmzYY.png?width=800)
![](https://assets.st-note.com/img/1673850984371-TNbvfzz9QR.png?width=800)
HTMLの基本タグが書かれているファイルが開く
無題のままでもOKだけどね、、、
![](https://assets.st-note.com/img/1673851117685-tVL36q1TC1.png?width=800)
![](https://assets.st-note.com/img/1673851153588-91y5C7RbTd.png?width=800)
![](https://assets.st-note.com/img/1673851317561-bkdQbXT9eZ.png?width=800)
function doGet() {
return HtmlService.createHtmlOutputFromFile("ポータル");
}
![](https://assets.st-note.com/img/1673851356121-KR4CZPl4Jm.png?width=800)
![](https://assets.st-note.com/img/1673851406460-oqqEJZLQx3.png?width=800)
![](https://assets.st-note.com/img/1673851510910-lyJIAum5a8.png?width=800)
![](https://assets.st-note.com/img/1673851613930-WkaOHdTcZe.png)
![](https://assets.st-note.com/img/1673851645497-IFNaILde3M.png)
![](https://assets.st-note.com/img/1673851686468-51wMdnWZwC.png?width=800)
![](https://assets.st-note.com/img/1673851725750-3afHeBs65x.png?width=800)
作成されたURL
多分、他の人もリンクできるはず
(社内環境で特定のユーザーの範囲でしかやったことないけど、全員にしてるから多分大丈夫かな💦)
メリット
VSCodeなんかで作ったWEB作品を一般に公開したい時に、
無料で公開できる
こんなにあっさり簡単にできるから、公開しながら成果を確認したい時とかは使ってみてね。
まとめ
ただし、CSSとかは結構特殊な使い方になるかもしれないので、
「連載目次:GASユーザーのための初めてのHTML・CSS講座」
の記事はひととおり操作しながら1度、回してみて、
使えると思ったら使うくらいがいいかも。
作業効率が落ちたら意味がないし、拡張機能的に、VSCodeの方がいいって人も多いだろうからね〜〜〜〜!
数ヶ月、離れてるからだいぶ忘れてるなあ
とか言いつつ、
![](https://assets.st-note.com/img/1673852505298-OMybYQemoW.png?width=800)
こんな感じで、今までやったGASのコードは全てひとつのファイルにまとめてるから、必要があればすぐに思い出すんだけどね
この記事が気に入ったらサポートをしてみませんか?