Google Apps Script (以下gas) とは

詳しくはこちらの記事に記載していますが、簡単に説明するとGoogleサービスの自動化スクリプトをAPIなどを使用せずに開発できる、めちゃんこ便利な言語です。
一応、gasって何？って方は基礎や基礎メソッドの記事もありますので是非！

ファイルの作り方

では早速、webアプリを作成していきます。
gasのページを開き、ファイルの「＋」の「HTML」を押し、新規HTMLファイルを作成します。

ためしにデプロイしてみる

作成されたHTMLを、一度デプロイ (公開) してみましょう！
HTMLファイルのコードをこのように変更してください。
(すでに自動的に書かれているコードは消して、貼り付けちゃってください！)

無題.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>test deploy</h1>
  </body>
</html>

操作パネルの「保存」をクリックして、今のコードを保存します。

次に、コード.gsを開き、このコードを追加します。

コード.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('無題');
  return template.evaluate();
}

そうしたら、画面右上にある青い「デブロイ」ボタンをクリックし、「新しいデブロイ」を選択します。
すると、デブロイタイプを選択してくださいと表示されるので、「歯車マーク」から「ウェブアプリ」を選択します。

そうしたら自分の好きなようにページの設定をします。

説明欄にはそのアプリの説明でも入れておきましょう。
ウェブアプリ欄は自分のアカウントのメールアドレスを選択しておきます。
アクセスできるユーザーは自分のみが見れるようにするなら自分のみ、リンクを知っているユーザー全てが見れるようにするなら全員を選択します。

設定が終わったら、「デプロイ」をクリックします。
少しまって、デプロイが完了したらそのwebアプリのリンクを取得できます。
リンクにアクセスして、test deployと表示されていたら大成功です！

更新の方法

webアプリを試しにデプロイしてみましたが、更新するにはどうしたらいいでしょうか？
先ほどのデプロイと同様に、　「デプロイ」をクリックし、今度は「デプロイを管理」を選択します。
するとこの画面が出てくるので、「編集」をクリックします。

バージョンの中の、「新しいバージョン」を選択し、「デプロイ」をクリックすると、先ほどと同じようにデプロイすることができます！

Webアプリにgasコードを埋め込む

htmlに、gasのコードを埋め込んで、処理をおこなうことができます。

無題.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <h1>Google Apps Script HTML サービスの例</h1>
  
  <p>サーバーサイドの値：<strong><?= message ?></strong></p>

  <button onclick="google.script.run.withSuccessHandler(displayResult).getServerMessage()">実行</button>
  <div id="output"></div>
  
  <script>
    function displayResult(result) {
      document.getElementById('output').innerText = result;
    }
  </script>
</body>
</html>

コード.gs

function doGet() {
  var template = HtmlService.createTemplateFromFile('無題');
  template.message = "Hello from server!";
  return template.evaluate();
}

function getServerMessage() {
  return "This message is from the server!";
}

<? ?>の中にコードを書くと、forのように、htmlに反映しない処理のコードを記述することができます。
<?= ?>の中にコードを書くと、記述したコードを実行した結果をhtmlに反映します。
google.script.run.withSuccessHandler(displayResult).関数()をscript内で記述すると、gasのコードをhtml内で呼び出すことができます。

また、これはjavascriptの話になりますが
関数を実行した際に、返り値として値をしていするときはreturnを使用します。

終わりに

今回、GASを学習しながらQiitaの書き方を学びました(-_-;)
なので、みにくいところがあるかもしれませんがご了承ください💦

今後もいろんな記事を投稿するので、よろしくです！

Google Apps Script (GAS) の使い方 【Webアプリ編】