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 3 years have passed since last update.

GASとNuxt.js、スプレッドシートで簡易顧客リスト検索アプリを作る(Part1)

Last updated at Posted at 2020-12-01

はじめに

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

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

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

こんな人にオススメ

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

使用した技術

  • GAS
  • Nuxt.js
  • Vuetify

全体構成

スクリーンショット 2020-12-01 19.50.25.png

開発手順

1.事前準備

STEP1.シート作成

スクリーンショット 2020-12-01 19.19.36.png

STEP2.シート準備

Google スプレッドシートで新しいシートを作成して、「ツール」タブ→「スクリプトエディタ」をクリックします。
スクリーンショット 2020-12-01 19.19.52.png

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 の発行

「公開」タブ→「ウェブ アプリケーションとして導入」をクリックします。
スクリーンショット 2020-12-01 19.27.03.png
「Project version」は「New」、
「Execute the app as」は「Me (自分のメールアドレス)」、
「Who has access to the app」は「Anyone, even anonymous」
で「Deploy」ボタンをクリックします。
スクリーンショット 2020-12-01 19.31.24.png

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

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?