【GAS】無料で簡単なWebサイトを作って公開してみよう！ - ポンコツエンジニアのごじゃっぺ開発日記。

この記事は GAS道場 Advent Calendar 2019 の7日目の記事です。 Google Apps Script(GAS)をこれから使おうという方向けのアドベントカレンダーになります。

今回は、GASを使ってHTMLを作成し、それをインターネットに公開してみることをやってみたいと思います。

スクリプトとHTMLを用意する
ウェブサイトとして公開
スプレッドシートの値を表示
- 実行結果
アクセスカウンターを作成してみよう
- 実行結果
さいごに

スクリプトとHTMLを用意する

さて、いつもどおりGASのエディタを開いてみましょう。

f:id:ponkotsu0605:20191206004009p:plain

上のメニューからファイル→New→HTMLファイル をクリック

※なぜか英語表示になってしまっているので、いい感じに読みながら変換してください

f:id:ponkotsu0605:20191206004148p:plain

ファイル名を入力します。ここではindexとします。

f:id:ponkotsu0605:20191206004212p:plain

すると、このようにindex.htmlが追加されたと思います。

さて、ここからスクリプトを書いていきます。 f:id:ponkotsu0605:20191206004255p:plain スクリプト側のコード.gsに以下のようなスクリプトを入力します。

function doGet(e) {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html;
}

f:id:ponkotsu0605:20191206004355p:plain index.htmlには以下のように入力します。

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

簡単なHello Worldですね。

ウェブサイトとして公開

さて、これで準備ができました。

f:id:ponkotsu0605:20191206004522p:plain 上のメニューから公開→ウェブアプリケーションとして導入をクリックします。

f:id:ponkotsu0605:20191206004729p:plain

そして、このようなポップアップが表示されると思うので、青いボタンをクリックします。

f:id:ponkotsu0605:20191206004806p:plain

その次の画面で表示されるURLをコピーしてブラウザでアクセスしてみてください。

f:id:ponkotsu0605:20191206004838p:plain

なんと、しっかりHello Worldが表示されています。すなわち、これだけで簡単にウェブサイトが表示されることになります。

スプレッドシートの値を表示

では、せっかくなので、スプレッドシートの値を表示してみましょう。

f:id:ponkotsu0605:20191206005800p:plain

このように、スプレッドシートを用意します。Hey World.と入力しています。

function doGet(e) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getData() {
  var data = SpreadsheetApp.openById('1sgRxnlKO_i-5rdoex3_Vww27fF0MH2gXgg0BYB3bEeo').getSheetByName('シート1').getRange(1,1).getValue();
  return data;
}

今回はこのようなスクリプトを作成しました。getData()でスプレッドシートの値を取得しつつ、returnでその値を返しています。実際に動かしてみたい場合は、自分自身で作成したスプレッドシートのIDを書き換える必要があります。

スプレッドシートの値を操作するには、記事を書きましたので御覧ください。

www.pnkts.net

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <?= getData(); ?>
  </body>
</html>

index.htmlは、先程までHello Worldが書いてあった場所に、謎のタグとgetData()が書かれています。これは、getData()の計算結果を出力するというものです。

実行結果

さて、上の手順と同様にウェブアプリケーションとして公開して実際にみてみましょう。

f:id:ponkotsu0605:20191206010123p:plain

スプレッドシートに入力したものが表示されますね。スプレッドシートの値を変更してもその値が表示されるはずなので、実際に変更しながらリロードしてみてください。

アクセスカウンターを作成してみよう

スプレッドシートの値を取得できるということは、変更もできるはずです。ということで、先程のスクリプトを以下のように変更してみましょう。

function doGet(e) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getData() {
  var data = SpreadsheetApp.openById('1sgRxnlKO_i-5rdoex3_Vww27fF0MH2gXgg0BYB4bEeo').getSheetByName('シート1').getRange(1,1).getValue();
  SpreadsheetApp.openById('1sgRxnlKO_i-5rdoex3_Vww27fF0MH2gXgg0BYB4bEeo').getSheetByName('シート1').getRange(1,1).setValue(data + 1)
  return data;
}

dataに1を加えたものをセルに入力しています。すなわち、数値がインクリメントされるということです。

また、スプレッドシート側のセルの値は0などの数値をいれておきましょう。

実行結果

さて、もう一度ウェブアプリケーションとして導入してみましょう。

f:id:ponkotsu0605:20191206010533p:plain

2回目以降の公開は、バージョンの項目をNewにして更新を押しましょう。 f:id:ponkotsu0605:20191206010658p:plain すると、アクセスするたび数値が増えるサイトが表示されたと思います。これで簡単にDBのようにスプレッドシートを扱いながらアクセスカウンターを設置することができました。