VRChat Keyboard World Assets

![ワールド画面](https://qiita-image-store.s3.amazonaws.com/0/124790/b0fa5b7e-d95c-5197-adad-b54d01cec3cc.png)

Written in English and Japanese


## TL;DR - 要約

I distribute my VRChat keyboard world assets in the public domain.
[Download Link](https://drive.google.com/open?id=1FwTMoZqLMEHBluWjw48iXQXSrSqOLs8z)

VRChatのキーボードワールドアセットをパブリックドメインで配布します。
[ダウンロードリンク](https://drive.google.com/open?id=1FwTMoZqLMEHBluWjw48iXQXSrSqOLs8z)

---

*Note: The keyboard doesn’t work since [WebPanel had been disabled](https://medium.com/@vrchat/security-update-web-panels-4699fa0be103).*
*注: [WebPanelが無効化された](https://medium.com/@vrchat/security-update-web-panels-4699fa0be103)ためキーボードは動作しません。*

---

## What is this? - これは何？

It's my Unity assets which I made from scratch to use in my VRChat keyboard world, [Tell Your Word](https://twitter.com/Kanata_VRC/status/988572064188542976).

VRChatのキーボードワールド、[Tell Your Word](https://twitter.com/Kanata_VRC/status/988572064188542976) で使うために私がフルスクラッチで作成したUnityアセットです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">できました。 <a href="https://t.co/WF0J6AJxKg">pic.twitter.com/WF0J6AJxKg</a></p>&mdash; Kanata@VRC (@Kanata_VRC) <a href="https://twitter.com/Kanata_VRC/status/986601234999029761?ref_src=twsrc%5Etfw">2018年4月18日</a></blockquote>


## Requirements - 要件

I confirmed that it works with:
以下の条件で動作確認しています:

- Unity 5.6.3p1
- VRChat SDK 2018.06.21.13.02


## License - ライセンス

Public Domain


---


## How to Use - 使い方

Just import the Unity package to your project and open `Assets/TellYourWord/Scenes/TellYourWordSimply` to see how it works.

Unityパッケージをインポートして `Assets/TellYourWord/Scenes/TellYourWordSimply` を開き、使い方を確認してください。


## Prefabs - プレハブ

The Unity package has three prefabs.
このUnityパッケージには3つのプレハブが含まれています。

### AutoMirror

The mirror that turns on itself automatically only when a player approaches
プレイヤーが近づいたときだけ自動的にオンになるミラー

### DualChair

The chair that has two stations for large/small avatars
大きいアバター用と小さいアバター用、2つのステーションを持った椅子

### ChatBooth

The chat system that has the keyboard you can type in VR and reality
VR内でも現実でもタイピングできるキーボードを含めたチャットシステム


## Multiply ChatBooth - ChatBoothを増やす

When you want to multiply ChatBooth, you have to create a new material. Select the Window material and press Ctrl + D. You would get a new copy. Rename it as you want and set it in the hierarchy tab like this.

ChatBoothを増やしたい場合、新しいマテリアルを作成する必要があります。Windowマテリアルを選択した状態で Ctrl + D を押すとコピーが作成されるので、それを任意の名前に変更し、ヒエラルキータブで以下のようにセットしてください。

![Unity画面](https://qiita-image-store.s3.amazonaws.com/0/124790/942cb36a-a6bb-4fc1-97ba-fea483f279a7.png)


## Known Issues - 既知の問題

**The mirror turns off itself when a player sits a chair.**
**椅子に座ると鏡がオフになってしまう。**

It's because you lose your collider when you enter VRC_Station, then OnExitTrigger fires. It can't be helped.

VRC_Stationに入ったとき、プレイヤーからコライダーが失われ、OnExitTriggerが発動するため。仕様です。

**I can't see the chat window.**
**チャットウィンドウが見えない。**

To leave and join again would help you. If not so, restart the VRChat client. I guess that it's because the VRChat client doesn't handle a race condition properly but I'm not sure. It can't be helped.

再入室すると直ります。それでも改善しない場合はVRChatクライアントを再起動してください。これはVRChatクライアントがレースコンディションを適切に処理していないためではないかと思われますが、よくわかりません。仕様です。

I recommend you to upload the HTML on the Internet and set its URI to the web panel. In my experience, loading from the Internet with HTTP is more stable than loading from local, especially when your project has many web panels.

経験上、ローカルからHTMLを読み込むよりHTTP経由でインターネット上から読み込むほうが安定動作するので、HTMLファイルをインターネット上にアップロードして、そのURIをWebPanelにセットすることをおすすめします。この問題は特にプロジェクト内に多数のWebPanelが存在する場合に顕著です。


---

The following sections are for those who want to customize the keyboard.
以降の節はキーボードをカスタマイズしたい人向けです。

---


## Basics - 基本

The keyboard system is not complicated but simple. The HTML on the web panel has some JavaScript functions and the SetWebPanelURI action sets URI like `javascript:key('A')` to activate the function. That's all.

このキーボードの仕組みは簡単で、WebPanelにセットされたHTML上のJavaScript関数をSetWebPanelURIアクションで `javascript:key('A')` のように呼び出しているだけです。

I wrote an article about the keyboard system. It's written in Japanese but it might be no problem since it has many images and codes.

このキーボードに関する記事を投稿してあるので参考にしてください。

https://qiita.com/katanov/items/8a7aed9a92c77528602f


## You Should Know - 注意点

When you rewrite HTML, you have to break the prefab instance and delete the prefab file itself. Otherwise, you can't apply your code to the web panel.

HTMLを書き換えるときは、プレハブインスタンスをブレークし、プレハブファイルを削除しないと、書き換え後のコードがWebPanelに適用されないのでご注意ください。


## My Friends Works - VRChatキーボード開発の現状

Since I released my keyboard world, various people have been developing various keyboards. I'll introduce two of them.

私がキーボードワールドをリリースして以降、いろんな人の手によって、さまざまなキーボードが開発されています。ここではそのうちの２つを紹介したいと思います。

[Beanow](https://twitter.com/BeanowRobin), my Dutch friend, develops the keyboard which has Japanese IME. You can use it in his world, Language University. Beanow has a plan to distribute his keyboard.

オランダの[Beanow](https://twitter.com/BeanowRobin)さんが開発しているのは日本語IMEが使えるキーボードで、Language Universityというワールドで使用可能です。Beanowさんはこのキーボードを配布予定だそうです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">オランダのBeanowさんのワールド、Language UniversityがPublic化されました。日本語入力可能なキーボードがあり、漢字変換もできます。スライドを用いた講義が可能なオーディトリアム(これはまだ製作中)や、ひらがな・カタカナ一覧のボードがあり、言語学習のためのワールドとなっています。 <a href="https://t.co/deW9kJ1SP4">pic.twitter.com/deW9kJ1SP4</a></p>&mdash; Kanata@VRC (@Kanata_VRC) <a href="https://twitter.com/Kanata_VRC/status/1019731586881687552?ref_src=twsrc%5Etfw">2018年7月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[Chiu](https://twitter.com/ChiuGameProject), my Japanese friend, develops the keyboard which has Japanese IME. Each players have each keyboards and can use it wherever they go. Chiu too has a plan to distribute the whole chat system.

日本の[ちう](https://twitter.com/ChiuGameProject)さんが開発しているのは、同じく日本語IMEが使えるキーボードで、プレイヤーはワールド内のどこにいても自分に割り当てられたキーボードを呼び出せるというものです。ちうさんも、このチャットシステムを配布予定だそうです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/Kanata_VRC?ref_src=twsrc%5Etfw">@Kanata_VRC</a> さんのキーボードシステムを参考にさせて頂いて<br>ワールド内のどこに居ても仮想キーボードを呼び出してチャットができるシステムを作ってます！<br>広大なマップでの連絡手段に使えるかと思います！<br>まだバグが多くて実用的ではないですが、完成目指して頑張りたいと思います・・・！<a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://t.co/6NeYfSCeKy">pic.twitter.com/6NeYfSCeKy</a></p>&mdash; ちう (@ChiuGameProject) <a href="https://twitter.com/ChiuGameProject/status/990918086445297665?ref_src=twsrc%5Etfw">2018年4月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Beanow's has the US layout, Chiu's on the other hand has the JP layout. It's related to the reason I don't develop by myself but cooperate with my friends and distribute my assets in the public domain. I'll talk about it in the next section. It's a long story but I think it's worth it.

BeanowさんのキーボードはUS配列で、ちうさんの方はJP配列となっています。このあたりは少し込み入った問題で、話し始めると長くなりますが、なぜ私が自分で開発せず人に協力する形を取っているのか、なぜ自分のアセットをパブリックドメインで配布するのか、というところにも関わってくるので、次節で解説します。


## My Purpose - 配布の目的

First of all, the most important thing here is that each language keyboards have different keyboard layouts.

まず前提として、各言語のキーボードはそれぞれ異なる配列を持っています。

Take a look at the general [US layout](https://en.wikipedia.org/wiki/File:KB_United_States.svg) and the general [JP layout](https://en.wikipedia.org/wiki/File:KB_Japanese.svg), you may realize that special characters are almost different, aside from alphanumeric characters.

一般的な[US配列](https://en.wikipedia.org/wiki/File:KB_United_States.svg)と、一般的な[JP配列](https://en.wikipedia.org/wiki/File:KB_Japanese.svg)を比べてみると、英数字等の基本的な文字はともかく、記号の位置が大きく異なっていることに気づくと思います。

Second, you should know that VRChat SDK handles only a key being typed physically. It means that you must develop the key combination by yourself. For example, 'a' as only 'A', 'A' as 'Shift + A'.

さらにもうひとつ重要なのは、VRChat SDKが扱えるのは物理的に押下されたキーのみで、コンビネーションキーの働き、たとえば、A → a、Shift + A → A、といった違いは自前で実装しなければならない、ということです。

Things are getting more complicated. There are some characters VRChat SDK doesn't receive. For example, 'Shift + ;' is for ':' in the US layout, but the JP layout has a single key for ':'. Basically, VRChat SDK doesn't receive such a key. Because there is no setting for such a key in the OnKeyDown/Up triggers. The only exception I know is '@' in the JP layout since it's mapped to '\`'.

ここから少しややこしくなります。たとえばUS配列では : （コロン）は Shift を押しながらの ; （セミコロン）キーで、JP配列では ; キーの隣の単キーとなっていますが、このような文字、US配列で Shift を押しながら入力する文字で、他の配列のキーボードでは単キー入力する文字は、VRChat SDK上では基本的に入力不可能となっています。OnKeyDown/Upトリガー上に対応するキーが存在しないからです。私が把握している唯一の例外はJP配列の @ です。これはUS配列の \` にマッピングされているので例外的に入力可能となっています。

Every language keyboards have almost the same layout for alphanumeric characters and comma and period. These characters are only character keys my keyboard has. How come? The reason is not based on technical issue but my philosophy.

各言語でほぼ合致しているのが英数字と句読点のキーで、私のキーボードではこれ以外の文字キーを実装していません。なぜか？　これは技術的な問題によるものではなく、私の思想によるものです。

I had no problem making a Japanese keyboard since I was a native Japanese speaker. However, I *had* a problem making the other language keyboards since I hardly spoke them except for English.

私は日本語ネイティブなので、日本語キーボードであれば問題なく作れます。しかし他の言語に関しては、英語以外ほとんどわからないので、作れないでしょう。

VRChat is a world-wide platform that various language speakers gather. If I couldn't provide every language keyboards, somebody would feel exclusive. I don't want to make anybody feel exclusive in my world.

VRChatはワールドワイドなプラットフォームです。さまざまな言語の話者が集まっています。すべての言語のキーボードを用意できないのであれば、誰かがExclusive(排他・排外)な思いをする可能性があります。私は自分のワールドでは、誰にもExclusiveな思いをしてほしくないと考えています。

Additionally, many languages have a way to describe with alphabet like the [romanization of Japanese](https://en.wikipedia.org/wiki/Romanization_of_Japanese). I've seen a lot of Chinese speakers and Korean speakers talking in their mother tongue with my keyboard even though those languages are far from English. Twenty-six characters have much power to describe various words.

また、日本語のローマ字のように、アルファベットを用いた表現方法は多くの言語に存在しており、実際、私のワールドで、英語とは遠い言語であるはずの中国語話者や韓国語話者の人たちが、母国語で会話しているのをよく見かけます。A～Zの26文字だけで、さまざまな言葉を表現できるのです。

Also, many people were asking me "Add the question mark key," but I was worried about how to manage the layout problem. The key is placed at different position in some languages, such as [Spanish](https://commons.wikimedia.org/wiki/File:KB_Spanish.svg), [Italian](https://commons.wikimedia.org/wiki/File:Italian_Keyboard_layout.svg).

「クエスチョンマークを付けてくれ」というのもよく言われるのですが、これも先程のキー配列の問題があり、一時期かなり悩みました。[スペイン語](https://commons.wikimedia.org/wiki/File:KB_Spanish.svg)や[イタリア語](https://commons.wikimedia.org/wiki/File:Italian_Keyboard_layout.svg)の ? の位置が違うからです。

Yes, the question mark is important to talk. I was thinking that the function keys were very useful for it but I rejected because it would break [affordance](https://en.wikipedia.org/wiki/Affordance). The best UI is the UI nobody cares. I, myself, don't want to learn a rule for specific situations.

たしかに疑問符は重要です。これを解決するため、ファンクションキーを使う方法を考えましが、これもやめました。ファンクションキーを使えば、どのような配列のキーボードであっても入力ができますが、そうすると個々人の[アフォーダンス](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%80%E3%83%B3%E3%82%B9)を破壊することになると考えたからです。何も考えずに使えるのが優れたUIです。特定状況下にしか通用しないルールは、私自身が覚えたくありません。

When I come to think of it, language grammars themselves have a way to make interrogatory sentences. For example, "Do you ..." in English, "... ですか(desuka)" in Japanese, "... 吗/嗎(ma)" in Chinese. Moreover, you can add "question mark" as it is at the end of sentence. I've seen it a lot of times in my world.

さらに、よく考えてみると、疑問符というのは補助的なものであり、疑問文を表現する方法は各言語の文法それ自体に内包されていると気づきました。日本語の「～ですか」や、英語の「Do you ～」、中国語の「～吗/嗎」、等々。さらに、どうしても必要な場合は文末にそのまま「question mark」と付けることもできます。実際、私のワールドでよく見かける光景です。

Then I thought, what should I do next? It seemed that I got stuck here because of my philosophy. I already fixed most of bugs as far as I could. It looks like my keyboard is stable now. So, the next thing I should do is to hand it over to someone who develops.

ではどうするか。どうも私は自身の思想によって、いつのまにか袋小路にはまってしまったようです。しかし抱えていた不具合についてはすでにそのほとんどを修正し終え、いまやこのキーボードは安定動作するようになりました。ならば、次にやるべきことは、他の誰かにバトンを渡すことです。

Through these thought processes, I decided to stop developing by myself and distribute it to everyone. I want you to customize it, develop some features, make your own language keyboard and distribute it without any hesitation. That's why I put my assets in the public domain.

このような思考の経緯により、私はこれ以上の機能追加をやめ、このアセットを配布することに決めました。そして、これをベースにして、さまざまな機能、さまざまな言語のキーボードを、誰もが開発し、誰もがそれを気兼ねなく配布できるように、これを、パブリックドメインに捧げます。


## About Me - 作者について

VRChat: **Kanata 2nd**
Discord: **Kanata#3360**
Twitter: **https://twitter.com/Kanata_VRC**
Culture Blog: **https://medium.com/@kanata**
Tech Blog: **https://qiita.com/katanov**