(angular)ソフトウェアキーボード作成に有用なパッケージ？のようなものを教えてください

Question

Angularを使用してソフトウェアキーボードを作成したいと思っています。

Angularで利用可能なパッケージ？のようなもので、ソフトウェアキーボードの作成に使えそうなものをご存知であれば教えていただきたいです。

よろしくお願いします

Comments

[miyabi_pudding]

ソフトウェアキーボードはなんでしょうか？
Webページ上にキーボードが出てきて、それのキーをクリックしたら、文字を打てる、といったものですか？

[hitomi_the_end]

おっしゃる通りです。
webページ上にキーボードが出てきて、キーをクリックしたら文字を打てる、というものを作成したいと考えています。
(キー1つ1つを1から自分で作る、という手段もあるとおもうのですが、今回はそれは考えないことにしていただきたいです。。。)

Answer 1

イメージと合うかは分かりませんが、Angularで利用できるものとして「simple-keyboard」というパッケージがあります。

• GitHub
• 公式ページ

公式ページにはドキュメントやデモもありますので、比較的扱いやすいです。

また、実装する場合のイメージとして、stackblitzの以下のサンプルも参考になると思います。

• Amar8777さんのサンプル

Comments

[miyabi_pudding]

まさかこんな物があったとは・・・。
大変勉強になりました。

[hitomi_the_end]

ありがとうございます！私も勉強になりました。。。
試してみようと思います！！

[kshida]

少しでもお役に立てたのなら嬉しいです！

[hitomi_the_end]

すみません、もしご存知でしたら教えて頂きたいのですが、、、
本件について、実装したソフトキーボードをIMEと連携させることができず困っています。
もしIMEとの連携方法(ソフトキーボードでIMEを有効にした入力を行う方法)をご存知でしたら、助言いただけると助かります。

[kshida]

IMEとの連携ですか、かなりハードルが高いですね。。。

単純に平仮名が入力できれば良いということであれば、setOptionsメソッドでキーボードのレイアウトを変更すれば可能です。
以下サンプルになります。
　https://codesandbox.io/s/angular-simple-keyboard-i2q2c?file=/src/app/app.component.ts

もしも漢字に変換することまで想定されているのであれば、入力した文字を見ながら「Google CGI API for Japanese Input」などの平仮名変換APIを使って変換する感じになるかなと思います。。

[hitomi_the_end]

追加の質問まで回答していただきありがとうございます。
漢字に変換することを考えています。また、日本語だけでなく他の言語についても対応させたいと思っています。。。
ちょっとまだわからないので、新しく別で質問してみようと思います。
助かりました。ありがとうございます！

Answer 2

Angular 日本語ドキュメンテーション - ユーザー入力

に、公式でのキー入力に関しての処理の仕方が載っています。
しかし、ボタンを押した時にキーイベントを発生させる、のはまた別の処理になります。

そこは、どちらかというと、
JavaScriptでのキーイベント発生処理を、ボタンを押すことで発生させる、といった処理になるでしょう。

キーボード自体のUIに関しては、Angulerでは無いものと思われるので、
CSSを自身で組むしかないかと。

しかし、Angularで探すのではなく、
CSSで探せば、あるかもしれません。

なので、CSSで見た目の部分は見つけ、
機能面は、JavaScriptの処理をAngularに落とし込むしかないかと。

とかく、こういうものは、理想のものは、
一個のライブラリで済むなんてことはないと考えた方がいいでしょう。