Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for saba saba
April 23, 2024
Programming
0
250

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

Avatar for saba

saba

April 23, 2024
Tweet

More Decks by saba

See All by saba
部の基幹システムを開発しています/Developing the Department's mission-critical systems
Avatar for saba sabana
0
75

Other Decks in Programming

See All in Programming
LangChain4jとは一味違うLangChain4j-CDI
Avatar for Kenji Kazumura kazumura
1
170
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
420
DSPy入門 Pythonで実現する自動プロンプト最適化 〜人手によるプロンプト調整からの卒業〜
Avatar for sea-turt1e seaturt1e
1
650
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
520
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
15
2.9k
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
610
手戻りゼロ？ Spec Driven Developmentとは@KAG AI week
Avatar for Tomoki Hirai tmhirai
1
190
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
Avatar for oga_aiichiro nanaism
0
250
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
470
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
550

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Done Done
Avatar for chrislema chrislema
186
16k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280

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