Google Apps Script(GAS)

Google App ScriptでWebアプリを作る

こんにちは。エクスチュアの岩川です。

前回Google App Script(以下GAS)を使用してWebアプリケーションを作成しました

今回はそんなGASでのアプリケーションの作成方法を記述したいと思います。


①GASを開く

こちらでGASを開きます。

Googleアカウントにログインする必要がありますのでログインしてください。

②新しいプロジェクトを選択

新しいプロジェクト(画像赤枠部分)をクリックします。

③webページを作成

今回はwebアプリケーションなのでwebページを作成します。

ファイルの+ボタンをクリック(画像赤枠部分)し、HTMLを選択します。

適当な名前をつけましょう(拡張子は付くので考慮しなくても大丈夫です)

するとこのようなHTMLファイルができると思います。

④HTMLを作成

HTMLを記述します。今回はボタンを置くだけの簡単なコードにします。

<button type="button" onclick="alert('hello!')">ボタン</button>

コードを記述したらプロジェクトを保存(画像赤枠部分)します。

⑤HTMLの読み込み

GASは初期状態だと最初に作られていたコード.gsという名前のファイルが実行されています。

現在は空欄のままであり、このままではHTMLファイルにいくら記述しようとかわりません。

そのためコード.gsファイルを開き、以下のコードを記載しましょう。

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

hogehoge部分には自分でつけたhtmlファイルの名前を記載しましょう。

拡張子(.html)は含めなくても大丈夫です。

今回私はtest.htmlというファイルですのでtestと記述しました。(画像参照)

完了したら上書き保存をするのを忘れないようにしましょう。

⑦実行

さて、以上で準備が完了したのですが実行するためにはデプロイを作成する必要があります。

右上の【デプロイ】から【新しいデプロイ】を選択します。

ウィンドウ左にある歯車マークをクリックし、【ウェブアプリ】を選択します。

すると実行ユーザーとアクセス権の設定がありますが今回は両方とも自分を選択します。

もし公開したい場合はアクセスできるユーザーを任意の設定に変えましょう。

※実行ユーザーの設定に関して

実行ユーザーは基本的にアクセスできるユーザーと出来るだけ同じにしましょう。複数人がアクセスできるのに実行ユーザーが自分になっているとなりすましなどの可能性があります。

設定が終わったら右下のデプロイをクリックします。

するとURLが出てきますのでクリックしましょう。

シンプルなページですがアプリケーションができています。

ボタンを押してみると、ちゃんとウィンドウが出てきます。


HTMLやJSがある程度触れる方であればこのように簡単にアプリケーションを作成することができましした。GASは色々できるのでおすすめです。

エクスチュアでは様々な企業様の基本的な悩みから高度な悩みまで丁寧にお手伝いいたします。

是非お気軽にお問合せください。

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Google Apps Script(GAS)

    文字列置換アプリを作成しました

    こんにちは、エクスチュアの岩川です。突然ですがテキストツール…

  2. Google Apps Script(GAS)

    【Google App Script】GASを利用してslackに投稿するbotを作る

    こんにちは、エクスチュアの岩川です。業務でSlackを使用さ…

  3. Google Apps Script(GAS)

    Google App ScriptとGoogleスプレッドシートを連携させる

    こんにちは。エクスチュアの岩川です。前回はGASを使ってWe…

  4. Google Apps Script(GAS)

    GoogleスプレッドシートのデータをGASで整理する【getRange編】

    こんにちは。エクスチュアの岩川です。今までGASの基本的な操…

  5. Google Apps Script(GAS)

    GASを利用してWebスクレイピングをやってみよう

    Webスクレイピングとはスクレイピングとはデータを収集し、使…

  6. Google Apps Script(GAS)

    GoogleスプレッドシートのデータをGASで整理する【setValue・setValues編】

    こんにちは。エクスチュアの岩川です。前回のgetRangeの…

最近の記事

  1. Streamlitを使った簡単なデータアプリケーション作成ガ…
  2. 生成AI機能を活かしたデータカタログ製品「Secoda」を試…
  3. 回帰分析はかく語りき Part2 重回帰分析
  4. 第14回関西DB勉強会-Snowflake Summit参加…
  5. Open Interpreter+VScode+Docker…
  1. Data Clean Room

    セッション資料:Snowflakeで始めるData Clean …
  2. Adobe Analytics

    Adobe Analytics 原理①
  3. ブログ

    エクセル関数の基礎
  4. Tableau

    Tableauとは
  5. Adobe Analytics

    PV(ページビュー)とは-Adobe Analyticsの指標説明
PAGE TOP