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
技術同人誌をMCP Serverにしてみた
74th
1
650
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Done Done
chrislema
184
16k
Fireside Chat
paigeccino
37
3.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Producing Creativity
orderedlist
PRO
346
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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