GASでwebアプリ
お疲れ様です。アプリケーション部の水野です。
最近GAS(Google Apps Script)に触れることが多くなったこともあり試しにGASでwebアプリを作成してみました。
作成したのは旅行目的地をランダムに決めるアプリです。
個人的に旅行が趣味で仲間内でどこに行こうか議論が交わされることが稀によくあります。
そんな時にランダムに道内の市町村を抽選してくれるアプリを作成しようと軽率に思いつきましたので作成してみました。
1. htmlファイル、cssファイルの作成
まずはGoogle Apps Scriptを使用してhtmlファイル、cssファイルを作成します。
googleドライブで以下から選択して作成していきます。
ここでGASではcssファイルを作成できないのでcss.htmlとして作成し呼び出すことになります。
htmlファイルのヘッダーあたりに『<?!= include('css'); ?>』を記載しておけばいいようです。
2.スクリプトファイルの作成
次にスクリプトを作成します。拡張子「.gs」のファイルです。
GASでWebページを表示するためにはHTMLファイルから、HtmlOutputオブジェクトを生成し
doGet関数でreturnしてWebページを表示させているそうです。
単純に以下のように記載することでindexファイルを表示してくれるようです。
function doGet() {
const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
return htmlOutput;
}
3.DBを作成
スプレッドシートがDB代わりに利用できます。
このリストから抽出できるようにスクリプトを作成していきますが
以下のようにスプレッドシートのIDとシート名でシートにアクセスすることができ値を抽出できます。
let spreadsheetId = 'スプレッドシートID';
let sheetName = 'シート名';
letspreadsheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);
スクリプトファイルで作成した関数はhtmlファイルの方で呼び出すことができますので抽出した値を受け渡して表示させます。
4.デプロイ
一通りのファイルの作成が済んだらデプロイします。
右上にあるデプロイボタンを押下して出てきたウィンドウの設定を開くとウェブアプリがありますので
あとは表示レイアウト等を調整して完成させます。
5.完成
出来上がったものはこちらですがとりあえず動けばいい感で作成したのでデザインはシンプルです。
スマホでアクセスしてホーム画面にショートカットを作成しておけばいつでも使えます。
少し前はわざわざサーバーを立てる必要があったのに簡単にwebアプリが作ることができて便利になりましたね。
興味がある方は触ってみても良いかと思います。