お願いマッスル！腹筋の回数指定して！！！

めっちゃ痩せたい、Yes！

最近筋トレをするようになったが、正直とても気分にムラがある。
あわよくば楽をしたい。
いっそ、Webアプリケーションで回数指定してもらえれば「アプリ君が言うなら仕方ないな～」的な感じでちゃんとやるかもしれない。
少ない回数だとラッキー感が出るので、ムラがある腹筋の回数指定をするWebアプリを作った。

お願い、マッスル！

＜使い方＞
1. 　「CLICK！」ボタンを押す。
2. 　表示された回数の腹筋をこなす。
3. 　「達成！」ボタンを押す。
4. 　ナイスマッスル！！！！！！！

使ってみた感想「腹筋めっちゃしんどい」

やりました。腹筋51回。

めっちゃ疲れた。
腹筋している最中にチカチカしてる「お願い！マッスル！」の文字を見て「煽られてるのか？」と怒りすら覚えたけど、なんとなくチカチカするリズムに合わせて腹筋していたので結果的には良かったのかもしれない。
ランダムに数が表示されるので、めちゃめちゃキリの悪い数字が出ると端数が憎くて仕方ない。
腹筋が終わってよろよろしながら、「達成」ボタンを押す姿もなかなかシュール。

以下、改善案。

• 腹筋だけに限らず、複数の筋トレメニューで回数が指定できるとよいかもしれない。
• 個人的に〇秒間やるやつも時間を計るのが面倒くさいので、秒数が表示されるとよい。
• 達成できなかった場合のボタンもあってもよいかもしれない。

改善策、いっぱいあるな。

ソースコード

See the Pen マッスル by MorishitaNana (@morishitanana) on CodePen.

ほぼ、こちら（Bingo Machine）のコードを参考にさせていただいた。
（素敵なビンゴマシーンを、筋肉マシーンを作るのに使わせていただいて申し訳ない）

タイトルにモーションをつける（Anime.js）

HTML

<h1 class="title">
  <span class="word"><b>お願い！</b></span>
  <span class="word"><b>マッスル！<b></span>
</h1>

JS

// お願い！マッスル！タイトルのアニメーション
anime.timeline({loop: true})
  .add({
    targets: '.title .word',
    scale: [14,1],
    opacity: [0,1],
    easing: "easeOutCirc",
    duration: 800,
    delay: (el, i) => 800 * i
  }).add({
    targets: '.title',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

タイトルの「お願い！」「マッスル！」にアニメーションを設定した。
Anime.jsを使用。公式サイトにあるサンプルから設定。
いい感じにうるさいタイトルモーションになった。

HTMLスーパー初心者が使うのに、悪戦苦闘しすぎたので別記事を書いた。
公式サイト見ても何をどうすればいいか分からない方はご参考にどうぞ。

もったいぶらせて腹筋回数を表示する（Vue.js）

HTML

<transition name="num">
      <div v-bind:key="drawnNumber" class="bigNumber">
      腹筋 {{ drawnNumber }} 回!!!
      </div>
</transition>

<br>
  <button v-on:click="draw"><b>CLICK！</b></button>

CSS

.bigNumber {
  text-align: center;
  font-size: 100px;
  font-weight: bolder;
  line-height: 150px;
  margin: 0;
  padding: 0;
}
/* 登場退場中に有効 */
.num-enter-active,
.num-leave-active {
  transition: all 1s cubic-bezier(0.1, 1, 0.42, 1.1);
}
/* 退場中に有効 中央に残す */
.num-leave-active {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
}
/* 登場する前と退場した後 */
.num-enter,
.num-leave-to {
  opacity: 0;
  font-size: 1px;
}
/* 登場退場中に有効 */
.v-enter-active,
.v-leave-active {
  transition: all 1s ease-in-out;
  transition-delay: 0.5s;
}
/* 登場する前と退場した後 */
.v-enter,
.v-leave-to {
  opacity: 0;
}

JS

const app = new Vue({
  el: "#app",

  data: {
    numbers: {
      used: [],
      unused: []
    },
    drawnNumber: "",
    clickCount: 0
  },

// mounted: DOM構築直後
mounted: function() {
  // 配列をシャッフルする（1～300の数字を返す）
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var r = Math.floor(Math.random() * (i + 1));
      var tmp = array[i];
      array[i] = array[r];
      array[r] = tmp;
    }
    return array;
  }
  for (var i = 1; i <= 300; i++) {
    this.numbers.unused.push(i);
  }
  shuffleArray(this.numbers.unused);
},

// このアプリケーションで使うメソッド
methods: {
  draw: function() {
    if (this.numbers.unused.length != 0) {
      this.drawnNumber = this.numbers.unused.pop();
      this.numbers.used.push(this.drawnNumber);
      this.clickCount++;
    }
  }
}
});

ボタンを押すと、腹筋回数がいい感じに、\ジャーン！/と表示される。
回数は1～300回でランダムに表示される。

元はビンゴマシーンのコードから作っているので、今回不要な部分も残ってしまっている気がする・・・
いらないかな？と思って消したらうまいこと動作しなかったので、そのまま残している。
時間を見つけて改めて不要箇所は削除したい。

ボタンを押してメッセージを表示/非表示にする（Vue.js）

HTML

<div id="nice"> </div>

CSS

.tassei {
  color: red;
}

JS

// 「達成」ボタン押下後の設定（表示/非表示）
const App = {
  template: `
<div id="nice">
    <button @click="show = !show">
      <b>達成!</b>
    </button>

<br><br><br>
    <div class="tassei" v-if="show" style="font-size:70pt">
      <b>ナイスマッスル!!!!!</b>
    </div>

 </div>
  `,
  data() {
    return {
      show: false
    }
  },
};

new Vue({
  el: '#nice',
  components: {
    App,
  },
  template: `
<App/>
  `
});

ボタンを押すとメッセージを表示し、もう一度ボタンを押すとメッセージが消える。
実は地味に一番苦戦した。
文字のサイズ指定や、色指定がCSSだったり、JSだったりしているので初心者大混乱。
最終的にとほほのWWW入門さんにお世話になった。

ボタンを押して表示/非表示する設定に関しては、下記記事を参考にさせていただいた。
・Vue.jsでいい感じのアニメーションを作りたい

まとめ

気軽に使えるお遊びアプリを作ってみたが、プロトタイプとしてはなかなか良いものができた。
実際に使ってみて、ああしたい、こうしたいと思ったものがあるので、折を見て実装したい。
良いマッスルライフを！