アンケートWebアプリを作りました！/Creation of survey web application

Transcript

1. アンケートWebアプリを 作りました！ 〜実装と今後の展望〜 さば
2. ⽬次 ‧⾃⼰紹介 ‧制作の経緯 ‧具体的な実装 ‧苦労したところ/まだ出来ていないこと ‧今後やること
3. ⾃⼰紹介 ‧「さば」と申します！ ‧東京電機⼤学 システムデザイン⼯学部  情報システム⼯学科 = 情報学部 4年 ‧23年度 ソフトウェア研究部 部⻑  23/24年度 Webアプリ班 班⻑ ‧趣味：Webアプリの個⼈開発とセキュリティ
4. 制作の経緯
5. イベントでカジュアルなアンケートを取りたい ‧例えば学園祭の来場者に「どこから来ましたか？」 ‧試⾷の場で「AとBどちらが好きですか？」 ‧展⽰会で「この製品に欲しい機能はどれですか？」
6. じゃあ作ろう！
7. 欲しい「カジュアルさ」とは？ ‧アンケートを作る側 -簡単にアンケートを作れる ‧アンケートを受ける側 -ササッと回答できる
8. 絶対に欲しい機能 ‧アンケートを作る側 -質問⽂と選択肢を記⼊してアンケートを作る -作ったアンケートをQRコードでシェアする -アンケートの結果を集計してグラフ表⽰（重要） -アカウントは不要（重要） ‧アンケートを受ける側 -QRコードでシェアされたアンケートに回答する
9. 逆に犠牲にする機能 ‧１つのアンケートに⾊々な質問項⽬を載せられる⾃由度 -Googleフォームの様に万能ではない ‧⾃由記述欄 -回答は選択肢のみ
10. Googleフォーム等と何が違うのか ‧GoogleフォームやMicrosoft Formsとの違い -集計結果は回答者に表⽰されない -仕様としての共有QRコード⽣成機能はない ‧LINEの投票機能‧Discord/Slackの投票Botとの違い -よりオープンで不特定多数の⼈が回答する想定 -集計結果が表⽰できるという意味でやりたいことに近い ‧⼀番の違い -アカウントが要らない！！
11. 具体的な実装
12. 機能をまとめると ‧⼀瞬で作成できて、⼀瞬で共有できて、⼀瞬で結果表⽰できるアンケートWebアプリ ‧作成 -アカウントは不要、メールアドレスだけ -メールアドレス宛に集計結果と共有QRが表⽰されるページリンクが送られる ‧共有 -⾃動的にQRコードが⽣成されて、モニターに表⽰しておけば読み取って回答できる ‧結果表⽰ -回答がリアルタイムに反映される視覚的なグラフ表⽰ -共有QRも⼀緒に表⽰
13. 技術的な実現⽅法 ‧バックエンド（＋フロントエンド） -Django（PythonのWebアプリフレームワーク） ‧メールサーバー -Postfix ‧Webサーバ -Nginx ‧WSGI -Gunicorn ‧デプロイする場所 -VPS
14. 全体的なフロー フロントエンド バックエンド HTML CSS JavaScript ユーザー
15. まずはご覧ください
16. live-poll.net（プロトタイプです！）
17. live-poll.net（プロトタイプです！）
18. live-poll.net（プロトタイプです！）
19. live-poll.net（プロトタイプです！）
20. live-poll.net（プロトタイプです！）
21. live-poll.net（プロトタイプです！）
22. 苦労したこと まだ出来ていないこと
23. 苦労したこと ‧デプロイ部分で⼤苦戦（１週間以上費やす） -当初WSGIとしてDjango公式が推奨しているuWSGI（導⼊経験あり） を使おうとしたが、なんでか分からないけど動かなかった＝知識不⾜ -なのでGunicornに鞍替え -正しい設定をしたはずなのにNginxが起動に失敗 -なんとOS再起動で復活 ‧ドキュメントには載っていないおま環トラブルが多発
24. まだできていないこと ‧凝ったUIにしたい ‧レスポンシブ（スマホ）対応していない ‧Webアプリに必要な利⽤規約やプライバシーポリシー‧問い合わせフォームなどなどがない ‧論理設計をブラッシュアップする -どこまでをアンケート作成者だけが⾒られるようにするか、などなど ‧アンケートのグラフ軸に⼩数点が付いている ‧アンケート結果の反映を⾮同期処理にしたい ‧本当にセキュリティが⼤丈夫なのかの検証（セルフペネトレーションテスト） ‧他多数‧‧‧
25. 今後やること
26. まずはUI ‧良さげなUIだけでも先に完成してたら開発のテンションが上がりません？ ‧ということで、Reactでフロントエンドの制作中です ‧今まで⾏き当たりばったりでUIを作っていたが、今回初めてFigmaでデザイン を作ってからコーディングすることを学ぶ -デザイン通りにコードを書いていくので、⽣産性が段違い！
27. Figma
28. React
29. ということで鋭意制作中です！
30. ご清聴ありがとうございました さば @pin__saba__ Webサイト https://sbskn.com