アンケートページを作ってたら掲示板になった話(WordPress)

社内向けサイト(イントラサイト、WordPress)にアンケートページを作って欲しいという要望。
話を聞くと、ある季節的な業務に対して、フィードバックがないから業務開始前と終了後の2回アンケートをとって振り返りをしたいということらしい。
それはいい考えだと思ったので協力させてもらった。

※ちなみにコードの話はしません。

経緯

ヒアリングをしてどんなものを作るか構想を練る。(こういうのが欲しいと言われるよりもざっくりとした支持しか来ないので、なんとなく構想を練ってこれでいいですか?っていってから作る)

はじめに言われた今回の条件。

  • 匿名で構わない
  • 回答は後からみることができる

それを聞いて考えたはじめの案は、アンケートの送信フォームを作ろうってことだった。

  • 匿名かつ任意なので、自由回答より選択式の方が回収率が上がりそう
  • 選択式なら最終的にCSVのような形で出力して、集計してみたい(数値化したい)

それなら回答がDBに溜まって行かなくても外部ファイル(CSVなりjsonなり)の方が取り回しが簡単かな?ということで、
フォームを記入したら外部ファイルに保存するアンケートフォームと、結果を表示するページができればいいかな、と思った。
外部にファイルを持っているので、今後アンケートが増えてもページがどんどん増えないように(URLが変わったり、メニューから探しにくくなるとそのページに辿りつけない人が続出しそう)、ページ内でアンケートなりアンケート結果を選択できたらいいな。

脳内の思考を垂れながすとこんな感じです。
まぁそうするなら、いろんなフォームに耐えられるように、フォームパーツごとの使いまわせそうなfunction先に作っておくと便利かなぁとちょっと手を動かし始めた。
お昼過ぎに話を持ってきた人が戻ってきたので、こんな感じでいいですかと打診。

「いやいや、みんなにもっと自由に書いて欲しいんだよ」
「それでと確実に回収率上がらないと思いますよ(面倒だから誰も使わないよ?)」
「目安箱みたいにしていろいろな意見を聞きたいんだ。それをみんなで見られるようにして(意見を成熟させていきたい、ってことだと思う)。」
「そうするとアンケートっていうより、掲示板みたいな感じですかね?」
「そうそう(?、たぶんよくわかってない)」

作る前から、あんまり使ってもらえなそうなものを作らなきゃいけなくなってテンションだだ下がり。
集計できるアンケートページが掲示板になった。

簡易的な掲示版を作ろう

構想をまるまる捨てちゃうのももったいなかったので、フォームパーツのうちテキストエリアだけ使えりゃいいじゃんという気分。
掲示板なら投稿と閲覧が同時にできなきゃしょうがないので、投稿と閲覧は同一ページにする。
複数人が投稿するので、リアルタイムの方がいいのでAjaxで行きましょう。(当初は投稿と結果を分けてもいいと思っていたのでページ遷移前提で考えてた)

流れはこんな感じですかね。

  1. 投稿する
  2. 投稿内容を取得してAjaxでPHPへ
  3. PHPで受け取ったデータをjsonファイルに書き込み(file_put_contents)
  4. その内容をAjaxへ戻して表示エリア(掲示板)を更新する

ページの使い回し(アンケートごとにページを増やさない)はそのまま使いたいので、1の前に0番目としてトピック(アンケート)を選択してももらいましょう。(今回はセレクトボックスにした)

今回やったこと補足

  • 書き込み以外の必要そうな情報はhiddenで。投稿日時とか。
  • 書き込まないなら表示エリアが広いほうが見やすいので(あえて下部固定せずに2カラムにしたので)、要らないときは書き込みエリアを非表示にするボタン設置。
  • 書き込みがあったらチャットワークに通知。(API利用)

今回のはまり箇所

  • 書き込み用のPHP(Ajaxされる方)のパスではまる。
    WordPressのパーマリンク変わったら対応しなきゃいけない仕様になってしまった。。
  • AjaxのalwaysとsetTimeout()のとこで要素のvalue取得のタイミング間違えてはまる。(ただのミス)
  • 変数のスコープの理解が恐ろしく曖昧。(不要な変数が多い)

今後の予定

  • 自分の投稿だけを表示する機能
  • 新しいアンケート(jsonファイル)を簡単に作成できる機能
  • アンケート結果のアウトプット
    ※これはサイトでtablesorter.js使ってるので、tableで出力すればCSVでダウンロードできるのでOK。
  • アンケートのロック機能
  • 不要投稿を画面上で削除(まだ手作業)

参考サイト