2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ランニングコスト0の書籍管理webアプリ! GASってどんなもの?

Last updated at Posted at 2022-03-20

ランニングコスト0の書籍管理webアプリを開発! GASってどんなもの?

※こちらの記事の内容は2022/3/19に執筆したものです。

初めに

この記事は、以下の元記事で紹介しているアプリを構築する際に使ったGASの機能について紹介している記事です。元記事からご覧ください。

GASってなに?

GASとは google application script の略で、主にgoogle drive上のリソース(各種ファイル)にアクセスし操作することができます。GCP(google cloud platform)と連携することもできるよう(というかこちらが本来の使い方?)ですが、今回はランニングコスト0で行くのでgoogle drive上のリソースのアクセスの機能のみ使っていきます!

どうやって始めるの?

いくつかやり方はありますが、今回はスプレッドシートに紐づけた形でGASプロジェクトを作成していきます!
やり方は簡単で、

  1. 適当にスプレッドシートを作成して開きます。
    image.png

  2. 上の方にあるタブから拡張機能を選択し、その中の Apps Script を選択します。
    image.png

  3. 別タブでこんなのが開いてプロジェクトの作成完了です。
    image.png

何ができるの?

できることはいくつかあるのですが、今回のアプリではwebAPIとして実行できるように作っていきます。
なおwebAPIのように使えるように作りますが、gasの機能上の名前は ウェブアプリ です。ウェブアプリとは別に実行可能APIというものもありますが、それはGCPにつなぐ必要がある(有料な)ので今回は不採用です。

なおwebアプリとしてデプロイする場合、(少なくとも無料の範囲では)ホスト名もパスも自動生成で選ぶことはできず、メソッドはGETとPOSTの2種類のみです。

やってみよう!

基本構文はjsなので、webページを作った経験がある人であれば、gas用のメソッドやオブジェクトを調べる程度で始められるので学習コストは低めな印象です。

スプレッドシートにアクセスしてみよう!

  1. スプレッドシートのIDを確認します。
    スプレッドシートのIDとは、開くときのリンクのパスワードみたいなやつ(下の画像の下線部)のことです。
    これはスプレッドシートごとに違うので、操作したいスプレッドシートのIDを確認してgasに変数として持たせておきましょう。なお画像のurlは私が記事執筆用に作ったリンクなので外部に公開していませんし、中に大したデータはありません。
    image.png
    image.png

  2. シートを名前で選択して準備完了!
    ここでは「てすと」という名前のシートにアクセスしてみます。
    image.png

スプレッドシートはこんな感じで、左上から数えて縦に1,横に1の場所のセルに「hello」と入れてあります。
image.png

  1. シートから読み書きしてみよう!
    A1(左上から数えて縦に1,横に1の場所)のセルから文字を読み込んで、B1(左上から数えて縦に1,横に2の場所)のセルに文字をしまってみましょう。コードはこんな感じです。
    image.png
    実行後のシートと表示されるログはこんな感じになります。
    image.png
    image.png

webAPIを公開してみよう!

  1. doGetメソッドとdoPostメソッドを用意します。
    ここでリクエストを受け付けます。
    image.png

  2. パラメータを受け取れるようにします。
    リクエストパラメータとbodyで受け取り方が違うので注意です。
    image.png

  3. レスポンスを返してみます。
    image.png

  4. デプロイしてみます
    右上のデプロイ>新しいデプロイを押すとこんな感じになります。
    image.png
    ポータルの左上の種類の選択の右の歯車からウェブアプリを選択するとこうなります。
    ひとまずはアクセスできるユーザーを全員に設定して、デプロイボタンを押したらデプロイ完了です。
    image.png
    デプロイが完了するとアクセス用のURLが表示されます。

  5. アクセスして動確してみます。
    postman(メソッドの種類やパラメータやヘッダ等を指定してリクエストを送れるGUIツール)を利用してGETとPOSTの2種類のリクエストを送ってみます。
    まずデプロイ時に表示されたurlにGETでリクエストを送ったら下のようなレスポンスが返ってきました。
    image.png
    続いてデプロイ時に表示されたurlにPOSTでbodyに適当な値を設定してリクエストを送ったら下のようなレスポンスが返ってきました。
    image.png

以上GASについての簡単なあれこれでした!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?