【GAS】Google apps scriptを使ってwebページを公開してみた
GAS（Google apps script）でWEBページを作ってみました！
言うて2か月前の話なんですけどね、今更ちょっと紹介します。
ちなみに作成したのはこんなページ。
僕は本をジャケ買いしちゃうことがあるのでそのせいで積読された本がたくさんあります。
そんな癖がある人って他にもいると思うんですよね。
そういう人の購買欲をくすぐってやろうってページです。
本当稚拙ですな。
Google apps scriptとは
Google apps scriptとはGoogleが提供しているjavascriptベースのスクリプト環境のことをさします。
JavaScriptはクライアントサイドで実行されるのに対してGASはサーバサイドで実行されるため多少感覚が異なる部分もあります。
僕はJavaScriptをほぼ知らなかったので抵抗はあまりなかったです。
あとは専用の関数が用意されているんでそれを使わないと動かないなんてこともあるようですね。
▼Google apps script Apps Script | Google Developers
とは言えサーバをレンタルすることなくちょっとしたWEBページを公開できるので便利ですよ。
WEBページのほかにTwitterのBotも作れます。
これもあとでブログに書こうかと思います。
GASの始め方
GASの始め方とかは詳しく書いてあるブログが他にもあるのであえては書きません。
▼GASApps Script – Google Apps Script
このページにアクセスしてGoogleアカウントでログインし、左上にある新規スクリプトボタンを押せば始められます。
そして基本的なことはすべてこちらの記事に書かれているので参考にしてください。
GASでWEBページを作る
コード.gsはGASを書くファイルなので、これとは別にhtmlファイルを用意します。
ファイル→新規作成→HTMLファイルを選択するとhtmlファイルを作成できます。
今回はBootstrap4を使って枠を作りました。
▼Bootstrap4 getbootstrap.com
DocumentationからStarter Templateにあるコードをコピーして使います。
これをweb.htmlとし保存します。
次にコード.gs（名前は変更しても平気です）にコードを書き加えます。
先に紹介した記事に書かれているのと同じ内容ですが、GASからwebページを公開するにはdoGet関数を使用します。
function doGet() { return HtmlService.createHtmlOutputFromFile('web'); }
returnでweb.htmlというファイルをhtmlサービスとして展開しますよって意味ですね。
上書き保存したらいよいよWEBに公開します。
公開→ウェブアプリケーションとして導入→プロジェクトばージョンをNEWあるいは数字を更新→次のユーザーとしてアプリケーションを実行の欄を自分に変える→アプリケーションにアクセスできるユーザーを全員（匿名ユーザーを含む）に変更→導入をクリック
認証の画面がでてきたらすすんで認証をしてください。
最後にurlが表示されるのでリンクに飛ぶと公開されたwebページに移動できます。
最新のコードをテストしますで飛ぶ先のurlはテストページなので、そのurlは自分以外の人はアクセスできませんので誰かにurlを教えるときは気を付けましょう。
urlの最後にdevと書かれていたらそれはテストページです。
それ以降は導入ではなく更新になります。
公開→ウェブアプリケーションとして導入→バージョンを更新し、次のユーザーとしてアプリケーションを実行の欄を自分に変え更新ボタンを押す。
※コードを更新した後、バージョンを上げていかないと公開されているwebページ上で更新されないことがあるので注意です。更新したらバージョンを上げましょう。
GASでCSSを書く
他にCSSも必要なので同じようにHTMLファイルを新規作成し、css.htmlにして保存すればOKです。
通常CSSを反映させるには<link>タグを使用しますがGASの場合は専用の記述が必要です。
<head> <?!= HtmlService.createHtmlOutputFromFile("css").getContent();?> </head>
GAS上で他のhtmlファイルを参照するには<?! HtmlService.createHtmlOutputFromFile("ファイル名").getContent();?>を使います。
反映されない場合はファイル名を確認してください。
今回はcss.htmlという名前でCSSファイルを作成したので<?!= HtmlService.createHtmlOutputFromFile("css").getContent();?>というように書いています。
もしファイル名をAAA.htmlにしていた場合は<?!= HtmlService.createHtmlOutputFromFile("AAA").getContent();?>というように書く必要があります。
ちなみにJavaScriptも同じように別で作成できます。
まとめ
GASでWEBサイトを公開するにはdoGet関数を使うだけでできてしまいます。
こんなに簡単なことはないでしょう。
サーバ代もかからないし試しに使ってみる価値はあります。
問題はオーガニック検索で出てこないことでしょうか。
おそらくなんですけどGASで公開したWEBページってのはGoogleドライブでの共有みたいなものなのかもしれません。
なので検索エンジンではひっかからないのかも。
あるいは僕がSEOを理解していないのと、競合が多いタイトルにしているのが原因かもしれませんが。
はい、ということで今回はただただGASでWEBページを公開する手順の記事でした。
次回はGASで公開したwebページのファビコンの追加やページの追加など細かい設定方法を紹介します。
