はじめに
今回
というルーレットアプリを開発、公開したのでそれについて色々書いてみたいと思います。
（名前は安直にMasiRouletteから）
コードは こちら
なぜルーレットアプリを作ったか
以前ルーレットで抽選をしたいと思った際に検索をしたところ意外にもwebで使えるルーレットがなかったからです（検索不足じゃなければ多分）
自分が思いつくものは大体存在しているこの時代にルーレットがなく驚いたので、じゃあ自分で作ろうと思いました
どうやってルーレットを実装しようかと思ったときに
こちらの記事の内容がほぼルーレットじゃん（）と思いすごく参考にさせてもらいました、ありがとうございます
ルーレットのメリットとは
「今日の晩御飯どうしよう・・」や「今日は何色の服を着よう・・・」など人生は選択の連続です（）
そんなあなたの負担を減らすためにをルーレットにぱぱっと決めちゃってもらいましょう
使った技術
- Vue.js
- テンプレートとかDOM操作とかを良い感じにしてくれる最近流行りのやつ
- Nuxt.js
- 同じく最近流行ってるやつ Vue.jsのフレームワークでSPAとかSSRとか良い感じにしてくれるらしい
- Chart.js
- JavaScriptを使って円とか棒とかのグラフをすごく簡単に作ってくれるやつ
- vue-chartjs
- 上記Chart.jsをVue.jsで使えるようにしてくれるもの
- chartjs-plugin-labels
- Chart.jsで作ったグラフの中にラベルを表示してくれる良いやつ
ルーレットの説明
最初こんな感じなので
データをセットして
スタートを押すと
ぐるぐる回って結果が表示されます
かなりシンプルに作れてよかったんじゃないかなと思います。
工夫した部分
- シンプルかつオシャンティにしたかった
- 割とできたんじゃないかと個人的には思う
- 色はランダムに設定される
- 比率設定もできる
- pinの演出もPhotoShop使って自作
- 結果表示をModalWindowで行なった
詰まったところ
- gitHub pagesにnuxt projectを上げる際に nojekyll ファイルを作成しないと _始まりのファイルが 404になってしまう
- なぜか作成しても 空白が２行入っておりそれで反応してなかったところも詰まった
- ぐるぐる回す方法がなかなか見つからなかった
- 最初 scssの変数で回そうと思ったけどうまくいかず js側で pieChart.style.transform = "rotate(" + angle + "deg)"; と記述してループ
- setTimeoutやsetIntervalの中では thisによって data()内の変数にアクセスできなかった
- const me = this にして me.変数にするとアクセスできる
うまくいってない部分
- ルーレットをゆっくり停止させたかったけどやりかたがわからなかった
- そのうちなんとかしたい
- 項目削除を最後からじゃなくてそれぞれで行いたい
- 多分できると思うのでそのうち・・・
- og設定がうまく言ってない気がする・・・？
- もうちょっとNuxtに関する勉強しないと・・
- ほんとはルーレット部分を録画して証拠を作れるようにしようと思ったんですが getUserMedia()の使い勝手があまり良くなく、操作やこのアプリ自体のシンプルさも損なわれそうだったのでやめました・・
感想
今回 Vue.jsをインストールして2週間で作成・公開したというタイトルからわかるように全くのVue素人でも非常に理解しやすいフレームワークなのにとても便利で、流行ってるしフレームワークを触ってみたいという軽い気持ちからVue.jsやNuxt.jsを触り始めましたがやっぱりすごく良いですね
特にnuxt-linkやv-showには感動しました
前までは別言語の入門書を読んで勉強してましたが個人開発で色々やってみることで楽しいですし何か完成すると力がついた気がしてとても良い感じです
あと、慣れてる人からするとまだまだ汚いコードだと思いますので こうした方がいいよ とかもあれば是非ご教授ください
終わりに
個人的にはJavaを触りたい->SpringでWebアプリつくるか->フロントエンド勉強しなきゃ・・
という流れで進んできて、なんだかんだフロントエンドの方が勉強進んでる気がするのでそろそろjavaで何かをしたいところ・・・
こんなの良い勉強になるよ！とかあれば是非教えてください！
とりあえずは競技プログラミング等に積極的に参加してアルゴリズムやコーディング力を上げていきたいと思います。
是非皆さんも MRoulette を使って 決定を楽に行なっちゃってください！