🐱
ニャーと鳴くには<任意のキー>を押す
Strayのチュートリアルが大好きなやつだった
「ニャーと鳴くには左Altを押す」
猫なので猫の行動ができる。かわいい。
これを日常的にやりたいので、やる方法を考えた。
VS Codeで任意のキーを押したときにニャーと鳴けばよさそう
問題は
- キーバインドの設定方法
- 前にExtension作ったときにExtensionの作り方は大体わかってるけど、キーバインドの設定方法は知らない
- 設定したキーバインドのキーも取得できると嬉しいかもしれない
- 「ニャーと鳴くには<任意のキー>を押す」で表示できるので
- オーディオファイルの再生方法
できた（色々すっとばした）
まず最初に想定してたのはkeybindingsに好きなキーを割り当てて、VS Codeを起動したら鳴けるようにする…的な猫の世界だったけど、
keybindingに設定するとエディタの操作が奪われてしまうようなので常時展開するのがきびしいという結論に至った。
というわけで方向性としては
- コマンド式
- 展開されたら一定時間チュートリアル表示が出る
- チュートリアルが出てる間は鳴ける
という感じになった。
チュートリアルの出し方は、あの Power Mode のコンボ表示の実装を参考にした。
ざっくり説明すると、まず表示されている行の範囲を取得、その行の先頭部分にCSSでafter疑似要素を仕込んで content-text に文言を入れて表示する、的な感じ。
表示範囲が変わったとき（つまりスクロールしたとき）は検知するイベントハンドラ vscode.window.onDidChangeTextEditorVisibleRanges があるので、これが発火したらその範囲で同じことをやる。
表示自体は setInterval を使ってタイマー管理、その時カウンタ変数を用意しておいて、カウンタ変数をもとに非表示にする処理を走らせたり不透明度を変化させたりしている。
そして音を鳴らす部分だが、最初Web Audio APIを調べていたがはNode上では使えなかった（考えてみればそれはそう）なので、play-sound packageを使って解決した。
猫になれたね。よかった！
Discussion