見出し画像
Photo by haru_lifelog

webアプリをサクッと作る【Google Apps Script】

tyamap

やること

Google Apps Script (GAS) を使って、簡単な web アプリを作成して公開します。

手順

  1. GASプロジェクトを作成

  2. HTMLファイルを作成

  3. スクリプトを作成

  4. web アプリを公開

  5. 動作確認

事前準備

  • Googleアカウントを作成してログインする

以上

GASプロジェクトを作成

こちらの Google Apps Script ダッシュボード にアクセスして、左上の【新しいプロジェクト】を押します。

「無題のプロジェクト」となっている箇所をクリックして、プロジェクトに名前を自由につけましょう。

今回は「web app」とします。

サイドメニューのファイル欄には「コード.gs」というファイルが選択されていて、エディタにコードが表示されています。

HTMLファイルを作成

webアプリで表示するページを作っていきます。

ファイルメニュー右上の【ファイルを追加】をクリックして、【HTML】を選択します。

名前は自由につけられます。今回は「index」とします。

エディタを見ると、すでにHTMLの雛形が記述されていますね。

HTMLの内容を下記のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

7行目を追加しただけです。

HTMLが記述できたら、【プロジェクトを保存】ボタンを押して保存します。

スクリプトを作成

次に「コード.gs」を編集していきましょう。

ファイルメニューで「コード.gs」を選択し、エディタでファイルを編集します。

デフォルトで記述されている下記のスクリプトは消去してOKです。

function myFunction() {
 
}

スクリプトを下記のように記述します。

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

`index` の部分は、HTMLファイルの名前を記述します。

スクリプトが記述できたら、【プロジェクトを保存】ボタンを押して保存します。

web アプリを公開

次に、GASを公開（デプロイ）して、webアプリにアクセスできるようにします。

右上の【デプロイ】ボタンを押して【新しいデプロイ】を選択します。

モーダル左上の【種類の選択】の横にある歯車アイコンを押して「ウェブアプリ」を選択します。

説明文は後で管理しやすいように、更新内容などを記入しておきましょう。

【次のユーザーで実行】と【アクセスできるユーザー】の設定で、実行者やアクセスを設定できます。

実行者を【自分】にした場合、アクセスできるユーザーに【全員】を指定できます。webアプリを全員に公開したい場合はそのように設定します。

実行者を「ウェブアプリケーションにアクセスしているユーザー」にした場合、アクセスできるユーザーは【自分】か【Googleアカウントを持つ全員】を指定できます。【Googleアカウントを持つ全員】にした場合、webアプリにアクセスするユーザーはGoogleアカウントにログインしている必要があります。

今回は全員に公開したいので、実行者を【自分】。アクセスできるユーザーを【全員】とします。

設定できたら【デプロイ】ボタンを押します。

すると、ウェブアプリのURLが表示されます。こちらのURLにウェブアプリが公開されました。

コピーするか、リンクをクリックしてアクセスしてみましょう。

動作確認・機能追加

発行されたURLにアクセスすると、無事webページが表示されました。

アクセスできるユーザーを【全員】にしている場合、URLを知っている他の人も同じページにアクセスして、web アプリを閲覧できる状態になっています。

機能追加

HTMLを編集して、見出し文字の色を変えるデザインと、ボタンでアラートを表示する機能を追加しましょう。

`index.html` を下記のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 style="color: teal;">Hello, world!</h1>
    <button onclick="alert('Hi!')">Hello!</button>
  </body>
</html>

【プロジェクトの保存】を忘れずに。

HTMLやスクリプトを編集したら、毎回新しいデプロイを作成する必要があります。

変更のたびに新しいデプロイバージョンができていくのは煩わしいので、【デプロイをテスト】でwebアプリのテストをしましょう。

デプロイボタンを押して「デプロイをテスト」を選択すると、テスト用のURLが表示されます。

アクセスして、表示のチェックを行います。

見出しの文字が変わっていて、ボタンを押すとアラートが表示されます。

テストも問題なさそうなので、アプリをデプロイしましょう。

新しいバージョンのURLが発行されます。前回のURLはまだ残っていますが、古いバージョンのものが表示されます。

後始末

不要な webアプリGAS はダッシュボード画面で消去しておきましょう

まとめ

GASを用いて簡単にwebアプリを公開することができました。

HTMLに JavaScript や CSS を追記すれば、さらにデザインや機能を持たせたwebアプリを作成することができますね。

以上です！

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