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
OpenAI APIを使ったGlideでのWebアプリづくり
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
なんや
May 10, 2023
Programming
1k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
OpenAI APIを使ったGlideでのWebアプリづくり
なんや
May 10, 2023
More Decks by なんや
See All by なんや
ノーコードでのWebアプリの作り方
nanya3737
0
400
Other Decks in Programming
See All in Programming
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
5
1.8k
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
yasei_no_otoko
0
120
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
2
440
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
170
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
wat
0
500
Go 1.27 における memory allocation の高速化
andpad
0
330
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
270
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
rick_ds
0
720
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
7.8k
Hono + Inertia + React で LP を構築した話
oukayuka
2
170
My Marp Sample
sinoue0108
0
120
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
170
Featured
See All Featured
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
670
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
The Curse of the Amulet
leimatthew05
2
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
30 Presentation Tips
portentint
PRO
1
380
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
ラッコキーワード サービス紹介資料
rakko
1
4.6M
Being A Developer After 40
akosma
91
590k
WENDY [Excerpt]
tessaabrams
11
39k
Optimising Largest Contentful Paint
csswizardry
37
3.9k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
670
Transcript
OpenAI APIを使ったGlideでのWebアプリづくり @nanya3737 2023.5.11
本日の内容 2 ・自己紹介 ・ChatGPTハッカソンへの参加 #Protopedia ・ノーコードツールGlideを使ったWebアプリ開発 ・まとめ
自己紹介 3 名前: なんや @nanya3737 業務: データ分析業務 - 機械学習による異常検知 - IoTデータを活用した新サービス検討 など
普段のChatGPTの活用: - データ分析でのPythonコード出力 - Kaggle での可視化/モデリング etc. 動機: 業務ではデータとにらめっこしているが、アプリを作りたい。 フロントエンドはガッツリではなく、簡単に使えるノーコードで良い。
4 https://mashupawards.connpass.com/event/278641/ 一週間で開発するハッカソン
5 https://protopedia.net/
6 (有名人) っぽい回答をしてくれるジェネレーター https://poiai.glide.page っぽいAI GENERATOR
ノーコードツールでの開発 7 ・プログラミング不要でWebアプリ開発が可能 ・Google Spread Sheet と連携して開発 (読み書き) ・OpenAI APIのコネクタも準備されている
※ただしちょっと注意事項あり っぽいAI GENERATOR
GlideでのOpenAIのコネクタ 8 ・GLIDEではアクションとして、 ボタンを押すと動作する内容を設定できる。 ・OpenAI のAPIコネクタもbeta版で 用意されており、プロンプト (質問文)を APIで簡単に投げることが可能 ※ただし、現状古いモデルの
text-davinci-003 しか使えない。gpt-3.5-turbo も今後使える ようになるはず。 っぽいAI GENERATOR
構成概要 9 回答精度の関係上、gpt-3.5 を使いたかったので、今回はGASを間に挟んで作成。 Google Spread Sheet Google Apps Script
OpenAI API UI データ 問い合わせ API っぽいAI GENERATOR (Google Apps Script)
やってみた感想 10 ・今回はギャグアプリだが、テーマを変えれば、 利用者間で情報を共有しながら、ちょっとした Webアプリが作れそう (料理レシピ問い合わせアプリ、応援してほしい言葉を返すアプリ、 etc.) ・バックエンド中心の方は、ノーコードツールを使えば、 UI画面を簡単に作れたりするのは便利。 ・プロンプトエンジニアリングとして、
どのような質問文にすると狙った回答を得られるのか、 API問い合わせの工夫は多少必要。 っぽいAI GENERATOR
まとめ 11 ・Protopedia に面白いプロトタイプが掲載されている ・ノーコードツールGlideでUIを簡単に作れる ・GlideにはOpenAIのコネクタあり ・精度が高いモデルを利用したい場合は、 GASなどの別手段を考えても良い https://protopedia.net/prototype/3800 っぽいAI
GENERATOR
Fin. 12