Help us understand the problem. What is going on with this article?

次世代キーボード Tap Strap を買ったので使い方を練習するサイトを作った

先日、何かの拍子に Tap Strap というキーボードを知りました。
メリケンサックのように指にはめるタイプのキーボードです。

https://www.tapwithus.com/

キーボードを指にはめて、ピアノを引くときのように決められた組み合わせで指を軽くタップすると、文字が打てるというものです。
このキーボード、片手だけで文字や数字を打ち込めるのでとても便利なのですが、指の使い方を覚えるのが大変です。
アルファベットの指の使い方はこんな感じ。

o がタップする指、 x がタップしない指です。

{
  a: 'oxxxx', b: 'xoxxo', c: 'oxooo', d: 'oxoxx', e: 'xoxxx', f: 'ooxox',
  g: 'oxoox', h: 'xoooo', i: 'xxoxx', j: 'oooxo', k: 'oxxox', l: 'xxoox',
  m: 'xoxox', n: 'ooxxx', o: 'xxxox', p: 'ooxxo', q: 'xooxo', r: 'oooox',
  s: 'xxxoo', t: 'xooxx', u: 'xxxxo', v: 'ooxoo', w: 'oxoxo', x: 'xoxoo',
  y: 'oxxxo', z: 'xxoxo'//, bs: 'xooox', enter: 'oxxoo'
}

なかなか複雑です。。。
公式でもその問題は認識しているらしく、Tap Academyという練習アプリがリリースされています。
が。初めて使う人にとっては難易度が高い。。

ということで、自分で作ってみました。
見た目は残念な感じですが、一応ちゃんと動きます。

レポジトリ
https://github.com/gorogoroyasu/tap-strap-practice
作ったサイト
https://gorogoroyasu.github.io/tap-strap-practice/single/

見た目

https___gorogoroyasu_github_io_tap-strap-practice_single_.png

間違えたとき

https___gorogoroyasu_github_io_tap-strap-practice_single_.png

3回間違えたらヒントを出す!

https___gorogoroyasu_github_io_tap-strap-practice_single_.png

機能としては、上述した程度のものしかありません。
今の所、
1. Question を出す。
2. 正解だったら次の問題へ。間違いだったら、何と何を間違えたのかを出す
3. 3回以上間違えたら hint と称した答えを出す
という感じです。

あと、割とえげつないのが、問題が無限ループしていること。
この辺は、ちょこちょこいい感じに直していこうと思います。

Vue.js

殆ど使ったことはないですが、使ってみました。
難しかったのは、 form にフォーカスを当てるところでした。
ドキュメントに書いてたんですけどね。。
https://jp.vuejs.org/v2/guide/custom-directive.html

directives: {
    focus: {
      inserted: function (el) {
      el.focus()
    }
  }
},

そもそも ディレクティブ という機能を知らなかったので勉強になりました。

あと、body タグにid を振って

new Vue({
  el: '#body',
  data: obj
})

という風にしようとしていたのですが、だめだよって怒られました。
苦肉の策で、

<body>
  <div id='body'>
  </div>
</body>

という構成にして、逃げました。

たぶん、そもそもの使い方が違うんだと思います。
時間を見つけて正しい書き方に修正しようと思います。
あと、見た目がだいぶ悪いので、それもなんとかしようと思います。

最後に

$200 と決して安くはないですが、もし購入される方がいらっしゃったら、このクーポンを使っていただけると。
10% off になるらしいです。

Enjoy Tap Strap!

fusic
個性をかき集めて、驚きの角度から世の中をアップデートしつづける。
https://fusic.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした