Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
59
Help us understand the problem. What is going on with this article?
@gorogoroyasu

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

More than 1 year has passed since last update.

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

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

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!

59
Help us understand the problem. What is going on with this article?
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
gorogoroyasu
6年目エンジニア
fusic
個性をかき集めて、驚きの角度から世の中をアップデートしつづける。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
59
Help us understand the problem. What is going on with this article?