インスペクタを作り始めた - VRエンジン作成日記

Unityの画面右の方に表示されている、インスペクタと似たような機能をvue.jsで作り始めた。とりあえずで、位置、回転、拡大率の値を表示するだけの機能を作ってみた。テキストボックス内に値が表示されるけど、まだ値の変更はできない。

他にはコンテキストメニューを閉じる時にアニメーションを付けたりとか、こまごましたところを修正していた。

HTMLにtabindex属性を付加すると、divタグ等のデフォルトでフォーカスを持たないオブジェクトにもフォーカスを持たせられることに気付いた。フォーカスを当てることができると、keydownイベントをそのタグ自体に追加することができる。今までフォーカスをデフォルトで持たないタグの場合は、代わりにwindowとかdocumentにkeydownイベントを追加するしかないと思い込んでいた。また、フォーカスが当てられた時に外枠の線が自動で塗られてしまう。この線はCSSのborderではなく、outlineという項目で指定された値で塗られているようだ。フォーカスの線を消す場合は、CSSでoutline: 0と指定するらしい。また、:focus疑似クラスというものもあるので、:focus疑似クラスで指定した項目の中にoutline: 0を書いた方が良いのかもしれない。