Google Formに変わるオンライン実験のアンケートフォームシステムの開発
public.icon
関連
2025/4/14 MTG議事録#67fc96f80000000000c5f0a2
プロダクト名
XXXXXXX
github
https://github.com/kinjo1130/online-experiment-form
API
https://online-experiment-form-api-908446479628.asia-northeast1.run.app
URL
https://frontend-app-908446479628.asia-northeast1.run.app
Figma
https://www.figma.com/design/1w2mzWQvg2w576gN5wpAXC/デザイン壁打ち?node-id=0-1&t=a8luy44PrWi0XIER-1
デザインがざっくりでもいいから欲しすぎる
Figmaさえあれば、いい感じにフロントエンドを実装してから、APIの繋ぎ込みできる!!!!kinjyo.icon
2025/6/1 Layermateに要件を整理して、デザインを作った
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 動作フロー
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 認証周りの要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 スケジュール機能の要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 アンケート構築の要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 Deploy構成
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 DB構成
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 改善点
デザインを作るための動作フローを書き出す
jsonなどで設定項目を作れるようにしたい
AI時代にtextはかなり強いので、GUIをぽちぽちさせるのは非エンジニアorリテラシーのない人間だけでいい
AIを使っていたら、作門をいちいち手入力するなんて、めんどくさいと思う
ユーザー
事前にすること
QRコードを読むと、メアドと名前と年齢と性別を入力する
スケジュールから空いている日を選択してもらう
実験本番
事前アンケートを回答してもらう
回答してもらったら、本実験のアンケートに参加してもらう
管理者
実験参加してもらう日を設定してもらう
事前アンケートの項目を構築する
本実験のアンケート項目を構築する
収集したデータをCSVなりで吐き出させるようにする
強み
実験募集の収集から被験者のスケジュール調整ができる
事前アンケートを回答してもらったら、本実験のアンケートをしてもらう
論文系でも、オンライン実験のアンケートにはこういう課題があります的なのがあるので、それに投稿できたらいいなとか思ったりしている
(↑これについては私も詳しくは調べていないのでできるかはわかりません… 【柳】)
既存のシステムの課題
google formではセクションの並び替えとかができない
被験者Aには A→B→D→Cの順番でしたいけど,被験者BにはB→A→C→Dの順番でしたい.といった内容
異なるフォームを用意すればできるけど,それらを集計するのが面倒くさい
1つのフォームで「入力された被験者番号」や「アクセスした順番」などで振り分けることができないか?
これの派生で,例えば聞きたい項目が多量な場合に,被験者によって回答する項目を選別することができると良き
聞きたい項目が200個ある.それを50個毎に分割してA・B・C・Dとする
被験者Aには「A」と「B」を,被験者Bには「C」と「D」をしてもらう.といった具合にすることで
(被験者の数がいる限り)多い項目であってもデータを収集することができる
参考:https://en.wikipedia.org/wiki/Synthetic_Aperture_Personality_Assessment?utm_source=chatgpt.com
逆転項目とかがあると、集計がめんどくさい + 項目の順番をバラバラにしないといけないので集計がしんどい
逆転項目: 聞きたい項目とは逆の事を聞いて,その値から最大値+1を引いた値を項目の得点とする
項目の順番:聞きたい要素「α」と「β」がある場合に(↓)
「α」について聞く項目を上から順番に並べてその後ろに「β」について聞く項目を並べるのは△
カウンターバランスを取るのであれば,被験者Aに対しては「α→β」の順番でする一方で
被験者Bに対しては「β→α」の順番でする.といった対応をとるか(上の項目で述べている内容)
被験者によって変えないのであれば「α」と「β」について聞く項目を交互に混ぜながら聞く必要がある
参考:https://oshio.kinsta.cloud/wp-content/uploads/2024/04/Big_Five_Inventory_2.pdf
こうすると集計がすごい面倒くさいので,データを取る側は「α→β」の順番で並んでいるけど
データを入力する側にはランダマイズや混合がされている状態で表示されるようにしたい
(+ この項目を複数回利用する場合は,利用するたびに順番が変わらないようにする)
動作確認用項目(きちんとアンケートを受けているか確認する問題)に間違えた人は即時落とすようにする
SurevyMonkeyでは実装されているっぽい?
googleFormだと,動作確認の項目を間違っていても回答自体は保存されるので無駄に枠を消費する
除外データがなるべく少なくなるように,間違ったやつはそもそもカウントしないような枠組みがほしい
途中からプレビューを見れるといいと思いました
(項目を修正した後にいちいちそこまで進むのが面倒くさい)
リッカード尺度(均等メモリ)を配置する際に
横方向だけじゃなく縦方向に並べることができるようにしてほしい
(数値に付けるラベルが長い時に横並びだと見にくいので)
https://gyazo.com/0a63630dbadd1faa3235229448ba4a63
google formの埋め込みに対応させる
回答時間を記録する
実験募集もできるようにする
QRコードで被験者の実験募集を集めることができる
スケジュールを選択できる
管理者は管理画面でいつでもユーザー情報を見ることができる
仕様
自分のゼミで満足して使ってもらえるぐらいにはしたい
CSVでエスポートできるようにする
統計ソフトに合わせて、エクスポートできるようにしたい
どんなソフトがあるのかは知らない
SPSS / R studio / あと簡潔な分析だとExcelでする場合もあります【柳】
ユーザー側のランダム化された質問表示
質問タイプの選択(スケール、二択、複数選択肢)
私たちの研究室は0~100のスライダを使う方法(VAS法)が良く用いられるので,それを組み込めると良きです
逆転項目と選択肢ランダム表示の設定
実験募集もできるようにしたい
GPTに仕様をまとめてもらった
https://chatgpt.com/share/683aa1e7-ed14-800d-a997-57fe0d86152d
全体をまとめてもらうより、各要件ごとにまとめてもらう方が良さそう
競合
https://surveymars.com
google form
Microsoft Forms【追加】
Servey Monkey【追加】
少なくとも日本には競合はいなさそう
オンラインアンケートシステム(学術特化) + 被験者募集システム&スケジューリング機能
技術スタック
インフラ
Cloud Run(APIとフロント)
DB
Neon
Postgres
Auth
Clerk
ORM
Prisma
画像
Claudflare R2
API
Hono
UI
React
shadcn
test
jest
react-testing-library
その他
Docker
Vite
Biome
ロードマップ
localの開発環境の構築
バックエンド
Dockerでlocal開発環境での、起動
swaggerの追加
認証周りの追加
ステージング環境を整備したい
XXX-stg.run.appとかのAPIのURLにしたい
フロントエンド
pnpmでの起動
Clerkの導入して、認証画面の作成
ステージング環境のURLにしたい
stgでの環境の整備(Cloud Runに載せた時に、base_URLなどの決定)
CI/CDの整備
メモ
フロントエンドのモック付き画面を作成してから、APIを詰めていくようにする
.envの値を本番で使うのではなく、.env.productionファイルを使いたいよな
バックエンドのlogをターミナルに表示したい
カスタムのsignupコンポーネントから、独自のAPIを叩きたい
無理そうなのでwebhook経由にする
APIのHMRがないのがきついな
進捗
APIのlocalで動くようにした
supabaseに課金して、プロジェクトを作って、DBなどの連携をしていくだけ
俺は強くなっていたので、NeonとPrismaでいいのだ
2025/5/31
DBをNeonを使うことにした
Supabaseだとプロジェクトがもうなくて、課金しないといけなかった
Cloud RunにHonoとNeonの環境構築完了
認証さえ追加したら使えるバックエンドが完成
2025/5/31
フロントエンドもアンケート項目のコンポーネントを作成
スケジュール周りのコンポーネントを作成
LayetmateでFigmaにデザインを作成した
フロントエンドのCloud Runにdeploy構築
2025/6/1