見出し画像

GASでサーバレスWebアプリ作れた

Yuya Takahashi

今回は初めて？のエンジニアっぽい投稿です。

れもんらいふデザイン塾に通っておりますが、
塾生同士のコミュニケーションを強めたいと思い、名簿サイトを作れないかなと考えました。

単に見るだけでなく、ニックネームやSNSアカウントを本人たちに書かせて、情報集約もできちゃう、そんなサイトができないかなと。

見るだけだったらHTMLでパパっとって感じですが、入力があるとなるとデータベースがいる、これはめんどくさいかも・・。

じゃあ、GoogleSpreedSheatを公開して書いてもらえばいいかなぁとボンヤリ。GoogleFormとかの入力使ってGSSに書き込んで、、いや、顔写真とかGoogleFormに無理でしょ。大体誰に対して書き込むのかとかアップデートとか無理じゃね？

なんて考えながら調べていると、なんとGoogleSpreedSheatをベースにしてWebアプリケーションが作れるだと！

すげえよGoogle先生・・。サーバレス開発とかもうAWSにお金落とさないといけないのかなぁとか思ってたよおじさん。

ということで作ってみました。

ツールの中にスクリプトエディタなるものがあります。
こいつを開くと・・

こんなIDEっぽいコーディングアプリが開きます。
ESSから飛ばなくてもこいつ単体でも使えるみたいですね。

サーバーサイドとクライアントサイドはJavaScriptとなっておりますので、特殊な言語は不要！ってのがいいですね。

そして、こいつの最大の売りはこれ。

ウェブアプリケーションとして導入

この画面にはまだ作ってないですけど、htmlファイルを作れるので作った後、導入ってやるとURLが作られます！

それを世に公開したらもうWebアプリ完成ですよ。

無料だし超クールです。

まあこれだけだったら、世のホームページ作成ツールとか最近のはコードレス開発とかもできてすごいんですけど、その辺ってデータベース構築とかはできない。

もちろん、Google Apps Script（GAS）ならGSSと連動できますよー！

私が作ったデータベースはこちら。

ここから読み込んでHTMLに描画、HTMLからINPUTしたものを保存させます。

GAS画面はこんな感じ。バックアップファイルとかあって散らかってますが、

コード.gs … サーバーサイドJS
index.html … メインHTML
js.html … クライアントサイドJS
css.html … CSS

スクリプトファイルも作れるっぽかったんですが、私が最初に参考にしたサイトが全部HTMLで作ってたのでそれに沿っちゃってます。
js.htmlもcss.htmlもindex.htmlから呼び出すようにしてます。

んで、GSSへの接続ですが基本的にはサーバサイドで行います。

function getSpreadsheetValues(){
  return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
}

こんな感じでAPIたたけばとってこれます。
getActiveSpreadsheetってやるとこのGASにひもづくGSSを呼び出してくれます。簡単！

んで、呼び出した値をHTMLにどう読み込ませるかですが、今回は

Vue.js

を使ってみました。仕事ではjqueryでしたが、jqueryってホント使いづらくて・・。いっぱいハマったし。

google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();

function initializeVue(values){
  values.shift();  
  new Vue({
  el: '#app',
  data: {
      save: function (list) {
       google.script.run.withSuccessHandler().getSpreadsheetSetValue(list);
       alert("保存されました。");
      },
      lists: values,
      }
　});

こんな感じでクライアントサイドのjsからサーバサイドのjsを実行できます。
取得したdataは#appのdataってところに格納しとくとhtml上で変数として扱えるようになります。（jqueryでいうthisっぽく使える）

htmlではこんな感じでlistsっていう変数を呼び出せる。

<div v-for="list in lists">
　<input name="kana" type="text" v-model="list[2]" class="uk-input" />

html上でfor文を作って、data一個ずつにinputの値に突っ込める。
これは楽だよ、ホント・・。

しかもこのv-modelっていうのが優秀で、呼び出したときのvalだけじゃなくて、inputした結果もlistに突っ込んどいてくれます。

なので保存するときもこのlistの値をそのままサーバーサイドに運んで、

sheet.getDataRange().getCell(idx, 2).setValue(list[1]);

って感じでセットしたらOK。

実際に作ったサイトがこんな感じです。

このヘッダーにある「このアプリケーションはgoogleではなく・・」的なやつはどうやら消せないっぽい。GASのデメリットでいえばここですね。
（内部的なサイトなので今回は気にしてません）

わりとスマホ用にUIを作ったのでPCではそれほど適正に作ってませんが、
まあそれでも使えなくはないかと。

（PCだとこんな感じ）

CSSコンポーネントはUIKitっていうものを利用しました。
この辺の見た目系開発はホント不慣れ・・。htmlのタグの切り方はぐちゃぐちゃだし、思い通りの見た目にならないしで苦戦・・。

Webデザイナーさんホントすごい。
デザイン塾なのにデザインができなくて恥ずかしい感じです。。

みなさんから登録も結構してもらってちょいちょい活用できています。

ただの勉強じゃなくて目的を持った成果物は実は初めて。
これからもちょこちょこバージョンアップしていこうかと思います！



この記事が気に入ったらサポートをしてみませんか？