はじめに

こんにちは！株式会社Re:Buildの鈴木です！
弊社、株式会社Re:Buildは現在、沖縄拠点で9人のメンバーで活動してます！
今回は個人開発した内容を書いていきます！

開発するアプリのざっくり仕様

スプレッドシートの顧客リストと連携して、Webアプリの画面で簡易的に検索できるアプリ。
スプレッドシートの情報を直接は見れないようにしたい。
検索条件は複数持ちたい。

こんな人にオススメ

データベースを使わずに既存の使用しているスプレッドシートを使いたい。
現状のスプレッドシートを更新する運用フローは変更したくない。

使用した技術

GAS
Nuxt.js
Vuetify

全体構成

開発手順

1.事前準備

STEP1.シート作成

STEP2.シート準備

Google スプレッドシートで新しいシートを作成して、「ツール」タブ→「スクリプトエディタ」をクリックします。

STEP3.GASのコードを準備

function doGet(e) {
  const params = e.parameter

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('会社');
  sheetData = sheet.getDataRange().getValues();

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify({"data": sheetData }));

  return output;
}

STEP4.API URL の発行

「公開」タブ→「ウェブアプリケーションとして導入」をクリックします。

「Project version」は「New」、
「Execute the app as」は「Me (自分のメールアドレス)」、
「Who has access to the app」は「Anyone, even anonymous」
で「Deploy」ボタンをクリックします。

STEP5. authTokenの設定(任意)

このURLは誰でもアクセスができてしまうので、authToken を設定することもできます。

※この設定は任意です
「ファイル」タブ→「プロジェクトのプロパティ」→「スクリプトのプロパティ」を開きます。
authToken という行を追加して、任意の値を設定します。

最後に

次回はNuxt.js側の実装の文章を書いていきます！

あと、少し告知ですが、弊社では沖縄でRe:Build Boot Campという、エンジニアとして即戦力となる人材の育成を目的としたスクールも運営しております。
弊社で実際に働くエンジニアや関わりの深いエンジニアが講師やPMとなって個人開発やチーム開発を行っていただく内容です。

受講終了後には、複数のプログラミングスクールによる合同コンテスト「editch(エディッチ)」にもご参加いただけます。
各プログラミングスクール卒業生が作成した成果物を発表し、エンジニア出身経営者やCTOの方々が、ビジネスとエンジニアの両方の視点で審査。「実用性」、「技術力」、「アイデア」の評価ポイントにより、総合的に作品を評価します。

参考にした記事

【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】
https://qiita.com/matsu7089/items/6ea7931e97ae703f6607