###### tags: `Advent calendar mis.w54代2020` # ガチャアプリの生成 ## 自己紹介 みなさんこんばんは,54代~~プロ研~~何もしない研所属~~ほぼ幽霊部員~~のSEEDです!去年のアドカレも特に書く内容を思いつかず,困っておりましたが,今年も困っております... 結局迷いに迷った挙句,クソアプリを作ってどうにかネタにしてやろうということにしました! ## 前文 人々は人生のうちに何度も選択を迫られることがあると思います.ただ,選択といっても重要な選択,どうでもいい選択など様々な選択があるでしょう.しかし,どうでもいいことに対しても変に考え込んでしまい,無駄な時間を過ごしてしまうことがあるのではないでしょうか.(自分はそうです) 例えば,どこに食べに行くか決める場面.(今年度はコロナ禍でそのような場面はほとんどありませんでしたが...)いくつか候補を挙げることができたとしても,その候補の中からどれを選ぶかで無駄に時間をかけてしまうことがあるかもしれなくもなくもないでしょう.自分は優柔不断な人間なのでそのような場面で選択をすぐにすることができず時間をかけてしまうことが多々ありました. さて,去年の今の時期を思い出してください.2時間目が終わり,昼飯でも食うか,となったときみなさんはどのように昼飯を決めていましたか?某大久保工場付近でしたら購買,サイゼリヤ,学食,マクドナルド,こがね製麺所,松屋,麺爺(もう閉店したらしいですが)などが候補に挙がると思います.そのような候補の中から昼飯を決めるとき私がどのように決めていたかというと乱数を使って決めていました!(は?) まず,候補に番号を付けます.上記の例を使うと,1:購買,2:サイゼリヤ,3:学食,4:マクドナルド,5:こがね製麺所,6:松屋,7:麺爺といった感じですかね.それで[乱数生成サイト](https://keisan.casio.jp/exec/system/1425449868)に入り,1から候補の数(今回は7)までの1つの整数を出力させて出た数の候補の昼飯を食べるという感じでやってました. <img src = https://i.imgur.com/0l1oIru.jpeg width = 200px > この画像だと4なのでマクドナルドで昼ご飯を食べるって感じです.(ええ...) しかし,マクドナルドで昼飯を食う選択をしたとしても我々はさらなる選択をする必要があるわけです.それはどれを購入するかという選択です.ただ,それも乱数で決めてやる!と思ってもまた候補を決め,それぞれに数字を当てはめるのが面倒くさい訳です. 前文が思いのほか長くなってしまいましたが,上記のようなどうでもいい選択をする際,瞬時にランダムで物事を決めたいなと思ったわけですよ.そんな経緯があってこの~~クソ~~アプリを作ることになりました. ## アプリ紹介 アプリのURLは[**こちら**](https://cheapthread.herokuapp.com/)になります.アプリ名はとりあえず「〇円ガチャ(仮)」としました.なお,herokuの無料版を用いているため,最初の読み込みには少し時間(30秒くらい?)がかかります.ご了承ください... どのようなwebアプリかを端的に説明しますと,自分で好きなリストを作成し,そのリストを使ってガチャができるといったものになります. ガチャの種類としては単純に〇回リストの要素をランダム出力する〇連ガチャ,サイゼリヤ1000円ガチャのように〇円と入力して合計金額がその金額を下回るようなリスト要素をランダムで選択してくれる〇円ガチャ,←のカロリー版〇kcalガチャがあります. ### 使い方 #### 会員登録 - 右上のハンバーガーボタンを押します. <img src = https://i.imgur.com/G0R4taz.jpg width = 135px > - アカウント作成を押します. <img src = https://i.imgur.com/965dDQC.jpeg width = 135px > - フォームにアカウント情報を入力し,アカウント作成を押します. <img src = https://i.imgur.com/r52U9L6.jpeg width = 135px > #### リスト作成 - つくりたいリストの基本情報を入力し作成ボタンを押します. > ※オプションとして値段,カロリー,公開がありますが,〇円ガチャ,〇kcalガチャを有効にしたい方は値段,カロリーにチェック,ほかの人に見られてもよいリストを作るのであれば公開にチェックを付けましょう <br> <img src = https://i.imgur.com/nSwXwDz.jpeg width = 135px > - リスト要素の追加ボタンを押します. <img src = https://i.imgur.com/Cc31Ohr.jpeg width = 135px > - 要素を追加し,アップデートボタンを押します. <img src = https://i.imgur.com/vagFIp0.jpeg width = 135px > - アップデートして詳細ページに遷移すると〇連ガチャが選択できると思うのでそれを押す. > ※円,kcalを入力した場合は〇円ガチャ,〇kcalガチャが追加されます.追加されていない場合は,数値が0以下のもの,未入力のものが存在すると思います. <img src = https://i.imgur.com/JGohgmH.jpeg width = 135px > <br> - 何個のリスト要素を出力させるか選択し,ガチャるを押します. <img src = https://i.imgur.com/7OUJk11.jpeg width = 135px > - するとガチャの結果が表示されていると思います.なお,結果は右下のボタンを押すことでツイートすることができます. <img src = https://i.imgur.com/MOU6EeT.jpeg width = 135px > <img src = https://i.imgur.com/vq1wnU9.jpeg width = 135px > #### ガチャる - 使いたいリストのワード,並び順を選択し,検索ボタンを押します. <img src = https://i.imgur.com/KFV2sM1.jpeg width = 135px > - 下のリスト一覧で検索結果が出てくると思います.そして,ガチャをしたいリストを見つけ,やりたいガチャのボタンを押します.(今回はマクドナルドの値段ガチャをやってみます) <img src = https://i.imgur.com/nDcoxb4.jpeg width = 135px > - ガチャ設定の欄に何円ガチャをやるのか選択し,ガチャるを押します. <img src = https://i.imgur.com/PUM3E6y.jpeg width = 135px > - するとガチャ結果の部分に結果が表示されていると思います.ツイートボタンが右下にあると思いますが,そちらを押すとなんとガチャ結果をツイートできます! <img src = https://i.imgur.com/GmUvOlA.jpeg width = 135px > <img src = https://i.imgur.com/zw6A1lB.jpg width = 135px > - 〇kcalガチャ,〇連ガチャも同様にこんな感じでできます. <img src = https://i.imgur.com/AAKeiTz.png width = 135px > <img src = https://i.imgur.com/t78aNCM.png width = 135px > ### 終わりに Giuhubの[URL](https://github.com/SEED0228/cheapthread)も一応貼っときます.自分も未熟なので,このアプリのバグやこうした方がいいといったアドバイスがあれば[こちら](https://twitter.com/SEED0228777)に連絡していただきけると有難いです... 今回,このアプリを作るにあたり,RubyOnRailsといったフレームワークを用いました.バージョンはRails6を使用したのですが普段使ってるRails5と結構違っていて困惑しました...(~~Railsさんメジャーアプデでこんなに大きく変更しないでくれ...~~)ただ,我々のサークルではGOLangを普及させようとする動きがあるみたいなのでGo言語及びEchoとかを今後やってみたいなと思いました.(やるとは言ってない) **GO IS GOD!フラッシュ!**(激寒) 追記(2020/12/21): この記事は本来12月19日に投稿されなければならないのですが,12月21日と2日も遅れてしまい申し訳ありません... 12月20日はharrison君,12月21日(今日)はI.TK君の記事です.2人とも面白い記事をかいてくれると思うので楽しみにしています.
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up