はじめに

ウェブの知識がなさ過ぎて辛みしかない！
ということで，ウェブをちょっと触ってみた！！

作成物

作るウェブアプリは「ガチャシミュレーター」
引く回数を指定して「SSR」と「SR」と「N」が何回出るか表示する

完成物

ガチャを引く前の画面

ガチャを引いた後の画面

(背景が白だからページが分かりづらい．．)

動作環境

環境は以下の通り

フロント	バックエンド	サーバー	インフラ
Vue.js	-	nginx	GCP

とりあえず，サイトにアクセス（IP直打ち）したらページが表示されるところまでを目指した．

操作手順

GCPにログインしてVMインスタンスを立ち上げる

たぶんここら付近はググればたくさん出てくるので割愛した．
画面キャプチャ付きでたくさん情報が出ていると思うので．．．

nginxのインストールと設定

以下のコマンドを打ちnginxをインストールする．

$ sudo apt install nginx

そうしたら，デフォルトで表示されるページをコピーして~/appディレクトリに持ってきて編集できるようにする．

$ mkdir app
$ cp /var/www/html/index.nginx-debian.html ./app

次に，nginxの設定ファイルで移動させたhtmlを初期ページに設定する．

/etc/nginx/sites-enabled/default

~~前略~~

#下の行をコメントアウトして
#root /var/www/html;

#以下の行を追加する
root /home/[your_name]/app;

~~後略~~

ここで，GCPに設定されているIPにアクセスして表示されていたらOK.

ページ作成

移動してきたindex.nginx-debian.htmlを編集する

~/app/index.nginx-debian.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Simulator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css"/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<h1 style="text-align: center">Capsule Toy Simulation</h1>

<div id="app" style="text-align: center">
<div v-if="first"  style="text-align: center">
 pull <select v-model="selected"  class="uk-select uk-form-width-xsmall">
  <option v-for="option in options" v-bind:value="option.value">
  {{ option.text }}
  </option>
 </select> times
 <br><br><br><br>
 <button v-on:click="pull" class="uk-button uk-button-primary">PULL</button><br>
</div>

<div v-if="second" style="text-align: center">
 SSR: {{ ssr }} <br>
 SR : {{ sr }}<br>
 N  : {{ n }}<br><br>
 <button v-on:click="back" class="uk-button uk-button-primary">BACK</button><br>
</div>
</div>


<script type="text/javascript">
var app = new Vue({
 el: '#app',
 data: {
  selected: 1,
  first: true,
  second: false,
  ssr: 0,
  sr: 0,
  n: 0,
  options: [
   {text: '1', value: 1},
   {text: '2', value: 2},
   {text: '3', value: 3},
   {text: '4', value: 4},
   {text: '5', value: 5},
   {text: '6', value: 6},
   {text: '7', value: 7},
   {text: '8', value: 8},
   {text: '9', value: 9},
   {text: '10', value: 10}
  ]
 },
methods:{
  pull: function(){
   this.first = false
   this.second = true
   for(var i=0; i < this.selected; i++){
    this.gacha(Math.random())
   }
  },
  back: function() {
   this.first = true
   this.second = false
   this.ssr = 0
   this.sr = 0
   this.n = 0
  },
  gacha: function(prob) {
   if (prob < 0.03 ){
     this.ssr = this.ssr + 1
     return
   }
   if (prob < 0.1) {
     this.sr = this.sr + 1
     return
   }
   this.n = this.n + 1
   return
  }
 }
})
</script>
</body>
</html>

今回は，Vue.jsを使ってみた．
v-if，v-for属性が便利でhtmlにjsべた書きだけれどSPAを実現できた．

おわりに

とりあえず，今回はGCPを使って何か作ってみたいということで
バックエンドとかを全く意識せずに作ったけれど，次回以降は何らかのバックエンドを実装したい．
候補としては
* Elixir + phoenix
* python + responder
のどちらかなと思っている．

2018/12/22　追記
* バックエンド実装しました

【GCP + nginx + Vue.js】ガチャシミュレーター（ウェブアプリ）をつくった