J2complexed Advent Calendar 2016째 날이다.
이것은 제 개인적인 말입니다. 오늘은 제 생일입니다. 제가 아무거나 쓸 수 있도록 허락해 주십시오.
※ 공개를 놓쳐서 죄송합니다!

마스 공사를 시작했어요.

며칠 전에 배독한 보도는 나를 매우 감동시켰다.
카페 공학의 제창
그렇구나!변수명이 좋지 않아, 납품 서류가 누락되어 근육이 부족해!단백질은 필수!

단백질이 심오하다

단백질 드시고 계신가요?안 마셨어. 걱정하지 마.단백질은 쉽게 말하면 단백질이기 때문에 보통 밥을 먹어도 섭취할 수 있다.예를 들어 닭가슴살 100g은 22g 정도, 우유 200g은 7g 정도 섭취할 수 있다.마음 놓으세요.
하지만 단백질을 효과적으로 섭취할 때가 있다!特に運動後の30分以内を「ゴールデンタイム」といい、成長ホルモンが最も活発に分泌されるので、ダメージを受けた筋肉の修復に最も効果的であるといわれています。마신 것 같지 않아요?단백질을 마시는 방법~ 훈련 후~
황금 시간대!
그리고 사람의 몸은 한 번에 섭취할 수 있는 극한의 양을 결정한다!1回の限界摂取量＝体重×0.7g단백질 섭취법!한 번의 극한 섭취량은 킬로그램당 0.7g이다
훈련 후 필요한 단백질 섭취량을 알기 위해 홈페이지를 마련했다.

vue.js든 이거든.

요즘 좋아하는 vue.js로 해요.
우선, vue-cli를 설치합니다.github에 설치 방법이 쓰여 있어서 그래요.
※ node.js 버전은 4 또는 6이며 Giit 필요
vue-cli

$ npm install -g vue-cli

순조롭게 설치한 후에 다음에 템플릿을 만들겠습니다.
아니면 사용법에 따라 그렇게 할까요?$ vue init <template-name> <project-name>간단하네.
홈페이지를 좋아해서 선택했어요.

$ vue init webpack-simple vue-muscle

To get started는 나에게 어떻게 시작하는지 가르쳐 줍니다. 그 입력 명령에 따라 확인하십시오.

$ cd vue-muscle
$ npm install
$ npm run dev

나는 기세 있는 물건을 설치해서 이런 느낌으로 브라우저를 시작했다고 생각한다.

이렇게 하면 준비가 완성된다.나머지는 평소와 같이 하겠습니다.
해설이 없으면 떳떳하지 못하니 먼저 전선을 좀 쬐어라.
app.vue

<template>
  <div id="app">
    <h1 class="title">レッツ！ プロテイン！</h1>
    <div>
      <input class="yourWeight"
        type="text"
        :value="yourWeight"
        placeholder="edit me"
        @input="calcProtein"><span>kg</span>
    <div>
    <p class="balloon">{{ message }}</p>
    <p class="image"><img :src="image" /></p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: ``,
      image: `./dist/muscle1.svg`,
      yourWeight: ''
    }
  },
  computed: {
    message: function () {
      const value = this.yourWeight && this.yourWeight.trim()
      if (!value) {
        this.image = `./dist/muscle1.svg`
        return `体重を入力してほしい`
      } else if(!isFinite(value)) {
        this.image = `./dist/muscle2.svg`
        return `そこは数字で入れて欲しい`
      } else if(isFinite(value)) {
        const result = Math.floor(value * 0.7 * 10) / 10
        this.image = `./dist/muscle4.svg`
        return `君に必要なプロテインは${result}グラムだ！`
      }
    }
  },
  methods: {
    calcProtein: _.debounce(function (e) {
      this.yourWeight = e.target.value
    }, 300)
  }
}
</script>

<style>
html, body {
  opacity: 1;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.title {
  font-weight: bold;
  font-size: 8vw;
}
input[type="text"] {
  outline: none;
  border: 1px solid #aaa;
  transition: all .3s;
  font-size: 16px;
  padding: 5px;
  margin: 10px 5px 10px 0;
}
input[type="text"]:focus {
  box-shadow: 0 0 7px #1abc9c;
  border: 1px solid #1abc9c;
}
.image {
  width: 40vw;
  margin: 0 auto;
}
.balloon {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 115px;
  height: 70px;
  color: #F6F6F6;
  line-height: 70px;
  text-align: center;
  font-weight: bold;
  background: #19283C;
  border-radius: 60%;
}
.balloon:before {
  content: "";
  position: absolute;
  bottom: -10px; left: 20px;
  margin-left: 0;
  display: block;
  width: 30px;
  height: 30px;
  background: #19283C;
  border-radius: 0 30px 0 30px;
  z-index: -1;
}
.balloon:after {
  content: "";
  position: absolute;
  bottom: -5px; left: 30px;
  margin-left: 0;
  display: block;
  width: 30px;
  height: 30px;
  background: #FFF;
  border-radius: 0 30px 0 30px;
  z-index: -1;
  transform: rotate(30deg);
}
</style>

그리고 잘하는 게 이거야.
빨간 모자!단백질!

너무 좋아요!삽화는 이쪽에서 얻은 것이다.감사합니다!
근육 근육 근육의 근육 건강미 브래지어 | 윤곽 디자인

서버 측면 렌더링

오랜만에 SEO에게 강하다고 여겨지는 서버 사이드 렌더링으로 단백질을 선교하자!
서버 측면 렌더링에 필요한 플러그 인을 설치합니다.

$ npm install vue-server-renderer express

그리고 정식으로 게재된 서버입니다.js의 작법을 참고하십시오.
(미묘하게 index.}도 변경됨)
서버측 렌더링

Heroku에서 세상에 공개합니다.

여기 와서 나중에 공개할 테니 여러분도 이용하실 거라고 생각합니다.
Heroku의 대시보드에서 Creat newapp로 응용 프로그램을 제작합니다.그렇다면 대부분의 지령을 다 썼으니 그렇게 하자.
안 썼으면 설치Heroku CLI 후 로그인하는 건가.

$ heroku login
$ heroku git:clone -a lets-protein
$ cd lets-protein
$ git add .
$ git commit -am "make it better"
$ git push heroku master
・・・
remote: Verifying deploy.... done.
To https://git.heroku.com/lets-protein.git
 * [new branch]      master -> master

총괄해 보면 이런 느낌이다.

총결산

몸이 아파서 다 못 썼더니 뒷부분이 뒤죽박죽이 되었다.건강이 중요하잖아.
그리고 근육도 중요해!
빨간 모자!단백질!