GAS(GoogleAppsScript)とVueを使いWebアプリ(タスク管理アプリ)を作ってみる

記事構成 ①ブラウザ画面を表示する←イマココ ②CRUDしてみる

完成画像↓ 1641579913269.jpeg

概要

「GASでスプレットシートを使ってデータベースみたいなことできない?」という命を受け調査。 とりあえず、「みんな大好きタスク管理アプリ」を作ってみました。 まずはGASでWebページを作ってみましょう。

その後VueとBootstrap-VueでCRUDを構築していきます。


トップページを作り表示させる

Google Apps Scriptをセッティングしよう

スタンドアロン型とコンテナバインド型があるらしいですが、今回はスプレットシートを使いたいのでコンテナバインド型でGASを使います。

まずスプレットシートを新規作成して、メニューの「拡張機能」から「Apps Script」を選択します。

gNVXoCYEvfRLzznXBY7FzJZY9jbK9DczT8otMS5O.png

c3hdM1kTjYQGzqdjWfGd8xAGmdSJuR6rGqXDXjXw.jpg

今回はGASをバックエンドサーバーとして使うので、ファイル名を「server.gs」にしました。


// server.gs
function doGet() {
  var template = 'index';
  const htmlOutput = HtmlService.createTemplateFromFile(template).evaluate();
  htmlOutput.setTitle('タスク管理アプリ【GAS】');
  return htmlOutput;
}

HTMLを表示するためのファイルを作成します。 ファイルタイプ「HTML」で作成します。 ファイル名は「index.html」としました。

// index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

一度デプロイして画面を確認します。

デプロイの方法は以前の記事でも解説しました。 中盤の「GASのデプロイ」を見てください。 ①GAS(GoogleAppsScript)とCOTOHA APIを使い「会話するLINEチャットボット」を作ってみる「オウム返しボットを作る」

「ウェブアプリ」に設定し、アクセスできるユーザーを「全員」にします。

1641574615162.jpeg

1641575414772.jpeg

表示されましたか?

CSSとJavaScriptを外部ファイルとして作成しよう

まずserver.gsに「include関数」を追加します。


// server.gs
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function doGet() {
  var template = 'index';
  const htmlOutput = HtmlService.createTemplateFromFile(template).evaluate();
  htmlOutput.setTitle('タスク管理アプリ【GAS】');
  return htmlOutput;
}

次にcss.htmlとjs.htmlを作成します。

// css.html
<style>
.test {
  color: tomato;
}
</style>
//js.html
<script>
  console.log('test')
</script>

そして、「index.html」で「include関数」を使いcss.htmlとjs.htmlを読み込みます。

//index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('css'); ?>
  </head>
  <body>
    <div class="test">Hello World!</div>
    <?!= include('js'); ?>
  </body>
</html>

保存してデプロイし、ブラウザで確認してみましょう。

1641577337213.jpeg

1641576328869.jpeg

画面に表示されたテキストが赤くなり、デベロッパーツールのコンソールに「test」と表示されていればうまく外部ファイルを読み込めています。

記事構成 ①ブラウザ画面を表示する←イマココ ②CRUDしてみる←次