園児ニアのメモ

ただのエンジニア。何でも屋みたいな扱い受けてます。

【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」です。
f:id:nanokanato:20170905161955p:plain:w300

<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>の中に追加しています。
    • 「<?= ?>」でメソッドの返り値をそのまま表示するとHTMLタグなどはエスケープされてWebページに文字列として表示されます。
      「<?!= ?>」を使うことによりエスケープをせずにタグとしてHTMLに埋め込むことが可能です。
  • 「<?= 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アドレスを取得しましょう。

「公開 > ウェブ アプリケーションとして導入...」を選択。
f:id:nanokanato:20170905164041p:plain:w300

ウェブアプリケーションとして導入というポップアップが出ます。

  • アクセスユーザーを「自分だけ」から「全員(匿名ユーザーも含む)」にしました。
    • GSuiteの場合、「全員(hogehogeのメンバー)」など最大でもグループのユーザーしかアクセスできません。
  • もしアクセスしたユーザーのアカウントを使う必要がある場合は「次のユーザーとしてアプリケーションを実行」の実行ユーザーを「自分(hogehoge@hoge.com)」ではなく「ウェブアプリケーションにアクセスしているユーザー」にしましょう。

f:id:nanokanato:20170905164405p:plain:w300

更新を押すと実際のWebサイトのアドレスが取得できます。
f:id:nanokanato:20170905165018p:plain:w300

実際に今回作ったページがこちら
script.google.com

CSSも入れれるので結構いい感じのデザインにはできるのですが、URLの部分はGoogleAppScriptなんだなって感じなのでHPには向いてないです。
ツールサイトや、個人用として使うぶんには十分だと思います。
f:id:nanokanato:20170905165239p:plain:w300