Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アンケートWebアプリを作りました!/Creation of survey web appli...
Search
saba
April 23, 2024
Programming
0
220
アンケートWebアプリを作りました!/Creation of survey web application
saba
April 23, 2024
Tweet
Share
More Decks by saba
See All by saba
部の基幹システムを開発しています/Developing the Department's mission-critical systems
sabana
0
69
Other Decks in Programming
See All in Programming
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
640
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
1k
Developing static sites with Ruby
okuramasafumi
0
270
AIコーディングエージェント(NotebookLM)
kondai24
0
180
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
itsmedreamwalker
1
100
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
38
25k
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
5.5k
TestingOsaka6_Ozono
o3
0
140
Go コードベースの構成と AI コンテキスト定義
andpad
0
120
React Native New Architecture 移行実践報告
taminif
1
150
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
230
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
120
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Speed Design
sergeychernyshev
33
1.4k
A Tale of Four Properties
chriscoyier
162
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Context Engineering - Making Every Token Count
addyosmani
9
500
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
The Pragmatic Product Professional
lauravandoore
37
7.1k
Mobile First: as difficult as doing things right
swwweet
225
10k
Designing Experiences People Love
moore
143
24k
Transcript
アンケートWebアプリを 作りました! 〜実装と今後の展望〜 さば
⽬次 ‧⾃⼰紹介 ‧制作の経緯 ‧具体的な実装 ‧苦労したところ/まだ出来ていないこと ‧今後やること
⾃⼰紹介 ‧「さば」と申します! ‧東京電機⼤学 システムデザイン⼯学部 情報システム⼯学科 = 情報学部 4年 ‧23年度 ソフトウェア研究部
部⻑ 23/24年度 Webアプリ班 班⻑ ‧趣味:Webアプリの個⼈開発とセキュリティ
制作の経緯
イベントでカジュアルなアンケートを取りたい ‧例えば学園祭の来場者に「どこから来ましたか?」 ‧試⾷の場で「AとBどちらが好きですか?」 ‧展⽰会で「この製品に欲しい機能はどれですか?」
じゃあ作ろう!
欲しい「カジュアルさ」とは? ‧アンケートを作る側 -簡単にアンケートを作れる ‧アンケートを受ける側 -ササッと回答できる
絶対に欲しい機能 ‧アンケートを作る側 -質問⽂と選択肢を記⼊してアンケートを作る -作ったアンケートをQRコードでシェアする -アンケートの結果を集計してグラフ表⽰(重要) -アカウントは不要(重要) ‧アンケートを受ける側 -QRコードでシェアされたアンケートに回答する
逆に犠牲にする機能 ‧1つのアンケートに⾊々な質問項⽬を載せられる⾃由度 -Googleフォームの様に万能ではない ‧⾃由記述欄 -回答は選択肢のみ
Googleフォーム等と何が違うのか ‧GoogleフォームやMicrosoft Formsとの違い -集計結果は回答者に表⽰されない -仕様としての共有QRコード⽣成機能はない ‧LINEの投票機能‧Discord/Slackの投票Botとの違い -よりオープンで不特定多数の⼈が回答する想定 -集計結果が表⽰できるという意味でやりたいことに近い ‧⼀番の違い -アカウントが要らない!!
具体的な実装
機能をまとめると ‧⼀瞬で作成できて、⼀瞬で共有できて、⼀瞬で結果表⽰できるアンケートWebアプリ ‧作成 -アカウントは不要、メールアドレスだけ -メールアドレス宛に集計結果と共有QRが表⽰されるページリンクが送られる ‧共有 -⾃動的にQRコードが⽣成されて、モニターに表⽰しておけば読み取って回答できる ‧結果表⽰ -回答がリアルタイムに反映される視覚的なグラフ表⽰ -共有QRも⼀緒に表⽰
技術的な実現⽅法 ‧バックエンド(+フロントエンド) -Django(PythonのWebアプリフレームワーク) ‧メールサーバー -Postfix ‧Webサーバ -Nginx ‧WSGI -Gunicorn ‧デプロイする場所
-VPS
全体的なフロー フロントエンド バックエンド HTML CSS JavaScript ユーザー
まずはご覧ください
live-poll.net(プロトタイプです!)
live-poll.net(プロトタイプです!)
live-poll.net(プロトタイプです!)
live-poll.net(プロトタイプです!)
live-poll.net(プロトタイプです!)
live-poll.net(プロトタイプです!)
苦労したこと まだ出来ていないこと
苦労したこと ‧デプロイ部分で⼤苦戦(1週間以上費やす) -当初WSGIとしてDjango公式が推奨しているuWSGI(導⼊経験あり) を使おうとしたが、なんでか分からないけど動かなかった=知識不⾜ -なのでGunicornに鞍替え -正しい設定をしたはずなのにNginxが起動に失敗 -なんとOS再起動で復活 ‧ドキュメントには載っていないおま環トラブルが多発
まだできていないこと ‧凝ったUIにしたい ‧レスポンシブ(スマホ)対応していない ‧Webアプリに必要な利⽤規約やプライバシーポリシー‧問い合わせフォームなどなどがない ‧論理設計をブラッシュアップする -どこまでをアンケート作成者だけが⾒られるようにするか、などなど ‧アンケートのグラフ軸に⼩数点が付いている ‧アンケート結果の反映を⾮同期処理にしたい ‧本当にセキュリティが⼤丈夫なのかの検証(セルフペネトレーションテスト) ‧他多数‧‧‧
今後やること
まずはUI ‧良さげなUIだけでも先に完成してたら開発のテンションが上がりません? ‧ということで、Reactでフロントエンドの制作中です ‧今まで⾏き当たりばったりでUIを作っていたが、今回初めてFigmaでデザイン を作ってからコーディングすることを学ぶ -デザイン通りにコードを書いていくので、⽣産性が段違い!
Figma
React
ということで鋭意制作中です!
ご清聴ありがとうございました さば @pin__saba__ Webサイト https://sbskn.com