小さなエンドウ豆

まだまだいろいろ勉強中

ABテストで推しメン選び!?

推しメン選びと就職活動 苦労しますよね

こんにちは、相変わらず絶賛就活中の私です。また企業選びもそうですがなかなか推しメンも決めることができません。
しかし趣味を疎かにはしたくわありません。だったら就職活動に活きるかつ趣味にもなるものを作ろう!   今日はABテストの要領であるアイドルグループから推しメンを選ぶものを作ったのでそれについて説明します。

ABテストとは

ABテストとはAとB、2つのうちから良い物を選ぶために判断をするものである。よくウェブサイトのアクセスを最適化するため古いデザインとのサイト(A)と新しいデザインのサイト(B)をある指標、アクセス数だったりで比べ改善していくものである。
この要領であるアイドルグループの中から推しメンを決めるものを作りたいと思います。

乃木坂46

今一番乗りに載ってるグループだと思います。私も昔から興味があったのですが皆さん魅力的で推しメンを決めれずにいました。そのためおなじCDを何枚も買う羽目になったことが多々あります。しかし私は学生、金銭的にもそのような行為は避けたいのです。そのため私がどのメンバーに重きをおいているのか知りたいと思いABテストで推しメンを決めようと思いました。

完成形?

基本JavaScriptで裏も表も書きました。サーバーサイドのnode.jsのexpressで簡易サーバーをかきました。

// import express module

var express = require('express');
var fs = require('fs');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
  res.send(fs.readFileSync("index.html", "utf-8"));
});

app.listen(3000);
console.log('Server running');

こんな感じですね。app.use()で静的ファイルを指定することができました。あとはindex.htmlを書き3000番ポートで僕みたいなやつを待ち受けるだけであるw
完成したものがこんな感じである。
f:id:h-piiice16:20160326224035g:plain

仕組み

最初AとBにランダムでメンバーの画像を表示します。次にいいと思うメンバーの画像をクリックします。

  • Aを押した場合…Bの画像に別のメンバーの画像を表示する
  • Bを押した場合…Bの画像をAの画像として表示し、Bの画像を別の画像に変える

これを繰り返し残ったメンバーを推しメンとする。

gifアニメ

私はChromebookというPCを用いて最近開発を行っている。ChromeOSで画面キャプチャを撮りgifのアニメーションにするのに苦労したのでそれについてもまとめたい。
てっとり早くいうとこれを使った。
Animated gif Capture これはChrome拡張機能で画面の動作をキャプチャしgifでローカルに保存できるのだ!最大5秒位だった気がする

まとめ

ABテストについてイメージを掴むことができたと思います。良い物が残っていき悪いものは捨てられる、残酷な世界です。
アイドルの皆さんもこのような残酷な世界で生活されているのだと改めて思うと尊敬します。
ちなみに本来の目的である推しメンを決めるテストは星野みなみちゃんでした。乃木坂ではこの子に注目することとしました!