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
アンケートWebアプリを作りました!/Creation of survey web appli...
Search
saba
April 23, 2024
Programming
0
100
アンケート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
64
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Goで作る、開発・CI環境
sin392
0
230
NPOでのDevinの活用
codeforeveryone
0
840
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
ニーリーにおけるプロダクトエンジニア
nealle
0
840
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Porting a visionOS App to Android XR
akkeylab
0
470
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Become a Pro
speakerdeck
PRO
29
5.4k
The Invisible Side of Design
smashingmag
301
51k
Side Projects
sachag
455
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing for Performance
lara
610
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
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