【Vue3でwebアプリをつくろう7】ソフトウェアキーボードの簡単なサンプル
記事の一覧はこちらから。この連載はプログラミングに興味を持つ学生を対象とした学習用コンテンツです。今回はVue3で英語学習アプリを作ってみます。
今回は画面上にソフトウェアキーボードを再現してみましょう。
ソフトウェアキーボード
See the Pen Virtual-keybboard by Masato Takamaru (@masato-takamaru) on CodePen.
サンプルを用意したので実際に触ってみましょう。画面に表示されたキーボードをクリックすると文字が入力されていきます。BSはバックスペースのことです。
また，キーボードを押しても同じように文字が入力できます。
コードを見ていきましょう。
html
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>htmlのコードです。<div id="root"></div>にVueのコンポーネントが表示されます。
データ
const RootComponent = {
data () { return {
keyboard: [['q','w','e','r','t','y','u','i','o','p'],
['a','s','d','f','g','h','j','k','l'],
['z','x','c','v','b','n','m','BS']],
chars: ''
}},JavaScriptのコードに移ります。表示するキーの文字を二次元配列keyboardに格納します。
charsは入力された文字列を格納する変数です。最初は空の文字列として定義しておきます。
テンプレート
template: `
<div class='input'>You pressed: {{chars}}</div>
<div>
<div class='keyboard'>
<button v-for='(key, index) in keyboard[0]' @click='press(key)'>{{key}}</button>
</div>
<div class='keyboard'>
<button v-for='(key, index) in keyboard[1]' @click='press(key)'>{{key}}</button>
</div>
<div class='keyboard'>
<button v-for='(key, index) in keyboard[2]' @click='press(key)'>{{key}}</button>
</div>
</div>`,テンプレートです。最初に{{chars}}に入力された文字列を表示します。
次にキーボードを三段に分けて表示していきます。
v-forを用いて配列の要素を一つずつ取り出していきます。keyにはq，w，e，・・・が順番に放り込まれていきます。
ボタンをクリックするとメソッドpress(key)を呼び出します。
メソッド
methods: {
press(key) {
if(key == 'BS') {
if(this.chars.length > 0) {
this.chars = this.chars.slice(0, -1);
}
} else {
this.chars += key;
}
}
},メソッドpress()です。ここでは，クリックされた文字を画面に反映する処理を行います。
まず，バックスペースの処理から書いています。keyの中身がBSのときはcharsに格納された文字列の最後の１文字をslice()で削除します。slice()は文字列から指定された範囲の文字列を取り出す命令ですが，slice(0, -1)とすると最後の１文字を除いた文字列を返します。
BS以外の文字の場合はその文字をcharsに加えます。
物理キーボードによる入力
mounted() {
window.addEventListener('keyup', (event) => {
const key = event.keyCode;
if(key >= 65 && key <= 90) {
this.press(String.fromCharCode(event.keyCode+32));
}
if(key == 8) {
this.press('BS');
}
});
}もし，マウスによる入力だけでなく，物理キーボードでキーを押したときにも文字を入力したい場合はどうしたら良いでしょうか？
実はVue自体にはこれに対処する機能はありません。よって，JavaScriptのもともとの機能であるイベントリスナーを使う必要があります。
キーボードが押されたときの処理は一般的にkeyupというイベントリスナーを利用します。
window.addEventListener('keyup', 関数);
で，キーボードが押されたときに指定された関数が実行されます。
（補足すると，イベントリスナーは削除しない限りずっと残るので，キーボードによる入力が必要なくなった段階でremoveEventLister()でイベントリスナーを解除します。)
関数でeventを受け取って，event.keyCodeとすると押されたキーのコードが取得できます。アルファベット65から90の範囲で返ってきます。
String.fromCharCode()はコードを文字に変換します。event.keyCodeで返ってくる値は大文字のコードなので，それに32を加えると小文字のコードになります。このコードをメソッドpress()に送り，画面の表示に反映させます。
また，コードの8はバックスペースです。この場合は，メソッドpress('BS')として，さきほど作ったメソッドにバックスペースの処理を行ってもらいます。
まとめ
ここでは，Vue3を用いて，画面上にキーボードを表示して入力してもらうソフトウェアキーボードを作りました。PCの画面でソフトウェアキーボードを用意するメリットはほとんどありませんが，端末がスマホの場合は，端末に用意されたソフトウェアキーボードをいちいち立ち上げる必要がなく，今回のように限られた文字だけを入力させたい場合にはより優れたユーザーインターフェースを用意することができるでしょう。
Vue3を利用すると，全体のコードをよりシンプルに書くことができます。
SNSでシェア