Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GASで始めるサーバーレス 頑張らない社内アプリケーション開発
Search
t-yng
August 31, 2019
Technology
1
290
GASで始めるサーバーレス 頑張らない社内アプリケーション開発
builderscon tokyo 2019 LT 登壇資料
https://builderscon.io/tokyo/2019
t-yng
August 31, 2019
Tweet
Share
More Decks by t-yng
See All by t-yng
ChatGPTを活用した英文添削アプリケーション個人開発.pdf
tyng
0
50
型からモックデータ生成コードを自動生成する
tyng
0
42
WebAssemblyでオセロを作ってみた
tyng
0
340
Other Decks in Technology
See All in Technology
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
100
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
170
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
180
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
260
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
570
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.4k
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
520
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Thoughts on Productivity
jonyablonski
67
4.3k
Happy Clients
brianwarren
97
6.7k
A designer walks into a library…
pauljervisheath
202
24k
Embracing the Ebb and Flow
colly
84
4.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
KATA
mclloyd
29
13k
GitHub's CSS Performance
jonrohan
1030
460k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Making Projects Easy
brettharned
115
5.9k
Transcript
GASͰ࢝ΊΔαʔόʔϨε ؤுΒͳ͍ࣾΞϓϦέʔγϣϯ։ൃ Builderscon Tokyo 2019 LT
ࣗݾհ • ༄ ྙߒʢͳ͗ ͱͻΖʣ • @TGreenmonkey (t-yng) • Hamee
גࣜձࣾ ɾϑϩϯτΤϯυ͕͖ ɾझຯͰ Flutter Λษڧத
ձࣾͰͷͱ͋ΔͰ͖͝ͱ...
͓ޓ͍ͷ͜ͱΛΔͨΊʹ ࣾ༻ͷࣾһͷϓϩϑΟʔϧ ϖʔδΛ࡞ͬͯ΄͍͠Ͱ͢ ͍͍Ͱ͢Α
͓ޓ͍ͷ͜ͱΛΔͨΊʹࣾһ ͷϓϩϑΟʔϧϖʔδΛ࡞ͬͯ ΄͍͠Ͱ͢ ͍͍Ͱ͢Α ࣾͷϓϩϑΟʔϧϖʔδΛ ։ൃ͢Δ͜ͱʹͳͬͨ
ϓϩϑΟʔϧϖʔδͷཁ݅ ɾࣾͷϓϩϑΟʔϧϖʔδ͕ཉ͍͠ ɾϓϩϑΟʔϧใࣾһ͕ࣗ༝ʹฤूՄೳ ɾमਖ਼݁ՌϦΞϧλΠϜʹө
None
࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML
ੜ ΞϓϦέʔγϣϯαʔόʔ
ͪΐͬͱͬͯʂʂ
ϓϩϑΟʔϧϖʔδΛϖʔδ ࡞Δ͚ͩͩΑͶʁ
࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϝϯόʔհϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML
ੜ ΞϓϦέʔγϣϯαʔόʔ
࠷ॳͷΠϝʔδ ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϝϯόʔհϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML
ੜ ΞϓϦέʔγϣϯαʔόʔ ͗͢ͳ͍ʁʁ
ແବʹ͔͔࣌ؒΓͦ͏ %#ͱ͔αʔόʔͷཧΓͨ͘ͳ͍
ಇ͖ͨ͘ͳ͍ʂʂ
GASΛͬͯ ؆୯ʹղܾͰ͖ΔΜ͡Όͳ͍ʁ
GASͱʁ ɾGoogle͕։ൃͨ͠εΫϦϓτϓϥοτϑΥʔϜ ɾεϓϨουγʔτͳͲͷυΩϡϝϯτͱ࿈ܞ͕Մೳ ɾdoPost, doGet ؔͰPOSTɺGETϦΫΤετ ɹΛॲཧͰ͖Δ ɾHTMLService Λར༻ͯ͠ɺHTMLฦ͢͜ͱ͕Ͱ͖Δ
=> ؆қతͳWebαʔόʔɺAPIαʔόʔͱͯ͑͠Δ
ϓϩϑΟʔϧΛฤू Ͱ͖Δը໘ ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ
ฤूը໘ΛͲ͏ʹ͔͢Δ
ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ Google Sheets
Λར༻
ૢ࡞ ߋ৽ ϓϩϑΟʔϧҰཡ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ DBΛͲ͏ʹ͔͢Δ
ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ ɾDBͱͯ͠ར༻ ɾdoPost ؔͰAPIαʔόʔͱͯ͠ಈ࡞ APIαʔόʔ
ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML ΞϓϦέʔγϣϯαʔόʔ ϓϩϑΟʔϧҰཡ ΞϓϦέʔγϣϯαʔόʔ ΛͲ͏ʹ͔͢Δ
ૢ࡞ ϓϩϑΟʔϧϖʔδ Ӿཡ ϓϩϑΟʔϧ HTML Webαʔόʔ ϓϩϑΟʔϧҰཡ ɾdoGetؔ + HTMLService
ɹͰHTMLΛฦ͢ ɾಈతͳHTMLͷੜ͕͍͠ ɾը໘ߏஙΛͲ͏͢Δ͔ʁ
ૢ࡞ ϓϩϑΟʔϧϖʔδ ʢSPAʣ Ӿཡ ੩తHTML Webαʔόʔ APIαʔόʔ ϓϩϑΟʔϧ ʢfetchͰऔಘʣ SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣͰ࣮ͯ͠ϑϩϯτͰը໘Λߏங
SPAͰ࣮͢ΔͳΒ React ͍͍ͨ
ਓͱͯ͠ͷ͕͞ʢஊͰ͢ʣ
ૢ࡞ ϓϩϑΟʔϧϖʔδ ʢSPAʣ Ӿཡ ੩తHTML Webαʔόʔ APIαʔόʔ ϓϩϑΟʔϧ ʢajaxͰऔಘʣ ɹ੩తͳHTML͔͠ฦͤͳ͍
React Ͳ͏Έ͜͏ʁ SPAʢγϯάϧϖʔδΞϓϦέʔγϣϯʣͰ࣮ͯ͠ϑϩϯτͰը໘Λߏங
ϏϧυࡁΈ js, css શ෦ೖΓͷ ੩తHTML Λੜ 1. js, css ΛϏϧυɺόϯυϧ
ͯ͠ bunlde.js Λੜ 2. bundle.js Λ jantimon/html-webpack-pluginΛͬͯ HTMLʹΠϯϥΠϯల։ ΠϯϥΠϯల։ Ϗϧυ Ϗϧυ bundle.js
webpack.common.js
ΠϯϥΠϯʹల։
GASͷσϓϩΠ google/clasp Ͱ GAS ʹ ੩తHTML ΛσϓϩΠ What is clasp?
Google͕ެࣜͰఏڙ͍ͯ͠ΔCLIͰGASϓϩδΣΫτΛཧͰ͖Δπʔϧ GASͷө͜Ε͚ͩͰྃ
ૢ࡞ ϓϩϑΟʔϧϖʔδ ʢSPAʣ Ӿཡ ϓϩϑΟʔϧ ʢajaxͰऔಘʣ ੩తHTML Webαʔόʔ ϓϩϑΟʔϧҰཡ ࠷ऴߏ
ϩʔΧϧϏϧυ HTMLΛσϓϩΠ/clasp ͬͨͶʂ ʌ(ˏʈ˜ʈˏ)ů
·ͱΊ ɾGAS + SPA + Clasp ɹͰ͓खܰʹαʔόʔϨεͳ։ൃΛ࣮ݱͰ͖Δ ɾ؆୯ͳ͚ࣾͷΞϓϦέʔγϣϯͳΒίϨͰे ʢͨͩ૾Ҏ্ʹ͍ =>
ରࡦ͢Εૣ͘ͳΔ͔ʣ
͓ΘΓ