【GAS】WebアプリケーションでWebページを作る
GoogleAppScript(以下GAS)のWebアプリケーションの機能を使ってWebページを作ります。
GSuiteのアカウントではGSuiteメンバーのみが閲覧できるページしか作れないのでご注意ください。
通常のGoogleアカウントでは全体公開、自分のみ、Googleにログインしている人のみなど選べます。
GASの準備
過去記事を参考にGASの準備をお願いします。
madgenius.hateblo.jp
GASの記入
以下がページを表示するのに使うGASです。
- doGetが必須のメソッドで、HTMLページを読み込むのに使います
- ここではindex.htmlを読み込んで表示している
- GetTextはHTMLページから情報を引き出すためのメソッドです。
- 特定のKeyを送ることでそれに合った文字列を返します。
- 本来、ここで通信したりスプレットシートの中身を見てページの表示内容を変更する
- GetCSSではCSSの名前を送ることでそのCSSの中身を取得して返します。
function doGet() { var html = HtmlService.createTemplateFromFile("index"); return html.evaluate(); } function GetText(key) { if (key == "title") { return "私が好きなプリパラアイドル"; } else if (key == "rank1") { return "紫京院ひびき"; } else if (key == "rank2") { return "北条そふぃ"; } else if (key == "rank3") { return "東堂シオン"; } else if (key == "rank4") { return "白玉みかん"; } else if (key == "rank5") { return "み〜んなアイドル、み〜んな大好き"; } } function GetCSS(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); }
CSSの作成
GetCSSで取得するCSSを作成します。
「GASのファイル > 新規作成」でHTMLファイルを作成します。
ファイル名は「css.html」です。
<style> body{ font-family:Verdana,Arial; font-size:14px; } #header{ margin-bottom:15px; border-bottom: 1px solid #ccc; } #contents{ } #footer{ font-size:12px; color:#ccc; text-align:center; border-top:1px solid #ccc; padding:10px 0 20px; } h2,h3{ font-size:bold; } h2{ font-size:16px; border-left:5px solid #ccc; padding:3px 0 3px 10px; margin-bottom:10px; } h3{ border-bottom:1px solid #ccc; padding:3px 0; margin-bottom:10px; } p{ margin-bottom:14px; } </style>
HTMLの作成
CSSの時と同じ手順でindex.htmlを作成します。
- 「<head>」の中に「<?!= GetCSS('css'); ?>」とありますが、css.htmlの内容を<head>の中に追加しています。
- 「<?= GetText("title"); ?>」はGetTextメソッドから"title"という文字に紐付けられた文字を返す。
<!DOCTYPE html> <html> <head> <base target="_top"> <?!= GetCSS('css'); ?> </head> <body> <section id="header"> <h2><?= GetText("title"); ?></h2> </section> <section id="contents"> <ul class="products"> <li> 1位:<?= GetText("rank1"); ?> </li> <li> 2位:<?= GetText("rank2"); ?> </li> <li> 3位:<?= GetText("rank3"); ?> </li> <li> 4位:<?= GetText("rank4"); ?> </li> <li> 5位:<?= GetText("rank5"); ?> </li> </ul> </section> <section id="footer"> <a href="https://twitter.com/ele_enji" target="_blank">園児ニアの技術メモ</a> / <a href="https://twitter.com/ele_enji" target="_blank">@ele_enji</a> </section> </body> </html>
Webページを表示する
doGetメソッドを実行してエラーが出なければOKです。
たまにHTML内でのメソッド名などの入力ミスでエラーが出ます。
では、WebページとしてのURLアドレスを取得しましょう。
「公開 > ウェブ アプリケーションとして導入...」を選択。
ウェブアプリケーションとして導入というポップアップが出ます。
- アクセスユーザーを「自分だけ」から「全員(匿名ユーザーも含む)」にしました。
- GSuiteの場合、「全員(hogehogeのメンバー)」など最大でもグループのユーザーしかアクセスできません。
- もしアクセスしたユーザーのアカウントを使う必要がある場合は「次のユーザーとしてアプリケーションを実行」の実行ユーザーを「自分(hogehoge@hoge.com)」ではなく「ウェブアプリケーションにアクセスしているユーザー」にしましょう。
更新を押すと実際のWebサイトのアドレスが取得できます。
実際に今回作ったページがこちら
script.google.com
CSSも入れれるので結構いい感じのデザインにはできるのですが、URLの部分はGoogleAppScriptなんだなって感じなのでHPには向いてないです。
ツールサイトや、個人用として使うぶんには十分だと思います。