【ラブライブ！】MilkcocoaをつかってまじえんじぇーなWebサービスを作ってみた
MilkcocoaというBaaSを使ってWebサービスを作りました。rinchan.link
どの凛ちゃんが一番まじえんじぇーか総選挙するサイトです。
まじえんじぇー (まじえんじぇー)とは【ピクシブ百科事典】
投票数に制限はありません。好きな凛ちゃんをクリックし放題です。
ドメインは例のごとく、こちらのキャンペーンサイトで取得したもの。www.onamae.com
コンテンツはgithubに置いて、github.io使ってます。
『Milkcocoa』とは
Milkcocoa | リアルタイムアプリ・IoTやるならMilkcocoa
インタラクティブなWebアプリ制作に特化したBaaS（Backend as a Service）です。
フロントエンドにjavascript一行書くだけでサーバを用意せずにデータの保存・取得・更新、安定したリアルタイム通信を実現できちゃいます。めっちゃ便利！
日本発のサービスなので、ドキュメントもわかりやすく充実しています。公式サイトのチュートリアルをやってみるだけでサービスの凄さがわかると思うので、ご興味ある方はぜひ。
あと、途中でわからないことがあったときは開発者コミュニティに質問して助けてもらいました。（中の人のみなさま、その節はありがとうございました。。！
今後iOS・AndroidのSDKもリリース予定とのことで楽しみです。
使ったライブラリとか
masonry.js
masonry.desandro.com
コンテンツをpinterestライクなUIで表示してくれるライブラリです。
ウィンドウサイズの変更にも動的に対応してくれます。
odometer.js
github.hubspot.com
カウンタ部分に使いました。表示する数字をくるくるーっと回転させてアニメーションしてくれます。
ただ数字表示するだけだと見た目味気ないなーと思ってたところにいい感じのライブラリが見つかってよかった。
imgLiquid.js
imgLiquid Jquery Plugin
画像を親要素のサイズに合わせてよしなにリサイズしてくれるライブラリです。
imgフォルダに画像放り込んで読み込むだけで綺麗にリサイズされるので最高。
微妙っぽいこと
・レコードが数千件になってくるとページの読み込みが遅くなる
毎回リロードの度にデータ引っ張ってきてんだからそりゃそうだって感じですが、
何か解決方法がある気がするので、これから改善します。。
やばいっぽいこと
・Milkcocoaと連携しているjsがむき出しなのでやろうと思えばサーバ側にがっつりデータ送って一瞬で総選挙が終わります。（やめて〜〜
（データのpushに関するルールはmilkcocoa側で設定できたはず・・？あとで調べます。）
・自動クリッカーとか仕掛けられたらやばそう。試したことないけど。
これからやりたいこと
・票数ごとに画像順をソート
リアルタイムランキングっぽくしたい。
・一定数票が入ったら画面にアニメーションをカットインさせる
ただポチポチしてもおもしろくないので、50票・100票入ったら画像が一瞬フェードインしてくるとか。
・ユーザが画像をアップロードできるようにする
Milkcocoaに画像もアップロードできるかも・・？そしたら試してみる。
Q&A
これってリアルタイムである必要あるんですか？
ぶっちゃけ全然リアルタイムじゃなくてもいいんですけど、どちらかと言うと今回はデータの入出力がめちゃくちゃ簡単という点でMilkcocoaの利点を発揮できたかなと思います。
でも複数人でサイトに投票していてカウンターが目の前でがんがん上がっていくのを見るのは楽しいです。これはリアルタイムならではだと思います。
凛ちゃん推しなんですか？
一年生のまきりんぱな推しです。にこ先輩も好きです。いつも花陽をディスってくる友達がいるのですが、彼とはよく喧嘩になります。
いよいよ今週土曜から劇場版ラブライブ公開ですね！
めっちゃ楽しみです！！！！！！！！
作ってみて感想
フロントエンド開発はほぼ初めての初心者なのですが、Milkcocoaのおかげでバックエンドの難しいところを考えずにフロント開発に集中することができました。
単純な機能から始めるプロトタイプ開発には本当に向いているBaaSだと思います。
また何かアニメ駆動開発ができるネタが思いついたら作ります〜
