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