はじめに

こんにちは。mds_boyです。
この記事は、traP AdventCalendar2017の17日目の記事です。

Joy-Con

突然ですがみなさん、Joy-Conって知ってますか？
Nintendo Switchに付属している、本体に接続・分離が可能なコントローラーです。
(サムネ画像はJoy-Con(R)(公式サイトより))

このJoy-Con、PCでBluetooth接続出来ます。(参考)

ご覧の通り片手で入力できるため、これを使って文字入力が出来たら面白そうですね。
というわけで、Joy-Con(R)で文字を入力できるWebページを作ってみました。(リンクはこちら)
この記事ではそれについて紹介したいと思います。

注意

入力できるのはひらがなだけです。
また、Joy-Con(L)はボタン配置が違うため対応していません。

環境

使用した言語はJavaScriptです。
また、Joy-Conの入力を取るためにGamepad APIを使用しています。
GanePad APIを用いると、ボタンの入力、スティックの入力を取ることが出来ます。
ジャイロセンサーや赤外線センサー、HD振動といったJoy-Conの特徴的な機能は現時点では使えないようです。

操作方法

今回の目標

今回目標とするのは

• 直感的で
• 素早く入力が可能で
• 間違えにくい

これらを満たす入力方式にすることです。

Joy-Conのボタン配置

まずはJoy-Conのボタン配置について確認しておきましょう。
公式サイトにこのような画像があります。

正面

側面

背面

この公式の表記に従ってボタンを呼んでいこうと思います。

ボタンと対応

ボタンと対応は下のように決めました。

入力の流れ

主にスマートフォンでの文字入力に採用されているフリック入力を参考にしました。

まず、デフォルトでは「な」の位置が選択されており、そこから8方向に向けてスティックを倒すことで「あ」～「ら」を選択出来ます。
「な」を選択したい場合はRボタンを押すかスティックを押し込みます。
「わ」を選択したい場合はSL/SRボタンを押します。

四方に文字が出てくるので、選択したい文字の方向に倒すことでその文字を入力することが出来ます。
デフォルトの文字を入力したければRボタンを押すかスティックを押し込みます。

ここで選択する前後(ただし次の文字を選び始める前)にRボタンを押すことで濁点/半濁点/小文字などに切り替えることが出来ます。

このようにして入力していきます。

問題点

無事入力方式を決定しましたが、いくつか問題点があります。

8方向への入力が失敗しやすい

Joy-Conのアナログスティックは小さいため、斜め入力しようとしても思った通りの方向に行かない場合があります。
元々8方向入力は誤入力の元になると思って4方向のみにして選択していたんですが、時間がかかってしまうため8方向の入力に変更しました。
ここは一長一短なので、どちらが良いとも言い難いですね。

親指が忙しい

Joy-Conをパッと見てみると、下の丸で囲まれた部分は全て親指でしか押すことが出来ないことがわかります。

つまり、これらは同時に押すことが出来ないだけでなく、これらを多用してしまうと、親指を常に移動させる必要が生じてしまいます。
しかし、ボタン数の関係からA/Bボタンを採用せざるを得ませんでした。

慣れないと入力しにくい

これは仕方ないですね。
慣れてください。

まとめ

というわけで今回はJoy-Con(R)でひらがなを入力する方式を考え、Webページを作ってみました。
短時間で作ったため十分に検討しきれたとはいえず、より良い入力を考える余地があると思います。
まあでもやっぱりJoy-Con(R)で文字を入力するのは色々と厳しいですね…

最後になりますが、入力に限らずゲーム制作等全体で大切なのは、

• ユーザーの立場に立ってよく考えること
• なるべく多くの人に試してもらい意見を聞く (制作側は慣れてしまいがち)

ということだと思います。

明日はshanalさん、rencon_manさんの記事です。