Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

はじめに

こんにちは!株式会社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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?