Review of My Life: Google Apps ScriptでWebアプリを作る

Google Apps Scriptで、Webアプリを作ってみたいと思います。
前回までに、以下のようなことをやってきました。

相席居酒屋の客数の時系列データを、スプレッドシート上で可視化できるようにしました。しかし、これだと実際にユーザーが利用する場合、スプレッドシートにアクセスしなければならないので、すこしユーザービリティに問題があります。

今回は、Google Apps Script上で、Webアプリを作る方法についてまとめました。
完成したものはこちらです。

#GAS
相席アナライザーというWebアプリを作りました。メイン機能としては、都内相席居酒屋の現在の在席情報をグラフで表示。また、店舗ごとに過去の入店データを時系列グラフにして表示し、どのタイミングで入るとマッチングしやすいかを分析できます。全部GASで作ってます。https://t.co/jVYO6CMXhh pic.twitter.com/HuVYMyw7Ok
— Dai Kawai@RubyPython (@never_be_a_pm) February 21, 2018

Google Apps ScriptでWebアプリを作るうえで、必要な知識

WebアプリをGoogle Apps Script上で作成する場合に、必要な知識は

HTML
Bootstrap(※CSSが面倒なので使っています。なくてもOK)
Google Apps Script(= JavaScript)の知識

となります。Webアプリを作るのでもかなり知識が少なくてすみます。

Webアプリで作りたいもの

前回までに、相席屋のリアルタイムの在席情報と、過去の在席情報を時系列データとして取得してきました。これらの情報を、一つのWebページ上にまとめます。

そこで、Webページとしては

現在の在席状況
各相席居酒屋の店舗のデータ

ORIENTAL LOUNGE 新宿店の店舗データと、過去の来店情報のグラ
ORIENTAL LOUNGE 渋谷店の店舗データと、過去の来店情報のグラフ
ORIENTAL LOUNGE 町田店の店舗データと、過去の来店情報のグラフ

を、Webページ上でまとめます。ちなみに作られたものはこんな感じです。

Google Apps ScriptでWeb アプリを作る手順

Google Apps Scriptでは、Webアプリを作成することができます。どのように作るかというと、

HTMLファイルの作成
doGet関数をGoogle Apps Scriptに追加する

という手順になります。

WebアプリのHTMLファイルの作成

Google Apps Scriptのフロント部分である、HTMLのコードを書きます。

ファイル > 作成 > HTMLファイル をクリックします。

そうすると、HTMLファイルの名前を選択する画面が出るので、適当な名前を付けて保存します。僕の場合だと、相席アナライザーという名前で保存しています。

そうすると、Google Apps Script上に、HTMLファイルが追加されます。（画像にはコードが書いてありますが、本来は何も書かれていない状態で表示されます）

今回は、HTML上に以下のようなコードを書きました。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">    
    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    
  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-2 col-md-8"> <!-- 中央よせしています -->
                <h1>相席アナライザー</h1>
                <p>Oriental Loungeの都内店舗の現在の空席状況と、過去の入店データを確認できるサイトです</p>
                <h2>現在の空席状況</h2>
                <iframe width="100%" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=1405263397&amp;format=interactive"></iframe>
                <div class="panel panel-default">
                    <div class="panel-heading">ORIENTAL LOUNGE 新宿店</div>
                    <div class="panel-body">
                        <ul>
                            <li>新宿区歌舞伎町2-23-1 風林会館5F</li>
                            <li>TEL: 03-6278-9955</li>
                            <li>Homepage: <a href="http://shinjuku.oriental-lounge.com/">http://shinjuku.oriental-lounge.com/</a></li>
                        </ul>
                       <iframe width="100%" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=223711775&amp;format=interactive"></iframe>       
                    </div>

                    <div class="panel-heading">ORIENTAL LOUNGE 渋谷店</div>
                    <div class="panel-body">
                        <ul>
                            <li>渋谷区宇田川町13-8 ちとせ会館7階</li>
                            <li>TEL: 03-6712-7430</li>
                            <li>Homepage: <a href="http://shibuya.oriental-lounge.com/">http://shibuya.oriental-lounge.com/</a></li>
                        </ul>
                         <iframe width="100%" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=1266530392&amp;format=interactive"></iframe>       
                    </div>

                    <div class="panel-heading">ORIENTAL LOUNGE 町田店</div>
                    <div class="panel-body">
                        <ul>
                            <li>町田市原町田6-7-8ティップス町田ビル4階</li>
                            <li>TEL: 042-860-6142</li>
                            <li>Homepage: <a href="http://machida.oriental-lounge.com/">http://machida.oriental-lounge.com/</a></li>
                        </ul>
                        <iframe width="100%" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=1274796640&amp;format=interactive"></iframe>
                    </div>
                </div> <!-- panel panel-default -->
            </div> <!-- col-md-offset-2 -->
        </div> <!-- row -->
    </div> <!-- container-fluid -->

  <!-- Bootstrap -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

各iframeでは、スプレッドシート上で作成した、グラフのデータを挿入しています。

<iframe width="100%" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR5UzfrOLwJ5he4CA1r8VBaFWN2QWro01ok2GP3D2p24EsVtMj6Pm1lGQb9Yjv_BQNnzjpBiQcYXb59/pubchart?oid=223711775&amp;format=interactive"></iframe>

スプレッドシート > 任意のグラフの右上のメニューをクリック > グラフを公開 をクリックします。モーダルが出るので、 埋め込む　をクリックすると、下にiframeが出てきますので、これをコピーしたものが上記のコードとなります。

doGet関数をGoogle Apps Scriptに追加する

今度は、このHTMLが読み込まれるように、Google Apps Scriptに追加します。

function doGet() {
  return HtmlService.createTemplateFromFile("相席アナライザー").evaluate();
}

たったこれだけ追加すればOKです。手を加えるとしたら、createTemplateFromFile関数の引数に、さきほど作成したHTMLファイルの名前を書いてあげるだけで完了です。

createTemplateFromFile("相席アナライザー")

Google Apps ScriptのWebアプリを公開する

これらのファイルを公開します。
メニュータブ > 公開 > Webアプリケーションとして導入　をクリックします。
新しく作る場合は、任意のバージョン名を指定します。そして、公開をクリックします。そうすると、公開URLが表示されるので、こちらにアクセスすると、Webアプリが公開されます。

Google Apps Script・Google Spreadsheetに関係するおすすめ記事

【GAS】IMPORTXML関数で取得した値を、1時間おきに定期実行で行を追加する

Google Apps Scriptでスクレイピングを定期実行して、News Picksのソーシャルデータを取得する方法をまとめてみた

スクレイピングの最強ツールはGoogle Spreadsheetで決まり！面倒な情報収集はGoogle Spreadsheetにやらせよう！

Google Apps Scriptでスクレイピングが捗る5つの理由

相席居酒屋の空席状況をリアルタイムでスプレッドシートに更新し、グラフ化することで男しかいない糞相席屋を撲滅する試み

Google Apps Scriptで、正規表現でスクレイピングする方法を方法を初心者向けにまとめてみた

 Google Apps ScriptでWebアプリを作成する

Review of My Life

2018-02-21

Google Apps ScriptでWebアプリを作る