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)

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

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

  2. Google Apps Script(GAS)

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

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

  3. Google Apps Script(GAS)

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

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

  4. Google Apps Script(GAS)

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

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

  5. Google Apps Script(GAS)

    Google App Scriptを特定のタイミングで自動で動かしたい

    こんにちは。エクスチュアの岩川です。さて、前回に引き続きGA…

  6. Google Apps Script(GAS)

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

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

最近の記事

  1. Snowflake の Copilot が優秀すぎる件につい…
  2. Snowflake の新しいData Clean Roomの…
  3. 【GA4/GTM】dataLayerを使ってカスタムイベント…
  4. KARTE を使ってサイト外でも接客を
  5. 【GA4/GTM】dataLayerを活用しよう
  1. Adobe Analytics

    訪問者数とは-Adobe Analyticsの指標説明
  2. IT用語集

    シェル(Shell)って何?
  3. Mouseflow

    Mouseflow新機能その2 – JavaScriptエラーを見つ…
  4. Adobe Analytics

    Adobe AEP SDKでReactNativeアプリを計測する (Andro…
  5. データサイエンス

    IQをキッカケに理解する統計学の基礎
PAGE TOP