①GAS(GoogleAppsScript)とVueを使いWebアプリ(タスク管理アプリ)を作ってみる【ブラウザ画面を表示する】
GAS(GoogleAppsScript)とVueを使いWebアプリ(タスク管理アプリ)を作ってみる
記事構成 ①ブラウザ画面を表示する←イマココ ②CRUDしてみる
完成画像↓
概要
「GASでスプレットシートを使ってデータベースみたいなことできない?」という命を受け調査。 とりあえず、「みんな大好きタスク管理アプリ」を作ってみました。 まずはGASでWebページを作ってみましょう。
その後VueとBootstrap-VueでCRUDを構築していきます。
トップページを作り表示させる
Google Apps Scriptをセッティングしよう
スタンドアロン型とコンテナバインド型があるらしいですが、今回はスプレットシートを使いたいのでコンテナバインド型でGASを使います。
まずスプレットシートを新規作成して、メニューの「拡張機能」から「Apps Script」を選択します。
今回は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チャットボット」を作ってみる「オウム返しボットを作る」
「ウェブアプリ」に設定し、アクセスできるユーザーを「全員」にします。
表示されましたか?
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>
保存してデプロイし、ブラウザで確認してみましょう。
画面に表示されたテキストが赤くなり、デベロッパーツールのコンソールに「test」と表示されていればうまく外部ファイルを読み込めています。
記事構成 ①ブラウザ画面を表示する←イマココ ②CRUDしてみる←次