top of page
検索

GAS:Webサイトの作成

更新日:10月14日

こんにちは!

WebサイトってHTMLガシガシ書いて、立ち上げて、誰もが参照できるようにするって大変ーーって思いますよね。

実はGASを使ってWebサイトを立ち上げることができるんです!


今回は、GASを使って簡単にWebアプリを作成する手順と具体的なコード例を紹介します。初心者でも理解しやすいようにステップバイステップで説明します。


■ 動作環境

 

OS:Windows 10 Home(64ビット)

Chrome:122.0.6261.128(64ビット)



GASで構築するメリットは?

 

GASを使うと、GoogleドライブやスプレッドシートといったGoogleサービスとシームレスに連携しながら、Webアプリの公開やフォームの設置ができます。無料で使え、Googleの信頼性あるインフラを活用できる点も大きな魅力です。



簡単なWebアプリを作成する手順

 

(1)GASプロジェクトを新規作成


(2)GASでHTMLページを作成するコードの入力

早速スクリプトを見ていきましょう。

<コードの解説>
  • doGet():関数はWebリクエストを受け取ったときに実行されます。

  • HtmlService.createHtmlOutput():WebアプリのHTMLを出力する関数です。ここでは簡単な「こんにちは」というメッセージを表示しています。


(3)Webアプリとして公開

  1. GASエディタ上で、[ヘッダー]メニュー内の「デプロイ」-「新しいデプロイ」をクリックします。

  2. 「新しいデプロイ」ダイアログ内の左カラム上部にある「歯車アイコン」-「ウェブアプリ」をクリックします。

  3. 改めての「新しいデプロイ」ダイアログで必要に応じて値を入力していきます。

    1. 説明:とりあえず適当に、入力しなくても前に進められます。

    2. 次のユーザーとして実行:選択肢は次のいずれかです。

      1. 自分:該当のWebアプリに誰がアクセスして処理実行したとしても、自分として実されたことになります。そのため、Webアプリの利用者は参照しているファイル・フォルダへのアクセス権限を付与されている必要がなく、データの内容や処理のスクリプトを公開する必要がありません。ただし、全てがデプロイしたアカウントとして実行されてしまうため、誰が行った処理なのかをあとから確認することは困難になります。

      2. ウェブアプリケーションにアクセスしているユーザー:該当のWebアプリの処理はすべてアクセスしているユーザーとして実行されます。そのため、利用者ユーザーにスクリプトが参照したり編集したりするすべてのファイル・フォルダへのアクセス権限を適切に設定する必要があります。

    3. アクセスできるユーザー:言葉どおり、選択肢は「自分のみ」、「Googleアカウントを持つ全員」、「全員」のいずれかを選択します。 

  4. 一通り入力したら「デプロイ」をクリックします。

「新しいデプロイ」ダイアログのイメージ

(4)Webアプリを起動

「新しいデプロイ」ダイアログの最後の画面が表示されます。

[ウェブアプリ/URL]に表示されたURLをクリックするとWebアプリを起動することができます。

「新しいデプロイ」ダイアログ:設定完了のイメージ

(5)実行結果

URLにアクセスすると無事に「こんにちは!これはGoogle Apps Scriptで作成したWebページです。」というシンプルなページが表示されます。

Webアプリの実行結果イメージ


応用編:Googleスプレッドシートと連携

 

さらに一歩進んで、GoogleスプレッドシートのデータをWebアプリに表示する例を紹介します。


(1)スプレッドシートに情報を入力

スプレッドシートの入力イメージ

(2)GASでスプレッドシートを参照し、HTMLページを作成するコードの入力

早速スクリプトを見ていきましょう。

<コードの解説>
  • SpreadsheetApp.openById('スプレッドシートID') :指定のスプレッドシートにアクセスします。(スプレッドシートIDの箇所には実際のIDを記入してください)

  • getRange() :シートの範囲内のデータを取得し、HTMLテーブルに変換して表示します。


(5)実行結果

無事にスプレッドシートに入力されていた情報と同等のものが表示されます。

スプレッドシート連携Webアプリの実行結果イメージ


■ まとめ

 

Google Apps Scriptを使えば、簡単にWebサイトを作成し、さらにGoogleスプレッドシートなどと連携して動的なコンテンツを表示することができます。今回紹介した基本的な手順から応用までをマスターすれば、より複雑なWebアプリの作成も可能です。

閲覧数:16回0件のコメント

Коментарі


bottom of page